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.

Les1

Voorstelronde:

Wie ben ik?
Jean Schouten
40 jaar, vader van 2 lieve kinderen.

Grote voorliefde voor alles wat met multimedia te maken heeft.
Gek op synthesizers liefst analoog en modulair, hardcore gamer (PS3).
http://www.youtube.com/jenamu6

Wie zijn jullie?
Heb je al enige ervaring met webdesign?(zo ja met welk pakket)
Wat verwacht je van deze cursus?
Weet je al wat je op de site wilt plaatsen? Heb je al een onderwerp?
Hobby, passie, werk?




Wat kun je verwachten ?

De eerste 2 a 3 lessen zal ik trachten het niveau van de groep te bepalen, om daar het les programma enigszins op aan te passen.

We gaan kijken naar verschillende aspecten van webdesign:
-HTML
-CSS
-Vormgeving (Typografie, kleurgebruik)
-Bewerken van Foto's (hoe maak je foto's kleiner, lichter. Minicursus photoshop)
-JavaScript, php (2 scripting talen, waar we maar heel even stil bij zullen staan)
-Usability (hoe maak je de site gebruikersvriendelijk)
-SEO (Search Engine Optimization)
-Uploaden van de site (FTP, Cpanel)
Etc

De laatste 4 lessen zijn meer bijeenkomsten, bedoelt om de website af te maken met ondersteuning.

Het is de bedoeling dat aan het eind van de 12 lessen er een leuke attractieve site is gemaakt.

Dit kan alleen wanneer de cursist zelf voldoende inspanning levert:

-Lees de informatie achter de links op het blog
-Probeer thuis aan de site te werken.


Dus aan het eind v.d. cursus is er dus een mooie site en tevens is er een goede basis gelegd voor webdesign en het onderhoud aan je eigen site.

Ook wil ik als daar behoefte aan is van alles uitleggen wat met het internet/nieuwe media te maken heeft.....................zolang ik dat zelf weet dan he?

Huishoudelijke mededelingen:
-USB key. Neem vanaf volgende week een USB key, die is essentieel.
-Geen koffie/drinken in het lokaal.
-Pauze. De les duurt eigenlijk 2 uur, maar er is altijd behoefte aan een pauze, vandaar dat de lestijd is opgetrokken naar 2,5 uur.
-We stoppen om 21:55 zodat we uiterlijk om 22:00 het lokaal kunnen verlaten.

-Vraag een domein en hosting aan.
BV bij http://www.neostrada.nl/

Wat is het internet?
http://nl.wikipedia.org/wiki/Internet

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

Wat is webdesign?http://nl.wikipedia.org/wiki/Webdesign
http://www.youtube.com/watch?v=rmTg-qHcGs4

Wat zijn webpagina’s?http://nl.wikipedia.org/wiki/Webpagina

Wat is HTML? http://nl.wikipedia.org/wiki/Html
http://www.youtube.com/watch?v=UYSXt5AWKwk

WWW???
http://www.youtube.com/watch?v=wZoMbBzqxyc
OK genoeg gepraat...............we gaan wat doen:
(Hello world test)
Kennismaking Dreamweaver.

Nieuwe pagina maken en de object inspector.

Huiswerk:Denk na en beschrijf:
-Onderwerp van je site
-Doelgroep
-Hoeveel pagina's