Seminar

responsive design & merkbeleving Nils Vermeulen / Seminar

deze seminar

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

De VraagStelling

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

aanleiding

Stage bij

aanleiding

Stage bij

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



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)


Redenen om over te stappen op responsive webdesign: 1. 2. 3. 4. 5. 6.

De snelheid Stijging mobiel gebruik Betere gebruikerservaring Sociaal media 55% via mobiel Minder kans op fouten bij Google (SEO) Klaar voor de toekomst


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



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


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

RESPONSIVE identity

RESPONSIVE identity

5 Tips voor een dynamische schaalbare identiteit

RESPONSIVE identity 5 tips voor een dynamische schaalbare identiteit

1. Kleinere schermen vragen om een uitgesproken stijl


2. Effectief gebruik van logo’s en iconen


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


3. Herkenbare typografie


4. Kleur bekennen


5. Fotografie en visuele content op mobiel

RESPONSIVE identity

Toepassing van deze tips

RESPONSIVE identity toepassing van deze tips

1. Senseo

vodafone NL

11:00

94%


2. Twix

vodafone NL

11:00

94%


3. Burn Energy

vodafone NL

11:00

94%

RESPONSIVE design IN EEN STYLEGUIDE

Aanwijzingen in styleguide te vaag/mockup te gedetailleerd Oplossing: Moodboards 1. Conceptboard 2. Designboard 3. Styleboard

RESPONSIVE design IN EEN STYLEGUIDE

Styleboard meest geschikt voor bestaande stijl Styletiles van Samanta Warren

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

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

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

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

Seminar

Recommend Documents