responsive webdesign

151
Responsive Web Design Antonio De Pasquale Senior Interaction Designer at frog @myinteraction

Upload: antonio-de-pasquale

Post on 11-Aug-2014

12.099 views

Category:

Design


7 download

DESCRIPTION

Ready for responsive? It’s not just about layout design: a responsive redesign will raise challenges with your content strategy, layout organization, cms and technology solution. This workshop introduces attendees to the mindset and techniques necessary for embracing the fluid nature of the web. This half-day session will review the basic principles of responsive web design, including addressing topics such as user experience and best practices, grid design and rapid prototyping techniques.

TRANSCRIPT

Page 1: Responsive Webdesign

Responsive Web Design

Antonio  De  Pasquale  Senior Interaction Designer at frog

@myinteraction !!!!

Page 2: Responsive Webdesign

My name is Antonio De Pasquale I'm a Senior Interaction Designer at frog Milan !!!

A little about me

I'm specialized in digital interfaces & user experience I'm passionate about the "aesthetics" of movement I'm from Sicily and I love the sea. !!

@myinteraction

Page 3: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Concept

Framework

Layout

Grids & Modules

Going in depth with a Top down approach

Pillars

The approach

Page 4: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Design thinking in the responsive age

Framework & UX Principles

Design Challenges & Opportunities

Grids & Low Fidelity prototype

Table of contents

Start a responsive design project

Theory Practice

Page 5: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Confucius

I hear and I forget. I see and I remember. I do and I understand.

Page 6: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

25’

DESIGN THINKING IN THE RESPONSIVE AGE

Page 7: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Perfection is achieved, not when there is nothing more to add,

but when there is nothing left to take away.Antonine De Saint Exupéry

Page 8: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

What is the User Experience? User Experience encompasses all aspects of the end-user's interaction with the company, its services, and its products.

Page 9: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Research Concept Wireframe Visual Develop User testDocument

A typical waterfall UX design processFrom concept design to the final product on the market

Page 10: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Waterfall model doesn’t make that much sense in the responsive age.

!

That model worked 3/4 years ago when we lived in a different context

with different devices

It's over

Page 11: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

YesterdayDesktop app, fixed grid, mobile interfaces

Page 12: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

TodaySmart Tv, Web App, Mobile, Console, Responsive design

Page 13: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Browser war Vs Technology evolutionAn evolving landscape, where new technology are

pushing the boundaries of web experiences

56%

10.2%

Browser Analytics Global - January 2014

Page 14: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

A different design workflowThings are changing.

We need to evolve the process

Research Concept

Wireframe Visual

DevelopPrototypeSketch

User testReview

Page 15: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Page 16: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

What is the shape of digital experiences?The evolution of technology is changing the boundaries of design

Page 17: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Same contents, different shapes Web sites, applications, digital softwares are not static templates anymore.

They are frames in an extended fluid experience.

Page 18: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

1920 px

1440 px

1024 px

320 px

Design for the responsive age We need to sketch, visualize, test, prototype and understand the dynamic behaviours on different devices

with different proportions & resolutions. Our job now is to create future friendly design ecosystems.

Page 19: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Single layouts are not relevant anymore. What is important is the overall

experience across all the different devices and screens form factor.

From templates to the experience

Page 20: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

What is responsive design?

It looks different and things jiggle around, scale, re-order, appear, and disappear so it

works well in your browser size or whatever device you’re using to view it...

A quick and dirty answer:

Page 21: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

What is responsive design?A more formal definition:

Responsive web design means designing your website so that it responds to your

users environment based on screen- size, platform and orientation.

Page 22: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

When everything started?

Page 23: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Rather than quarantining our content into disparate, device-specific

experiences, we can use media queries to progressively enhance our work within different viewing contexts.

Ethan Marcotte

Page 24: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014768

1440

1024

320

1280

Page 25: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

What we need to create a responsive project?

Content strategy

Flexible grid layout

Flexible images and media

Media queries

Ingredients

Page 26: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Content StrategyYou can create good experiences without knowing the content.

