Opdracht: Maak een vormgeving (geschikt voor meerdere devices), met een duidelijke huisstijl en visual, die aansluit bij jouw doelgroep, waarbij je rekening houdt met verschillende behoeftes binnen je doelgroep.
Trek een kaartje met: 1. Doel 2. Doelgroep 3. Onderwerp (dit is een globaal onderwerp en moet door jezelf nader worden bepaald)
Stap 1 Maak een blog met een aantal pagina’s Voor indeling zie http://annemiekepesch.tumblr.com/
Stap 2 – Maak een matrix waarmee je interface designs kunt beoordelen. Criteria Matrix : -‐ er moeten minstens 12 variabelen inzi6en (bij voorkeur onderverdeeld in categorieën) -‐ Bij voorkeur gemaakt in excell -‐ Er moet een wegingsprincipe in zijn verwerkt zijn ( wat telt zwaarder) -‐ Je moet kunnen komen tot een raEng van 1 tot 5 sterren * ** *** **** ****
zeer slecht slecht redelijk goed zeer goed
Licht de matrix toe in een tekst over waar volgens jouw goed webdesign aan moet voldoen. Ga daarin ook na of er verschil zit in het design of de designvrijheid voor verschillende doelen van een site. InformaEe kun je vinden in deze arEkelen (of zoek zelf naar arEkelen) • h6p://www.alistapart.com/arEcles/style-‐Eles-‐and-‐how-‐they-‐work/ • h6p://uxdesign.smashingmagazine.com/2012/05/30/design-‐process-‐ responsive-‐age/ • h6p://www.frankwatching.com/archive/2008/03/20/doel-‐en-‐doelgroep-‐ voor-‐je-‐website/ • Ongeveer een half A4-‐tje
Stap 3 – Research Jouw doel: zoek minstens 3 sites die ditzelfde doel nastreven en kijk welke elementen in het design dit doel ondersteunen maak screenshots van deze sites en benoem de elementen Jouw doelgroep: Ga je doelgroep beter leren kennen: maak een moodboard of board op pinterest van de leefwereld van jouw doelgroep. ( bv welke sites bezoeken ze, waar wonen ze, welke auto hebben ze, waar gaan ze op vakantie, welke boeken/tijdschriften lezen ze, wat eten ze enz.) Jouw onderwerp: Zoek naar allerhande beelden die iets te maken hebben met je onderwerp. Maak hiervan een moodboard of board on pinterest. Maak ook een mindmap over het onderwerp
Stap 4. Kies een responsive design opmaak Maak een keuze uit onderstaande sites (die allemaal een grote visual op home hebben) om je responsive design op te baseren. http://bradfrostweb.com/ http://trentwalton.com/ http://yiibu.com/ http://www.cacaotour.com/index.php/en/home www.barackobama.com/?source=primary-nav http://www.gravitatedesign.com/ http://foodsense.is/
Jouw ontwerp moet je uiteindelijk laten zien op de volgende formaten I phone 320 x 480 i pad 728 x 1024 ( staand) i mac 1920 – 1080 ( background!)
Stap 5 – maak een ‘schets’ van de homepage en een vervolgpagina (gebaseerd op je gekozen responsive design) waarop alle elementen staan die op je site te zien zijn. Hou daarbij rekening met de MBTI- types , zodat alle types allemaal bediend worden. Elementen die in ieder geval op de homepage moeten komen zijn: • logo • Navigatie menu bestaande uit max 6 buttons • één call to action button (tekst: “Pak nu je kans” of verzin het zelf) • Een grote visual • slogan (“Surpisingly Ordinary”, “Verrassend Voordelig”, “Een beetje vreemd maar wel lekker”, “Beleef en ervaar!” ….Of bedenk zelf) • footer • stukje tekst (http://projects.haykranen.nl/dummytekst/ • background
Elementen die in ieder geval op de vervolg pagina moeten komen zijn: • • • • •
logo navigatie menu ( met 6 elementen) subnavigatie ( met 5 elementen) footer content : tekst / foto / video
Stap 4 - huisstijl ontwerp (overall sfeer ) Logo Font ( denk ook aan slogan) Kleuren buttons ( verschillende soorten buttons call to action – normal- minder belangrijk) • Stijl en sfeer • Background • Gekozen Illustratie stijl/richting • • • •
Je maakt 3 heel verschillende huisstijlen! Daaruit kies je er uiteindelijk 1 om mee verder te gaan
Stap 5 - Main Visual Je maakt een main visual op basis van echte materialen zoals verf, potlood, papier, klei, breiwerk, borduren enz! Dus niet in photoshop gaan maken van allerlei foto’s en filters Pas daarna fotografeer je het en kun je het ev verder bewerken in photoshop. Doe eerst onderzoek naar verschillende soorten illustraties en kies bewust een bepaalde compositie! Voor inspiratie zie http://pinterest.com/annemikep/illustrations/
Stap 6 - Definitief ontwerp Dit maak je in 3 formaten (!) je moet bij jouw design kunnen vertellen waarom je wat hebt gedaan en waar je allemaal rekening mee hebt gehouden Schrijf hier een stukje tekst over. Rekening gehouden met oa: • welke sfeer afgestemd op je doelgroep en doel heb je gekozen • waarom deze visual en compositie? • button gebruik ( verschillende soorten buttons) • duidelijke huisstijl ontwikkelen (oa. kleuren en typografie) • typografie keuze • pagina vouw
Concreet lever je op: Blog met 7 onderdelen 1. Matrix beoordelen design + Tekst over “Wat is goed webdesign” 2. Research ( 3 onderdelen) 3. Functioneel ontwerp 4. Huisstijl ( 3 varianten) 5. Main visual 6. Definitief ontwerp mét toelichting ( tekst) 7. Overige opdrachten tijdens de lessen
opleveren week 3
Opleveren week 5 Opleveren week 8
Mail de blognaam zsm doch uiterlijk 29 nov naar
[email protected] Vermeld duidelijk je volledige naam en klas op je blog en ook in je mail naar mij toe… Voorbeeld blog
http://annemiekepesch.tumblr.com/
• • • • • • • •
Week 1 21-‐22 nov Week 2 28 – 29 nov Week 3 5 – 6 dec Week 4 12 – 13 dec Week 5 19-‐20 dec Week 6 9-‐10 jan Week 7 16 – 17 jan Week 8 23 – 24 jan
•
Herkansing : dinsdag 5 feb 2013
opleveren matrix herkansen matrix
huissEjl presentaEe in groepjes van 5 – (geen reguliere les
eindbeoordeling in groepjes van 5 – (geen reguliere les)
Je eindcijfer wordt bepaald door 1. Onderdeel 1 tekst en matrix : 2. Onderdeel 2 research 3. Onderdeel 3 functioneel ontwerp 4. Onderdeel 4 huisstijlen 5. Onderdeel 5 main visual 6. Onderdeel 6 Def ontwerp
20 % 10 % 10% 20% 20 % 20 %
Afwezigheid Ejdens de lessen zal in geval van twijfel de beoordeling negaEef beïnvloeden.
