Tutorial: ontleding van een professionele layout
De mooiste layouts zijn de meest simpele, maar ook de moeilijkste om te bedenken. Als je kijkt naar ons voorbeeld layout dan denk je snel 'dat kan ik ook'. Klopt als je ze zou namaken dan klaar je de klus binnen 20 minuten. Maar hoe bedenk je nu zelf een professionele layout?

Durf opnieuw te starten
De grootste fout die de meeste designers maken is dat ze niet 'durven' opnieuw beginnen. Stel, je bent even bezig met een layout. Na een tijdje denk je van 'hm, dit ziet er precies niet goed uit'. Wel, vanaf nu komt het ook niet meer goed met die layout, begin gewoon opnieuw. Ook al moet je tot 3x toe opnieuw starten.

Talent is vereist
Een goede designer vertrekt altijd vanuit het idee dat de site, als het ware, één geheel moet vormen zodat ze er professioneel uit ziet. Door diverse technieken toe te passen bekom je dat effect. Hieronder bespreken we de best bewaarde 'geheimen' van professioneel webdesign. We loodsen je door een aantal visuele voorbeelden die je stap voor stap uitleggen waarop je moet letten tijdens het ontwerpen. Een kleine waarschuwing is echter op z'n plaats. Ook met deze tips zullen sommige mensen nog steeds niet in staat zijn om kwalitatief werk af te leveren. Er is nl. nog steeds de nodige talent vereist om professionele layouts samen te stellen, en dat kan helaas niemand je aanleren.



1) Origineel ontwerp
Hieronder vind je het basis ontwerp die we gebruiken om de diverse design elementen aan te tonen.



Hoe komt het nu dat deze layout er zo goed uit ziet?

2) De alignment van een site
Belangrijk is dat je elementen met elkaar uitlijnt. Dit zorgt voor een overall nette layout en professionele look. Ga op zoek naar aanknopingspunten die kunnen dienen als start van een uitlijning. Hieronder vind je de aanknopingspunten en de alignment die werd gebruikt in ons voorbeeld layout.




3) Hoe bepaal je de afstand tussen elementen?
Je kan de afstand bepalen door ze te dubbelen. Ga op zoek naar reeds gebruikte breedtes en pas die toe op andere stukken. Op die manier zorg je voor een evenwichtige layout.




4) Beperk gebruik van diverse fonts
Meerdere fonts gebruiken in een layout is al snel een verleiding die de meeste beginners niet kunnen weerstaan. Ik kan ze ook geen ongelijk geven, het is namelijk de makkelijkste manier om iets vorm te geven, lettertype wijzigen en klaar. Hier maken ze echter 1 van de grootste fouten die je kan maken. Wat we willen is een uniforme look, alsof het één geheel vormt, en dat doe je niet door te gaan mixen met diverse lettertypes.

In ons voorbeeld hieronder zie je welke lettertypes en grootes we hebben ingesteld. Let vooral op het consequent gebruik van de lettertypes. Alles onder de noemer 'heading & menu' krijgt lettergroote 12px, alles onder de noemer 'tekst' 11px, enz... Vooral dat punt is een belangrijk onderdeel. Er moet een reden schuilen achter ieder gebruik van een font.

De meest gebruikte types online en in website layouts zijn:

- Arial
- Verdana
- Helvetica
- Tahoma

Natuurlijk mag je hiervan afwijken, als je een themasite maakt bijvoorbeeld (grafisch layout in een specifiek thema, bv. World of Warcraft). Voor alle andere gevalen vermijd je best thematische fonts en houd je het bij de standaard fonts zoals hierboven beschreven.





5) Kleur bepalen
Hoe bepaal je nu de kleur van een layout? Volgens de regel moet je een kleurenpalet samenstellen, dat zijn kleuren die goed bij elkaar passen. Nu kan je vooraf een kleurenpalet samenstellen, of progressief (stap voor stap). Persoonlijk geef ik de voorkeur aan een progressief kleurenpalet. Je start een ontwerp en geleidelijk aan pas je de kleuren aan tot je een bevredigend resultaat bereikt. Die manier van werken is volgens mij ook de meest speelse en creatieve.

In onderstaand voorbeeld zie je de diverse kleuren die we hebben gebruikt en voor welke elementen we die hebben toegepast. Let vooral op de HSB waardes, de S (saturation) en B (brightness) zijn altijd gelijk. We veranderen hier dus enkel de H (hue), de kleur dus. Omdat de 4 kleuren in onze layout dezelfde S & B waardes hebben passen deze perfect bij elkaar.

Bruin
Kleur komt van: menu
Toegepast op:
- achtergrond content box
- donkere versie in de achtergrond van 'hosting company'
- lichtere versie naast de buttons 'read more'




Groen
Kleur komt van: menu
Toegepast op:
- achtergrond content box pagina 'hosting plans'




Blauw
Kleur komt van: menu
Toegepast op:
- logo
- banner onderaan
- achtergrond content box pagina 'support'



Rood
Kleur komt van: menu
Toegepast op:
- achtergrond content box pagina 'contacts'




6) Hoe maak je een unieke layout?
Er zijn ontelbaar veel websites. En toch slagen professionele webdesigners erin om een totaal andere site te maken dan de vorige. Hoe doen ze dit? Personaliseren, personaliseren en personaliseren. Een simpel element zoals een menubalk is makkelijk wat opbouw betreft, maar toch kan je het op 1000'n manier vormgeven. Hoe? idd, via personalisatie.

