Hoe ontwerp je een website? deel 3, voorbeeld van www.sigriddejong.nl

dinsdag, 25 december 2012 | door +Sigrid de Jong | Geen reacties » |

 

Vorige week heb ik de site www.sigriddejong.nl in de lucht gegooid en nu is een goed moment om te vertellen hoe het ontwerpproces van deze website is gegaan.

schets-zwart-wit schets-kleur-regenboog site-sigriddejong

Ten eerste bleef ik vrij lang hangen in de eerste fases. Hoe moest ie eruit zien? wel mooi natuurlijk en iet dat echt bij mij past.

Wat er op moest was gemakkelijker, gewoon van alles, tekeningen, strips, blog berichten enz. Een beetje wat jaren geleden op deze site stond en ik er weer afgehaald heb.

Brainstormen, ontwerpen, kleuren

Qua kleuren dacht ik om eenvoudig mijn favoriete kleuren te nemen… ik vind heel veel kleuren mooi, zolang ze maar helder verzadigd zijn. Het is qua ontwerp het mooist om het bij 1 kleur te houden of een 2 kleuren die goed met elkaar combineren en daarvan dan een aantal tinten en zwart en wit voor de teksten. Ik kon niet echt 1 kleur kiezen, zo vind ik blauw b.v. wel mooi, maar dat heb ik al op deze site.

Toen bedacht ik om veel kleuren te nemen, laten we zeggen alle kleuren van de regenboog. Het gevaar is dat een site dan druk en rommelig wordt (een soort kermis), dus de kleuren moeten wel een geheel vormen. Ik wilde graag een vrolijke, heldere sfeer hebben.

schets-zwart-wit schets-kleur-regenboog

Toen kwam ik op het idee om er een regenboog in te doen. Ik heb een aantal tekeningen met een regenboog gemaakt , maar die werden het toch niet.

landschap-regenboog-vol landschap-regenboog-deel

Uiteindelijk had ik een tekening gemaakt van een landschap waar al die kleuren op een harmonische manier samen kwamen. Die heb ik als achtergrond genomen.

achtergrond-25p

Tijd voor de volgende stap.

Ontwerp op papier

Na de schetsen heb ik de layout zoals hij moet worden getekend. Op schaal, met potlood, pennen, potloden en stiften. ja dat is wel erg ondigitaal he, maar het werkt wel. Je zet meteen op papier hoe je het wilt hebben, dat werkt sneller en je wordt niet afgeleid of gestuurd door de techniek.

ontwerp-papier

Digitaal ontwerp in photoshop

Die heb ik gescand en in photoshop verder bewerkt. De gescande tekening gebruikte ik al ondergrond en daarboven maakte ik allemaal lagen en in elke laag maakte ik een deel van de website. Ik deed het ook op schaal: 1024 pixels breed en ongeveer 800 pixels hoog.

De tekening van het landschap had ik ook gescand en er als achtergrond ingezet.

website-ontwerp-sigriddejong-5

HTML versie

Toen ik tevreden was met de photoshop versie van de website werd het tijd om een HTML versie te maken. Dat doe ik op de makkelijkste manier, namelijk met 1 html bestand en 1 mapje met afbeeldingen. De CSS doe ik dan in de header in hetzelfde bestand, dat is in deze fase het makkelijkst. Dan bouw ik de site dus met HTML en CSS tot hij er  in de browser netzo uitziet als de photoshop versie.

Als dat klaar is ga ik de bestanden splitsen, de CSS in een bestand dat ik style.css noem en de html in een bestand dat ik index.php noem.

WordPress theme

Nu ga ik van dat ontwerp een WordPress thema maken. In het index.php bestand zet ik de benodigde WordPress codes. B.v. de codes voor het menu, de inhoud van de pagina’s enz. Ik test of het werkt in een WordPress installatie.   Een WordPress thema heeft minimaal 2 bestanden nodig, namelijk index.php en style.css. Daarna ga ik de bestanden splitsen in de bestanden die het handigst zijn/ die ik nodig heb. De banner en het bovenste menu in header.php, het zijmenu in sidebar.php, de onderkant in footer.php en dan verschillenden bestanden voor verschillende pagina weergaves. Het overzicht van de blogberichten blijft in index.php, een pagina komt in page.php en een apart blog bericht in single.php.

Dan moet er bovenaan het css bestand: style.css nog een beschrijving speciaal voor WordPress:

/*
Theme Name: Sigrid de Jong’s EGO site
Theme URI: http://www.helderester.nl
Description: mijn eigen wordpress thema
Version: 1.0
Author: Sigrid de Jong
Author URI: http://www.helderester.nl/
*/

hierdoor zie je in de thema kiezer de beschrijving van het thema.

en er moet ook nog een schreenshot bij, die je te zien krijgt in het overzicht van de thema’s. Het screenshot zet ik op 25% en noem ik screenshot.jpg

 

Domeinnaam vastleggen

Oke dit kan in een andere volgorde, maar toen ik het wordPress thema had heb ik de domeinnaam en het hosting pakket besteld.

 

Uploaden

en dan werd het nu dus tijd om alles op het internet te zetten, de nieuwste (Nederlandstalige) versie van WordPress, het thema en de benodigde plugins.

De plugins die ik erin gezet heb zijn:

contact form 7: om een contact formulier te maken

Google XML Sitemaps: voor google

WordPress SEO: zoekmachine optimalisatie voor WordPress om beter gevonden te worden.

Er zijn heel veel plugins voor van alles en nog wat, maar ik zet er graag niet meteen heel veel in.

 

Testen, tweeken, aanpassen

De site is online, werkt alles zoals de bedoeling was? Ik begin met het vullen van de inhoud en kom een hoop tegen wat me niet bevalt en ik pas de code aan. Hoewel ik dacht alles al goed te hebben moest er nog best veel verandert worden.

Bloggen

Nu werkt het meeste zoals het moet en is het tijd om te gaan bloggen, dat wil zeggen artikelen te schrijven en de site te vullen.

site-sigriddejong


Begin reactie formulier

Reageer:




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