project · 2020-04-08 · Could Do! (pluspunten) Externe Code. Google Maps, Soundcloud, YouTube,...
Transcript of project · 2020-04-08 · Could Do! (pluspunten) Externe Code. Google Maps, Soundcloud, YouTube,...
![Page 1: project · 2020-04-08 · Could Do! (pluspunten) Externe Code. Google Maps, Soundcloud, YouTube, LinkedIn, … Responsive. Werkend voor mobiel en tablet. Formulier. Vb.: Voor contact](https://reader034.fdocument.pub/reader034/viewer/2022050119/5f4f53bb2afa395c63034817/html5/thumbnails/1.jpg)
project
s t a t i s c h e w e b s i t e
Web&het goede doel
![Page 2: project · 2020-04-08 · Could Do! (pluspunten) Externe Code. Google Maps, Soundcloud, YouTube, LinkedIn, … Responsive. Werkend voor mobiel en tablet. Formulier. Vb.: Voor contact](https://reader034.fdocument.pub/reader034/viewer/2022050119/5f4f53bb2afa395c63034817/html5/thumbnails/2.jpg)
Over het projectDe opdracht01
![Page 3: project · 2020-04-08 · Could Do! (pluspunten) Externe Code. Google Maps, Soundcloud, YouTube, LinkedIn, … Responsive. Werkend voor mobiel en tablet. Formulier. Vb.: Voor contact](https://reader034.fdocument.pub/reader034/viewer/2022050119/5f4f53bb2afa395c63034817/html5/thumbnails/3.jpg)
Goed Doel
Ontwerp een statische website voor een goed doel. Heb je geen inspiratie?
Kijk dan eens in de lijst van https://dewarmsteweek.be/ of bedenk zelf een
goed doel waarvoor jij je wil inzetten.
NEHI Research Foundation
Palliatief Netwerk
Kinderwens VZW
Auxilia
Het vangnet https://dewarmsteweek.be/
Kras Jeugdwerk
Little Hearts
Berrefonds VZW
LostDogzzz
…
![Page 4: project · 2020-04-08 · Could Do! (pluspunten) Externe Code. Google Maps, Soundcloud, YouTube, LinkedIn, … Responsive. Werkend voor mobiel en tablet. Formulier. Vb.: Voor contact](https://reader034.fdocument.pub/reader034/viewer/2022050119/5f4f53bb2afa395c63034817/html5/thumbnails/4.jpg)
01Moodboard
02Wireframes
03Ontwerp
04User Testing Foutloze HTML
& CSS Code
06Visueel ontwerp
integreren
07Usability
085 verschillende
inhouden en links
09Overzichtelijke
homepage
05
10Werkendenavigatie
11Professionele en foutloze content
12(semi)-professioneel
fotomateriaalMus
tDo!
![Page 5: project · 2020-04-08 · Could Do! (pluspunten) Externe Code. Google Maps, Soundcloud, YouTube, LinkedIn, … Responsive. Werkend voor mobiel en tablet. Formulier. Vb.: Voor contact](https://reader034.fdocument.pub/reader034/viewer/2022050119/5f4f53bb2afa395c63034817/html5/thumbnails/5.jpg)
Could Do!(pluspunten)
Externe CodeGoogle Maps,
Soundcloud,
YouTube,
LinkedIn, …
ResponsiveWerkend voor
mobiel en tablet
FormulierVb.: Voor contact
of nieuwsbrief
![Page 6: project · 2020-04-08 · Could Do! (pluspunten) Externe Code. Google Maps, Soundcloud, YouTube, LinkedIn, … Responsive. Werkend voor mobiel en tablet. Formulier. Vb.: Voor contact](https://reader034.fdocument.pub/reader034/viewer/2022050119/5f4f53bb2afa395c63034817/html5/thumbnails/6.jpg)
Gebruik maken van grid systems
vb.: flexbox of bootstrap
Je website mag een onepager zijn
Can Do!(no problemo)
![Page 7: project · 2020-04-08 · Could Do! (pluspunten) Externe Code. Google Maps, Soundcloud, YouTube, LinkedIn, … Responsive. Werkend voor mobiel en tablet. Formulier. Vb.: Voor contact](https://reader034.fdocument.pub/reader034/viewer/2022050119/5f4f53bb2afa395c63034817/html5/thumbnails/7.jpg)
Proces Kalender
Maandag Brainstorm, wireframes
(papier & digitaal), ux boards
Dinsdag
Woensdag
Donderdag
Ontwerp fase09u00 – wireframe & ux board opleveren
Code schrijven09u00 – ontwerp en inhoud opleveren
User Testing09u00 – feedback op ontwerp verzamelen
Vrijdag Opleveren totaalprojectGenieten van de kerstvakantie
![Page 8: project · 2020-04-08 · Could Do! (pluspunten) Externe Code. Google Maps, Soundcloud, YouTube, LinkedIn, … Responsive. Werkend voor mobiel en tablet. Formulier. Vb.: Voor contact](https://reader034.fdocument.pub/reader034/viewer/2022050119/5f4f53bb2afa395c63034817/html5/thumbnails/8.jpg)
Brainwritingeen creatieve sessie die ook deminder dominante deelnemer
aan bod laat komen
02
![Page 9: project · 2020-04-08 · Could Do! (pluspunten) Externe Code. Google Maps, Soundcloud, YouTube, LinkedIn, … Responsive. Werkend voor mobiel en tablet. Formulier. Vb.: Voor contact](https://reader034.fdocument.pub/reader034/viewer/2022050119/5f4f53bb2afa395c63034817/html5/thumbnails/9.jpg)
Brai
nwri
ting
![Page 10: project · 2020-04-08 · Could Do! (pluspunten) Externe Code. Google Maps, Soundcloud, YouTube, LinkedIn, … Responsive. Werkend voor mobiel en tablet. Formulier. Vb.: Voor contact](https://reader034.fdocument.pub/reader034/viewer/2022050119/5f4f53bb2afa395c63034817/html5/thumbnails/10.jpg)
Brainwriting
Per 6 studenten
Schrijf enkele ruwe ideeën neer op een blad papier (in stilte)
Geef door aan je collega
Collega leest dit > voegt eigen ideeën toe
Iedereen voegt toe aan elk papier > iedereen kan zijn ideeën spuien
30 ‘
![Page 11: project · 2020-04-08 · Could Do! (pluspunten) Externe Code. Google Maps, Soundcloud, YouTube, LinkedIn, … Responsive. Werkend voor mobiel en tablet. Formulier. Vb.: Voor contact](https://reader034.fdocument.pub/reader034/viewer/2022050119/5f4f53bb2afa395c63034817/html5/thumbnails/11.jpg)
Brainwriting
Laatste ronde
Samen ideeën bespreken
Per groep > beste ideeën omcirkelen
DAARNA Individueel aan het werk!
10 ‘
![Page 12: project · 2020-04-08 · Could Do! (pluspunten) Externe Code. Google Maps, Soundcloud, YouTube, LinkedIn, … Responsive. Werkend voor mobiel en tablet. Formulier. Vb.: Voor contact](https://reader034.fdocument.pub/reader034/viewer/2022050119/5f4f53bb2afa395c63034817/html5/thumbnails/12.jpg)
Wireframeseen essentiële stap om
ideeën te vertalen in bruikbare schetsen voor
digitale producten
03
![Page 13: project · 2020-04-08 · Could Do! (pluspunten) Externe Code. Google Maps, Soundcloud, YouTube, LinkedIn, … Responsive. Werkend voor mobiel en tablet. Formulier. Vb.: Voor contact](https://reader034.fdocument.pub/reader034/viewer/2022050119/5f4f53bb2afa395c63034817/html5/thumbnails/13.jpg)
Wireframing
Weet wat je bouwt!
Welke inhoud ga ik vermelden?
Maak een lijst van alle elementen die je in het ontwerp wil gebruiken
Deel ze in op prioriteit!
10 ‘
![Page 14: project · 2020-04-08 · Could Do! (pluspunten) Externe Code. Google Maps, Soundcloud, YouTube, LinkedIn, … Responsive. Werkend voor mobiel en tablet. Formulier. Vb.: Voor contact](https://reader034.fdocument.pub/reader034/viewer/2022050119/5f4f53bb2afa395c63034817/html5/thumbnails/14.jpg)
Wireframing
On Paper
PAPIER EN PEN / POTLOOD (computers DICHT!!!)
Denk aan functionaliteit, niet aan design! Stel jezelf in vraag!
Welke inhoud zet ik in mijn navigatie? Is dit duidelijk voor de klik?
Contactinformatie? Zoekveld?
Belangrijkste call-to-action?
Ga ik interactieve elementen toevoegen? Illustraties? Foto’s?
Hoe kan ik inhoud door beelden vervangen?
Koppen en subkoppen benoemen!
Is mijn verhaal gebruiksvriendelijk?
20 ‘
![Page 15: project · 2020-04-08 · Could Do! (pluspunten) Externe Code. Google Maps, Soundcloud, YouTube, LinkedIn, … Responsive. Werkend voor mobiel en tablet. Formulier. Vb.: Voor contact](https://reader034.fdocument.pub/reader034/viewer/2022050119/5f4f53bb2afa395c63034817/html5/thumbnails/15.jpg)
Wireframing
Go Digital
Daarna PC
Werk met basiskleuren (wit,zwart en grijs)
Maximaal 2 fonts (schreefloos / schreef)
Vermijd grafische elementen en foto’s (simpele blokken met icoon of kruis)
GEEN kleurgebruik, ontwerp
![Page 16: project · 2020-04-08 · Could Do! (pluspunten) Externe Code. Google Maps, Soundcloud, YouTube, LinkedIn, … Responsive. Werkend voor mobiel en tablet. Formulier. Vb.: Voor contact](https://reader034.fdocument.pub/reader034/viewer/2022050119/5f4f53bb2afa395c63034817/html5/thumbnails/16.jpg)
WireframingGo Digital
Illustrator
Adobe XD
https://www.adobe.com/products/xd.html
Photoshop
Sketch
https://www.sketch.com/
Balsamiq
https://balsamiq.com/
Proto
https://proto.io/
Mockplushttps://www.mockplus.com/?r=trista
Axure
https://www.axure.com/
20 ‘
![Page 17: project · 2020-04-08 · Could Do! (pluspunten) Externe Code. Google Maps, Soundcloud, YouTube, LinkedIn, … Responsive. Werkend voor mobiel en tablet. Formulier. Vb.: Voor contact](https://reader034.fdocument.pub/reader034/viewer/2022050119/5f4f53bb2afa395c63034817/html5/thumbnails/17.jpg)
PrototypingYou cannot understand
good design, if you do notunderstand people
04
![Page 18: project · 2020-04-08 · Could Do! (pluspunten) Externe Code. Google Maps, Soundcloud, YouTube, LinkedIn, … Responsive. Werkend voor mobiel en tablet. Formulier. Vb.: Voor contact](https://reader034.fdocument.pub/reader034/viewer/2022050119/5f4f53bb2afa395c63034817/html5/thumbnails/18.jpg)
Prototype
Websitestructuur – Customer Journey
Alles stapsgewijs uitwerken
Er is een wireframe voor elke pagina / button / link
Elke wireframe is genummerd
Hoe navigeren gebruikers van pagina naar pagina
TIP - Maak gebruik van de ruimte
https://gridprint.in/
https://sketchize.com/
20 ‘
![Page 19: project · 2020-04-08 · Could Do! (pluspunten) Externe Code. Google Maps, Soundcloud, YouTube, LinkedIn, … Responsive. Werkend voor mobiel en tablet. Formulier. Vb.: Voor contact](https://reader034.fdocument.pub/reader034/viewer/2022050119/5f4f53bb2afa395c63034817/html5/thumbnails/19.jpg)
UX BoardMoodboard
visualiseer je concept, idee, gedachte, gevoel
voor je ontwerpt
05
![Page 20: project · 2020-04-08 · Could Do! (pluspunten) Externe Code. Google Maps, Soundcloud, YouTube, LinkedIn, … Responsive. Werkend voor mobiel en tablet. Formulier. Vb.: Voor contact](https://reader034.fdocument.pub/reader034/viewer/2022050119/5f4f53bb2afa395c63034817/html5/thumbnails/20.jpg)
My UX Board
my_ui_moodboard.ai
andere UX boards
uxboards.zip
UX
Boar
ds
![Page 21: project · 2020-04-08 · Could Do! (pluspunten) Externe Code. Google Maps, Soundcloud, YouTube, LinkedIn, … Responsive. Werkend voor mobiel en tablet. Formulier. Vb.: Voor contact](https://reader034.fdocument.pub/reader034/viewer/2022050119/5f4f53bb2afa395c63034817/html5/thumbnails/21.jpg)
—Someone Famous
“Don’t try to beoriginal, just tryto be good”
Zoek inspiratie voor patronen en ideeën
https://www.pinterest.com/
https://dribbble.com/
https://www.awwwards.com/
https://www.behance.net/
Kijk naar het werk van je concurrent!
![Page 22: project · 2020-04-08 · Could Do! (pluspunten) Externe Code. Google Maps, Soundcloud, YouTube, LinkedIn, … Responsive. Werkend voor mobiel en tablet. Formulier. Vb.: Voor contact](https://reader034.fdocument.pub/reader034/viewer/2022050119/5f4f53bb2afa395c63034817/html5/thumbnails/22.jpg)
—Someone Famous
“Don’t try to beoriginal, just tryto be good”
Fonts, kleuren
https://fonts.google.com/
https://color.adobe.com/
https://coolors.co/
![Page 23: project · 2020-04-08 · Could Do! (pluspunten) Externe Code. Google Maps, Soundcloud, YouTube, LinkedIn, … Responsive. Werkend voor mobiel en tablet. Formulier. Vb.: Voor contact](https://reader034.fdocument.pub/reader034/viewer/2022050119/5f4f53bb2afa395c63034817/html5/thumbnails/23.jpg)
DinsdagochtendInleveren 08u30
Wireframes/ PrototypesUX Board
Canvas – WebDay 1
ZIP – naam_voornaam.zip(geen mappen!!)
naam_voornaam_proto.pdfnaam_voornaam_uxboard.pdf
Deadline 1