De Site indeling

Voordat je bezig gaat met het maken van wireframes is het handig om eerst te noteren wat voor onderdelen er op de website moeten komen en wat voor prioriteit deze hebben.

Inhoud blog: - Korte uitleg over het maken van een site indeling.

- Uitgewerkte site indeling. Benodigdheden: - Je uitgewerkte sitemap

---

Hoe moet ik beginnen? Ook de site indeling maak ik in een word document. Normaal gesproken heeft de klant/opdrachtgever zelf al suggesties over wat hij in een pagina wilt zien. In ons geval moeten we dit zelf gaan verzinnen.

Door er achter te komen wat er in een pagina/template moet komen te staan, kan je weer het beste kijken naar de huidige website (als die er is), naar de concurrentie en inspiratie sites.

Wanneer je een site indeling maakt begin je met het opschrijven van onderdelen die standaard in een template komen. Denk aan onderdelen zoals een header (bovenkant van een website waar de knoppen in staan), visual (een visual onder de header komt bijna altijd voor, omdat dit voor een gevoel en sfeer zorgt) en een footer (onderkant van de website. Hier staan vaak doorlinks naar verschillende pagina's binnen de site en contact gegevens).

Begin eerst met het uitschrijven van deze standaard onderdelen. In mijn vorige blog hebben we het over de sitemap gehad. Deze komt onder andere goed van pas bij het uitschrijven van de header, omdat daar precies in staat wat voor knoppen/pagina's erin moeten komen. Bij de header kan je daarom alvast die knoppen uitschrijven en dat ziet er dan als volgt ongeveer uit: Header - Hoofdknoppen - Opleidingen - Studeren - Bedrijven - Expertise centrum - Over HKU - Subknoppen - Intern - Bezoek ons - Contact - Taalswitch

Wat kan je nog meer in een header kwijt? Je ziet bijna altijd het logo in de header en omdat social media voor een school ook belangrijk kan zijn, besluit ik om ook social media knoppen in de header te zetten. Wat ook erg belangrijk is, is een duidelijke opvallende knop voor het aanmelden op de school. Zo'n knop noemen we een call-to-action. Dit zijn de belangrijkste knoppen binnen een website en zijn daarom ook altijd zo vormgegeven dat ze het meeste opvallen.

De uiteindelijke omschrijving van de header ziet er dan als volgt uit: Header - Hoofdknoppen

- Opleidingen

- Studeren

- Bedrijven

- Expertise centrum

- Over HKU

- Subknoppen

- Intern

- Bezoek ons

- Contact

- Taalswitch

- Social media knoppen

- Aanmelden call-to-action

- Logo

---

Dit doe je vervolgens ook met de rest van de onderdelen. Wat ERG BELANGRIJK is, is dat je de onderdelen op volgorde van prioriteit zet. Het is geoorloofd om tegenwoordig een website te maken waarbij je veel moet scrollen voor content. Maar je moet er wel rekening mee houden dat je de belangrijkste onderdelen zo ver mogelijk aan het begin van de template plaatst, omdat deze als eerst gezien worden. Dit noemen we binnen webdesign 'ontwerp boven de vouw'. Alles wat je ontwerpt boven de vouw is het belangrijkste van de website. (Boven de vouw betekend het ontwerp gedeelte wat je meteen ziet wanneer je de website opent).

Ik heb besloten om zelf 6 pagina's te gaan ontwerpen, waarvan jullie aan het eind van mijn blog het resultaat kunnen zien. Ik heb voor de volgende templates gekozen omdat deze allemaal een andere vormgeving nodig hebben: - Homepagina - Intern pagina - Opleiding overzicht - Opleiding detail pagina - Opendagen pagina - Contact pagina Voor iedere template uit bovenstaand lijstje maak ik dus een site indeling plan. In deze link heb ik een voorbeeld van hoe ik het heb aangepakt. Wel is belangrijk om te weten dat dit plan NIET vast staat. Als je verder in het proces er achter komt dat iets toch niet helemaal lekker werkt, kan je dit altijd nog verplaatsen en verwijderen. Dit plan is een richtlijn waardoor je makkelijker te werk kan gaan.