wireframes
Digital design outlines
Wireframes are simplified visual guides showing the skeletal structure of a webpage, app, or interface before detailed design begins.
They map out layout, navigation, and content placement without colors, fonts, or images—just boxes, lines, and placeholder text: Let's review the wireframes before the developers start building.
The term extends to any basic structural outline: wireframes for the new product packaging.
Preliminary design representation
- sketchHasty informal drawing
- prototypeFirst functional specimen
- layoutSpatial arrangement of elements
- lo-fiImperfect audio quality, informally
hi-fi · fidelity · placeholder · grayscale · boxes · annotations · screens · iteration
Determining position and course
- usabilityEase of interaction quality
- hierarchyRanked authority structure
- sitemapWebsite's page directory
- journeyTravel from place to place
interaction · affordance · clickthrough · walkthrough · storyboard · feedback · persona · scenario
Cloud design application
- pen-and-paperManual writing implements
- whiteboardErasable marker writing surface
- sticky-notesAdhesive memo papers
- markersPens with porous tips
templates · components · libraries · plugins
Top line of document
- footerBottom-of-page information
- sidebarAncillary text box
- navbarWebsite's link menu
- cardStiff paper rectangle
modal · dropdown · checkbox · CTA · breadcrumb · carousel · accordion · tab
Forming mental concepts
- brainstormingGenerating many ideas freely
- requirementsNecessary conditions for something
- stakeholderParty with an interest
- approvalFavorable opinion given
handoff · documentation · specifications · iteration · review · critique · collaboration · presentation
mockup
Preliminary design representation
lo-fi · hi-fi · fidelity · placeholder · grayscale · boxes · annotations · screens · iteration · revision
navigation
Determining position and course
- usabilityEase of interaction quality
- hierarchyRanked authority structure
- sitemapWebsite's page directory
journey · interaction · affordance · clickthrough · walkthrough · storyboard · feedback · persona · scenario · breadcrumbs
Figma
Cloud design application
- pen-and-paperManual writing implements
- whiteboardErasable marker writing surface
- sticky-notesAdhesive memo papers
markers · templates · components · libraries · plugins
header
Top line of document
card · modal · dropdown · checkbox · CTA · breadcrumb · carousel · accordion · tab · tooltip
ideation
Forming mental concepts
- brainstormingGenerating many ideas freely
- requirementsNecessary conditions for something
- stakeholderParty with an interest
approval · handoff · documentation · specifications · iteration · review · critique · collaboration · presentation · client
- designdesign principles, functionality, emphasis, unity, graphic design
- graphic designlogo, font, typography, layout, color
- portfolio itemsresume, CV, cover letter, projects, references
- software developmentcoding, programming, bug, debug, debugging
- design documentsstyle guide, blueprints, sketches, color palette, drafts
- design processbrainstorming, prototyping, concept, sketches, iteration