wireframing
Skeletal interface design
Wireframing is creating a simplified visual outline of a webpage, app, or interface before building it.
A wireframe strips away colors, images, and detailed styling to show only the basic structure—where elements go, how users navigate, how content flows.
Designers wireframe early in projects to test layouts and get feedback before committing to full designs: We spent a week wireframing before touching any code.
Preliminary design representation
- FigmaCloud design application
- user flowSequence of interface steps
- storyboardPlanned visual sequence drawings
- rapid prototypingQuick fabrication of preliminary models
Making rough drawings
- draftingCreating technical blueprints
- diagramSimplified explanatory sketch
- schematicSimplified technical diagram
- annotationsExplanatory additions to documents
grayscale · boxes · lines · shapes · fidelity · visual hierarchy · iconography · callouts
Internal supportive framework
- gridFramework of intersecting lines
- outlineSummary of key elements
- hierarchyRanked authority structure
- layoutSpatial arrangement of elements
framework · sitemap · navigation · placeholders · alignment · spacing · columns · sections
Forming mental concepts
- conceptualizeForm a mental picture
- brainstormingGenerating many ideas freely
- planningArranging for future events
- user researchInvestigating audience needs systematically
iteration · collaboration · design thinking · scoping · prioritization · documentation · handoff · specification
mockup
Preliminary design representation
- FigmaCloud design application
- user flowSequence of interface steps
- storyboardPlanned visual sequence drawings
rapid prototyping · iterative design · user testing · feedback loop · revision
sketching
Making rough drawings
- draftingCreating technical blueprints
- diagramSimplified explanatory sketch
- schematicSimplified technical diagram
annotations · grayscale · boxes · lines · shapes · fidelity · visual hierarchy · iconography · callouts · labeling
skeleton
Internal supportive framework
- gridFramework of intersecting lines
- outlineSummary of key elements
- hierarchyRanked authority structure
layout · framework · sitemap · navigation · placeholders · alignment · spacing · columns · sections · header
ideation
Forming mental concepts
- conceptualizeForm a mental picture
- brainstormingGenerating many ideas freely
- planningArranging for future events
user research · iteration · collaboration · design thinking · scoping · prioritization · documentation · handoff · specification
- designdesign principles, functionality, emphasis, unity, graphic design
- graphic designlogo, font, typography, layout, color
- software developmentcoding, programming, bug, debug, debugging
- design consultancybranding, logo design, UX design, web design, graphic design
- UX designuser research, user experience, user testing, user needs, A/B testing
- organizingorganizing, categorizing, grouping, structuring, classifying
wireframingvisual design
Arranging elements aesthetically
production design · graphic design · art direction · skinning
wireframingproduction
Making or generating something
implementation · deployment · development · coding · shipping
frame, wire, wired, wires, wiring, rewire, rewiring, wireframe, unwired