Sådan laver du et HTML Storyboard

Mens storyboarding oftest bruges til film, er webudviklere og forretningskonsulenter også storyboard-websites. Storyboards hjælper dig med at visualisere et stort grafisk projekt, såsom layout og design af dit website. Processen indebærer tegning af billeder af, hvad dit websted skal se ud, før du rent faktisk udvikler webstedet, hvilket giver et effektivt værktøj til at designe strømmen af ​​hjemmesiden. Storyboarding inden du begynder kodning sparer også tid og penge i redesign.

1.

Udvikl en konceptplan for dit websted for at skabe den grove vejledning til dit storyboard. Bestem den slags indhold webstedet indeholder, såsom en blog, et billedgalleri, en biografi side, en kontaktformular, et opslagstavle og en e-handelsside.

2.

Tegn en mockup skitse af en container til dit websted ved hjælp af enten papir eller en digital tegning overflade. En beholder er et sæt grafiske elementer, som konsekvent vises på de fleste eller alle dine websider. Det omfatter typisk dit webside banner, navigationsmenu, footers på siden bund og kolonne layout. Brug af en container gør websiderne på dit websted konsekvente, selvom de viser langt andet indhold. Indstilling af disse ensartede standarder for dine websider gør det lettere for dine seere at navigere på webstedet. Det giver dig også flere muligheder for at opbygge et særligt mærke.

3.

Tegn mockup-skitser af hver type indholdsside. Brug din container som udgangspunkt, og læg derefter de grafiske elementer, der kræves af indholdet på siden. For eksempel kan du på blogbladsiden udarbejde blogposttitler, tekstteksten til blogindlæg, eventuelle tags og andre metadata, der skal indeholde links til at kommentere indlæg og opdelinger til visuelt adskilte blogindlæg. Vær meget specifik, identificere pixeldimensionerne og placeringen af ​​elementerne på siden samt notering af farvekoder for farveskemaet. Fortællingsbrættet er til din fordel, eller det af dit ansat designteam, og bliver mere nyttigt, når du tilføjer specificitet.

4.

Gennemgå hele storyboardet, når det er gennemført for at sikre konsistens uden unødigt at begrænse udseendet eller funktionaliteten af ​​visse typer indholdssider. Foretag ændringer efter behov.

Ting, der er nødvendige

• Tegnepapir eller digital tegningsflade

Tips

• Dine tegninger behøver ikke at være perfekt designet; de tjener til at få point over.
• Det er lettere og billigere at lave fejl og ændre retning i storyboarding-fasen, end det er, når du begynder at skrive koden og markeringen.