Sådan designer du en webstedsprototype fra en trådramme

Du har måske hørt det gamle ordsprog: "Mål to gange, skær en gang." Nå, det er netop derfor, du skal planlægge et websted, før du bygger det. Og det er her prototyping kommer ind.

Når vi designer vores hjemmesider, går vi fra wireframing til prototyping til - endelig - et komplet design.

Jeg ville undersøge og udvide hvad prototyping faktisk betyder ved at tage dig igennem hele processen.

Bemærk, at jeg oprettede et andet kursus, der dækker det første trin i design af et websted: opbygning af en trådramme. Du kan læse om wireframing og se mit 30 minutters videokursus her.

I denne vejledning dækker vi:

  1. Hvad en tidlig prototype er
  2. Oprettelse af en struktur: Ramme, rækker, kolonner
  3. Tilføjelse af indhold: Overskrift, skyder, om
  4. Design af sektioner
  5. Konklusion: Hvad vi har lært af prototypeprocessen

Hvad er en tidlig prototype?

En prototype er normalt den sekundære iteration af et design, da den er bygget oven på en trådramme.

En trådramme involverer normalt en simpel tegnet skitse via papir, pen eller onlineværktøj. Derefter bygger vi prototypen, som er vores mere raffinerede mockup til hjemmesiden eller appen.

Lad os tage et kig på den tidlige trådramme, vi byggede i den forrige artikel:

Det har et antal sider, sektioner og områder, hvor tekst og billeder tilføjes senere.

Målet i prototypen er derfor at bygge dette visuelt, men uden at tilføje farve eller billeder.

I dette eksempel vil jeg bruge Figma til at lave prototypen. Du kan se hele Figma-protypen her.

Sådan oprettes en webstedsprototype-struktur: Ramme, rækker, kolonner

Da vi skabte trådrammen, overvejede vi netene - men de var håndtegnede.

Når vi laver en tidlig prototype, skal vi definere dem korrekt, så hele designet følger gitterstrukturen.

I dette eksempel bruger jeg et 12-søjledesign med en almindelig bredde på 1140 px, som traditionelt bruges og ses i Bootstrap-design. Dette giver os en margin på 15-30 pixel mellem gitterenheder.

Dette vil være nyttigt senere, når vi kollapser kolonnerne til rækker for mobilresponsivitet.

Du kan oprette din egen gitterstruktur i Figma. Men vær opmærksom på, at du (eller en anden) senere bliver nødt til faktisk at kode disse designs.

Når du designer noget, skal du tage udvikleren i betragtning.

Sådan tilføjes indhold til en webstedsprototype: Overskrift, skyder, sektioner

I modsætning til trådrammen repræsenterer vi ikke længere tekst med linjer og overskrifter med blokke. I stedet skal vi udfylde indhold til en mockup.

Dette betyder ikke at tilføje farver eller billeder. Men det betyder, at vi skal vise ægte tekst.

På dette tidspunkt er det en god ide at sikre, at overskriften og sektionerne vises med det faktiske indhold, som de er beregnet til at indeholde. Dette giver bedre valg af farver og billeder i senere stadier af designet.

I denne del af eksemplet byggede jeg skyderen med heltetekst og en beskrivelse nedenunder. Der er et par ting at passe på i denne fase af prototypeprocessen:

  • Skriftstørrelse og placering
  • Indholdsplacering og afstand
  • Margener og polstring mellem sektioner og indhold

Sådan designes sektioner af webstedets prototype

For prototyping og den endelige mockup er det vigtigt at begynde at lægge dine grupper og sektioner. Sektioner kan omfatte ting som header, sektionen "om os" og sponsorsektionen.

Du kan oprette grupper i dit UI-værktøj (Figma gør dette med Ctrl + G). Mærk dine sektioner, og indstil dem med forskellige baggrundsfarver. Dette gør det nemt at identificere dem og giver dig mulighed for let at flytte dem rundt.

For mange gange er jeg blevet bedt om at flytte bestemte dele af et websted op og ned i grupperingen. Ved at gruppere alle dine komponenter i sektioner, vil du gøre det meget lettere for dig selv i prototypefasen af ​​designarbejdet.

Konklusion: Hvad vi har lært af prototypeprocessen

Når vi bygger resten af ​​designet ud, er det vigtigt at sikre, at denne tidlige prototype ikke bliver en fuld model for et webstedsdesign.

Det er let at blive båret væk. Men målet med at lave en prototype efter en trådramme er at sikre, at vi fortsat kan planlægge webstedsudviklingen.

Det er meget nemmere at identificere problemer og problemer i de tidlige planlægningsfaser og opdatere dem, før man dykker ind i at skabe det fulde design. Sådan prototyping kan kun tage et par timer, men det kan spare dage værd for indsats senere i processen.

Når du har prototypet flere sider, kan du gå videre til den fulde mockup-designfase. Dette vil indebære at finde ud af farveteori, typografi og billeder, der fungerer i overensstemmelse hermed. Vi ser på dette i den næste artikel i denne serie i næste måned.

Bonus: Tilføjelse af en interaktiv prototypekørsel

Vi oprettede kun en enkelt side til dette eksempel. Når det er sagt, giver prototyping dig også mulighed for at oprette et emuleret eksempel på, hvordan webstedet fungerer.

Denne emulering er meget nyttig til at gennemføre demoer, teste, hvordan klienter reagerer på at se et virkeligt verdenseksempel på en tidlig mock-up og revidere, hvordan alle dine links flyder.

Jeg håber du nød denne artikel. Hvis du ikke ved, hvem jeg er, er jeg Adrian fra Australien. ? Jeg har en lille kanal på Twitter & YouTube, så hvis du vil vide mere om mig eller nyde mit indhold, så tjek mig engang?

  • Youtube: //youtube.com/adriantwarog
  • Twitter: //twitter.com/adrian_twarog