......................Hoi,
Vanavond een klein stukje over javascript en hoe gebruik je het.
Javascript:
http://nl.wikipedia.org/wiki/JavaScript
Waar?
Bijvoorbeeld hier:
http://www.leejoo.nl/
dinsdag 25 maart 2008
woensdag 19 maart 2008
les 6
Ontwerp, Usability en kleur.
Vanavond gaan we kijken naar design en kleurgebruik.
Kleuren schemas:
http://en.wikipedia.org/wiki/Color_scheme
Elke kleur wordt wel met een bepaalde emotie geassocieerd:
http://www.htmlwijzer.nl/artikel/kleurgebruik.php
Dit is natuurlijk maar een leidraad.
Probeer in ieder geval te gaan voor:
-een klein kleuren pallet. Dus zowel voor de tekst als voor de de vormgeving, teveel kleur leidt af en komt vaak goedkoop over(behalve als dat dus aansluit op je doelgroep, bv peuters zitten niet te wachten op een mooie statige website)
-Niet te contrasterende kleuren (behalve als dat je bewust wilt)
-Geef je teksten niet te vreemde kleuren (oranje tekst op groene achtergrond)
-Vergeet achtergrondplaatjes (of het moet wel een heeeeeel mooie rustige tile zijn)
Een goede tip om een kleuren pallet samen te stellen:
http://www.boxesandarrows.com/view/natural_selections_colors_found_in_nature_and_interface_design
Wil/kun je het zelf niet doen, dan zij hier een groot aantal colour schemes te vinden:
http://www.colorschemer.com/schemes/index.php
http://www.colorschemer.com/online.html
Paar kleine tips voor goed design:
http://www.htmlwijzer.nl/artikel/design.php
Usability:
Broodkruimels/breadcrums
http://www.w3use.nl/usability/broodkruimels.html
Link v.d. week:
Gratis stockfotos:
http://www.freeimages.co.uk/
http://www.stockvault.net/
BONUSlink:
http://www.tutorialized.com/
Vanavond gaan we kijken naar design en kleurgebruik.
Kleuren schemas:
http://en.wikipedia.org/wiki/Color_scheme
Elke kleur wordt wel met een bepaalde emotie geassocieerd:
http://www.htmlwijzer.nl/artikel/kleurgebruik.php
Dit is natuurlijk maar een leidraad.
Probeer in ieder geval te gaan voor:
-een klein kleuren pallet. Dus zowel voor de tekst als voor de de vormgeving, teveel kleur leidt af en komt vaak goedkoop over(behalve als dat dus aansluit op je doelgroep, bv peuters zitten niet te wachten op een mooie statige website)
-Niet te contrasterende kleuren (behalve als dat je bewust wilt)
-Geef je teksten niet te vreemde kleuren (oranje tekst op groene achtergrond)
-Vergeet achtergrondplaatjes (of het moet wel een heeeeeel mooie rustige tile zijn)
Een goede tip om een kleuren pallet samen te stellen:
http://www.boxesandarrows.com/view/natural_selections_colors_found_in_nature_and_interface_design
Wil/kun je het zelf niet doen, dan zij hier een groot aantal colour schemes te vinden:
http://www.colorschemer.com/schemes/index.php
http://www.colorschemer.com/online.html
Paar kleine tips voor goed design:
http://www.htmlwijzer.nl/artikel/design.php
Usability:
Broodkruimels/breadcrums
http://www.w3use.nl/usability/broodkruimels.html
Link v.d. week:
Gratis stockfotos:
http://www.freeimages.co.uk/
http://www.stockvault.net/
BONUSlink:
http://www.tutorialized.com/
dinsdag 11 maart 2008
Les 5
Hallo......
Vanavond even wat theorie, wat lekkere tips en ook nog wat leuks.
Ten eerste hier een lijstje (willekeurige volgorde) met tips die in de loop v.d. aangevuld zullen worden.
1. Ontwerp voor je doelgroep
Bedenk van tevoren wat je doelgroep is. Een jong publiek bedien je heel anders dan een wat volwassener groep.
Een site van een advocaten kantoor bijvoorbeeld, moet vertrouwen en degelijkheid uitstralen. Een site voor een punklabel, juist niet.
2. Laat de bezoeker het gevoel hebben dat hij de boel onder controle heeft.
Neem de controle van de bezoeker niet over door pop-ups te laten verschijnen of browserpagina's te laten openen zonder de nodige knoppen erop. Ook het uitschakelen van muisknoppen of toetsen is geen goed idee.
Begin ook niet onmiddelijk met muziek te smijten (behalve als dat aansluit bij bv doelgroep)
3. Let op bij plaatjes
Zorg ervoor dat je plaatjes maar een paar kB groot zijn. Dat komen de paginas mooi binnen.
Zorg ervoor dat de verhoudingen van foto's ook binnen je ontwerp passen, zoniet aanpassen.
Goede gratis grafische editor GIMP
4. Het juiste gereedschap
Gebruik het juiste gereedschap voor de juiste website. flash is bijvoorbeeld erg mooi voor een portfolio-site, maar niet handig voor een website met veel tekst. Dan gebruik je gewoon ouderwetse html, dreamweaver.
5. Maak je boodschap duidelijk
Laat je bezoeker weten wat hij of zij kan vinden op je site. Maak de beginpagina van de site duidelijk, zodat in een oogopslag men weet wat de site te bieden heeft. Ook bezoekers die via een ander pagina op je site komen, moeten duidelijk kunnen zien waar het om gaat. Doe je dit niet, dan kan je site nog zo mooi zijn, maar binnen 20 seconden zijn je bezoekers weer weg.
6. Schep duidelijkheid
Verrassen van bezoekers is leuk, maar zorg wel dat je duidelijk bent. Schep geen verwarring doordat je verassend wilt zijn. Als een bezoeker langer dan 20 seconden moet nadenken waar iets voor dient, of hoe iets werkt, is de kan vrij groet dat hij ahaakt.
7. Geef voldoende informatie
Zorg dat je bezoekers voldoende informatie hebben. Als ze bijvoorbeeld iets kunnen downloaden, zet er dan bij hoeveel MB de download groot is.
Als je wilt dat mensen in contact me je treden, zorg dan dat alle mogelijk communicatie gegevens duidelijk en makkelijk te vinden zijn.
8. Testen enzzzzz.(saai? laat het een ander doen)
Test je site op verschillende browsers en als het
kan ook op andere pkatformen. Laat andere mensen eerlijk zeggen wat ze er van vinden, of het fijn werkt, of het duidelijk is. Je bent zelf namelijk vaak niet meer in staat om objectief en kritisch naar je eigen werk te kijken(als je er al zo lang mee bezig bent)
9. Controleer je links
Niet werkende links zijn een van de meest vervelende zaken die je op internet kunt tegenkomen. Zorg dat je links werken. Werkt er een niet, haal het dan weg. Dit geldt speciaal voor externe links naar nadere sites, controleer af en toe of ze nog bestaan.
10. Zorg voor een duidelijk en eenvoudige navigatie.
In een oogopslag moet duidelijk worden waar de navigatie zich bevind. Tevens dient de navigatie makkelijk te zijn en niet te diep. Ook vinden bezoekers het fijn om te weten waar ze zijn, dus let op pagina titel, maak wellicht gebruik van een kruimelpad.
Ook moet men met 1 druk op de toets weer op de beginpagina kunnen komen.
Dus die navigatie is erg belangrijk?
http://twinklemagazine.nl/nieuws.aspx?navid=1&id=2194&terms=DM&searchtype=2&fragment=True
Slechte navigatie:
http://www.google.nl/search?sourceid=navclient&hl=nl&ie=UTF-8&rlz=1T4GGLR_nlNL207NL207&q=examples+of+bad+website+navigation
FF wat doen...........
3D button (NL)
http://www.sitemasters.be/tutorials/11/1/522/Fireworks/3D-knop
Meerdere randen rond tekst
http://www.sitemasters.be/tutorials/11/1/523/nieuw/Meerdere_randen_rond_tekst
Punching shapes
http://www.sitemasters.be/tutorials/extern/660/Header_sidebar_with_curved_inside_corner_(VideoTutorial)
Website resolutie:
Ga je voor 800 bij 600
of 1024 bij 768
Wat wordt het meest gebruikt, en hoe ga je met verschillende resoluties om.
http://www.searchenginejournal.com/optimizing-screen-resolution-with-google-analytics-1024x768-vs-800x600/4896/
Resolutie test.
http://www.unk.edu/website/index.php?id=2184
OK fireworks dan weer:
Slicen? wat is dat?
http://www.video-tutes.com/player/player.php?id=1203&T_id=4
Huiswerk
http://www.zoekmachine-optimalisatie-seo.be/on-page-optimalisatie/wat-doe-ik-als-mijn-navigatie-structuur-suckt/
Maak een sitetree:
Link v.d. week:
8000 fonts...................gratis!!!
http://www.urbanfonts.com/
Vanavond even wat theorie, wat lekkere tips en ook nog wat leuks.
Ten eerste hier een lijstje (willekeurige volgorde) met tips die in de loop v.d. aangevuld zullen worden.
1. Ontwerp voor je doelgroep
Bedenk van tevoren wat je doelgroep is. Een jong publiek bedien je heel anders dan een wat volwassener groep.
Een site van een advocaten kantoor bijvoorbeeld, moet vertrouwen en degelijkheid uitstralen. Een site voor een punklabel, juist niet.
2. Laat de bezoeker het gevoel hebben dat hij de boel onder controle heeft.
Neem de controle van de bezoeker niet over door pop-ups te laten verschijnen of browserpagina's te laten openen zonder de nodige knoppen erop. Ook het uitschakelen van muisknoppen of toetsen is geen goed idee.
Begin ook niet onmiddelijk met muziek te smijten (behalve als dat aansluit bij bv doelgroep)
3. Let op bij plaatjes
Zorg ervoor dat je plaatjes maar een paar kB groot zijn. Dat komen de paginas mooi binnen.
Zorg ervoor dat de verhoudingen van foto's ook binnen je ontwerp passen, zoniet aanpassen.
Goede gratis grafische editor GIMP
4. Het juiste gereedschap
Gebruik het juiste gereedschap voor de juiste website. flash is bijvoorbeeld erg mooi voor een portfolio-site, maar niet handig voor een website met veel tekst. Dan gebruik je gewoon ouderwetse html, dreamweaver.
5. Maak je boodschap duidelijk
Laat je bezoeker weten wat hij of zij kan vinden op je site. Maak de beginpagina van de site duidelijk, zodat in een oogopslag men weet wat de site te bieden heeft. Ook bezoekers die via een ander pagina op je site komen, moeten duidelijk kunnen zien waar het om gaat. Doe je dit niet, dan kan je site nog zo mooi zijn, maar binnen 20 seconden zijn je bezoekers weer weg.
6. Schep duidelijkheid
Verrassen van bezoekers is leuk, maar zorg wel dat je duidelijk bent. Schep geen verwarring doordat je verassend wilt zijn. Als een bezoeker langer dan 20 seconden moet nadenken waar iets voor dient, of hoe iets werkt, is de kan vrij groet dat hij ahaakt.
7. Geef voldoende informatie
Zorg dat je bezoekers voldoende informatie hebben. Als ze bijvoorbeeld iets kunnen downloaden, zet er dan bij hoeveel MB de download groot is.
Als je wilt dat mensen in contact me je treden, zorg dan dat alle mogelijk communicatie gegevens duidelijk en makkelijk te vinden zijn.
8. Testen enzzzzz.(saai? laat het een ander doen)
Test je site op verschillende browsers en als het
kan ook op andere pkatformen. Laat andere mensen eerlijk zeggen wat ze er van vinden, of het fijn werkt, of het duidelijk is. Je bent zelf namelijk vaak niet meer in staat om objectief en kritisch naar je eigen werk te kijken(als je er al zo lang mee bezig bent)
9. Controleer je links
Niet werkende links zijn een van de meest vervelende zaken die je op internet kunt tegenkomen. Zorg dat je links werken. Werkt er een niet, haal het dan weg. Dit geldt speciaal voor externe links naar nadere sites, controleer af en toe of ze nog bestaan.
10. Zorg voor een duidelijk en eenvoudige navigatie.
In een oogopslag moet duidelijk worden waar de navigatie zich bevind. Tevens dient de navigatie makkelijk te zijn en niet te diep. Ook vinden bezoekers het fijn om te weten waar ze zijn, dus let op pagina titel, maak wellicht gebruik van een kruimelpad.
Ook moet men met 1 druk op de toets weer op de beginpagina kunnen komen.
Dus die navigatie is erg belangrijk?
http://twinklemagazine.nl/nieuws.aspx?navid=1&id=2194&terms=DM&searchtype=2&fragment=True
Slechte navigatie:
http://www.google.nl/search?sourceid=navclient&hl=nl&ie=UTF-8&rlz=1T4GGLR_nlNL207NL207&q=examples+of+bad+website+navigation
FF wat doen...........
3D button (NL)
http://www.sitemasters.be/tutorials/11/1/522/Fireworks/3D-knop
Meerdere randen rond tekst
http://www.sitemasters.be/tutorials/11/1/523/nieuw/Meerdere_randen_rond_tekst
Punching shapes
http://www.sitemasters.be/tutorials/extern/660/Header_sidebar_with_curved_inside_corner_(VideoTutorial)
Website resolutie:
Ga je voor 800 bij 600
of 1024 bij 768
Wat wordt het meest gebruikt, en hoe ga je met verschillende resoluties om.
http://www.searchenginejournal.com/optimizing-screen-resolution-with-google-analytics-1024x768-vs-800x600/4896/
Resolutie test.
http://www.unk.edu/website/index.php?id=2184
OK fireworks dan weer:
Slicen? wat is dat?
http://www.video-tutes.com/player/player.php?id=1203&T_id=4
Huiswerk
http://www.zoekmachine-optimalisatie-seo.be/on-page-optimalisatie/wat-doe-ik-als-mijn-navigatie-structuur-suckt/
Maak een sitetree:
Link v.d. week:
8000 fonts...................gratis!!!
http://www.urbanfonts.com/
dinsdag 4 maart 2008
Les 4
Vorige keer hebben we het een en ander in Fireworks gedaan zoals:
-tekst manipulatie
-intro in rolloverbuttons
Vanavond kijken we verder in Fireworks en behandelen:
-The button inspector
-annimated gifs
-Drop-Down Menus
-Patterned Text
-Paste Inside
Web Graphic Design Ideas and Tips
-tekst manipulatie
-intro in rolloverbuttons
Vanavond kijken we verder in Fireworks en behandelen:
-The button inspector
-annimated gifs
-Drop-Down Menus
-Patterned Text
-Paste Inside
Web Graphic Design Ideas and Tips
Abonneren op:
Posts (Atom)