Introductie Hoe zijn de lessen opgebouwd? Elke les : Bespreken we twee websites Theorie Aantal oefeningen tijdens de les Uitleg ‘huiswerk’ Vandaag: Uitleg van de overall opdracht voor dit vak + Wat is goed webdesign?
Opbouw lessenserie • • • • • • •
Les 1: wat is goed design? Les 2: gestalt Les 3: MBTI Les 4: buttons and backgrounds Les 5: main visual Les 6: stijl en sfeer , gulden snede in webdesign Les 7 : metaforen + trends in webdesign
• Les 8+9 beoordelen en feedback
• Wat is het belang van goed design? • One minute wonders • http://vimeo.com/47997795 • http://vimeo.com/37591135
Klant zul je vaak horen zeggen: “it would be nice if we could have a sexy interface, but people care more about what the site does than how it looks”
• Would this person show up to a job interview in their pajamas because people only care about what they can do and not how they look? If they did, I’d bet they’d discover that thinking is flawed.
• AAracBve things make people feel good, which in turn makes them think more creaBvely. How does that make something easier to use? Simple, by making it easier for people to find soluBons to the problems they encounter. • A"rac&ve things actually work be"er.
Bovendien: 30% van onze hersencapaciteit wordt gebruikt voor visuele taken. Goed ontworpen communicatie en websites zijn dus vele malen effectiever.
Het slimme onderbewuste: de über mul&-‐processor Heel eenvoudig uitgelegd, komt het er op neer dat je onbewuste een über mulB-‐processor heeJ en je bewuste eigenlijk daar achteraan hobbelt met een eenvoudige chip. Je bewuste kan 60 b/s verwerken, terwijl je onbewuste met eenvoud 11.200.000 b/s aan impulsen er doorheen jaagt. Eén theorie zou kunnen zijn dat je onbewuste dus alBjd ‘aan’ staat en filtert wat relevant voor je is. Zo kan het dus komen dat je op een feestje een goed gesprek kunt hebben, terwijl je ergens achter je in eens jouw naam hoort vallen.
Onderwerp : Wat
is goed design?
Doel is dat jullie niet meteen roepen dat een site mooi of lelijk is maar dat jullie eerst eens goed gaan kijken en pas daarna je oordeel velt!
Good design is about the relaBonships between the elements involved, and creaBng a balance between them Good design is Bmeless. Users are pleased by the design but drawn to the content The most important point to keep in mind is that design is about communicaBon. If you create a website that works and presents informaBon well, but looks ugly or fails to fit with the client’s brand, no one will want to use it. Similarly, if you make a beauBful website that is hard to use or inaccessible, people will leave.
Er bestaat een wildgroei aan funcBenamen voor de grafisch vormgever: -‐ user experience designer, -‐ user Interface designer, -‐ visual designer -‐ visual interface designer De grenzen tussen de vakgebieden vervagen. Wie draagt welke verantwoordelijkheid? de interacBe ontwerper gaat over funcBe, front-‐end developer gaat over techniek
de grafisch vormgever gaat over vorm
Grafisch vormgeven is het structureren en presenteren van informatie. ‘Vormgevers gaan een stap verder dan de geschreven inhoud. Ze maken gebruik van vele non-verbale elementen om de perceptie te sturen en de beoogde respons bij de gebruiker op te roepen.’ Vormgeven is een creaBeve discipline. Gert Dumbar zegt hierover: “CreaBviteit zou ik willen verbinden met iets dat bekend staat als ‘serendipiteit’”. Serendipiteit is het vinden van iets onverwachts en bruikbaars terwijl je op zoek bent naar iets totaal anders (Wikpedia).
Wordt geen stylingfreak! een grafisch vormgever die een wireframe leAerlijk inkleurt begaat een grote vergissing en geeJ zijn vak weg. De interacBe ontwerper verstaat logischerwijze niet de kunst in vorm en layout te denken. Waar een grafisch vormgever misschien nog kan denken in ‘plaatjes’, denkt de vormgever van nieuwe media in relaBes.
De taken van de vormgever : • Denk niet in schilderijtjes maar in relaBes. Ontwerp een beeldtaalsystemaBek (met als doel een consistente brand en user experience) die rekening houdt met context, device en doelgroep; • Word geen stylingfreak. De vormgever structureert en presenteert informaBe en is verantwoordeljk voor de visuele vertaling van het merk; • Focus op merk en idenBteit en laat funcBe en interacBe over aan de interacBe ontwerper; • “Vormgeven is een creaBeve discipline. Vormgevers kijken naar het grotere geheel en maken creaBef en prakBsch gebruik van wat ze daar vinden. Vaak zijn de resultaten daarom niet alleen probleemoplossend, maar ook verrassend.” (Vormgeving telt, BNO 2001).
Maar wat is nu goed
design?
Opdracht: - In groepjes van 2 - Tijdsduur: 10 minuten - Beschrijf een aantal ( 5 a 10) elementen waaraan je ‘goed design’ voor een website denkt te kunnen herkennen! maak hiervan een matrix om te kunnen bepalen hoeveel ‘sterren’ een site krijgt? - Zoek een uitgesproken voorbeeld van slecht design en probeer te benoemen waarom dit slecht is…
Why Design MaAers to Me -‐ Using Design to Make a Difference hAp://www.youtube.com/watch?v=CJT340fooKA
1. Doel …is dat helder? Wat kun je verwachten op deze site ? Wordt er één hoofdboodschap gecommuniceerd? 2. Wekt de site meteen vertrouwen op? Zijn dit professionals of amateurs? 3. Doelgroep .. kun je die herleiden? Komt een bezoeker vaak op deze site of eenmalig? 4. Is de pagina makkelijk scanbaar ? Een bezoeker wil in één oogopslag kunnen zien of de landingspagina aansluit bij zijn behoe8e. Een makkelijk scanbare pagina is om deze reden essen<eel. Gebruik weinig tekst, een groot le?ertype, veel witruimte en grote elementen (iconen en bu?ons). Rust <> complexiteit
5. Witruimte ? hoe is daar mee omgegaan? Is het niet te vol?
6. Zijn er opvallende beeldelementen ? bv foto, illustraBe, of video? Zijn die ondersteunend aan het doel? Een video beperkt de noodzaak tot tekstuele uitleg, wat de rust in de pagina ten goede komt.
7. Is de interface helder? Hoofdmenu? Submenu ? Footer? Is het helder waar je keuzes moet maken? Zien buAons eruit als buAons? Is er een duidelijke call to acBon buAon? Dode links? The main naviga
8. Leesbaarheid? Goed leesbare leAers en leAergrooAe. Kolommen hoe breed zijn ze? Is er binnen een tekst verschil in alinea’s ? zijn er streamers? Worden er bullets of vinkjes gebruikt voor een overzichtelijke presentaBe? 9. Overall sfeer? Is die waarneembaar? Eigen sBjl/sfeer? HuissBjl herkenbaar? heb je het gevoel dat je op elke pagina wel op dezelfde site blijJ? a cohesive theme or style should exist across all site pages
10. Is de site geschikt voor meerdere devices? Schaalbaar?
11. Hoe origineel is het ontwerp? Verrassend? 12. Kleurgebruik? kleur communiceert meer dan smaak. En wanneer je teveel kleur op een website gebruikt en als het ware alle onderdelen gaan schreeuwen om aandacht omdat ze gekleurd zijn, kan dat extreem verwarrend en overrompelend overkomen.
13. Hoe wordt omgegaan met de paginavouw? Met name op de home
Opdracht • Met z’n twee-‐en • Bjdsduur: 10 minuten • Bekijk deze sites en beoordeel ze op alle punten die we net hebben behandeld. Geef 1 tot 5 sterren • hAp://www.heineken.com/nl/Home.aspx • hAp://www.brightalley.nl
Volgende week: 2 studenten bespreken twee websites en raten deze. • hAp://www.witcommunicaBe.nl/ • hAp://www.pamelalovenyc.com/home/
Opdracht Bjdens de les… • Individueel • Tijdsduur: 10-‐15 min Download het file happy birthday oefening.psd van het intranet Met de elementen in dit file ga je een composiBe maken die volgens jou de beste is…. Je mag de elementen niet vergroten /verkleinen of hoe dan ook aanpassen. Wel draaien en verplaatsen… Upload het file in jpg formaat…
Neerwaarste negaBeve lading door diagonaal Het blijven losse elementen die geen verbinding met elkaar aangaan
Je onderscheid nu wel twee groepen : de wolken en het vliegtuig met tekst
Welke van deze 3 is het beste ?
Alle elementen gaan een verbinding aan met elkaar maar de leesbaarheid van de tekst is niet opBmaal
• hAp://designwashere.com/80-‐inspiring-‐ quotes-‐about-‐design/ • Kies en quote die je het meeste aanspreekt en Leg uit waarom • Zet hem op de eerste pagina van je blog
Opdracht voor volgende week: -‐ Maak een blog en mail naar
[email protected] ( zet op je blog je opdracht en jouw quote) -‐ maak een matrix om te beoordelen wat een goed web-‐ontwerp is ( opleveren 5/6 dec) -‐ Schrijf een tekst over waar volgens jouw goed webdesign aan moet voldoen. ( opleveren 5/6 dec) Ga daarin ook na of er verschil zit in het design of de designvrijheid voor verschillende doelen van een site. InformaBe kun je vinden in deze arBkelen (of zoek zelf naar arBkelen) • hAp://www.alistapart.com/arBcles/style-‐Bles-‐and-‐how-‐they-‐work/ • hAp://uxdesign.smashingmagazine.com/2012/05/30/design-‐process-‐ responsive-‐age/ • hAp://www.frankwatching.com/archive/2008/03/20/doel-‐en-‐doelgroep-‐ voor-‐je-‐website/
