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). 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:

Mindmap van de website over Merlijn

Ontwerp

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 luiheid. Ik ben te lui om mijn aquarel set te gebruiken, dan moet je eerst water in een bakje doen, penseel indopen, verf natmaken, mengen… Mijn triamarkers die ik anders voor zo iets zou gebruiken heb ik niet hier bij de hand. Mijn potloden wel en ik kan ze meteen pakken. 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.

Voor wordpress zijn werkelijk duizenden themes gemaakt die je kunt downloaden. De ene is mooier dan de andere en ik heb uren gezocht en gekeken. Er zijn ook betaalde themes. Een theme is de layout van je website. Dus een ander theme erin en je hele site ziet er totaal anders uit.

Het werkt als volgt. Je kiest een theme en klikt op downloaden, of je downloadt er meerdere. Eenmaal opgehaald zet je hem in de map themes van je wordpresssite: wordpress/wp-content/themes. Als je site online staat, dan ftp je hem daarheen.

wordpress themes

www.themes2wp.com

wordpresssupplies.com

inspiratie-gratis-wordpress-themes

Weet jij nog meer sites met mooie thema’s, laat dan een bericht achter.

Zoek je de juiste kleuren voor je website of wil je zien hoe bepaalde kleuren die je wilt gebruiken combineren? Dan moet je zeker eens kijken op colourlovers! Daarop vind je eindeloos veel kleurencombinaties. Je kunt zoeken op allerlei woorden, zoeken op kleuren en zoeken naar patronen.

Je kunt ook lid worden en zelf kleurencombinaties maken. Ik als echte kleurenliefhebster ben lid geworden en heb enkele combinaties gemaakt. Ik heb de kleuren van een aantal van mijn sites erin gezet. Zo dit zijn de kleuren van deze website.

Je kunt ook een plaatje uploaden en daar kleuren uit selecteren. Of je kunt mooie kleuren zoeken en knippen en plakken naar je eigen combinaties.

Het is heel handig bij het maken van een website, eerst kies je de kleuren en maak je een combinatie en daarna knip en plak je de hexadecimale code van de kleur telkens in je stylesheet. Dan hoef je ook niet telkens te denken: ‘ik wil dit randje lichtblauw, waar stond die kleur ook al weer, och ja dat kopje was ook lichtblauw’, enz. Tenminste zo verging het mij en voor mij is dit net iets waar ik naar op zoek was.

Je maakt een database waar  je de inhoud van je website in stopt. Met inhoud bedoel ik de teksten op je website, de titels van je pagina’s enz.

Daarna maak je een PHP script dat de database uitleest en de inhoud presenteerdt in de website. Als je dit eenmaal hebt dan maak je een aparte pagina waarin je de inhoud van je database kunt aanpassen. Om te voorkomen dat wildvreemden de inhoud van je website gaan aanpassen doe je dat achter een wachtwoord. Je maakt een loginpagina en omdat op elke nieuwe pagina en na iedere klik opnieuw inloggen niet echt handig is werk je met sessies. Als je dat allemaal werkend hebt dan ga je er beveiligingen inbouwen, je zorgt ervoor dat bepaalde tekens niet geplaatst kunnen worden enz. Je kunt je CMS eindeloos uitbreiden met zoveel functies als je maar kunt bedenken.

Het maken van de database:

Ga naar je phpmyadmin, als je op je lokale server werkt dan ga je naar: http://localhost/phpMyAdmin/ en op de hoofdpagina zie je “nieuwe database aanmaken”. Daarin vul je cms in en je klikt op aanmaken. Als je dat hebt gedaan, dan heb je een lege database. Die database gaan we nu vullen met een tabel, in het veld: “Nieuwe tabel aanmaken in database” vul je inhoud in. Daarnaast moet je aangeven hoeveel velden je tabel moet hebben, type hierin 3 en klik op aanmaken.

Nu kun je de namen van de velden invullen. Het eerste noem je id en het type zet je op tinyint en de lengte/waarde zet je op 3. Het volgende veld noem je menu_item en het type varchar met lengte/waarde 128. Het laatste veld noem je tekst en type text. Als je dit hebt ingevuld dan klik je op opslaan.

Je ziet nu de MySQL om de tabel te maken, als je deze code rechtstreeks in SQL invoert dan maak je ook een tabel:

`id` TINYINT( 3 ) NOT NULL ,
`menu_item` VARCHAR( 128 ) NOT NULL ,
`tekst` TEXT NOT NULL

Lees Meer »

Een content Management Systeem (CMS) is een systeem waarin het ontwerp en de inhoud van een webpagina strikt gescheiden zijn. Dat betekend dat het ontwerp van een website eenmalig gemaakt wordt en dat de teksten altijd toegevoegd en gewijzigd kunnen worden.

Het gebruik van een CMS heeft zowel voor als nadelen.

Nadelen:

• Technisch complexer: moeilijker te maken en meer techniek nodig.
• Trager door gebruik van een database.

Voordelen

• Het ontwerpen van een website en het schrijven van de inhoud kunnen gemakkelijk door verschillende mensen gedaan worden.
• Geen gevaar van het per ongeluk aanpassen van de layout.
• Alle pagina’s hebben automatisch dezelfde layout.
• Weinig technische kennis nodig voor het aanpassen van de inhoud.

Ik schrijf nu deze artikelen met behulp van het CMS wordpress en dat vind ik zeer prettig. Ik kan er gemakkelijk bij en hoef weinig handelingen te verichten om nieuwe teksten te plaatsen of bestaande aan te passen. Ondanks dat ik uit het blote hoofd HTML, CSS enz kan typen en ook nog snel kan typen gat het werken met dit CMS toch veel sneller. Het werken met het CMS Wordpress is goed voor mijn creativiteit, het stimuleert me tot het schrijven van artikelen.

Lees Meer »

Op zoek naar een leuk patroon voor je website? Op www.tartanmaker kun je “theedoeken”, oftewel tartans maken.

Op zoek naar manieren om makkelijker en sneller websites te maken kom ik de volgende dingen tegen: Een streepjesgenerator, daarmee kun je handig en snel strepen voor een achtergrond genereren. Als je nu mooie kleuren opzoekt bij de colorlovers en die hier in stopt, dan krijg je vast hele mooie patronen.

Roze is een erg hippe kleur voor websites.

Oranje de kleur van feest, plezier en warmte.

De website van shownieuws is oranje, de banner wisselt van kleur

Paars, In deze website van brightebox is het paars van de astronomische foto heel mooi gecombineerd met de messingkleurige vlakken en de strakke witte achtergrond. Dit is samen met de letters een zeer mooie combinatie.