Les 10

Als het goed is, is iedereen al een heel eind op weg met z'n site.

Vanavond laat ik jullie zien hoe je een slideshow in Fireworkjs kan maken:
http://www.entheosweb.com/fireworks/CS4/create_slideshow.asp


We hebben hierna nog 2 bijeenkomsten.............kom op he mensen.

les 9

favicon maken:
http://tools.dynamicdrive.com/favicon/
http://www.favicon.cc/

Les 8

Vorige week hebben we samen een proefsite gemaakt.

Dat was een groot succes en dat wil ik eigenlijk vanavond herhalen.

Dus vanavond maken we nog een proefsite.......................vanaf volgende week werken we alleen nog aan onze eigen sites.

http://www.smartwebby.com/free_tutorials/CSS_website_design_guide/CSS_web_design_dreamweaver_fireworks.asp

Les 7

Vanavond kijken we iets verder naar CSS en onze implementatie.

Eerst even een filmpje:
http://www.wonderhowto.com/how-to-create-css-xhtml-layouts-fireworks-cs4-262820/view/


De voors en tegens van CSS vs Tables
http://www.vanseodesign.com/css/css-divs-vs-tables/


Verder wil ik even een moment van rust creeren en NIETS nieuws gaan uitleggen.

Wel wil ik even wijzen op stock libraries:
http://www.sxc.hu/
http://freestockphotos.com/
http://www.freedigitalphotos.net/


Vanavond gaan we gezamenlijk bouwen.
http://www.entheosweb.com/fireworks/CS4/design_layout.asp

Voor Heera:
Formulier maken:
http://www.php-solutions.nl/scripts/formulier-generator/

Nieuwsbrieven:
http://www.webgenerator.nl/html-nieuwsbrief.htm
http://www.webgenerator-promail.nl/digitale_nieuwsbrief_maken.htm

Les 6

Eerst wil ik even de plannen voor de sites doornemen:

We hebben het nu heel de tijd over de grafische vormgeving gehad, nu gaan we even stil staan bij de vormgeving van de inhoud(content)

Typografie, Typeface(Fonts) en CSS






Wat is Typografie:
Typografie, van het Griekse τύπος (tupos: slag, vorm, afdruk) en γράφειν (graphein: schrijven), behelst het zetten, drukken en vormgeven van teksten, zowel voor functionele als esthetische doeleinden.
http://nl.wikipedia.org/wiki/Typografie



Algemene regels omtrent typografie en leesbaarheid.
http://www.usabilityweb.nl/2005/05/typografie-en-leesbaarheid/

Niet alle fonts zijn beschikbaar op elke computer. Aangezien de browser gebruik maakt van de op de clientmachien aanwezige fonts, is het dus zaak om standaard (web safe) fonts te gebruiken
http://www.stoerebinken.net/kennisbank/typografie/web-safe-fonts

http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

Het is tegenwoordig wel mogelijk om de gebruiker een font te laten downloaden, maar gebruikersvriendelijk is dat niet. De meeste gebruikers willen immers helemaal niet iets downloaden voordat men een pagina mag/kan lezen. Tevens zit er op fonts ook copyright.

10 goede tips voor typografie op het scherm.
Check ook ff de links onderaan.
http://www.computerfaq.be/website-maken/10-typografie-regels-voor-webdesigners/

Meer over typografie
http://ilovetypography.com/

Em?
http://en.wikipedia.org/wiki/Em_(typography)

Hoe pas je dit nu toe op een internet site?

Vroeger ging dit binnen HTML, echter was dit allemaal zeer beperkt.



Tegenwoordig wordt dit vastgelegd in CSS.


Wat is CSS?
http://nl.wikipedia.org/wiki/Cascading_Style_Sheets

minicursus CSS
http://www.webmasterstart.nl/css/wat-is-css.html

Alles over CSS
http://www.w3schools.com/css/css_intro.asp
Bekijk ook even de demonstratie


Hoe passen wij dit toe?
ff een grapje:
http://www.youtube.com/watch?v=Z52tXrxQjv0

Maar inderdaad laten wij het meeste genereren door Fireworks........Hoe?

Dat ga ik je laten zien

Les 5:

http://www.youtube.com/watch?v=hWOSSrS2iRs&feature=related

Het gebruik van kleur:

De mens reageert op allerlij manieren op kleur.
Soms psychologisch, soms zelfs lichamelijk.

Meestal onbewust.





Bij vormgeven en ook bij websties bouwen is het handig om kennis te hebben, van de reactie die kleuren oproepen.





Goed kleurgebruik draagt bij aan een het gevoel van uw bezoekers.
Ook kan het van invloed zijn op de tijd dat uw bezoeker op de site blijft.




Onderzoek heeft uitgewezen dat bezoekers van websites, binnen 10 seconden, besluiten of ze blijven of weggaan. Kleurgebruik speelt daarbij (naast vormgeving, useablitlity en duidelijkheid)een grote rol.





Kleuren roepen emoties op en beinvloed op een onderbewust niveau.
Kleur speelt een grote rol bij het overtuigen van de bezoekers.



Het is dus een integraal deel van de manier waarop we ‘spreken’ tegen de bezoekers.

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.

Met de juiste kleurkeuze kunt u de bezoeker zich welkom laten voelen, comfortabel, rustig en vertrouwd.



Het beste design voor een website is een ontwerp dat er ook in zwart-grijs-wit nog goed en overzichtelijk uitziet.
Het toevoegen van kleur bepaalt vervolgens de sfeer, de stijl en het gevoel dat uw website bij de bezoeker oproept.


