wireframe
Digital model skeleton
A wireframe is a skeletal outline of a design, showing structure without surface detail.
In web and app design, wireframes map layout and functionality before visual elements are added: Let's review the wireframe before we start on graphics.
In 3D modeling, wireframe rendering displays objects as networks of lines representing edges, without solid surfaces.
Preliminary design representation
- prototypeFirst functional specimen
- layoutSpatial arrangement of elements
- sketchHasty informal drawing
- placeholderTemporary position marker
grayscale · boxes · annotations · flowchart · sitemap · storyboard · iteration · revision
Imperfect audio quality, informally
- hi-fiQuality audio equipment
- grayscaleTonal range, black to white
- clickableAble to be pressed
- staticWithout motion or change
interactive · annotated · detailed · rough · polished · skeletal · bare-bones · functional
Internal supportive framework
- gridFramework of intersecting lines
- columnsUpright structural shafts
- rowsSide-by-side sequences
- containersObjects for holding things
sections · modules · hierarchy · alignment · margins · padding · gutters · breakpoints
Interaction design abbreviation
- UXUser interaction design
- navigationDetermining position and course
- buttonsSmall disc fasteners
- menusLists of available dishes
header · footer · sidebar · forms · inputs · dropdowns · modals · cards
Forming mental concepts
- brainstormingGenerating many ideas freely
- feedbackReturned response data
- iterationRepeated procedural pass
- handoffDirect physical exchange
documentation · specifications · requirements · constraints · scope · deliverable · presentation · collaboration
Cloud design application
- pen-and-paperManual writing implements
- whiteboardErasable marker writing surface
- sticky-notesAdhesive memo papers
- markersPens with porous tips
templates · stencils · drag-and-drop · artboard · canvas
mockup
Preliminary design representation
placeholder · grayscale · boxes · annotations · flowchart · sitemap · storyboard · iteration · revision · concept
lo-fi
Imperfect audio quality, informally
static · interactive · annotated · detailed · rough · polished · skeletal · bare-bones · functional · pixel-perfect
skeleton
Internal supportive framework
containers · sections · modules · hierarchy · alignment · margins · padding · gutters · breakpoints · responsive
UI
Interaction design abbreviation
- UXUser interaction design
- navigationDetermining position and course
- buttonsSmall disc fasteners
menus · header · footer · sidebar · forms · inputs · dropdowns · modals · cards · breadcrumbs
ideation
Forming mental concepts
- brainstormingGenerating many ideas freely
- feedbackReturned response data
- iterationRepeated procedural pass
handoff · documentation · specifications · requirements · constraints · scope · deliverable · presentation · collaboration · sign-off
Figma
Cloud design application
- pen-and-paperManual writing implements
- whiteboardErasable marker writing surface
- sticky-notesAdhesive memo papers
markers · templates · stencils · drag-and-drop · artboard · canvas
- tech aestheticssleek, futuristic, dark mode, light mode, flat design
- technical diagramsschematic, blueprint, flowchart, circuit diagram, block diagram
- diagramsflowchart, labeled diagram, Venn diagram, cross section, cross-section
- graphicsvector, shapes, 3D graphics, raster, symbols
- design verbscreate, design, draw, sketch, illustrate
- gridsgrid pattern, square grid, coordinate grid, dot grid, map grid
wireframetextured
Having tactile surface quality
photorealistic · rendered · shaded · detailed · raytraced
wireframefinished
Brought to an end
complete · final product · final version · published · live version