Wireframing er processen med at skabe en simpel oversigt over en app eller et website, der viser det overordnede koncept. Det fungerer som en grundlæggende eller lav-fidelitets mockup til at kommunikere idéer med kunder og fastlægge, hvordan layout og funktionalitet vil se ud.

Formål med wireframing

• Repræsenterer et overordnet koncept for en digital app eller et website;
• Understøtter kommunikation med kunder for at afstemme designidéer;
• Bør være hurtig og enkel, uden unødvendige detaljer.

Værktøjer og elementer

• Brug grundlæggende designelementer som rektangler, linjer, tekst og pladsholderikoner;
• Minimalt brug af farver foretrækkes; færre farver hjælper med at holde fokus på strukturen;
• Brug realistisk pladsholdertekst i stedet for "Lorem Ipsum" for bedre forståelse.

Designråd

• Wireframes bør indikere funktionalitet (f.eks. "X"-mærker for områder, der skal erstattes af billeder);
• Hvis du kender de ikoner, du vil bruge, så inkluder dem; ellers er pladsholdere tilstrækkelige;
• Prioritér enkelhed og klarhed frem for visuel finish;
• Brug ressourcer som wireframing kits fra Figma's Community Tab for at spare tid.

Efter at have oprettet den grundlæggende wireframe, forfin den let for at forbedre klarheden, da den polerede version hjælper med at kommunikere designets formål effektivt.

Afslutningsvis er wireframing et essentielt trin i designprocessen, der muliggør hurtig feedback og iteration, samtidig med at alle interessenter forstår projektets grundlæggende layout.

Download billedfilen "Letterboxd_Screenshot" og genskab appens grænseflade i en wireframe i din egen stil.