1-6 Mobile First - Responsive Design
inleiding
Wat is nu mobile first design? Mobile first design is een
ontwerpfilosofie die tot doel heeft betere gebruikerservaringen te
creëren door bij het ontwerp proces eerst te beginnen met mobiele apparaten in gedachten, waarbij vaak prioriteit wordt gegeven aan de kleinste schermen zoals je telefoon.
Deze mobile first-strategie komt voort uit het concept van
progressieve vooruitgang, wat betekent dat wanneer een ontwerper gaat zitten om een prototype te maken of een websitelay-out te schetsen, hij begint met hoe het eruit zal zien op het scherm van een mobiel apparaat en later naar grotere schermen gaat. Met zo’n beperkte ruimte op een klein mobiel scherm, moeten UX-ontwerpers prioriteit geven aan de belangrijkste aspecten van hun product. Met deze aanpak kunnen ontwerpers de juiste gebruikerservaring op
het juiste apparaat leveren.
Waarom nu mobile first design? Zoals gezegd is mobiel internetgebruik het desktop internetgebruik ontgroeid. Als in 2025, 72,5% van de mensen alleen met hun telefoon gaat internetten, toont dit het belang aan van een optimale mobiele gebruikerservaring.
Bovendien is de kans groter dat consumenten blijven winkelen en terugkeren naar bedrijven met een mobielvriendelijke site.
Een ander voordeel van het focussen op mobile first design
komt voort uit het algoritme van Google dat de voorkeur geeft
aan mobielvriendelijke websites. Hoewel organisch verkeer via
zoekmachines een belangrijk ingrediënt is voor het succes van
de meeste bedrijven, is het in het belang van de vindbaarheid van het product om aandacht te besteden aan de voorkeuren van het algoritme van Google. Om deze reden hebben bedrijven waarde gevonden in het ontwerpen voor mobile first.
Theorie: Mobile First
We gaan een website ontwerpen, waarbij je eerst voor mobiel
ontwerpt en dan pas kijkt naar desktop. Dit noemen we mobile first design, oftewel responsive webdesign.
MOBILE FIRST IS CONTENT FIRST
Wanneer je eerst voor mobiel ontwerpt, moet je onthouden dat
content de sleutel is. Met een content-first benadering moet je als ontwerper je gebruikers de conent geven die ze absoluut nodig hebben, zonder alle extra’s. Alles wat extra is, kan onoverzichtelijk worden en afleiden van de mobiele ervaring.
5 MOBILE-FIRST ONTWERPPRINCIPES
Bij het ontwerpen voor mobiel eerst, is het belangrijk om deze
ontwerpprincipes in gedachten te houden:
1. GEBRUIKERS KOMEN EERST BIJ HET ONTWERP:
Jouw ontwerp moet gebruikers helpen een probleem snel en
effectief op te lossen of een taak uit te voeren. Kijk naar de mobiele websites van je concurrentie en ontdek welke mobielvriendelijke opties zij niet bieden en neem die op in jouw ontwerp.
2. VISUELE HIËRARCHIE VAN DE CONTENT:
Jouw content moet beknopt en to-the-point zijn. Het is belangrijk om je te concentreren op het leveren van alleen datgene waarnaar de gebruiker op zoek is, terwijl je afleidingen uitsluit. je moet onderscheiden welke elementen het belangrijkst zijn en welke secundair zijn.
3. HOU HET SIMPEL:
een eenvoudig mobiel ontwerp is een geweldige manier om de
duidelijkheid van de content te verbeteren en gebruikers te helpen zich te concentreren op de inhoud die er het meest toe doet. Enkele methoden om het simpel te houden zijn:
– Verminder het aantal links in je navigatiemenu
– Gebruik zo min mogelijk pagina’s.
– Maximaal twee kolommen met content.
– Gebruik typografie die niet te klein is voor mobiel.
– Houd uw randen breed en lijnen schoon.
– Gebruik witruimte om de lay-out minder rommelig en leesbaarder te maken.
4. GEDURFDE EN VASTE CTA’S:
een heldere, krachtige en vaste CTA helpt ervoor te zorgen dat
gebruikers ze gemakkelijk kunnen vinden. Zorg er daarom voor dat je CTA’s opvallend zijn en niet te missen zijn.
5. HOU REKENING MET DE LAADSNELHEID VAN JE SITE:
als gebruikers slechte websiteprestaties ervaren, is de kans kleiner dat ze weer terug komen. Daarom is de snelheid van je mobiele site, inclusief je opstartscherm, uiterst belangrijk. Het zou niet meer dan drie seconden moeten duren om volledig te laden, aangezien gebruikers de neiging hebben om te vertrekken als het niet binnen die tijd wordt geladen.
Opdracht: Lost & Found
We gaan een lost and found website maken, met als uitgangspunt natuurlijk mobile first.
Iedereen raakt weleens wat kwijt op school. Kabeltjes, muizen, opladers, harde schijven, sieraden, paraplu’s etc. Maar ook: iedereen vindt weleens iets. Dan moet je het natuurlijk naar de servicebalie brengen, maar misschien haalt niemand het ooit op als ze niet weten dat het gevonden is. Daar ga jij met je lost and found website iets aan doen.
FUNCTIES:
• je kan erop aangeven dat je iets bent verloren
• je kan er op aangeven dat je iets hebt gevonden
• je kan erop zoeken naar verloren voorwerpen.
1. Ga eerst onderzoek doen naar lost and found websites op je telefoon + desktop.
– Welke site is het? Naam + screenshot van de site
– Voor welke doelgroep is de site? Wees specifiek.
– Schrijf 2 á 3 punten op die je heel goed vind uitgevoerd. Dit kan van alles zijn, navigatie, kleuren, tekstgrootte, is de site geschikt
voor mobiel etc.
– Schrijf 2 á 3 punten op die je juist heel slecht vind uitgevoerd.
2. Verzin een naam voor je website.
3. Maak een logo. Hou het simpel.
4. Welke kleuren ga je gebruiken?
5. Welk lettertype werkt het beste bij je site?
6. Welke icoontjes/plaatjes ga je gebruiken?
7. Zet stap 3 t/m 6 in een styleguide. Formaat A4.
Je gaat nu minstens 4 pagina’s schetsen op papier. 1 Homepage + minstens 3 vervolg pagina’s. Laat duidelijk zien door middel van pijlen hoe je tussen de verschillende pagina’s kunt navigeren.
Je gaat nu in Illustrator je ontwerp maken. Zorg ervoor dat je bij het maken van een nieuw bestand de juiste instelling hebt. Omdat
je eerst voor mobiel gaat ontwerpen, kies je natuurlijk voor mobile en niet voor web. Je bent vrij in het kiezen van een mobiel formaat.
Als je klaar bent met je ontwerp, dan kun je nu je prototype gaan maken in XD of Figma. Zorg ervoor dat de knopjes ook echt klikbaar zijn en dat je het juiste formaat hebt ingesteld voor je document.
Als je helemaal klaar bent met je mobile first website, ga je dezelfde site nu ook maken voor een tablet en desktop computer. Kijk nu goed naar hoe de tekst moet komen en of je meer beeld kunt gebruiken.
Maak in XD of Figma voor zowel de tablet als voor de desktop een prototype. Kijk goed naar welk formaat je moet gebruiken.
– onderzoek + concept in een pdf
– wireframes: foto
– ontwerp_mobilefirst.ai
– share link prototype (mobile, tablet & desktop) XD of Figma