Hoe maak je een HTML Storyboard

Hoewel storyboarding het meest wordt gebruikt voor speelfilms, zijn webontwikkelaars en bedrijfsadviseurs ook storyboard-websites. Storyboards helpen je een groot grafisch project te visualiseren, zoals de lay-out en het ontwerp van je website. Het proces omvat het maken van foto's van hoe uw website eruit zou moeten zien voordat u de site daadwerkelijk gaat ontwikkelen. Dit is een effectief hulpmiddel om de stroom van de website te ontwerpen. Storyboarding voordat je met coderen begint, bespaart je ook tijd en geld bij het opnieuw ontwerpen.

1.

Ontwikkel een conceptueel plan voor uw website om de ruwe handleiding voor uw storyboard te maken. Bepaal de inhoud die de site zal bevatten, zoals een blog, een afbeeldingengalerij, een biografiepagina, een contactformulier, een prikbord en een e-commercepagina.

2.

Teken een mockup-schets van een container voor uw website met papier of een digitaal tekenoppervlak. Een container is een verzameling grafische elementen die consistent op de meeste of alle webpagina's worden weergegeven. Het bevat meestal uw websitebanner, navigatiemenu, voetteksten onderaan de pagina en kolomlay-out. Het gebruik van een container zorgt ervoor dat de webpagina's op uw site consistent zijn, zelfs als ze sterk uiteenlopende inhoud weergeven. Door deze consistente standaarden in te stellen voor uw webpagina's, is het voor uw kijkers gemakkelijker om op de site te navigeren. Het geeft je ook meer mogelijkheden om een ​​onderscheidend merk op te bouwen.

3.

Teken mockupschetsen van elk type inhoudspagina. Gebruik uw container als startpunt en plaats vervolgens de grafische elementen die vereist zijn voor de inhoud van de pagina. Stel bijvoorbeeld op een pagina met een blogsjabloon de look van blogposttitels, de hoofdtekst van blogberichten, eventuele tags en andere metadata in om links op te nemen om een ​​opmerking over het bericht en divisies te maken om blogberichten visueel van elkaar te scheiden. Wees heel specifiek, identificeer de pixeldimensies en -locaties van de elementen op de pagina en vermeld de kleurcodes voor het kleurenschema. Het storyboard is in uw voordeel, of dat van uw ingehuurde ontwerpteam, en wordt nuttiger naarmate u meer specificiteit toevoegt.

4.

Bekijk het volledige storyboard als het is voltooid om consistentie te waarborgen zonder het uiterlijk of de functionaliteit van bepaalde typen inhoudspagina's onnodig te beperken. Voer indien nodig herzieningen uit.

Dingen nodig

  • Tekenpapier of digitaal tekenoppervlak

Tips

  • Je tekeningen hoeven niet perfect ontworpen te zijn; ze dienen om het punt over te brengen.
  • Het is gemakkelijker en goedkoper om fouten te maken en van richting te veranderen in de storyboard-fase dan wanneer je de code en markup begint te schrijven.

Aanbevolen