Definitief Ontwerp

Een aantal weken terug heb ik drie verschillende huisstijlen gemaakt waarvan ik uiteindelijk voor stijl 3 heb gekozen om uit te werken. Ook de main visual en logo heb ik hieraan toegevoegd.

1920x1080

Home

Vervolgpagina (onderwerp: Tradities in Tokio)

1024x768

Home

Vervolgpagina (onderwerp: Tradities in Tokio)

320x480

Home

Vervolgpagina (onderwerp: Tradities in Tokio)

Gebruikte stijlgids

Main Visual

Mijn main visual heb ik gemaakt door zelf dingen te tekenen en in te kleuren met stift, deze uit te knippen en te positioneren op een ander vel.

Aangezien mijn doelgroep kinderen omvat tussen de 10-12 jaar, probeerde ik de stijl lekker speels, simpel en vrolijk te houden.

Design Quotes

Een aantal design quotes die die mij aanspreken. Gevonden op http://designwashere.com/80-inspiring-quotees-about-design



"Don't design for everyone. It's impossible. All you end up doing is designing something that makes everyone unhappy." - Leise Reichelt

"It's art if can't be explained.
 It's fashion if no one asks for an explanation.
 It's design if it doesn't need explanation." - Wouter Stokkel

"Creat your own visual style... let it be unique for yourself and yet identifiable for others." - Orson Welles

"Every designers' dirty little secret is that they copy other designers' work. They see work they like, and they imitatete it. Rather cheekily, they call this inspiration." - Aaron Russell

3x Huisstijl ontwerp

Huisstijl 1

Huisstijl 2

Huisstijl 3

Wordt nog uitgewerkt

Logo concepten

Functioneel ontwerp website (wireframes)

1920x1080
Home

1920x1080
Vervolgpagina (onderwerp: bergen in Japan)

1024x768
Home

1024x768
Vervolgpagina (onderwerp: bergen in Japan)

320x480
Home

320x480
Vervolgpagina (onderwerp: bergen in Japan)

Huiswerk: Onderzoek

Doel (informeren): zoek minstens 3 sites die ditzelfde doel nastreven en kijk welke elementen in het design dit doel ondersteunen.

1. http://virtualjapan.com

Op Virtual Japan worden duidelijke (grote) koppen gebruikt waardoor je in één oogopslag kunt zien waar je wat kunt vinden. De navigatie is niet erg duidelijk, die zit onopvallend rechts boven de header. Ik vind dat er goed gebruik is gemaakt van kleur en tekst. Het is duidelijk wat bij elkaar hoort (alles is netjes gegroepeerd) en je ziet wat linkjes zijn. Er staat heel veel informatie op de pagina, maar niet op een storende manier. De zoekbalk vind ik een goed punt. Het is altijd handig om op steekwoorden te zoeken mocht je het toch niet kunnen vinden. Er wordt vastgehouden aan één bepaalde stijl/sfeer.

2. http://www.smashingmagazine.com

Op Smashing Magazine vind ik de navigatie aan de linkerkant erg netjes en overzichtelijk. Op de home page word het meest recente artikel met tekst en een 'lees meer...' knop weergegeven. Dit vind ik zelf erg prettig, omdat je bij bezoek kunt lezen waar het over gaat zonder dat je gelijk verder hoeft te gaan. Ook hier vind ik dat vakkenverdeling, kleurgebruik en tekst goed is gebruikt. Er is sprake van consistentie en de site maakt gebruik van een neutrale sfeer. Er is een zoekfunctie.

3. http://www.indonesie.nl

Deze site ziet er wat minder 'modern' uit dan de vorige twee, maar het is duidelijk dat het een informatieve pagina is en de overzichtelijkheid is niet slecht. De navigatie spreekt op zich, hoewel deze niet erg logisch is. Aan de bovenkant in het groen vind je informatie over de verschillende eilanden in Indonesië, maar daaronder algemene informatie over de website, terwijl je weer aan de linkerkant een andere navigatie vindt over reizen. Verder is er een zoekfunctie aanwezig en houdt de site enigszins een  bepaalde stijl aan. 

Doelgroep (kinderen, jongens en meisjes, 10-12 jaar): Maak een moodboard of board op pinterest van de leefwereld van jouw doelgroep.

Onderwerp (stad, Tokio): Zoek naar allerhande beelden die iets te maken hebben met je onderwerp. Maak hiervan een moodboard of moodboard op pinterest. 

Maak ook een mindmap over het onderwerp.

Oefening week 2: Gestalt

In de les ging het over de gestaltwetten die worden toegepast in visuele communicatie. Deze kun je ook goed inpassen in de vormgeving voor websites.

Er werden 5 gestaltwetten behandeld. De oefening was om bij elk van deze wet een website te zoeken waar een wet is gebruikt.


1. Wet van nabijheid
Dingen worden als groep gezien als ze dicht bij elkaar staan. Iets wat verder weg staat hoort dan niet meer bij het geheel. Door goed gebruik van witruimte kun je dingen groeperen en leesbaar maken.

