Multi Device Ontwerp Rotterdam

Bij dit project was het doel om te leren een visuele identiteit analyseren en toepassen, te werken met grids en een responsive ontwerp te designen. Er werden expres schermformaten gegeven die niet precies in de stijlguide/ het designsysteem van Rotterdam stonden.

Spring naar concept

Gebruikte Programma's:

Adobe Illustrator
Adobe XD

Design Challenge + Project Beschrijving

"Maak een Multi device ontwerp voor de campagne
Plog de dag in de huisstijl van de Gemeente Rotterdam waarin de verschillende functies en de aangeleverde content zijn verwerkt."

De campagne van de Gemeente Rotterdam Plog De Dag' gaat over hardlopend zwerfafval verzamelen. Het doel is dat zoveel mogelijk mensen zit gaan doen, en zich voor deze campagne gaan inschrijven. De call to action is dus erg belangrijk. De visuele identiteit van de Gemeente Rotterdam moet op alle schermen herkenbaar, consequent en consistent naar voren komen.

De challenge zat hem ook in het kiezen van waar je de informatie vandaan haalt. Ik kon mijn design meer baseren op de website van Rotterdam op dit moment, of op de het gegeven design systeem van Rotterdam.

De schermgroottes die ik heb gekregen om uit te werken (breedte) zijn:

592 pixels
992 pixels
1200 pixels

Bij het project moest ik mij ook aan de leesbaarheidsregels houden. Deze richtlijnen zijn:

font-size minimaal 1 em (16 pixels)
regelbreedte: tussen de 20 en 40 em (320 en 640 pixels)

Verder mag het ontwerp ook iets afwijken van het originele design, als de stijl nog maar herkenbaar is.

(rotterdam.nl, 2023)

Analyse visuele identiteit

Voordat ik begin met het maken van de wireframes heb ik goed de stijl geanalyseerd. Er stond erg veel informatie in het design systeem document, dus ik heb alleen de belangrijkste punten voor mijn design genoteerd.

Lo-fi wireframes + Grids

Na het gridsysteem van Rotterdam te begrijpen, zet ik in Adobe XD mijn eigen grids op. Dit doe ik eerst voor de groottes 592 pixels en 1200 pixels, omdat het uiteindelijke design van 992 een tussensprong wordt tussen deze twee.

Ik heb meerdere verschillende schetsen gemaakt, die andere manieren laten zien van informatie weergeven.

Column Layout

Gutters van 16 pixels
4 columns breed
Zijruimte van 24 pixels op alle elementen behalve de hoofdfoto
Column width van 124 pixels.

Variaties

Bij het maken van de eerste lo-fi schermen heb ik geprobeerd vooral met de titels, images en quotes te spelen. Variatie 1 was heel standaard, van broodtekst naar image.
Bij lo-fi 2 heb ik gespeeld met het idee om de titels in de image te zetten. Ook heb ik de quotes anders vorm gegeven, met een blokje met een image ernaast.
Bij lo-fi 3 heb ik het filmpje verderop in de pagina gezet, en de quotes verspreid, uiteindelijk heb ik gekozen om variatie 3 uit te werken.

Column Layout

Gutters van 16 pixels
16 columns breed
Zijruimte van 94 pixels op alle elementen behalve de hoofdfoto
Column width van 69 pixels.

Variaties

Bij het maken van de de lo-fi heb ik geprobeerd de content van het mobiele scherm op een interessante manier om te zetten naar het desktop scherm.
Uiteindelijk heb ik gekozen om variatie 3 uit te werken. Deze had meer afwijking dat de andere wireframes, met de images die buiten de zij margin uitsteken.

Me-fi's + verwerkte feedback

Na een keuze gemaakt te hebben met de designs die ik ga uitwerken, is het tijd om het design in te vullen. Hier onder kan je de meerdere gemaakte iteraties zien. De verwerkte feedback staat erbij vermeld.

