layouts
How things organize
Layouts are arrangements of elements within a space—how rooms are organized in a floor plan, how text and images sit on a page, how components fit on a circuit board.
The term applies wherever positioning matters: The magazine's layouts were clean and modern, We reviewed several layouts for the new office.
In publishing and design, layout is both the process and the result.
Simplified visual schematics
- mockupsPreliminary design models
- templatesPreset formats for copying
- prototypesOriginal test models
- sketchesRough, quick drawings
composition · responsive · mobile · desktop · navigation · sidebar · header · footer
Arranging letters for display
- columnsUpright structural shafts
- marginsEdges of a page
- guttersRooftop water channels
- spreadsDistributes over area
bleed · pagination · folios · recto · verso · broadsheet · tabloid · magazine
Overhead architectural diagram
- blueprintDetailed technical drawing
- elevationHeight above reference point
- sectionDistinct divided part
- schematicSimplified technical diagram
CAD · drafting · zoning · circulation · open-plan · split-level · specifications · as-built
Framework of intersecting lines
- alignmentCorrect relative positioning
- spacingInterval arrangement between objects
- arrangementOrdered configuration or agreement
- placementPutting somewhere specific
distribution · orientation · symmetry · asymmetry · proximity · hierarchy · proportion · scale
Preset pattern for reproduction
- indentationInward cut or setback
- fontCharacter style set
- spacingInterval arrangement between objects
- bulletFired metal projectile
alignment · bold · italic · underline · justification · paragraph · heading · subheading
Constructing from components
- workstationTechnical computing system
- facilitySkill or equipped premises
- warehouseBulk goods storage building
- workflowSequential task progression
manufacturing · machinery · logistics · storage · efficiency · lean
wireframes
Simplified visual schematics
- mockupsPreliminary design models
- templatesPreset formats for copying
- prototypesOriginal test models
sketches · composition · responsive · mobile · desktop · navigation · sidebar · header · footer · hero
typography
Arranging letters for display
spreads · bleed · pagination · folios · recto · verso · broadsheet · tabloid · magazine · newspaper
floor-plan
Overhead architectural diagram
- blueprintDetailed technical drawing
- elevationHeight above reference point
- sectionDistinct divided part
schematic · CAD · drafting · zoning · circulation · open-plan · split-level · specifications · as-built · rendering
grid
Framework of intersecting lines
- alignmentCorrect relative positioning
- spacingInterval arrangement between objects
- arrangementOrdered configuration or agreement
placement · distribution · orientation · symmetry · asymmetry · proximity · hierarchy · proportion · scale · dimension
template
Preset pattern for reproduction
- indentationInward cut or setback
- fontCharacter style set
- spacingInterval arrangement between objects
bullet · alignment · bold · italic · underline · justification · paragraph · heading · subheading · lists
assembly
Constructing from components
- workstationTechnical computing system
- facilitySkill or equipped premises
- warehouseBulk goods storage building
workflow · manufacturing · machinery · logistics · storage · efficiency · lean
- documentary photosphotojournalism, news photos, photo essay, photo essays, photo story
- UI elementsbutton, menu, buttons, menus, icon
- RubyRuby, gems, bundle, rake, pry
- template enginesHogan, Marko, Kid, partials, helpers
- gymnasticsgymnastics, balance beam, floor exercise, handstand, parallel bars
- comic artcomic, comics, comic book, cartoon, manga
layoutsdisorder
Absence of organization
chaos · disarray · disorganization · jumbles · clutter
layoutsrandomness
Lack of predictable pattern
haphazardness · arbitrariness · improvisation · formlessness · structurelessness