Hieronder zie je door gebruik van witruimte als het ware twee aparte kolommen.

http://www.frankwatching.com

2. Wet van overeenkomstigheid
Dingen die zich altijd hetzelfde gedragen. Het is bepaald dat een link blauw (en vaak onderstreept) is. Daardoor weten we dat we daarop kunnen klikken en naar een andere site worden geleid. Een ander voorbeeld is dat op een webshop de kleur van prijzen hetzelfde is.

http://www.ebay.nl

3. Wet van geslotenheid
Dingen die omrand worden door een lijn (kader) worden als geheel gezien.

http://www.theverge.com

4. Wet van continuïteit
We vullen zelf de ontbrekende informatie in wanneer dingen in een doorgaande lijn of kromming zijn geplaatst.

Hieronder kunnen we zelf een verticale lijn trekken langs de navigatie naar beneden, hoewel er ruimtes zitten tussen de navigatie, het plaatje en de kleinere plaatjes eronder.

http://www.koekjeskoerier.nl

5. Wet van eenvoud
Dingen worden alleen waargenomen in de meest eenvoudige vorm, we zien alleen het meest voor de hand liggende. Het is daarom belangrijk om zo min mogelijk informatie te laten zien op een website.

http://www.nintendo.nl

Wat maakt goed webdesign?

Er is altijd wel een moment in je leven geweest dat je iets hebt gemaakt wat je zelf helemaal geweldig vond en perfect was in jouw ogen. Dit kan natuurlijk nog steeds zo zijn als je nu met visual webdesign aan de gang gaat. Iedereen heeft immers zijn eigen smaak en voorkeur wat  ‘esthethiek’ (gevoel voor kunst) betreft. 

Toch zijn er een hoop zaken waar je rekening mee moet houden als je bezig wilt zijn met het vormgeven van websites. Ten eerste zul je moeten weten wat je precies wilt bereiken met je website. 9 Van de 10 keer maak je websites voor een opdrachtgever. In dat geval zal je dit gemakkelijk kunnen bespreken. Zaak is om hem actief te maken in het proces om vroegtijdig feedback te ontvangen en zo de mogelijkheid te krijgen het design zo te maken dat het volledig past bij zijn verwachtingen. Natuurlijk heb je je eigen inbreng en stel je dingen voor hoe het beter kan, maar houd wel de doelgroep in je achterhoofd. Dit is regel nummer 1. De doelgroep wordt namelijk als heilig beschouwd als het om vormgeving gaat.

Er zijn heel veel zaken op te noemen die webdesign goed of niet goed maken. Wat ik persoonlijk het belangrijkst vind is dat de doel van de website op het eerste blik al duidelijk is. Word de juiste boodschap of informatie overgebracht of is er direct call to action aanwezig? Gebruikers zijn namelijk ‘lui’ en komen naar je site met de verwachting dat ze meteen vinden waar ze naar zoeken. Is dat niet het geval, dan zijn ze zo weer weg. Om diezelfde reden vind ik ook dat navigatie een belangrijke rol speelt. Het moet duidelijk en simpel zijn. Ook breadcrumbs en een sitemap zijn handig voor de gebruiker om zijn weg te vinden. Daarnaast moet je nog denken aan een duidelijke structuur (of overzicht) zodat het oog zijn weg kan vinden op de site. Goed gebruik van witruimte zodat niet alles op elkaar zit geplakt is daarom fijn, en ook zal er rekening gehouden moeten worden met de positionering van verschillende elementen (tekst, afbeeldingen, inlogbalk enz.). Gebruik daarnaast een consistente huisstijl waarbij elementen en tekst steeds op dezelfde manier worden gebruikt. Wat ook van erg belang is, maar wat ik toch als iets minder belangrijk beschouw, is het gebruik van tekst (lettertype, grootte, kleur, line spacing enz.), sfeer van de site en of er sprake is van een responsive layout. Dit laatste begint echter wel steeds meer op te komen, dus het is zaak om layouts voor verschillende devices en groottes te maken.

Er is genoeg om over na te denken, en dit zijn zeker niet alle factoren waaraan een webdesign ‘moet’ voldoen. Dit zijn echter wel de zaken die ik zelf het belangrijkst vind, en ik ben van mening dat als aan al deze zaken wordt vastgehouden, je een zeer degelijk design maakt voor de eindgebruiker.

Beoordelingsmatrix

Klik op de afbeelding voor de originele grootte

Beoordelingsmatrix waarmee je het design van een website kan beoordelen.

Opdrachtbepaling

In de les moesten we willekeurige kaartjes omdraaien om te bepalen wat voor webdesign er gemaakt moet worden voor de eindopdracht.

Doel: "Ik zoek informatie over een bepaald onderwerp..." (site: informeren)

Doelgroep: Kinderen 10-12 jaar, groep 7 en 8 van de basisschool. Hun ouders zijn hoogopgeleid. De kinderen hebben al veel gereisd in hun leven. Hebben allemaal beschikking over een laptop en iPad. Wonen riant.

Onderwerp: Stad