Introductie. Hoe zijn de lessen opgebouwd? Elke les : Bespreken we twee websites Theorie Aantal oefeningen tijdens de les Uitleg huiswerk

Transcriptie

1 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?

2 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

3 Wat is het belang van goed design? One minute wonders

4 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

5 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.

6 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.

7 Bovendien: 30% van onze hersencapaciteit wordt gebruikt voor visuele taken. Goed ontworpen communicatie en websites zijn dus vele malen effectiever.

8 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 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.

9 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!

10 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.

11 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

12 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).

13 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.

14 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).

15 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

16 Why Design MaAers to Me - Using Design to Make a Difference hap://

17 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?

18 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<on block itself should be clearly visible on the page, and each link should have a descrip<v <tle Secondary naviga<on, search fields, and outgoing links should not be dominant features of the page. If we make these items easy to find, and separate them visually from the content, we allow users to focus on the informa<on yet they ll know where to look when they re ready to move on to other content.

19 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?

20 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

21 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:// hap://

22 Volgende week: 2 studenten bespreken twee websites en raten deze. hap:// hap://

23 Opdracht Bjdens de les Individueel Tijdsduur: 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

24 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 Alle elementen gaan een verbinding aan met elkaar maar de leesbaarheid van de tekst is niet opbmaal Welke van deze 3 is het beste?

25 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

26 Opdracht voor volgende week: - Maak een blog en mail naar a.pesch@hva.nl ( 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:// Bles- and- how- they- work/ hap://uxdesign.smashingmagazine.com/2012/05/30/design- process- responsive- age/ hap:// en- doelgroep- voor- je- website/