diff --git a/docs/INSTRUCTIONS.md b/docs/INSTRUCTIONS.md index 0ef7fb51..45aaea71 100644 --- a/docs/INSTRUCTIONS.md +++ b/docs/INSTRUCTIONS.md @@ -47,109 +47,6 @@ Deze leertaak wordt behandeld in de eerste week van sprint 1 met verschillende w - - - - -## Visuele hiërarchie en Breakdown schets (Woensdag) - - - -Dit gaat over de ontwerpfase: - -1. Hiërarchie bepalen -Pak je (laatste) ontwerpschets en vraag jezelf eens af: “Wat moeten mensen als eerste zien?” Omcirkel de belangrijkste informatie, belangrijke details en achtergrondinformatie. -2. Variaties schetsen -Schets minimaal 8 verschillende versies waarin je visuele hiêrarchie aanbrengt door middle van grootte, positie op het scherm, witruimte en kleur/contrast. -3. Feedback -Bespreek al je schetsen in groepjes van 3. Leg bij elke schets uit hoe je visuele hiërarchie hebt toegepast. Geef elkaar tips en tops en schrijf dit op. -4. Nieuwe versie schetsen -Schets een nieuwe versie van je visitekaartje en maak een breakdown - - - -[Joshua Porter](http://bokardo.com/principles-of-user-interface-design/) schrijft in zijn artikel over _principles of user interface design_: -> A strong visual hierarchy is achieved when there is a clear viewing order to the visual elements on a screen. Most people don't notice visual hierarchy but it is one of the easiest ways to strengthen (or weaken) a design - -Visuele hiërarchie is belangrijk in webdesign. Het vertelt mensen waar ze moeten kijken en welke dingen op het scherm het belangrijkst zijn. -Visuele hiërarchie kun je op verschillende manieren bereiken, zoals grootte van tekst of elementen, kleur gebruik en contrast, witruime en positie van elementen op het scherm. - -Herontwerp je visitekaartje waarbij je goed rekening houdt met de visuele hiërarchie. Je leert wat visuele hiërarchie is en hoe je het kan toepassen in web design. - -### Ontwerpen -In de ontwerpfase neem je ontwerpbeslissingen en zorg je dat je precies weet wat je moet gaan bouwen. - -#### Aanpak schetsen - -Visuele hiërarchie schetsen - -1. Hiërarchie bepalen - -Pak je (laatste) ontwerpschets en omcirkel de belangrijkste informatie, belangrijke details en achtergrondinformatie (wat moeten mensen als eerste zien?) - -2. Variaties schetsen - -Schets minimaal 8 verschillende versies waarin je door middel van grootte, kleur/contrast, witruimte en/of positie van de informatie visuele hiêrarchie aanbrengt. - -3. Feedback - -Bespreek al je schetsen in groepjes van 3. Leg bij elke schets uit hoe je visuele hiërarchie hebt toegepast. Geef elkaar tips en tops en schrijf dit op. - -4. Uitwerken - -Schets een nieuwe definitieve versie van je visitekaartje. Schrijf op wat de belangrijkste informatie, belangrijke details en achtergrondinformatie is en hoe je visuele hierarchie hebt toegepast. - -#### Materiaal ontwerpfase - -- [Design Principles: Dominance, Focal Points And Hierarchy](https://www.smashingmagazine.com/2015/02/design-principles-dominance-focal-points-hierarchy/) -- [Communicating a Message Through Visual Hierarchy](https://designmodo.com/visual-hierarchy/) -- [Visual Hierarchy: How Well Does Your Design Communicate?](http://vanseodesign.com/web-design/visual-hierarchy/) -- [Korte video over layout en compositie @ YouTube](https://www.youtube.com/watch?v=a5KYlHNKQB8) - -#### Breakdown Schets - -Introduction HTML: https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML -https://developer.mozilla.org/en-US/docs/Web/HTML - -- [HTML semantics @ YouTube](https://www.youtube.com/watch?v=bOUhq46fd5g) - - - -Deze opdracht is done als: - -- [ ] Je schetsen staan in de wiki van je visistekaartje-repository, per schets is beschreven hoe de visuele hierarchie is toegepast -- [ ] Breakdown gemaakt met HTML - - - - - -## Javascript en Interactie (Donderdag) - -Uitleg opdracht, aanpak per fases van de DLC en bronnen. - -Dit gaat over de Bouwfase en testen(?): - -Iets met javascript doen - -en een mini PE introductie - - - - - -## Code/Design Review visitekaartje (Vrijdag) - -Uitleg opdracht, aanpak per fases van de DLC en bronnen. - -Dit gaat over de testfase: - -Waarop checken? - -Hoe schrijf je een issue - -Wat doe je hiermee? - - - - - ## Definition of Done Deze opdracht is done als: