Hur man utformar en webbplatsprototyp från en trådram

Du kanske har hört det gamla ordspråket: "Mät två gånger, klipp en gång." Det är precis därför du bör planera en webbplats innan du bygger den. Och det är där prototyper kommer in.

När vi designar våra webbplatser går vi från wireframing till prototyping till - slutligen - en fullständig design.

Jag ville utforska och utöka vad Prototyping egentligen innebär genom att ta dig igenom hela processen.

Observera att jag skapade en annan kurs som täcker det första steget med att utforma en webbplats: att bygga en trådram. Du kan läsa om wireframing och titta på min 30 minuters videokurs här.

I denna handledning kommer vi att täcka:

  1. Vad en tidig prototyp är
  2. Skapa en struktur: ram, rader, kolumner
  3. Lägga till innehåll: rubrik, skjutreglage, om
  4. Designa sektioner
  5. Slutsats: Vad vi har lärt oss av prototypprocessen

Vad är en tidig prototyp?

En prototyp är normalt den sekundära iterationen av en design, eftersom den är byggd ovanpå en trådram.

En trådram involverar vanligtvis en enkel ritad skiss via papper, penna eller onlineverktyg. Därefter bygger vi prototypen, som är vår mer förfinade modell för webbplatsen eller appen.

Låt oss ta en titt på den tidiga trådramen vi byggde i föregående artikel:

Den har ett antal sidor, avsnitt och områden där text och bilder kommer att läggas till senare.

Målet i prototypen är alltså att bygga detta visuellt, men utan att lägga till färg eller bilder.

I det här exemplet kommer jag att använda Figma för att göra prototypen. Du kan se hela Figma-protypen här.

Hur man skapar en webbplatsprototypstruktur: ram, rader, kolumner

När vi skapade trådramen betraktade vi gallren - men de var handritade.

När vi gör en tidig prototyp måste vi definiera dem ordentligt så att hela designen följer rutnätstrukturen.

I det här exemplet kommer jag att använda en 12-kolumn design med en vanlig bredd på 1140 pixlar, som traditionellt används och ses i Bootstrap-mönster. Detta ger oss en marginal på 15-30 pixlar mellan nätenheter.

Detta kommer att vara användbart senare när vi kollapsar kolumnerna till rader för mobil respons.

Du kan skapa din egen nätstruktur i Figma. Men tänk på att du (eller någon annan) senare kommer att behöva koda dessa mönster.

Var noga med att ta hänsyn till utvecklaren när du utformar något.

Hur man lägger till innehåll till en webbplatsprototyp: rubrik, skjutreglage, sektioner

Till skillnad från Wireframe representerar vi inte längre text med rader och rubriker med block. Istället måste vi fylla i innehåll för en mockup.

Detta betyder inte att du lägger till färger eller bilder. Men det betyder att vi måste visa verklig text.

I det här skedet är det en bra idé att se till att sidhuvudet och sektionerna visas med det faktiska innehåll som de är avsedda att innehålla. Detta möjliggör bättre val för färger och bilder i senare skeden av designen.

I den här delen av exemplet byggde jag ut skjutreglaget med hjältext och en beskrivning under. Det finns några saker att se upp för i denna fas av prototypprocessen:

  • Storlek och placering av teckensnitt
  • Innehållsplats och avstånd
  • Marginaler och stoppning mellan sektioner och innehåll

Hur man utformar delar av webbplatsens prototyp

För prototyper och den slutliga mockupen är det viktigt att börja lägga dina grupper och sektioner. Avsnitt kan innehålla saker som rubriken, avsnittet "om oss" och sponsorsektionen.

Du kan skapa grupper i ditt användargränssnittsverktyg (Figma gör detta med Ctrl + G). Märk dina sektioner och ställ in dem med olika bakgrundsfärger. Detta gör det enkelt att identifiera dem och gör att du enkelt kan flytta dem runt.

För många gånger har jag blivit ombedd att flytta vissa delar av en webbplats upp och ner i grupperingen. Genom att gruppera alla dina komponenter i sektioner kommer du att göra det mycket lättare för dig själv under prototypfasen av designarbetet.

Slutsats: Vad vi har lärt oss av prototypprocessen

När vi bygger ut resten av designen är det viktigt att se till att denna tidiga prototyp inte blir en fullständig modell för en webbdesign.

Det är lätt att bli lurad. Men målet med att göra en prototyp efter en trådram är att se till att vi kan fortsätta planera webbplatsens utveckling.

Det är mycket lättare att identifiera problem och problem i de tidiga planeringsstadierna och uppdatera dem innan du dyker in i att skapa den fullständiga designen. Sådan prototypning kan bara ta några timmar, men det kan spara dagar värda ansträngningar senare i processen.

När du har prototyperat flera sidor kan du gå vidare till hela designfasen för mockup. Detta kommer att innebära att räkna ut färgteori, typografi och bilder som fungerar därefter. Vi kommer att ta en titt på detta i nästa artikel i denna serie nästa månad.

Bonus: Lägg till en interaktiv prototypkörning

Vi skapade bara en enda sida för detta exempel. Med detta sagt kan du också skapa ett emulerat exempel på hur webbplatsen fungerar.

Den här emuleringen är mycket användbar för att genomföra demos, testa hur kunder reagerar på att se ett verkligt exempel på en tidig mock-up och se över hur alla dina länkar flödar.

Jag hoppas att du gillade den här artikeln. Om du inte vet vem jag är, är jag Adrian från Australien. ? Jag har en liten kanal på Twitter & YouTube, så om du vill veta mer om mig eller njuta av mitt innehåll, kolla in mig någon gång?

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