Top Banner
DESIGNING RESPONSIVELY The Role of UX and other head scratchers. [email protected] LONDON - CAMBRIDGE - TORONTO - OTTAWA
32

Designing responsively

Jul 06, 2015

Download

Design

Akendi

An informative look at responsive design and its relationship to UX. Link to full responsive design video recording on Notes of final slide.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Designing responsively

DESIGNING

RESPONSIVELYThe Role of UX and other head scratchers.

[email protected]

LONDON - CAMBRIDGE - TORONTO - OTTAWA

Page 2: Designing responsively

WHAT IS RESPONSIVE

DESIGN?A DESCRIPTION...

Page 3: Designing responsively

ONE SOURCE MULTIPLE

DEVICES

Page 4: Designing responsively

MANAGE WEB CODE

Page 5: Designing responsively

FLUID DESIGNS

Page 6: Designing responsively

AND…

Page 7: Designing responsively

NOT TOTALLY NEW

Page 8: Designing responsively

DESKTOP APPLICATION

TOOLBARS

Page 9: Designing responsively

DESKTOP APPLICATION

WORK SPACES

Page 10: Designing responsively

BUT SOMEWHAT NEW TO

THE WEB• Desktop

• Tablet

• Mobile

Page 11: Designing responsively

RESPONSIVE

DESIGN

Page 12: Designing responsively

RATHER...

Page 13: Designing responsively

RESPONSIVE CONTENT

(IMAGES, TEXT, FONTS, GRAPHICS)

Page 14: Designing responsively

CONTENT SINGLE SOURCE

Page 15: Designing responsively

CONTENT DEVICE SPECIFIC

Page 16: Designing responsively

DEVICE CHARACTERISTICS

Page 17: Designing responsively

RESOLUTION

480x320 px 960x640 px 1920x1080 px

Page 18: Designing responsively

FONT RESOLUTION & TYPE

480x320 px 960x640 px 1920x1080 px

Page 19: Designing responsively

SIZE CONSTRAINTS

IN RESPONSIVE DESIGN?

480x320 px 960x640 px 1920x1080 px 3840x2160 px

Page 20: Designing responsively

RESPONSIVE CONTENT

• Actual content written

• Actual images chosen

• Actual font choice

Page 21: Designing responsively

RESPONSIVE AS A MAGIC

WAND

Page 22: Designing responsively

RESPONSIVE

INTERACTION

Page 23: Designing responsively

NAVIGATION

Double tab navigationTab navigation at

top AND bottom

Single ‘Menu’

navigation at top

Page 24: Designing responsively

RESPONSIVE LAYOUT

Page 25: Designing responsively

FUNCTION FOLLOWS FORM

Desktop layout Tablet layout Mobile

Page 26: Designing responsively

DEVICE DETERMINES

DESIGN

Page 27: Designing responsively

THEREFORE…

Page 28: Designing responsively

DON’T GET LOST IN THE CODE

CONVERSATIONS

Page 29: Designing responsively

IT’S STILL USER

EXPERIENCE DESIGN

Page 30: Designing responsively

RESPONSIVE IN ITSELF

DOESN’T SOLVE INFORMATION

MANAGEMENT PROBLEMS

Governance

Signoff Workflow

Content creation Reviews

Updates

Archiving

Page 31: Designing responsively

AND RESPONSIVE IN ITSELF

DOESN’T SOLVE

ASSET MANAGEMENT

CHALLENGES

Page 32: Designing responsively

QUESTIONSANYONE?