Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Responsive
Web Design
Antonio	
  De	
  Pasquale	
  
Senior Interaction Designer at frog	

@myinteraction	

!
!
!
!
My name is Antonio De Pasquale
I'm a Senior Interaction Designer at frog Milan
!
!
!
A little about me
I'm specialized in ...
Responsive Web Design Workshop | Milan March 2014
Concept
Framework
Layout
Grids & Modules
Going in depth with a Top down ...
Responsive Web Design Workshop | Milan March 2014
Design thinking 

in the responsive age
Framework
& UX Principles
Design...
Responsive Web Design Workshop | Milan March 2014
Confucius
I hear and I forget. 

I see and I remember. 

I do and I unde...
Responsive Web Design Workshop | Milan March 2014
25’
DESIGN THINKING 

IN THE RESPONSIVE AGE
Responsive Web Design Workshop | Milan March 2014
Perfection is achieved, not
when there is nothing more to add,
but when ...
Responsive Web Design Workshop | Milan March 2014
What is the User Experience?
User Experience encompasses all aspects of ...
Responsive Web Design Workshop | Milan March 2014
Research Concept Wireframe Visual Develop User testDocument
A typical wa...
Responsive Web Design Workshop | Milan March 2014
Waterfall model doesn’t make that
much sense in the responsive age.
!
Th...
Responsive Web Design Workshop | Milan March 2014
Yesterday
Desktop app, fixed grid, mobile interfaces
Responsive Web Design Workshop | Milan March 2014
Today
Smart Tv, Web App, Mobile, Console, Responsive design
Responsive Web Design Workshop | Milan March 2014
Browser war Vs Technology evolution
An evolving landscape, where new tec...
Responsive Web Design Workshop | Milan March 2014
A different design workflow
Things are changing.
We need to evolve the p...
Responsive Web Design Workshop | Milan March 2014
Responsive Web Design Workshop | Milan March 2014
What is the shape of digital experiences?
The evolution of technology is...
Responsive Web Design Workshop | Milan March 2014
Same contents, different shapes
Web sites, applications, digital softwar...
Responsive Web Design Workshop | Milan March 2014
1920 px
1440 px
1024 px
320 px
Design for the responsive age
We need to ...
Responsive Web Design Workshop | Milan March 2014
Single layouts are not relevant anymore. What is important is the overal...
Responsive Web Design Workshop | Milan March 2014
What is responsive design?
It looks different and things jiggle around,
...
Responsive Web Design Workshop | Milan March 2014
What is responsive design?
A more formal definition:
Responsive web desi...
Responsive Web Design Workshop | Milan March 2014
When everything started?
Responsive Web Design Workshop | Milan March 2014
Rather than quarantining our content
into disparate, device-specific
expe...
Responsive Web Design Workshop | Milan March 2014
768
1440
1024
320
1280
Responsive Web Design Workshop | Milan March 2014
What we need to create a
responsive project?
Content strategy
Flexible g...
Responsive Web Design Workshop | Milan March 2014
Content Strategy
You can create good experiences without knowing the con...
Responsive Web Design Workshop | Milan March 2014
Content Coreography
We can begin to choreograph content proportional to ...
Responsive Web Design Workshop | Milan March 2014
Content Coreography
@media screen and
(max-width: 33.236em) {
#main { di...
Responsive Web Design Workshop | Milan March 2014
Fluid grids & layouts
A fluid grid will still structure the content
cons...
Responsive Web Design Workshop | Milan March 2014
Fluid grids & layouts
If we could treat font sizes not as pixels, but as...
Responsive Web Design Workshop | Milan March 2014
Fluid images & media
1024
768 320
Fluid images: the image’s width is for...
Responsive Web Design Workshop | Milan March 2014
Fluid images & media
1280 768 320
Crop images: images are cropped dynami...
Responsive Web Design Workshop | Milan March 2014
Fluid images & media
Fluid images Vs Image crop
.responsive-scale{
width...
Responsive Web Design Workshop | Milan March 2014
Fluid images & media
Fixed aspect ratio vs fluid aspect ratio
div.column...
Responsive Web Design Workshop | Milan March 2014
Fluid images & media
600x400 px file (7kb)
!
0% JPEG compression
display...
Responsive Web Design Workshop | Milan March 2014
Fluid images & media
Images size: images at an high resolution with the ...
Responsive Web Design Workshop | Milan March 2014
Fluid images & media
Deliver pixel perfect images to the latest HiDPI sc...
Responsive Web Design Workshop | Milan March 2014
Breakpoints & Media queries
Breakpoints: horizontal widths we’ll need to...
Responsive Web Design Workshop | Milan March 2014
Breakpoints & Media queries
Examples of different Media Queries
!
Media ...
Responsive Web Design Workshop | Milan March 2014
“Fluid grids, flexible images, and media
queries are the three technical ...
Responsive Web Design Workshop | Milan March 2014
A different way of thinking
Work on everything
Design for many sizes at ...
Responsive Web Design Workshop | Milan March 2014
Should I go responsive or not?
Project context
Complexity and functional...
Responsive Web Design Workshop | Milan March 2014
Example of best responsive web design
Editorial
(e.g. Tech/Cheap News)
e...
Responsive Web Design Workshop | Milan March 2014
The Next Web
Editorial
http://thenextweb.com/
Responsive Web Design Workshop | Milan March 2014
The Boston Globe
Editorial
www.bostonglobe.com
Responsive Web Design Workshop | Milan March 2014
Time
Editorial
time.com
Responsive Web Design Workshop | Milan March 2014
Ted Talk
Media
http://thenextweb.com/
Responsive Web Design Workshop | Milan March 2014
A book apart
eCommerce
www.abookapart.com
Responsive Web Design Workshop | Milan March 2014
World Wife Life
Corporate
worldwildlife.org
Responsive Web Design Workshop | Milan March 2014
I’m Jithin
Portfolio
iamjithin.me
Responsive Web Design Workshop | Milan March 2014
Media Queries
Responsive web design repository
mediaqueri.es
Responsive Web Design Workshop | Milan March 2014
START A RESPONSIVE
DESIGN PROJECT
15’
Responsive Web Design Workshop | Milan March 2014
How can I start?
Project
Structuring a project is a fundamental step to ...
Responsive Web Design Workshop | Milan March 2014
Discover Design Delivery
Designers follow UX Methods that facilitate the...
Responsive Web Design Workshop | Milan March 2014
Discover Design Delivery
Insight Benchmark Concept IA/ Ixd VD Prototype ...
Responsive Web Design Workshop | Milan March 2014
Sketch a raw concept to visualise ideas through 

a first draft explorat...
Responsive Web Design Workshop | Milan March 2014
Analyzing content, user behaviours and competitors 

are fundamental ste...
Responsive Web Design Workshop | Milan March 2014
Exploring concept ideas by sketching a first content organisation is
the...
Responsive Web Design Workshop | Milan March 2014
IA & Global patterns
Information architecture focuses on the organizatio...
Responsive Web Design Workshop | Milan March 2014
Analyze problems & constrains. 

Refine ideas and explore all the detail...
Responsive Web Design Workshop | Milan March 2014
Wireframes & Sketches
Wireframing is fundamental because it allows the d...
Responsive Web Design Workshop | Milan March 2014
In a responsive website, it is important to stress the concept of modula...
Responsive Web Design Workshop | Milan March 2014
A template is a key screen/layout which is used as a model for other
pag...
Responsive Web Design Workshop | Milan March 2014
Visualize & prototype your concept. 

Get the feel of the real impact in...
Responsive Web Design Workshop | Milan March 2014
The size of your body text
doesn’t depend on your personal preference.
I...
Responsive Web Design Workshop | Milan March 2014
Making responsiveness is about providing readable content for any device...
Responsive Web Design Workshop | Milan March 2014
Making responsiveness is about understanding the complexity,
balancing t...
Responsive Web Design Workshop | Milan March 2014
Making responsiveness is about building all the UI elements
and componen...
Responsive Web Design Workshop | Milan March 2014
Making responsiveness is about assets independent from resolution.
High ...
Responsive Web Design Workshop | Milan March 2014
Feel the experience
Making responsiveness is about prototyping with code...
Responsive Web Design Workshop | Milan March 2014
Testing approach
Making responsiveness is about continuous tests & debug...
Responsive Web Design Workshop | Milan March 2014
FRAMEWORK AND 

UX PRINCIPLES
15’
Responsive Web Design Workshop | Milan March 2014
Why we need design patterns?
A design pattern in architecture and comput...
Responsive Web Design Workshop | Milan March 2014
Responsive design patterns
As more designers embrace this technique, we'...
Responsive Web Design Workshop | Milan March 2014
Tiny Tweaks
This technique keeps the structure of the website consistent...
Responsive Web Design Workshop | Milan March 2014
Build Windows
Tiny Tweaks
buildwindows.com
Responsive Web Design Workshop | Milan March 2014
Mostly Fluid
It is a technique based on a multi-column layout that relie...
Responsive Web Design Workshop | Milan March 2014
Five Simple Steps
Mostly Fluid
fivesimplesteps.com
Responsive Web Design Workshop | Milan March 2014
Column drop
This technique starts with a multi-column layout and ends up...
Responsive Web Design Workshop | Milan March 2014
The Novel
Column drop
introducingthenovel.com
Responsive Web Design Workshop | Milan March 2014
Column drop v.2
This technique starts with a multi-column layout and end...
Responsive Web Design Workshop | Milan March 2014
Stop Press
Column drop v.2
stoppress.co.nz
Responsive Web Design Workshop | Milan March 2014
Layout Shifter
This technique shifts the left hand navigation column to ...
Responsive Web Design Workshop | Milan March 2014
Food Sense
Layout shifter
foodsense.is
Responsive Web Design Workshop | Milan March 2014
Off Canvas
The Off Canvas pattern for multi-device layout takes advantag...
Responsive Web Design Workshop | Milan March 2014
Facebook
Off Canvas
facebook.com
Responsive Web Design Workshop | Milan March 2014
Select Navigation
This technique condenses the main navigation in a simp...
Responsive Web Design Workshop | Milan March 2014
Viljamis
Select navigation
Responsive Web Design Workshop | Milan March 2014
Toggle navigation
The toggle is similar to the footer anchor approach, b...
Responsive Web Design Workshop | Milan March 2014
Starbucks
Toggle navigation
Responsive Web Design Workshop | Milan March 2014
Footer Navigation
This clever solution keeps the nav list at the footer ...
Responsive Web Design Workshop | Milan March 2014
Contents magazine
Footer navigation
Responsive Web Design Workshop | Milan March 2014
Stacked top links navigation
In this solution all the main navigation is...
Responsive Web Design Workshop | Milan March 2014
Codepen
Stacked top links navigation
Responsive Web Design Workshop | Milan March 2014
Left Nav Flyout
The nav is accessed by a menu icon, which reveals a tray...
Responsive Web Design Workshop | Milan March 2014
Sequence
Left nav Flyout
Responsive Web Design Workshop | Milan March 2014
Priority + Navigation
When it comes to content priority in certain situa...
Responsive Web Design Workshop | Milan March 2014
Justmarkup
Priority + Navigation
Responsive Web Design Workshop | Milan March 2014
The toggle is similar to the footer anchor approach, but instead of jump...
Responsive Web Design Workshop | Milan March 2014
Microsoft
Priority + Navigation v.2
Responsive Web Design Workshop | Milan March 2014
Source order
According to the contents it’s possibile to switch the orde...
Responsive Web Design Workshop | Milan March 2014
Order shift
In responsive design content organization is flexible. It’s ...
Responsive Web Design Workshop | Milan March 2014
Grouping contents
It’s possibile to collapse multiple contents in a dyna...
Responsive Web Design Workshop | Milan March 2014
GRID SYSTEM & LOW FIDELITY

PROTOTYPES
15’
Responsive Web Design Workshop | Milan March 2014
"If I can't picture it
I can't understand it"
Albert Einstein
Responsive Web Design Workshop | Milan March 2014
106
Bill Buxton, 2007 - Sketching user experiences: Paul Laseau, 1980 Gr...
Responsive Web Design Workshop | Milan March 2014
107
Design processElaboration of ideas Reduction of ideas
Bill Buxton, 2...
Responsive Web Design Workshop | Milan March 2014
Frameworks are designed to get you up and running with a functional
prot...
Responsive Web Design Workshop | Milan March 2014
Design framework
Today there are many frameworks on the market: Bootstra...
Responsive Web Design Workshop | Milan March 2014
Grid systems
Grid systems help designers and developers to make fully re...
Responsive Web Design Workshop | Milan March 2014
Prototypes help designers to explore interactions patterns,
explain desi...
Responsive Web Design Workshop | Milan March 2014
"Now that we can do anything,
what should we do?"
Bill Buxton
Responsive Web Design Workshop | Milan March 2014
113
Design & prototype
For every flow identify the key screen of the pro...
Responsive Web Design Workshop | Milan March 2014
114
Prototypes can have various levels of complexity
and details followi...
Responsive Web Design Workshop | Milan March 2014
Low-fidelity Vs High fidelity prototypes
Two different prototype approac...
Responsive Web Design Workshop | Milan March 2014
Low-fidelity (lo-fi) prototyping is characterized by a quick
and easy tr...
Responsive Web Design Workshop | Milan March 2014
Cons Pro
• Low development costs
• Easy to evaluate multiple ideas
• A g...
Responsive Web Design Workshop | Milan March 2014
118
High-fidelity prototypes reach from more detailed paper prototypes
t...
Responsive Web Design Workshop | Milan March 2014
Prototypes are high-fidelity, because they show the real system
behaviou...
Responsive Web Design Workshop | Milan March 2014
120
Vertical prototype
Horizontal
prototype
Horizontal prototypes displa...
Responsive Web Design Workshop | Milan March 2014
High
Horizontal
Final productUsability test
Concept modelThrow away
Vert...
Responsive Web Design Workshop | Milan March 2014
“It’s the little details that are vital.
Little things make big things h...
Responsive Web Design Workshop | Milan March 2014
Types of prototypes
Storyboards
Paper mockups
Interactive wireframes
Mot...
Responsive Web Design Workshop | Milan March 2014
Low fidelity / No interaction
Storyboard
Responsive Web Design Workshop | Milan March 2014
Low fidelity / Low interaction
Paper mockups
iOs Stencil / Protosketch
Responsive Web Design Workshop | Milan March 2014
Medium fidelity / Low interaction
Interactive wireframes
Axure / Proto.io
Responsive Web Design Workshop | Milan March 2014
Medium fidelity / Low interaction
Motion prototype
Keynote / After Effec...
Responsive Web Design Workshop | Milan March 2014
Interactive prototype
High fidelity / Medium interaction
inVision / UX P...
Responsive Web Design Workshop | Milan March 2014
Code prototype
High fidelity / High interaction
Adobe Edge Reflow / Insp...
Responsive Web Design Workshop | Milan March 2014
Storyboards Paper mockups Interactive wireframes Motion wireframes
Love
...
Responsive Web Design Workshop | Milan March 2014
Love
Easy to do
High quality UI
Fast feedback
Pixel perfect design
!
!
H...
Responsive Web Design Workshop | Milan March 2014
DESIGN CHALLENGES
& OPPORTUNITIES
10’
Responsive Web Design Workshop | Milan March 2014
Next steps
For your next RWD project think about your overall strategy f...
Responsive Web Design Workshop | Milan March 2014
No more static layouts
Responsive Web Design Workshop | Milan March 2014
More elements and less layouts
Responsive design is dynamic and it follo...
Responsive Web Design Workshop | Milan March 2014
Think about tablets
Today there are still more installed PCs in the worl...
Responsive Web Design Workshop | Milan March 2014
Dealing with the past
Find smart solutions to scale down your responsive...
Responsive Web Design Workshop | Milan March 2014
Test on real devices
Test on Real Mobile Devices without
breaking the Ba...
Responsive Web Design Workshop | Milan March 2014
The right tool for what!
Before choosing a tools it's important to under...
Responsive Web Design Workshop | Milan March 2014
140
Use prototype to verify all the different aspects of
your design wit...
Responsive Web Design Workshop | Milan March 2014
141
It's not important to close everything before testing your design co...
Responsive Web Design Workshop | Milan March 2014
High fidelityLow fidelity
	
  Hand	
  Sketch Linked	
  pdf Interac2ve	
 ...
Responsive Web Design Workshop | Milan March 2014
For mobile application the environment
is everything and it is fundament...
Responsive Web Design Workshop | Milan March 2014
High fidelity can waste resources and risk
a mediocre path because bette...
Responsive Web Design Workshop | Milan March 2014
The life of your prototype is directly connected 

to the problem it has...
Responsive Web Design Workshop | Milan March 2014
The perfect tool is the one that helps you to test and verify your desig...
Responsive Web Design Workshop | Milan March 2014
FURTHER 

READINGS
Responsive Web Design Workshop | Milan March 2014
Books
Sketching User Experiences:
Getting the Design Right and
the Right...
Responsive Web Design Workshop | Milan March 2014
Articles & References
Prototype toolsUX Culture Design Workflow Wirefram...
Responsive Web Design Workshop | Milan March 2014
Articles & References
Typography & PrototypeInteraction model Media & re...
Responsive Web Design Workshop | Milan March 2014
Thanks!
@myinteraction
to continue the discussion!
!
!
Prochain SlideShare
Chargement dans…5
×

Responsive Web Design Workshop | Responsive Webdesign

62 374 vues

Publié le

Responsive Web Design Workshop | Milan March 2014
What is the shape of digital experiences?
The evolution of technology is changing the boundaries of design

Publié dans : Design, Business
  • How long does it take for VigRX Plus to start working? ▲▲▲ https://tinyurl.com/yy3nfggr
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • I went from getting $3 surveys to $500 surveys every day!! learn more... ♣♣♣ https://tinyurl.com/realmoneystreams2019
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • ♣♣ 10 Easy Ways to Improve Your Performance in Bed... ♣♣♣ https://tinyurl.com/rockhardxxx
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Your opinions matter! get paid for them! click here for more info...■■■ https://tinyurl.com/realmoneystreams2019
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Unlock Her Legs�(Official) $69 | Get 90% Off + 8 Special Bonus? ➤➤ http://ishbv.com/unlockher/pdf
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

×