What you can’t do is create good experiences without knowing your content structure.

Page 27: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Content CoreographyWe can begin to choreograph content proportional to screen size,

serving the best possible experience at any width.

Page 28: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Content Coreography

@media screen and (max-width: 33.236em) { #main { display: flex; } #main > nav, #main > aside { flex: 1; } #main > article { flex: 2; } #main > nav { order: 0; } #main > article { order: 1; } #main > aside { order: 2; }

Grid will be perfect to organize the layout structure with high-level elements whereas Flexbox will be best-suited for some modules that require specific alignments and ordering

< header >

< article >

< footer >

< nav > < aside >

Page 29: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Fluid grids & layouts

A fluid grid will still structure the content consistently and predictably but its size and positioning will change depending on the available size of the display.

The essence of flexible grids relies on stop thinking in fixed pixels and start considering percentage units (element’s width /grid’s size e.g. 200px/960px*100 = 20.83%).

Page 30: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Fluid grids & layouts If we could treat font sizes not as pixels, but as proportions measured against their container,

we could do the same with the different elements draped across our grid.

Target : context = results

24 : 16 = 1.5em700 : 988 = 0.7085

Font style

DIV

Page 31: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Fluid images & media

1024768 320

Fluid images: the image’s width is forced to match the width of its container scaling accordingly.

Page 32: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Fluid images & media

1280 768 320

Crop images: images are cropped dynamically so that they fit into their containers as the containers resize.

Page 33: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Fluid images & mediaFluid images Vs Image crop

.responsive-scale{ width:100%; padding-bottom: 66.666666666667%; /* 960px/1440px */ background-image:url(img/fluid/image-1440x960.jpg); background-size:cover; background-position:center; /* IE fix */ }

.responsive-crop{ width:100%; height:960px; background-image:url(img/fluid/image-1440x960.jpg); background-size:cover; background-position:center; /* IE fix */ }

.responsive-scale .responsive-crop

100% width 100% width

66.6% height

Page 34: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Fluid images & mediaFixed aspect ratio vs fluid aspect ratio

div.column { /* The background image must be 800px wide */ max-width: 800px; } !figure.fluidratio { padding-top: 10%; /* slope */ height: 120px; /* start height */ ! background-image: url(http://voormedia.com/examples/amsterdam.jpg); background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ }

4:1

2:1

800 px

120 px

Page 35: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Fluid images & media

600x400 px file (7kb) !

0% JPEG compression displayed in 600x400

Page 36: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Fluid images & mediaImages size: images at an high resolution with the maximum compression rate

can be displayed with high quality at a different resolution

300x200 px file (21kb) !

80% JPEG compression displayed in 300x200

600x400 px file (7kb) !

0% JPEG compression displayed in 300x200

Page 37: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Fluid images & mediaDeliver pixel perfect images to the latest HiDPI screens and provide your slower internet connected

users with lightning fast bandwidth efficient images.

Page 38: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Breakpoints & Media queries

Breakpoints: horizontal widths we’ll need to accommodate in our responsive design.Width: 1024px Width: 1024px Width: 480px Width: 320px

Break point & resolutions

320 (Phone – portrait) 480 (Phone – landscape + portrait) 600 (Small tablet – portrait) 768 (Large Tablet – portrait) 800 (Phone + Small tablet – landscape) 1024 (Large Tablet– landscape)` 1280 (Desktop) 1440> (Wide screen desktop)

Width: 1280pxWidth: 1440px

Page 39: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Breakpoints & Media queries

Examples of different Media Queries !Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone vs. high definition screen).

Page 40: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

“Fluid grids, flexible images, and media queries are the three technical ingredients

for responsive web design, but it also requires a different way of thinking.

Ethan Marcotte

Page 41: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

A different way of thinking

Work on everything Design for many sizes at once

!

Clean design Reduce clutter, essential content only

!

Design from the content out Let content decide breakpoints

Design is how it works Not how it looks

!

Less Graphic files CSS gradients, font icons

!

Keep learningResponsive images? Polyfills?

1

2

3

4

5

6

Page 42: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Should I go responsive or not?

Project context

Complexity and functionality

Skill set of your team

Budget and timelines

Client expectations

It depends.

?

Page 43: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Example of best responsive web design

Editorial (e.g. Tech/Cheap News)

eCommerce (e.g Fashion)

Media (e.g Video blog)

Portfolio (e.g Singer) Corporate

(e.g Telco,No Profit )

Page 44: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

The Next WebEditorial

http://thenextweb.com/

Page 45: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

The Boston GlobeEditorial

www.bostonglobe.com

Page 46: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

TimeEditorial

time.com

Page 47: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Ted TalkMedia

http://thenextweb.com/

Page 48: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

A book aparteCommerce

www.abookapart.com

Page 49: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

World Wife LifeCorporate

worldwildlife.org

Page 50: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

I’m JithinPortfolio

iamjithin.me

Page 51: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Media QueriesResponsive web design repository

mediaqueri.es

Page 52: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

START A RESPONSIVE DESIGN PROJECT

15’

Page 53: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

How can I start?

Project

Structuring a project is a fundamental step to outline the pillars of the experience of your service applications.

Page 54: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Discover Design Delivery

Designers follow UX Methods that facilitate their workflow from the first insights to the final product delivery.

A Design methodology

Project

Page 55: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Discover Design Delivery

Insight Benchmark Concept IA/ Ixd VD Prototype Test Document Develop

Designing is about aligning the purpose of a product with the user’s needs in a specific context, allowing them to engage

with the product more than ever before.

A detail view on the process

Page 56: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Sketch a raw concept to visualise ideas through a first draft exploration.

Setting a vision

Page 57: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Analyzing content, user behaviours and competitors are fundamental steps to understand your industry.

User needs & website goals

Page 58: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Exploring concept ideas by sketching a first content organisation is the first step to define the information architecture.

Concept design

Page 59: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

IA & Global patternsInformation architecture focuses on the organization and structure

of content in a manner in which a user can navigate through it.

Page 60: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Analyze problems & constrains. Refine ideas and explore all the details to make it possible.

Explore the details

Page 61: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Wireframes & SketchesWireframing is fundamental because it allows the designer to plan the layout

and interaction by sketching UI elements.

Page 62: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

In a responsive website, it is important to stress the concept of modularity of the components, in order to facilitate both the design and the development.

Wireframes & Modules

Module A (desktop)

Module A (Mobile)

Module A (variations)

Page 63: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

A template is a key screen/layout which is used as a model for other pages within the application.

Wireframes & Templates

Page 64: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Visualize & prototype your concept. Get the feel of the real impact in a physical way.

Explore the details

Page 65: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

The size of your body text doesn’t depend on your personal preference.

It depends on reading distance.Olivier Reichenstein

Page 66: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Making responsiveness is about providing readable content for any device, and that means starting with type. It’s already all about typography

Responsive will be 99.9% typography

Page 67: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Making responsiveness is about understanding the complexity, balancing typography and styles across multiple screens.

Typographic approach

Style tile generator

Page 68: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Making responsiveness is about building all the UI elements and components in a consistent and structured way.

Design the details

Page 69: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Making responsiveness is about assets independent from resolution. High pixel density displays prompt us to create future-proof solutions for graphics.

Resolution indipendence

SVGPNG

Icon Font Generator - Fontello

Page 70: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Feel the experienceMaking responsiveness is about prototyping with code and testing your

projects on real devices and screen resolutions.

Page 71: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Testing approachMaking responsiveness is about continuous tests & debugging in multiple ways:

Web inspector view, Labels & Character Counters.

Safari Web Inspector Span Character Counter

Page 72: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

FRAMEWORK AND UX PRINCIPLES

15’

Page 73: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Why we need design patterns?

A design pattern in architecture and computer science is a formal way of documenting a solution to a design problem in a particular field of expertise. An organized collection

of design patterns that relate to a particular field is called a pattern language.

Page 74: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Responsive design patternsAs more designers embrace this technique, we're not only seeing a

lot of innovation but the emergence of clear patterns as well.

Layout Navigation Content

Page 75: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Tiny TweaksThis technique keeps the structure of the website consistent while scaling, relaying on each block for content adaptation.

Page 76: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Build WindowsTiny Tweaks

buildwindows.com

Page 77: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Mostly FluidIt is a technique based on a multi-column layout that relies on fluid grids and images

while scaling, and stacks columns vertically in its narrowest width.

Page 78: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Five Simple StepsMostly Fluid

fivesimplesteps.com

Page 79: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Column dropThis technique starts with a multi-column layout and ends up with a single

column layout, dropping columns along the way as screen sizes get narrower.

Page 80: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

The NovelColumn drop

introducingthenovel.com

Page 81: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Column drop v.2This technique starts with a multi-column layout and ends up with a single column layout, hiding columns along the way as screen sizes get narrower.

Page 82: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Stop PressColumn drop v.2

stoppress.co.nz

Page 83: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Layout ShifterThis technique shifts the left hand navigation column to the top in order to

optimize the navigation while scaling to narrower screen width.

Page 84: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Food SenseLayout shifter

foodsense.is

Page 85: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Off CanvasThe Off Canvas pattern for multi-device layout takes advantage of space off the screen

to keep content or navigation hidden until either a larger screen size allows it to be visible or a user takes action to expose it.

Page 86: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

FacebookOff Canvas

facebook.com

Page 87: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Select NavigationThis technique condenses the main navigation in a simple

dropdown menu when it scales down on mobile devices (old approach)

Page 88: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

ViljamisSelect navigation

Page 89: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Toggle navigationThe toggle is similar to the footer anchor approach, but instead of jumping down to an anchor at the bottom of the page, the menu slides open right in the header.

Page 90: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

StarbucksToggle navigation

Page 91: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Footer NavigationThis clever solution keeps the nav list at the footer of the site, while the header

contains a simple anchor link pointing to the footer nav.

Page 92: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Contents magazineFooter navigation

Page 93: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Stacked top links navigationIn this solution all the main navigation is always directly visibile on top

and every link use a single row in the mobile version.

Page 94: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

CodepenStacked top links navigation

Page 95: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Left Nav FlyoutThe nav is accessed by a menu icon, which reveals a tray that slides in

from the left and moves the main content over to the right.

Page 96: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

SequenceLeft nav Flyout

Page 97: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Priority + NavigationWhen it comes to content priority in certain situations it’s possibile to display less

links on the main navigation on top while maintaining the full list in the footer.

Page 98: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

JustmarkupPriority + Navigation

Page 99: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

The toggle is similar to the footer anchor approach, but instead of jumping down to an anchor at the bottom of the page, the menu slides open right in the header.

Priority + Navigation v.2

Page 100: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

MicrosoftPriority + Navigation v.2

Page 101: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Source orderAccording to the contents it’s possibile to switch the order and the position of

specific modules across different breakpoints.

1st in source

2nd in source1st in source

2nd in source

Page 102: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Order shiftIn responsive design content organization is flexible. It’s possibile to change

the modules order according to different breakpoints.

1 2

3

5

4

5

3

4

1

2

Page 103: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Grouping contentsIt’s possibile to collapse multiple contents in a dynamic container (e.g. Carousel)

that helps to visualize the same amount of contents on different breakpoints.

Page 104: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

GRID SYSTEM & LOW FIDELITYPROTOTYPES

15’

Page 105: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

"If I can't picture it I can't understand it"

Albert Einstein

Page 106: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

106Bill Buxton, 2007 - Sketching user experiences: Paul Laseau, 1980 Graphic Thinking for architects & designers

The design process is a cycle of elaboration and reduction.

Design processElaboration of ideas Reduction of ideas

Design process

Page 107: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

107

Design processElaboration of ideas Reduction of ideas

Bill Buxton, 2007 - Sketching user experiences: Paul Laseau, 1980 Graphic Thinking for architects & designers

Design processThe goal of the elaboration phase is to generate as many different ideas as possible,

while the reduction phase is meant to select one of those ideas and carefully refine it.

Frameworks

Prototypes

Page 108: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Frameworks are designed to get you up and running with a functional

prototype fast and easy. There are lots of questions around whether you

should use a framework in your project, and if so what is the best

framework for your particular project.

Framework & grid systems

Page 109: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Design frameworkToday there are many frameworks on the market: Bootstrap, Foundation, Less Framework.

All you need is just start to design!

Page 110: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Grid systemsGrid systems help designers and developers to make fully responsive websites, eliminating

the frustration of flicking between browsers looking for alignment errors.

Page 111: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Prototypes help designers to explore interactions patterns,

explain design solutions and communicate and evaluate

the overall user experience.

* Universal Design Principles by William Lidwell

Prototypes

Page 112: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

"Now that we can do anything, what should we do?"

Bill Buxton

Page 113: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

113

Design & prototypeFor every flow identify the key screen of the process.

To start prototyping you need to understand what are the fundamental steps to communicate your concept.

Page 114: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

114

Prototypes can have various levels of complexity and details following all the different steps of design

development, from a low to high level of fidelity.

IA Sketch

IXD Wireframe

VD Mockup

Functional Prototype

PrototypesWhat is the right level of detail? How can I choose the right model?

Page 115: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Low-fidelity Vs High fidelity prototypes Two different prototype approaches to improve

and support the design activity

115

High fidelity

Low fidelity

Levels of fidelity

Page 116: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Low-fidelity (lo-fi) prototyping is characterized by a quick and easy translation of high-level design concepts into

tangible and testable artifacts.

116

Levels of fidelity

High fidelity

Low fidelity

Page 117: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Cons Pro

• Low development costs

• Easy to evaluate multiple ideas

• A good tool to communicate

• Start showing UI constrains

• Good to identify market requirements

• Good to test the proof of concept

• Limited functionality

• Limited set of requirements for the development

• Needs the support of a facilitator

• Not really useful once the requirements list is already fixed

• Not really useful in case of usability test

• Limited capacity of a realistic and fluid navigation

A clear advantage of lo-fi prototyping is extremely low cost and non-programmers can actively be part of the idea - crystallization

process.

Levels of fidelityLow fidelity

Page 118: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

118High-fidelity prototypes reach from more detailed paper prototypes to fully interactive simulations. According on the detail level of HTML prototypes users can see dialog windows, react on

messages and enter form data.

Levels of fidelity

High fidelity

Low fidelity

Page 119: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Prototypes are high-fidelity, because they show the real system behaviour in an interactive manner rather than just presenting static

screens. Detailed prototypes can be built as quick and easy as the low- fidelity ones with the right tools.

119

Levels of fidelityHigh fidelity

Cons Pro

• Full functionality

• Full interactive

• Can be used directly by final users

• Clear concept and navigation model

• Perfect for usability test

• Look & feel of the final product

• It works as live examples of the product requirements

• Used for marketing and research tests

• More expensive to develop

• Time consuming to build a functional version

• Not efficient to test the proof of concept

• Not efficient to define the first user requirements

Page 120: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

120

Vertical prototype

Horizontal prototype

Horizontal prototypes display a wide range of features but without fully implementing all of them;

Vertical prototypes do not attempt to show what will be in a system but they focus on implementing a small set of features in a nearly-complete fashion.

High fidelity

Low fidelity

Levels of fidelity

Page 121: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

High

Horizontal

Final productUsability test

Concept modelThrow away

Vertical

Low

Levels of fidelity

Page 122: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

“It’s the little details that are vital. Little things make big things happen.”

Coach John Wooden

Page 123: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Types of prototypes

Storyboards

Paper mockups

Interactive wireframes

Motion wireframes

UI Walkthrough

Motion prototype

Interactive prototype

Code prototype

Low fidelity

High fidelity

Page 124: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Low fidelity / No interaction

Storyboard

Page 125: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Low fidelity / Low interaction

Paper mockups

iOs Stencil / Protosketch

Page 126: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Medium fidelity / Low interaction

Interactive wireframes

Axure / Proto.io

Page 127: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Medium fidelity / Low interaction

Motion prototype

Keynote / After Effects

Page 128: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Interactive prototypeHigh fidelity / Medium interaction

inVision / UX Pin / Brief

Page 129: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Code prototypeHigh fidelity / High interaction

Adobe Edge Reflow / Inspect / Muse / Dreamweaver

Page 130: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Storyboards Paper mockups Interactive wireframes Motion wireframes

Love Quick and dirty

Easy to do Fast feedback Very inclusive

!!

Hate Not quick enough

Too dirty Hard to share

Not self explaining

Love Detailed and solid Good for defining content & explain

behaviours !!

Hate Hard for user testing

Too functional with less experience of the flow

Love Emotional

High quality feedback Testing dynamic behaviours

!!!

Hate Time to build them

Software knowledge Works better in an

advanced state

Love High level concept

modelling Clear concept vision

Easy to do !!

Hate Too high level

Low focus on the interaction model

Not easy to understand for non designers

Levels of fidelityLow fidelity

Page 131: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Love Easy to do

High quality UI Fast feedback

Pixel perfect design !!

Hate No interactivity

Not self explaining No hyperlinks No animation

Love High quality UI

Smooth motion design Clear system dynamics Cheaper than coding

!!

Hate No interactivity

No user flow No touch feedback

Time consuming

Love Easy to do

High quality UI Clear interactions Flow simulation

!!

Hate Time to build them

Basic software knowledge Work better in an advanced

state

Love Test interactivity

Perfect for testing process & flow

Experience in contest !!

Hate Software knowledge Time for building the

prototype Limiting the design process

Levels of fidelityHigh fidelity

UI Walkthrough Motion prototype Interactive prototype Code prototype

Page 132: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

DESIGN CHALLENGES & OPPORTUNITIES

10’

Page 133: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Next stepsFor your next RWD project think about your overall strategy first and then

sketches, wireframes & start design with code.

SketchesConcept

Prototype

Page 134: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

No more static layouts

Page 135: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

More elements and less layoutsResponsive design is dynamic and it follows the fluid nature of the web.

Don’t think at static layouts but at structured dynamic components.

Pure CSS Bootsrap Js

Page 136: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Think about tabletsToday there are still more installed PCs in the world than smartphones or

tablets. Next year, that’s likely to change.

The post pc era - IDC Forecast Chart

Page 137: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Dealing with the pastFind smart solutions to scale down your responsive projects

on old browsers with different degradation techniques.

Nothing or degradation Simplify cross browser/ devices compatibility Browser evolution

Page 138: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Test on real devices

Test on Real Mobile Devices without breaking the Bank !

Testing on actual devices is now absolutely essential part of the web design. Many crucial aspects of a web can’t be discovered with emulators: true site performance, device capabilities, form pix factor, pixel density and impact on the network

Test on real mobile devices without breaking the bank

Page 139: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

The right tool for what!

Before choosing a tools it's important to understand the final scope of your prototype. You can use different prototyping tools to develop your concept but it's important to...

What is the right tool?

Page 140: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

140

Use prototype to verify all the different aspects of your design with different levels of fidelity

according to the stage of the project

Release Early Release Often

Page 141: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

141

It's not important to close everything before testing your design concept. Every stage is a possible entry point to verify, discuss, iterate, design.

Fail Early Fail Often

Page 142: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

High fidelityLow fidelity

 Hand  Sketch Linked  pdf Interac2ve  Wireframe  

Video  simula2on

Semi  func2onal  prototype

Full  func2onal  prototype

Try and test different tools. This allows you to prototype in different ways, with different levels of fidelity / quality

and time consumption for the same goal.

Prototype archetype Vs Fidelity

Page 143: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

For mobile application the environment is everything and it is fundamental to understand

the overlapping spheres of context.

* Design Sketch: The Context of Mobile Interactions - N.Savio J.Braiterman (white paper) * http://www.giantant.com/output/mobile_context_model.pdf

The context is fundamental

Page 144: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

High fidelity can waste resources and risk a mediocre path because better options

were never given a chance.

Low fidelity, on the other hand, means that the details never get filled in, yielding

a half-baked result.

UX Booth Design & Fidelity | http://www.uxbooth.com/articles/concerning-fidelity-and-design/

Time

Fidelity

Sketches

Wireframes

Mockups

PrototypesThe right level of fidelity

Page 145: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

The life of your prototype is directly connected to the problem it has to solve. More cycles, more

refinements: better results!

Design

Evaluate

CommunicateIterateShort cycle Long & progressive

The Prototype lifecycle

Page 146: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

The perfect tool is the one that helps you to test and verify your design and communicate your concept in the best way.

Communicate it right.

Page 147: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

FURTHER READINGS

Page 148: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Books

Sketching User Experiences: Getting the Design Right and

the Right Design !

Bill Buxton 2007

Responsive Web Design !

Ethan Marcotte 2011

CSS3 for Web Designers !

Dan Cederholm 2012

Mobile First !

Luke Wroblewski 2011

Page 149: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Articles & References

Prototype toolsUX Culture Design Workflow Wireframing

Responsive design workflow on multiple touchpoints !http://viljamis.com/blog/2012/responsive-workflow/

Design process in the responsive age !http://www.slideshare.net/pkattera/design-process-for-responsive-web-design

Does form follow function? !http://www.smashingmagazine.com/2010/03/23/does-form-follow-function/

Embracing the UX Spectrum !http://uxmag.com/articles/embracing-the-ux-spectrum

Visualizing the user experience !http://www.slideshare.net/grantrobinson/visualising-the-user-experience-2261349

Where wireframes are concerned !http://uxmag.com/articles/where-wireframes-are-concerned

Design better & faster with rapid prototyping !http://www.smashingmagazine.com/2010/06/16/design-better-faster-with-rapid-prototyping/

Sketching the User Experience !http://www.slideshare.net/antoniodepasquale/sketching-the-user-experience

Responsive design will be 99.9% typography

http://www.welcomebrand.co.uk/thoughts/the-responsive-web-will-be-99-9-typography/

Prototyping for Responsive Web Design !http://www.slideshare.net/mrscammels/prototyping-for-responsive-web-design

Test on real devices: How to? !http://bradfrostweb.com/blog/mobile/test-on-real-mobile-devices-without-breaking-the-bank/

Motion & Gesture Interactions in the digital age !http://www.slideshare.net/antoniodepasquale/motion-gesture-interactions-in-the-digital-age

Page 150: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Articles & References

Typography & PrototypeInteraction model Media & responsive Icons & sprites

Responsive image solution !http://mobile.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/

Content choreography !http://trentwalton.com/2011/07/14/content-choreography/

Responsive navigation patterns !http://bradfrostweb.com/blog/web/responsive-nav-patterns/

Responsive background images with fixed or fluid aspect ratio !http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios

Optimizing UX with responsive web design !http://www.slideshare.net/clarissapeterson/optimizing-user-experience-with-responsive-web-design

Prototype Responsive Typography !http://viljamis.com/blog/2013/prototyping-responsive-typography/

Aspect ratio & responsive web design !http://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/

Complex navigation patterns for responsive web design

http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/

Resolution independence for responsive web design !http://coding.smashingmagazine.com/2012/01/16/resolution-independence-with-svg/

Flow Type & Responsive typography !http://simplefocus.com/flowtype/!http://coding.smashingmagazine.com/2013/09/18/introducing-flowtype-js/

Responsive web design showcase !http://responsiveshowcase.com/!http://mediaqueri.es/popular/

Responsive web fonts & icons !http://webstandardssherpa.com/reviews/responsive-webfont-icons

Page 151: Responsive Webdesign

Responsive Web Design Workshop | Milan March 2014

Thanks!@myinteraction

to continue the discussion!

!!