Les 4

Kleur gebruik

Kleur volgens Wiki
De mens reageert op allerlij manieren op kleur.
Soms psychologisch, soms zelfs lichamelijk.
Meestal onbewust.
Bij vormgeven is het noodzakelijk om kennis te hebben, van de reactie die kleuren oproepen.
Kleuren roepen emoties op en beinvloed op een onderbewust niveau.
Het is dus een integraal deel van de manier waarop we ‘spreken’ tegen de toeschouwer.


Hoe ervaren wij kleuren?
Kleuren die we zien, worden door onze hersenen geïdentificeerd en er worden automatisch associasities gelegd. We zien gras en onze hersenen vertellen ons dat het groen is, andersom werkt dat ook.

Als we uit een vliegtuig grote vlakken groen zien, denken we onderbewust.......he, gras.
De hersenen koppelen ook een waarde oordeel aan kleuren, vaak verbonden aan het menselijk instinct.

Rood is gevaar, blauw is koud, grijs is saai.




Verkeerde kleurkeuze kan een ontwerp er goedkoop uit laten zien.

Kleur kan in een ontwerp op twee manieren worden ingezet:
• Decoratief
• Functioneel
Decoratief kleurgebruik
Kleur brengt het ontwerp tot leven. Hoe overzichtelijk een ontwerp ook is in zwart-grijswit,
het is ook meestal uitermate saai.

Functioneel kleurgebruik
Kleurgebruik kan helpen bij het inzichtelijker maken van een ontwerp(bv website, festival programma of een verkeerbord).

Kleur gebruik kan ook zorgen dat je de aandacht trekt.
Hier kun je zie hoeveel impact kleur heeft op een website:
http://www.csszengarden.com/

Even wat posters met mooie kleuren.
Even mooie poster zonder kleur
Kleurloos extreem doorgevoerd

Kleuren werken vooral door de combinatie met andere kleuren.
Kleur wordt ook sterker of zwakker door de combinatie met andere kleuren. Rood
gecombineerd met roze werkt namelijk heel anders dan rood gecombineerd met
grijs. In het laatste geval springt het rood er veel meer uit.

Goede kleuren bestaan niet, alleen goede kleurcombinaties.

Welke kleuren u ook kiest, het ontwerp moet voor alles prettig zijn voor het oog.
Gebruik nooit meer kleuren dan absoluut noodzakelijk.

Hoe bepaal je een een goed kleuren pallet?
Een kleurenpallet moet passen:
-bij de boodschap (een uitvaartfolder in vrolijke pastel kleuren.....dat past niet)
-De doelgroep. Roze past niet bij een site over motoren

Een kleurenpallet moet in harmonie zijn of in ieder geval in relatie tot elkaar staan.

-Groen en Oranje.....is hoofdpijn. Maar kan ook een aandachstrekker zijn.

Een veel gebruikte en handige truck is het gebruik van een foto:
Pallet uit foto

Geweldige palletgenerator:
Kuler.adobe.com
Online pallet generator:
http://www.colorotate.org/

Gratis kleurpalleten:
http://www.colourlovers.com/
Kleur in websites
http://www.youtube.com/watch?v=Ukl9yecLxIQ&feature=related

OK.....aan de slag.
het opmaken van een website in Fireworks
Fireworks masterpage:
http://www.youtube.com/watch?v=tJbfuenKdn4

Les 3

De afgelopen 2 lessen hebben we wat praktijk oefeningen gedaan.
Bassis dreamweaver en wat leuke oefeningen in Fireworks.

Vanavond eerstwat meer theorie.....het onderwerp is namelijk:

Usability

Wat is usability:
http://nl.wikipedia.org/wiki/Gebruiksvriendelijkheid

Ok, usability gaat dus over gebruiksvriendelijkheid?

Inderdaad........als je site gebruiksvriendelijk is:
-Blijven mensen langer
-Komen ze vaker


mmm, wat is niet gebruiksvriendelijk?

Nou bv slecht kleur contrast/gebruik:
http://www.gomediazine.com/design-articles/technique-theory/rule-three-contrast-contrast-contrast/

Nog meer voorbeelden van slechte usability:
http://www.webpagesthatsuck.com/worst-websites-of-2011-Q1.html

http://www.youtube.com/watch?v=Mck3xDdabb0

Een top 10 van slechte usability in 2010.....en dan vooral wat betreft navigatie:
http://www.webpagesthatsuck.com/worst-websites-of-2010-navigation.html

Mystery meat navigation

Onder aan deze pagina staan ook een aantal don'ts.
http://www.smashingmagazine.com/2009/02/18/9-common-usability-blunders/

Even wat usability tips:
http://www.smashingmagazine.com/2009/09/24/10-useful-usability-findings-and-guidelines/
http://www.keyrelevance.com/articles/usability-tips.htm