Column Layout

Gutters van 16 pixels
4 columns breed
Zijruimte van 24 pixels op alle elementen behalve de hoofdfoto
Column width van 124 pixels.

Verwerkte feedback

Me-fi mobiel 2:

De titels van de tekst groter gemaakt zodat er een groter verschil is met de broodtekst.
Call to action boven-en onderaan gezet, en niet in het midden
Vorm van de foto aangepast (afgeronde hoek toegevoegd)
De quotes meer body gegeven (door witruimte en tekst grootte)
Meer witruimte toegevoegd en deze consistenter gemaakt tussen blokken.
Zelf er verder voor gekozen om de buttons in de footer vierkanten te maken.

Me-fi mobiel 3:

De witruimte van 32 pixels consistent gemaakt.
De quote aangepast, de naam van het persoon voorop en de functie achter. Ook is de naam dikgedrukt, en de functie niet.
De afgeronde hoeken van de plaatjes consistent gemaakt met het desktop design

Me-fi mobiel 4:

Call to action groter gemaakt
Font van 1 em naar 1.125 em (16 naar 18 px)
Subkoppen font van 32 px naar 36 px
De witruimte tussen teksten en foto's verdubbels (32 pixels naar 64 pixels)

Column Layout

Gutters van 16 pixels
4 columns breed
Zijruimte van 24 pixels op alle elementen behalve de hoofdfoto
Column width van 124 pixels.

Verwerkte feedback

Me-fi Desktop 2:

De hoeken van afbeeldingen die zijn afgerond zijn consistent gemaakt.
De titel krachtiger maken. Die is nu wat groter gemaakt en naar boven geschoven.
De call to action groter. Het knopje is nu groter, het font is groter en de tekst is dikgedrukt
Bij de quote de naam van het persoon voorop gezet en dikgedrukt gemaakt, en de functie van het persoon niet dikgedrukt
Een navbalk toegepast in plaats van een hamburger menu.
De witregels consistenter gemaakt. (zie voorbeeld: rond de video) Deze is op sommige plekken veranderd van 32 pixels naar 64 pixels.

Me-fi Desktop 3:

De verticale witruimtes tussen onderdelen veranderd van 64px naar 96px.
Beide call to actions groter gemaakt. (font 24px naar 28px)

Lo-fi Tablet scherm

Na het grootste en het kleinste formaat af te hebben, is het tussenformaat aan de beurt. Deze hoefde voor de opdracht niet uitgewerkt tot een me-fi ontwerp, dus bleef Lo-fi. Ik heb hier twee varianten gemaakt. Ik heb vooral geprobeerd het design van het grote scherm hier in mee te nemen.

Column Layout

Me-fi Tablet 1 layout:

Gutters van 16 pixels
12 columns breed
Zijruimte van 138 pixels op alle elementen behalve de hoofdfoto
Column width van 45 pixels.

Me-fi Tablet 1 layout:

Gutters van 16 pixels
12 columns breed
Zijruimte van 69 pixels op alle elementen behalve de hoofdfoto
Column width van 57 pixels.

Final Designs

Om een goed overzicht te krijgen heb ik hier alle final versies van de ontworpen schermen naast elkaar gezet. Zo kan je goed zien hoe de content zich verplaatst naarmate er meer ruimte bij de pagina komt, of ruimte verdwijnt.

Button states

Ook heb ik nog verschillende button states uitgewerkt voor de website. Deze states heb ik gemaakt aan de hand van het designsysteem van Rotterdam. Hierbij heb ik vooral gekeken naar de koppen “Navigation”,“Flow” en “Buttons”.

Ik heb mijn eigen draai aan gegeven aan de button designs door de afgeronde hoeken weer terug te laten komen.
Ik heb een active state toegevoegd die een combinatie van de hover en focus is.
De hover state heb ik donkerder gemaakt vergeleken met het origineel, voor accessibility.