MOBILE WEB
AND
RESPONSIVE
DESIGN
OFER HOLTZMAN
AWD
ADAPTIVE WEB

RWD
RESPONSIVE WEB
RESPONSIVE
PEOPLE DON’T CARE
WHAT SOLUTION
YOU CHOOSE

AS LONG AS IT IS
THE BEST SOLUTION
FOR THEM
RESPONSIVE
IS LIKE WATER
THE OBVIOUS BENEFITS

SINGLE
DEVELOPMENT

SINGLE
MAINTENANCE

CONTINOUS
EXPERIENCE
WE NEED A
ATOMIC DESIGN
We’re not designing
pages, we’re designing systems
of components.

Stephen Hay,
Front-end design and development.
Author o...
ATOMIC DESIGN
ATOMS

ATOMIC DESIGN
MOLECULE
ORGANISM
PAGE
RESPONSIVE PATTERNS
Atomic Design helps…
Create a UI language and patterns for the product
… Which helps the multiscreen user
And also helps t...
Homework
Design a responsive portfolio:
- Projects selection (in homepage / dedicated page)
- Project showcase page
OFER HOLTZMAN
Wireframing Responsive Design
Wireframing Responsive Design
Wireframing Responsive Design
Wireframing Responsive Design
Wireframing Responsive Design
Wireframing Responsive Design
Wireframing Responsive Design
Wireframing Responsive Design
Wireframing Responsive Design
Wireframing Responsive Design
Wireframing Responsive Design
Wireframing Responsive Design
Wireframing Responsive Design
Wireframing Responsive Design
Wireframing Responsive Design
Wireframing Responsive Design
Wireframing Responsive Design
Wireframing Responsive Design
Wireframing Responsive Design
Wireframing Responsive Design
Upcoming SlideShare
Loading in...5
×

Wireframing Responsive Design

1,174

Published on

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,174
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Ynet, facebook, fattal
  • http://vimeo.com/3191188
  • indochino and http://mediaqueri.es/
  • http://bradfrost.github.io/this-is-responsive/patterns.html
  • http://bradfrost.github.io/this-is-responsive/patterns.htmlhttp://www.indochino.com/http://skinnyties.com/http://dribbble.com/http://tattly.com/http://www.sony.com/http://www.ebags.com/http://alwayscreative.net/http://twitter.github.io/bootstrap/http://www.mobify.com/blog/70-stunning-responsive-sites-for-your-inspiration/
  • Wireframing Responsive Design

    1. 1. MOBILE WEB AND RESPONSIVE DESIGN OFER HOLTZMAN
    2. 2. AWD ADAPTIVE WEB RWD RESPONSIVE WEB
    3. 3. RESPONSIVE
    4. 4. PEOPLE DON’T CARE WHAT SOLUTION YOU CHOOSE AS LONG AS IT IS THE BEST SOLUTION FOR THEM
    5. 5. RESPONSIVE IS LIKE WATER
    6. 6. THE OBVIOUS BENEFITS SINGLE DEVELOPMENT SINGLE MAINTENANCE CONTINOUS EXPERIENCE
    7. 7. WE NEED A
    8. 8. ATOMIC DESIGN
    9. 9. We’re not designing pages, we’re designing systems of components. Stephen Hay, Front-end design and development. Author of Responsive Design Workflow
    10. 10. ATOMIC DESIGN
    11. 11. ATOMS ATOMIC DESIGN
    12. 12. MOLECULE
    13. 13. ORGANISM
    14. 14. PAGE
    15. 15. RESPONSIVE PATTERNS
    16. 16. Atomic Design helps… Create a UI language and patterns for the product … Which helps the multiscreen user And also helps the development team
    17. 17. Homework Design a responsive portfolio: - Projects selection (in homepage / dedicated page) - Project showcase page
    18. 18. OFER HOLTZMAN

    ×