Hoe ontwerp je een website? een voorbeeld.

woensdag, 17 maart 2010 | door +Sigrid de Jong | Geen reacties » |

 

Ik ga hier het proces van het ontwerpen van een website bloggen.

Stap 1: Bedenk dat je een website wilt.

Dit is wat triviaal, maar het is de belangrijkste stap; zonder deze stap maak je nooit een website. In dit geval wil ik een aparte website maken voor een strip die ik eindelijk af ga maken. Het is de strip over Merlijn Quintia Klein, een hoogbegaafd meisje en ik wil een strip over haar en de strip. Ik wil mijn andere strips op een andere plek hebben.

Stap 2: Brainstormen:

Er zijn een aantal manieren om te brainstormen: surfen met de computer op willekeurige websites; pas op dit is gevaarlijk, het kan er voor zorgen dat je nergens toe komt! Doe dit dus niet te lang. Googelen op webdesign is enigsinds terleurstellend, ik kom op allemaal saai ontworpen websites met teksten waar het woord webdesign in voorkomt. Meestal webdesign bedrijven (met verstand van SEO = Search Engine Optimization). Terwijl ik graag voorbeelden van websites ter inspiratie wil zien. Ik bedenk dat ik de site in stripstijl wil en dat het dus wel aardig is om sites in een stripachtige stijl te bekijken. Dus google ik op “webdesign en strips” en aanverwante termen. Ik kom op een aantal website van mensen die net als ik zowel websites bouwen als strips tekenen.

Na enige tijd kom ik op het goed idee om websites van andere striptekenaars te bekijken en dat levert aardig wat mooie voorbeelden op en die sites zijn ook heel erg gevarieerd. Joriso heeft aardig wat links van tekenaars verzameld. Op stripster stond ooit een lijst met links van websites van tekenaars, maar die vind ik nu niet meer terug.

Later vind ik nog een paar leuke sites met commentaar over webdesing: Klompen, tulpen, kaas en webdesign? Conclusie neem geen standaard webdesign oplossingen en trucks maar ga gewoon ontwerpen en dat kan ik helemaal beamen. Deze site: 24 ways vind ik ook erg mooi ontworpen. Nog een site met ontwerp voorbeelden.

Ik ga nog even naar kleurtjes kijken, maar besluit dar al snel mee te stoppen omdat ik toch wel weet welke kleuren ik wil: namelijk oranje en lichtgroen, de kleuren die bij deze stripheldin horen. Dit is trouwens ook een van de reden dat ik voor haar een aparte site wil, dan kan ik de bijpassende kleuren gebruiken.

Stap 3: Ontwerpen op papier

Goed gaan we naar de productivere stap: Computer dichtklappen en brainstormen met pen en papier. Ik besluit het deze keer eens met een mindmap te doen, want ik wil weten waar je mindmaps nog meer voor kunt gebruiken behalve leren. Dat is een goed idee! het werkt als een tiet, ik kan er veel informatie op kwijt en heb overzicht. Dankzij de mindmap neem ik al vrij snel een aantal ontwerpbeslissingen:

Kleuren: oranjerood met lichtgroen. Zwarte letters op een witte achtergrond. (geen grijze letters).

Stijl: stripachtig, dus met tekeningen en geen foto’s of alleen maar kleur vlakken. Open, dus genoeg wit en witruimten, fris, vrolijk maar niet te kleurijk (niet alle kleuren van de regenboog, of als een kermis) .

Letters: de tekst schreefloos (verdana?) op het web heb je niet zo veel keus. Ruimte tussen de regels: 1,5 en tussen de letters 1,2. Voor de kopjes wil ik een echte stripletter, die ik of zelf ga tekenen of via de computer erin zet.

Grootte: voor een beeldscherm van 1024 x 800, 800 x 600 komt bijna niet meer voor, dus daar hef je tegenwoordig websites niet meer op aan te passen. Ik ontwerp dan voor 960 x 600 omdat er nog wat af gaat voor de browser en deze maat mooi te verdelen is. De hoogte rekt natuurlijk wat uit door de tekst en door de strippagina’s in de lengte.

Navigatie: bovenaan met plaatjes en stripwolkjes en daarboven een banner met een overzichtstekening of een tekening uit de strip. Enz.

De mindmap:

[singlepic id=220 w=300 h=212 float=none]

Ontwerp

[singlepic id=224 w=300 h=270 float=none]

Stap 4: Tekenen: verzamelen en maken van basismateriaal

En daarna begin ik met het uitvoeren van het ontwerp. Ik doe het nog steeds op papier: Ik schets de layout en  omdat ik besloten heb dat ik tekeningen op de site wil maak ik die tekeningen.

Ik besluit de tekeningen te kleuren met kleurpotlood, deels uit praktische overwegingen en deels uit gemak. Kleurpotloden zijn gemakkelijk in gebruik. Het is langgeleden dat ik deze kleurpotloden gebruikte (20, 25 jaar? ) en het resultaat valt me alles mee. Het kleuren van grote vlakken is trouwens toch wel weer aardig wat werk.

Daarna scan ik de tekeningen, iets wat ik altijd een beetje vervelend vind omdat je een minuut of 1 tot 3 moet wachten tot de tekening gescand is, dat duurt te lang om lekker door te gaan en wat anders in de tussen tijd doen werkt ook niet zo goed. Na het scannen werk ik ze een beetje bij. Dat gaat erg makkelijk en ik ben tevreden met het resultaat.

merlijn-skatebord3-360px-222x300 schoenen-300x187


Begin reactie formulier

Reageer:




Heldere Ster | © 2010-2012 door +Sigrid de Jong, Alle rechten voorbehouden. |