Kleur kan bij een website op twee manieren worden ingezet:
• Decoratief
• Functioneel



Decoratief kleurgebruik
Kleur brengt het ontwerp tot leven. Hoe overzichtelijk een site ook is in zwart-grijswit,
hij is ook meestal uitermate saai. Het toevoegen van kleur voorkomt dat uw
bezoekers de website verlaten vanwege zijn saaiheid.



Functioneel kleurgebruik
Kleurgebruik kan helpen bij het inzichtelijker maken van een website. Door kleuren
consequent te gebruiken wordt de opbouw van de site duidelijker.
Kleur kan gebruikt worden om delen van de site duidelijk te onderscheiden

Hier kun je zie hoeveel impact kleur heeft op een website:
http://www.csszengarden.com/




Kleuren en de associaties die ze oproepen



Zwart

is tijdloos en stijlvol en straalt autoriteit en macht uit.

Grijs

is neutraal, soms zelfs saai

Wit

is licht, puur, neutraal en past overal bij. Goed te gebruiken als achtergrond bij
zaken die eruit moeten springen.

Rood

staat voor vitaliteit, dynamiek, activiteit, hitte en verlangen.

Blauw

het tegenovergestelde van rood.

Blauw wekt vertrouwen en is vreedzaam, maar is ook koud, formeel,
technisch en zakelijk.

Paars
plechtig, melancholisch, geassocieerd met luxe, intelligentie en magie.

Groen

kalm en fris Groen wordt geassocieerd met natuur, ontspanning, vrije tijd en kalmte. De makkelijkste kleur voor het oog.

Geel

is helder, speels, uitnodigend en vrolijk. Geel is de minst comfortabele kleur voor de ogen.

Oranje

is feestelijk, inspirerend en actief. Oranje teksten zijn niet echt leesbaar.

Bruin

staat voor wortels, natuur, thuis, familie, veiligheid en stabiliteit.





Kleuren werken vooral door de combinatie met andere kleuren.


Zwart en grijs zijn alleen nogal saai – maar voeg oranje toe en u krijgt een mooie combinatie.



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.



Welke kleuren u ook kiest, de site moet voor alles prettig zijn voor het oog.
Gebruik nooit meer kleuren dan absoluut noodzakelijk.
Blijf vooral consequent in hetkleurgebruik

Hoe komen we aan een een goed kleuren pallet?

Een kleurenpallet moet passen:

-bij de boodschap (een uitvaartsite 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.





Vaak helpt het om een mooie kleurenfoto te nemen, bij voorkeur met natuurlijke elementen, liefst een die te maken heeft met het onderwerp van de site.


Als je uit deze foto een antal kleuren pakt, zul je zien dat er een onderling verband is.
Of het ook daadwerkelijk de kleuren zijn die je wilt gebruiken.......dat moet nog blijken.




Online pallet generator:
http://www.colorotate.org/








Gratis kleurpalleten:
http://www.colourlovers.com/





1 op de 12 bezoekers is kleurenblind!
Leuk weetje.

Voor die mensen heb jij voor niets zitten zwoegen op je kleurenpalet, zij zien het zo:
http://www.colourlovers.com/blog/2008/07/24/as-seen-by-the-color-blind/



OK, we weten nu het een en ander over kleur............maar voor welke scherm gaan we eigenlijk ontwerpen:
http://www.w3schools.com/browsers/browsers_display.asp



Genoeg theorie......we gaan wat doen:



Behaviours in Fireworks.

Het woord zegt het al......we gaan "gedrag" geven aan objecten, oftewel we gaan interactiviteit toevoegen.

Rollover
http://www.youtube.com/watch?v=VCq63qiCQmY

Disjointed rollover
http://www.youtube.com/watch?v=TKLh14edrpg

Navbar
http://www.youtube.com/watch?v=21Cvw6IrZG4&feature=related

Slicing:
http://www.youtube.com/watch?v=_3JjebCsnPs&feature=channel
http://www.youtube.com/watch?v=hWOSSrS2iRs&feature=related

Les 4

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

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

Usability

Wat is usability:
http://www.rug.nl/webplatform/usability/index

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.visiblenorth.com/blog/usability-examples-of-good-and-bad-color-contrast

Nog meer voorbeelden van slechte usability:
http://www.smashingmagazine.com/2007/09/27/10-usability-nightmares-you-should-be-aware-of/
Onder aan deze pagina staan ook een aantal don'ts.

Even wat usability tips:
http://www.keyrelevance.com/articles/usability-tips.htm

Nog meer tips en boeken:
http://websitetips.com/usability/

Welke minimum usability maatregelen moeten we in ieder geval nemen:

-Zorg voor een makkelijke URL
-GEEN dode links
-Geen lappen tekst.............niemand leest het.
-Plaats geen te zware afbeeldingen.....anders duurt het telang
-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 dudielijk leesbaar font.
-Gebruik een rustige kleur als achtergrond.

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


Useability voor blinden:
http://www.youtube.com/watch?v=d5oZf9ULAyw


Zo nu weer eens wat doen :)

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

Maak er eens een?
Vanavond gaan we onze eerste test site maken in Fireworks:

Ik wil graag zien:

1 redelijk vormgegeven homepagina.
1 contact pagina
1 bedrijfspagina

Alle pagina's moeten naar elkaar verwijzen.

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






Link van de week:
http://www.webpagesthatsuck.com/dailysucker/