Vergelijk het met het wiel, die kan je niet 2x uitvinden maar je kan ze wel anders vormgeven. Die stelling geldt nl. ook voor websites en hun layouts. Je neemt een menubalk, gaat ze anders gaan vormgeven en je hebt een 'nieuwe' of 'unieke' menubalk.

Onderstaande image toont je hoe we deze layout hebben gepersonaliseerd. Als je de core structuur bekijkt van de layout dan is ze eigenlijk niets meer dan wat hokjes, maar als je gaat personaliseren dan krijg je een 'nieuwe' of 'unieke' layout.

1:


2:


3:


4:


5:



7) Focal points
Een focal point (of, het centrale punt) is iets die de aandacht trekt binnen een advertentie of layout concept. De focal point wordt ook het meest ingezet als onderscheidende factor. Het is een deel van een layout die duidelijk jouw layout onderscheid t.o.v. een concurrent.

De focal point moet echter met mate worden ingezet. Beperk tot 1 focal point om het beste effect te krijgen.

In de layout hieronder zie je duidelijk de focal point, het groene blad met de vlinder op. Dat is het deel van de layout die de aandacht trekt en ook het meest zal bij blijven bij bezoekers (o ja, die site met die vlinder op).

De meeste layouts op templatemonster.com bv. werken met een focal point, omdat dit de aandacht trekt van potentiële kopers die de kleine thumbnail bekijken en geinteresseerd raken.

Negatief punt van de focal point is, dat als het niet goed wordt ingezet het een totaal omgekeerd effect kan hebben op je layout. Pas dus zeer goed op en weet wat je doet als je een focal point plaatst op een layout.

ps: deze layout is ook live te bekijken in 'tableless design' op : www.body-and-minds.be





8 ) Leer van de beste
Hoe leer je dat nu toe te passen en hoe wordt ik beter in het ontwerpen? Wel, de beste manier is om websites die je prachtig vindt na te maken. Idd, je probeert ze gewoon na te maken. (Natuurlijk is het niet de bedoeling dat je die hier achteraf verkoopt Wink ). Door een layout na te maken, leer je uit eigen hand waarom men die knop links heeft geplaatst, of net dat menuutje die kleur heeft gegeven enz... . Hoe meer layouts je namaakt hoe sneller je ook in staat zult zijn om 'zelf' met een eigen ontwerp op de proppen te komen, en dat is uiteindelijk toch de bedoeling.

Ik hoop dat je wat hebt gehad aan deze tutorial en wens je veel succes toe!

ik ben het inderdaad met de 1e stelling eens.
Maar ik ga nooit zomaar aan een website beginnen.
Ik wil altijd eerst de nodig informatie voor de indeling.
dan ga ik schetsen op papier.
Is het voor een klant? Dan ga ik met het papiertje naar toe. Laat de klant dingen aanpassen. En ga dan aan de gang. Maar lukt de eerste niet ga dan niet zitten toppen of nagels bijten... Denk even door. Doe vooral inspiratie op met flyers, logo''s andere website met hetzelfde onderwerp

Leuke tutorial!

Vooral dat gedeelte met de kleuren vond ik interessant, ik neem aan dat je op die manier een goede consistentie kunt behouden m.b.t. tot het kleurenschema dat je gebruikt op de website.

Ik ga er eens mee klungelen.... :)

goeie tutorial ;) thnx

Een zeer goede tutorial !

bedankt:D

Ik heb wel diploma voor webdesign en heb al velen site's gemaakt en ook profesioneel
Maar altijd zat ik te kloten met de kleuren.

Ik denk dat dit met die kleuren hoe jullie dat hebben uitgelegd een hoop tijd bespaard.

Dus ik ga er eens mee aan de gang

Voor inspiratie qua kleur kun je hier ook nog even kijken:

http://www.colorschemer.com/schemes/

als je een idee hebt hoe je je site wilt gaat get vanzelf (moet je wel de functief enz van photoshop weten) maar zoals ik al zei als ik een idee heb (idee kwa kleuren, vorm enz.) dan gaat het designen vanzelf maar als je nog geen id hebt kan je uren bezig zijn en dan wordt het nog niks.

Must haves voor designen;

- Inspiratie
- Creativiteit
- Fantasie

Als je geen inspiratie of creativiteit heb kan je net zo goed meteen stoppen.

^^ Dé redenen waarom ik niet design ;-)

ik ben het helemaal met erik eens :P

Handige online kleurenpalet creator van Adobe:

http://kuler.adobe.com/

Origineel gepost door Aron de Haas

Must haves voor designen;

- Inspiratie
- Creativiteit
- Fantasie

Als je geen inspiratie of creativiteit heb kan je net zo goed meteen stoppen.

Tja bij mij inspiratie en fantasie is het niet mis, maar de uitwerking ben ik nooit te vreden over.

Maar voor de rest goede tutorial. En ik ga hem zeker gebruiken.

Alle links van www.kooplayout.nl/SD doen het niet meer, en de layout is ook niet live meer te bekijken ;)

Verder mooie tutorial

hey,
leuk ... kzou graag willen leren hoe je een goede layout maakt ... heb wel beetje ervaring met photoshop maar mijn vraag is hoe ziet zo'n layout er uit kwa layers en zo ...

Daarom zou ik graag een voorbeeld van de of een layout willen zodanig dat ik dat eens kan openen in photoshop zelf en eens rustig kan bekijken hoe deze in elkaar zit...

Misschien een rare vraag omdat layouts meestal worden verkocht maar ik heb niet de intentie om deze voor iets te gaan gebruiken of zo.

Mvg