Top Banner
RESPONSIVE DESIGN IDAN BEN ARI
50
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: Responsive Design

RESPONSIVE DESIGN

IDAN BEN ARI

Page 2: Responsive Design
Page 3: Responsive Design
Page 4: Responsive Design
Page 5: Responsive Design
Page 6: Responsive Design
Page 7: Responsive Design

RWD AWD

ADAPTIVE WEB RESPONSIVE WEB

Page 8: Responsive Design

RESPONSIVE

Page 9: Responsive Design
Page 10: Responsive Design

דוגמא לאתר אדפטיבי#

Page 11: Responsive Design
Page 12: Responsive Design

רספונסיבידוגמא לאתר #

Page 13: Responsive Design

AS LONG AS IT IS THE BEST SOLUTION FOR THEM

PEOPLE DON’T CARE WHAT SOLUTION YOU CHOOSE

Page 14: Responsive Design

RESPONSIVE

IS LIKE WATER

“BE WATER MY FRIEND”

Page 15: Responsive Design
Page 16: Responsive Design
Page 17: Responsive Design

SINGLE DEVELOPMENT

SINGLE MAINTENANCE

CONTINOUS EXPERIENCE

THE OBVIOUS BENEFITS

Page 18: Responsive Design
Page 19: Responsive Design
Page 20: Responsive Design
Page 21: Responsive Design
Page 22: Responsive Design
Page 23: Responsive Design
Page 24: Responsive Design
Page 25: Responsive Design
Page 26: Responsive Design
Page 27: Responsive Design
Page 28: Responsive Design

ATOMIC DESIGN

Page 29: Responsive Design

“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

Page 30: Responsive Design

A DIFFERENT WAY OF THINKING

Page 31: Responsive Design

ATOMIC DESIGN

Page 32: Responsive Design

ATOMIC

DESIGN

ATOMS

Page 33: Responsive Design

ATOMIC

DESIGN

MOLECULE

Page 34: Responsive Design

ORGANISM

Page 35: Responsive Design

ATOMIC

DESIGN

PAGE

Page 36: Responsive Design

ATOMIC DESIGN HELPS

Create a Ui language and patterns for the products

Which Helps the multiscreen user

And also helps development team

Page 37: Responsive Design

RESPONSIVE PATTERNS

HOW

Page 38: Responsive Design
Page 39: Responsive Design

DEFINING BREAKPOINTS

Breakpoints are the point a which your sites content will respond to provide the user with the best possible layout to consume the information.

Page 40: Responsive Design

BREAK POINTS TYPES

Page 41: Responsive Design

Content often use responsive

WHICH ?

Page 45: Responsive Design

Some Good Reasons

STILL NOT CONVINCED?

Page 46: Responsive Design
Page 47: Responsive Design
Page 48: Responsive Design
Page 49: Responsive Design
Page 50: Responsive Design

THANK YOU :)