Welke minimum usability maatregelen moeten we in ieder geval nemen:

-Home link op elke pagina
-Contactgegevens altijd en overal aanwezig of zeer makkelijk bereikbaar.
-Niet te veel maar ook niet te weinig subpagina’s onder de hoofdknoppen (min 2 max +- 7)
-Zorg voor een makkelijke URL
-GEEN dode links
-Geen lappen tekst.............niemand leest het.
-Plaats geen te zware afbeeldingen.....anders duurt het te lang.
-Vul alle alt tags in............sommige mensen surfen met plaatjes uit.
-Geef alle bestanden duidelijke namen
-Geef elke pagina een titel, liefst bestaande uit (SiteNaam - PaginaNaam)
-Zorg voor goedwerkend en consistente navigatie (elke knop heeft op elke pagina dezelfde functie)
-Vermijd Popups, mensen haten ze.............en vaak staat de popupkiller aan
-Gebruik een duidelijk leesbaar font.
-Gebruik een rustige kleur als achtergrond.

ff lachen om usability:
http://www.youtube.com/watch?v=kbME0E5FP1M


Bad usability:
http://www.youtube.com/watch?v=4TQoaUqXT7E&feature=related

Usability tips:
http://www.youtube.com/watch?v=0SyRjjAGpvg&feature=related





Zo nu weer eens wat doen :)

Zo maak je een rollover button.
http://www.youtube.com/watch?v=VCq63qiCQmY

Maak er eens een?


Vanavond gaan we verder met de test site maken in Fireworks:


Hier een tutorial over het snel in elkaar zetten van een prototype/ontwerpversie van een website, met Fireworks.

http://www.entheosweb.com/fireworks/CS4/design_layout.asp

Les 2

Verleden week hebben we kennis gemaakt met HTML

Naslag werken met betrekking tot HTML
http://www.handleidinghtml.nl/
http://www.w3schools.com/html/

en gezien dat het heel prettig is om te werken in Dreamweaver.
Officiele Adobe Dreamweaver help site:
http://www.adobe.com/nl/support/dreamweaver/




We hebben gezien dat als we eigenschappen van een object willen wijzigen, we dat kunnen doen in de property inspector.

Zie het onderdeel:

HTML-opmaak instellen in de eigenschappencontrole
http://help.adobe.com/nl_NL/Dreamweaver/10.0_Using/WSc78c5058ca073340dcda9110b1f693f21-7c75a.html#WSc78c5058ca073340dcda9110b1f693f21-7c73a

We gaan vandaag kijken naar de verschillende manieren om links te maken:

-link op een woord
woord selecteren en met de property inspector er een link aanhangen.

-link op een plaatje
Plaatje selecteren en met de property inspector er een link aanhangen.

-link binnnen 1 pagina
Ankers aan paragrafen hangen en met insert link het juiste anker selecteren.

Nu gaan wij eens kijken naar websites anno tegenwoordig :)
http://webdesign.tutsplus.com/articles/design-theory/the-state-of-web-design-trends-2011-annual-edition/

Waar komen toch al die mooie graphics vandaan?


Vanavond kijken we naar een ander pakket wat we gaan gebruiken:

Fireworks is te downloaden (voor 30 dagen trial)
http://www.adobe.com/products/fireworks/





Fireworks is vector gebaseerd:
http://nl.wikipedia.org/wiki/Vectorafbeelding


En wij gaan fireworks gebruiken om de site vorm te geven en om foto's te verkleinen.




Filmpje over website bouwen met Fireworks:
http://www.youtube.com/watch?v=9scA7TPGuPY




Hoe verkleinen we foto's:
Onder modify zitten een aantal opties voor het verkleinen van foto's.
Onder file vinden we de batch optie, dit is handig als je op een hele reeks foto's steeds dezelfde bewerking wil doen.

Een paar tutorials om bekend te raken met Fireworks.

Transparante text:
http://www.entheosweb.com/fireworks/transparent_text.asp
Patronen in text:
http://www.entheosweb.com/fireworks/patterned_text.asp

Leuke randjes om foto's
http://www.entheosweb.com/fireworks/borders.asp

Text op een path:
http://www.smartwebby.com/free_tutorials/adobe_fireworks_CS4_tutorials/text_effects/text_path_effect.asp





Foto's bewerken met de Stempel (Stamp) Tool: http://www.youtube.com/watch?v=vc_BLOilUqg&feature=SeriesPlayList&p=1ED3BAEAD04490F5
Effecten: Fireworks heeft een aantal effecten, probeer ze eens uit. Let wel.........wees niet te scheutig met effecten, dan wordt alles snel te druk en men ziet dat je de toverdoos hebt opengetrokken.