responsive design & merkbeleving Nils Vermeulen / Seminar

Maat: px

Weergave met pagina beginnen:

Download "responsive design & merkbeleving Nils Vermeulen / Seminar"

Maurits de Veen
8 jaren geleden
Aantal bezoeken:

1 responsive design & merkbeleving Nils Vermeulen / Seminar

2 deze seminar 1. De vraagstelling 2. Responsive (web)design 3. Responsive identity 4. Toepassen onderzoek 5. Van responsive design naar styleguide

3 De VraagStelling Hoe blijft het visuele aspect van een merkbeleving overeind in een responsive (web)design?

4 aanleiding Stage bij

5 aanleiding Stage bij

6 RESPONSIVE (WEB)DESIGN Responsive websites passen zich aan naar de schermafmeting die een bezoeker van de website gebruikt. Er is slechts één website die veranderd qua layout afhankelijk welk schermafmeting er gebruikt wordt - Integrity Design, 2014

7 RESPONSIVE (WEB)DESIGN

8 RESPONSIVE (WEB)DESIGN Ethan Marcotte (2011) spreekt over drie hoofdingrediënten voor een responsive webdesign: 1. Een flexibel, grid-based layout 2. Flexibele afbeeldingen en media 3. En mediaqueries (verwerkt in de CSS3-code)

9 RESPONSIVE (WEB)DESIGN Redenen om over te stappen op responsive webdesign: 1. De snelheid 2. Stijging mobiel gebruik 3. Betere gebruikerservaring 4. Sociaal media 55% via mobiel 5. Minder kans op fouten bij Google (SEO) 6. Klaar voor de toekomst

10 RESPONSIVE (WEB)DESIGN Nadelen: Zware content niet mobiel Vaak een functioneel karakter Gevolg: eigen identiteit is ver te zoeken (de Leeuw, 2013)

11 RESPONSIVE (WEB)DESIGN

12 RESPONSIVE (WEB)DESIGN Het alternatief op responsive webdesign: webapp Speciaal voor specifiek apparaat Zelfde look en feel als (native) apps Direct updaten Nadeel: voor elke apparaat weer een aparte website

13 RESPONSIVE (WEB)DESIGN

14 RESPONSIVE identity Maar hoe blijft nu het visuele aspect van een merkbeleving overeind in een responsive design? Van responsive webdesign naar responsive identity Content first Sterke mobiele merkidentiteit belangrijk

15 RESPONSIVE identity

16 RESPONSIVE identity 5 Tips voor een dynamische schaalbare identiteit

17 RESPONSIVE identity 5 tips voor een dynamische schaalbare identiteit 1. Kleinere schermen vragen om een uitgesproken stijl

18 RESPONSIVE identity 5 tips voor een dynamische schaalbare identiteit 2. Effectief gebruik van logo s en iconen

19 RESPONSIVE identity 5 tips voor een dynamische schaalbare identiteit 2. Effectief gebruik van logo s en iconen Optimaliseer je logo voor online toepassingen Vermijd dunne lijnen Gebruik stevige typografie Eenvoudig kleurgebruik (contrast) Introduceer een symbool Maak een.svg-bestand van je logo

20 RESPONSIVE identity 5 tips voor een dynamische schaalbare identiteit 3. Herkenbare typografie

21 RESPONSIVE identity 5 tips voor een dynamische schaalbare identiteit 4. Kleur bekennen

22 RESPONSIVE identity 5 tips voor een dynamische schaalbare identiteit 5. Fotografie en visuele content op mobiel

23 RESPONSIVE identity Toepassing van deze tips

24 RESPONSIVE identity toepassing van deze tips 1. Senseo vodafone NL 11:00 94%

25 RESPONSIVE identity toepassing van deze tips 2. Twix vodafone NL 11:00 94%

26 RESPONSIVE identity toepassing van deze tips 3. Burn Energy vodafone NL 11:00 94%

27 RESPONSIVE design IN EEN STYLEGUIDE Aanwijzingen in styleguide te vaag/mockup te gedetailleerd Oplossing: Moodboards 1. Conceptboard 2. Designboard 3. Styleboard

28 RESPONSIVE design IN EEN STYLEGUIDE Styleboard meest geschikt voor bestaande stijl Styletiles van Samanta Warren

29 Samenvatting Waarom kiezen voor responsive (web)design? 1. De snelheid 2. Stijging mobiel gebruik 3. Betere gebruikservaring 4. Sociaal media 55% via mobiel 5. Minder kans op fouten bij Google (SEO) 6. Klaar voor de toekomst

30 Samenvatting Hoe blijft het visuele aspect van een merkbeleving overeind in een responsive (web)design? 5 tips voor een dynamische schaalbare identitiet (Responsive identity) 1. Uitgesproken stijl 2. Effectief gebruik van logo s en iconen 3. Herkenbare typografie 4. Beken kleur 5. Sterke fotografie en visuele content

31 Samenvatting Hoe blijft het visuele aspect van een merkbeleving overeind in een responsive (web)design? 5 tips voor een dynamische schaalbare identitiet (Responsive identity) 1. Uitgesproken stijl 2. Effectief gebruik van logo s en iconen 3. Herkenbare typografie 4. Beken kleur 5. Sterke fotografie en visuele content Tot slot: Tips voor ontwerpers: Ga zorgvuldig om met de grote van afbeeldingen Of: maak afbeeldingen device-aware

32 Bedankt! En veel succes met mobiel ontwerpen (of adviseren)

Vergelijkbare documenten

responsive design & merkbeleving

responsive design & merkbeleving responsive design & merkbeleving responsive design & merkbeleving Onderzoeksverslag Responsive design & merkbeleving Door Nils Vermeulen, 11 juni 2014 Studentennummer: