“Plog de Dag” multidevice design
Het multidevice design voor Plog de Dag, een campagne om mensen aan te zetten tot het opruimen van zwerfafval dat op straat ligt. De uitdaging van dit project was om een ontwerp te maken dat responsive is. Dit werd gedaan met behulp van een style guide met daarin o.a. fonts, afbeeldingen en kleuren.
Die aangereikte informatie gebruikte ik om markdownschetsen te maken in meerdere formaten, om die vervolgens te itereren en zo tot een eindproduct te komen.
- Gebruikte tools: Adobe Illustrator, Adobe XD
- Individueel of team: Individueel
- Focus van Project: Huisstijl bestuderen en m.b.v. wireframes een multidevice design maken
Ook bij dit project heb ik weer gebruik gemaakt van een stijlanalyse. Het zorgt altijd voor een beter begrip van de opdracht(-gever) en zorgt er ook voor dat je een beter startpunt hebt.
Designers gaan tegenwoordig vaak te werk volgens het "mobile first" principe. Dit houdt in dat je als designer alle functies op een kleiner scherm moet proberen te zetten, omdat je dan later tijdens het ontwerpen van het desktop formaat veel meer ruimte hebt om dezelfde elementen op kwijt te kunnen.
Nog een reden om eerst een mobiele markdownschets te maken is omdat men steeds vaker eerst via hun smartphone een website bezoekt. Hierdoor zou de mobiele versie van een website meestal de prioriteit moeten krijgen, tenzij de website echt bedoeld is om op desktop te bekijken (zoals mijn portfolio).
Omdat de transitie tussen mobile en desktop vaak te groot is om in één keer te laten transformeren is er vaak een layout die tussendoor wordt geactiveerd. Door een scherm groter en kleiner te maken zie je dat dit formaat eigenlijk de elementen begeleidt naar de plekken waar ze uiteindelijk horen te staan.
Met het desktop formaat is er veel meer ruimte om elementen neer te zetten, maar moet je het kijkgedrag van de gebruiker ook meer begeleiden. Ook kan er vaak meer informatie worden getoond, zoals ik met de slider heb gedaan die citaten weergeeft.
Na de markdownschetsen kon het invullen van content zoals tekst, kleur, afbeeldingen en knoppen beginnen. De vormgeving heb ik naar aanleiding van de stijlanalyse gedaan.
Hetzelfde geldt voor het desktopformaat, alleen dan in de layout van de markdownschets die ik eerder had gemaakt. Een leuk detail dat ik aan deze versie heb toegevoegd is dat de mensen op de foto naast de aanmeldknop, ook daadwerkelijk naar de aanmeldknop wijzen om het kijkgedrag van de gebruiker te sturen.
