In de ontwerpfase stellen we het functioneel ontwerp op en maken we een prototype of mockup.

Functioneel ontwerp
Het functioneel ontwerp bevat een omschrijving van de belangrijkste functionaliteiten, stroomdiagrammen en wireframes. Deze drie onderdelen zorgen ervoor dat uw website, voordat deze gebouwd wordt, tot in detail beschreven is. Het schept duidelijkheid in wat wel en niet kan en vooral in wat wel en niet gewenst is. Het functioneel ontwerp daagt ook uit om nog beter na te denken over wat u de bezoeker van uw website wil bieden en wat de bezoeker verwacht.

stroomdiagram

• Uw site zal ongetwijfeld de nodige functionaliteiten nodig hebben. Denk daarbij aan bijvoorbeeld een contactformulier of een mogelijkheid om een routebeschrijving naar uw pand te krijgen. In een functionaliteit bestaan vaak keuzes die de bezoeker van uw website moet maken, pagina's die in een bepaalde volgorde getoond worden en de consequenties daarvan. Dit wordt helemaal uitgeschreven
• Met een stroomdiagram helpt een (keuze) proces gemakkelijk te visualiseren. Het is een gedetailleerde visuele weergave van de beschrijving van de functionaliteiten. Een stroomdiagram bevat over het algemeen een startpunt, eindpunten, invoer, uitvoer, mogelijke paden en de beslissingen die tot mogelijke paden leiden. In de illustratie hiernaast vindt u een voorbeeld van een stroomdiagram van de contactpagina op deze site. De stroom 'loopt' van links naar rechts en laat zien hoe de bezoeker van de site door het contactproces gaat. Het diagram begint bij het startpunt (contactpagina).
  

  wireframe
  De invoer (dat wat de bezoeker invult) gaat langs de validatie of komt via de validatie weer bij het startpunt. Eenmaal langs de validatie komt de bezoeker op de bedankpagina (eindpunt) en worden emails gestuurd naar de 2Bloom-online mailbox en naar de bezoeker.
• Een wireframe is een vereenvoudigde weergave van de website. De focus ligt op de verbanden binnen de website (hoe linken de pagina's, waar komt een onderdeel van de site te staan, hoe verhouden de onderdelen zich tot elkaar). De grafische vormgeving is in dit model (nog) niet van belang. Via het wireframe maakt u alvast kennis met de eerste opzet van uw site. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id risus leo. In a odio at eros consequat pulvinar eget vel tellus.

Prototype
Als we aan het wireframe de grafische vormgeving en simpele functionaliteiten (zoals navigatie) toevoegen, hebben we een prototype. Een prototype komt al aardig in de buurt van de uiteindelijke website. De functionaliteiten zijn behoorlijk primitief, maar de look en feel is goed zichtbaar.

Het is nu duidelijk wat u wilt met uw website en hoe die eruit komt te zien. Tijd voor de technische realisatie.

 

Wat levert deze fase concreet op: Functioneel ontwerp Prototype