Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
DESIGN
Responsive
Scalable
Liquid
UX’er. Ranjeet Tayi
Principal - User Experience Design
Informatica Corp.
www.ranjeeth.com
Do you remember this?
https://www.flickr.com/photos/laquesys/6630260805/in/photolist-b6TPxt-7EUfMc-8AZmDi-dBYRXQ-514TcR-6d6AAV-G5h8n-GzppA-7WR2E...
Design is simple and we know
what we are designing for.
800X600
1024 X 768
90’s – 00’s
Interaction target is just a pixel
Touch screen revolution started.
In 2010, 298 million smartphones were sold globally.
Smart phones constituted 22% and gro...
Consumers started accessing the internet in ever increasing number.
But were disappointed with experience.
and then Apple launched iPad!
Suddenly there was another way to
access internet.
Tablet market exploded!
7,299,959,230+
People in the world
1,217,995,578+
PCs & smartphones
People started using these new devices as one of the main stream.
Apps are great! But people wanted to access main sites.
Interaction target from a
pixel to bunch of pixels
Carousel to Swipes
May 2010
June 2011
responsive design is
about updating the design
to bring out the content
not about design
Digital solutions are not frames ...
1920 px
1440 px
768 px
320 px
We need to think about various factors before design
Responsive Design is AWESOME!
?
But it is not easy… It need’s different design mindset
Design thinking in responsive age
Perfection is achieved,
not when there is noting to add,
but when there is nothing to ta...
1920 px
768 px
320px 1440 px
Content Structuring
Plan & organize your content hierarchy
and know what to show on above fold
Grid Constructs – Fluid & Flexible Grid Types
Defining breakpoints
Responsive Media - Images
100%
60%
100%
Responsive Scale Responsive Crop
Responsive Media - Images
800 px
4:1
120px
2:1
Responsive Media Compression – Images
Responsive Media – Fluid Videos
Creating Intrinsic Ratios for Video
The idea is to create a box with the proper ratio (4:3...
Responsive Media – Logos & Branding
320 px 768 px 1440 px 1920 px
Scaling logos for modern web and enhancing the brand exp...
Media quarries
The @media rule is used to define different style rules for different media
types/devices. Media queries lo...
Media quarries & Breakpoints
Breakpoints is the horizontal width which we want to accommodate in responsive design.
Examples of responsive design - Informatica
Corporate
Examples of responsive design – Skinny Ties
E-commerce
Examples of responsive design – The Boston Globe
Editorial
Examples of responsive design – Change.org
Non profit
Examples of responsive design – World Wildlife Fund
Wild Life
Plan Design MonitorDiscover
Content Modelling
Content Hierarchy
Grid Constructs
Media Quarries
Accessibility
Concepts / Sk...
Discover
Plan
COLUMNS12
OPTIMIZED FOR1200 X800
GUTTER20
MARGIN 20
Design – Responsive Patterns
Data
Iframes
Tables
Charts & Graphs
Responsive Charts
Data Visualizations
Layouts
Re-flowing ...
Design – Wireframes & Modules
Design – Fluid Typography
The use of a scalable typographic foundation. Typographic sizes and vertical divisions in
conten...
Design – SVG Icons
SVG is a truly resolution independent technique, that as you can probably tell means
that it doesn’t ma...
Design – Visual Design
Design – Responsive Prototype
Monitor – Responsive Testing
http://responsivetest.net/
Making responsive needs more attention on testing & debugging on v...
Monitor – Accessibility
Accessibility is not about disability.
It is contextual and every one should able to access conten...
Responsive Frame Work
They usually offer complete frameworks with configurable features like styled-
typography, sets of f...
Responsive Frame Work
Responsive Frame Work
Responsive Frame Work
Responsive Frame Work
Grid Construction
Grid system help designers and developers to make fully responsive website, eliminating
the frustration ...
Rapid prototyping made easy
Paper Prototypes
Responsive Wire Frames
Interactive Hi-fidelity Prototypes
Code Prototypes
Design – Fluid Typography
Converting PX’s TO EM’s is no big deal
World’s first website
http://info.cern.chThe website designed in 1993 works well today.
Adaptive Design
+
Media Queries
Responsive web is…
Success mantra of Responsive Design
Mobile first approach
Think about structured content
Tablets are taking the
main stage shortly
Now old legacy enterprise
software are also started
worrying about this
Static design’s don’t work any more.
To make design decisions, You need to experience interactions.
Focus on user.
Content is King.
Above the fold matters.
What is yesterday is not today
and today is not tomorrow
We need to really think out side the BOXES!
The future is unpredictable…
Ranjeet Tayi
User Experience Designer
Responsive, Scalable and Liquid Design
Responsive, Scalable and Liquid Design
Responsive, Scalable and Liquid Design
Upcoming SlideShare
Loading in …5
×

Responsive, Scalable and Liquid Design

1,222 views

Published on

Responsive, Scalable and Liquid Design. This presentation talks about the new way of web design standard / technique aimed at crafting sites to provide an optimal viewing experience - easy reading - easily accessible and navigation with a minimum of resizing, panning, and scrolling across a wide range of devices along with various examples.

Published in: Design
  • Be the first to comment

Responsive, Scalable and Liquid Design

  1. 1. DESIGN Responsive Scalable Liquid UX’er. Ranjeet Tayi Principal - User Experience Design Informatica Corp. www.ranjeeth.com
  2. 2. Do you remember this?
  3. 3. https://www.flickr.com/photos/laquesys/6630260805/in/photolist-b6TPxt-7EUfMc-8AZmDi-dBYRXQ-514TcR-6d6AAV-G5h8n-GzppA-7WR2E2-aw5Bwa-5TYz4R-5TYzfa-dLeaSr-86CQUY- 6Zno9n-6ZroPf-5GRYf7-8ov3hr-78fFt-eCJPva-89QLxn-8MnMJw-bwkhmP-68fUpz-zdmh7-dHprjB-4ty511-6K4ZT-9wa5f7-aoVwyJ-6XVH5f-7NhHsy-8bfs71-6JTC3a-aNK3be-6eFXrU-e3DFFd- 911kkk-6M9it2-expib-71NFw-4rG6Xm-u1Yht-911krt-914qNC-914r87-911kYz-914qvJ-911kJn-914r6w/
  4. 4. Design is simple and we know what we are designing for. 800X600 1024 X 768 90’s – 00’s
  5. 5. Interaction target is just a pixel
  6. 6. Touch screen revolution started. In 2010, 298 million smartphones were sold globally. Smart phones constituted 22% and growing
  7. 7. Consumers started accessing the internet in ever increasing number. But were disappointed with experience.
  8. 8. and then Apple launched iPad! Suddenly there was another way to access internet.
  9. 9. Tablet market exploded!
  10. 10. 7,299,959,230+ People in the world 1,217,995,578+ PCs & smartphones
  11. 11. People started using these new devices as one of the main stream. Apps are great! But people wanted to access main sites.
  12. 12. Interaction target from a pixel to bunch of pixels Carousel to Swipes
  13. 13. May 2010 June 2011
  14. 14. responsive design is about updating the design to bring out the content not about design Digital solutions are not frames & templates anymore… They are frames in a extended fluid experiences.
  15. 15. 1920 px 1440 px 768 px 320 px We need to think about various factors before design
  16. 16. Responsive Design is AWESOME! ? But it is not easy… It need’s different design mindset
  17. 17. Design thinking in responsive age Perfection is achieved, not when there is noting to add, but when there is nothing to take away. ~Antonine De Saint Exupery
  18. 18. 1920 px 768 px 320px 1440 px
  19. 19. Content Structuring
  20. 20. Plan & organize your content hierarchy and know what to show on above fold
  21. 21. Grid Constructs – Fluid & Flexible Grid Types
  22. 22. Defining breakpoints
  23. 23. Responsive Media - Images 100% 60% 100% Responsive Scale Responsive Crop
  24. 24. Responsive Media - Images 800 px 4:1 120px 2:1
  25. 25. Responsive Media Compression – Images
  26. 26. Responsive Media – Fluid Videos Creating Intrinsic Ratios for Video The idea is to create a box with the proper ratio (4:3, 16:9, etc.), then make the video inside that box stretch to fit the dimensions of the box. It’s that simple. Scaling videos is different than images because videos don’t retain their proportions.
  27. 27. Responsive Media – Logos & Branding 320 px 768 px 1440 px 1920 px Scaling logos for modern web and enhancing the brand experience.
  28. 28. Media quarries The @media rule is used to define different style rules for different media types/devices. Media queries look at the capability of the device, and can be used to check many things, such as: • width and height of the browser window • width and height of the device • orientation • resolution • and much more
  29. 29. Media quarries & Breakpoints Breakpoints is the horizontal width which we want to accommodate in responsive design.
  30. 30. Examples of responsive design - Informatica Corporate
  31. 31. Examples of responsive design – Skinny Ties E-commerce
  32. 32. Examples of responsive design – The Boston Globe Editorial
  33. 33. Examples of responsive design – Change.org Non profit
  34. 34. Examples of responsive design – World Wildlife Fund Wild Life
  35. 35. Plan Design MonitorDiscover Content Modelling Content Hierarchy Grid Constructs Media Quarries Accessibility Concepts / Sketches Monitor Development UX Governance Usability Testing Accessibility Testing Alpha + Beta Tests Ship Users Requirements / Goals Competitive Analysis Bench Marking Research Insights Kickoff Workshop Information Arc Responsive Patterns Interaction Design Break point designs Visual Design HTML & CSS Prototype Design Testing Design Specifications 2 3 41 Responsive Design Process
  36. 36. Discover
  37. 37. Plan COLUMNS12 OPTIMIZED FOR1200 X800 GUTTER20 MARGIN 20
  38. 38. Design – Responsive Patterns Data Iframes Tables Charts & Graphs Responsive Charts Data Visualizations Layouts Re-flowing Layouts Source Order Shift Equal Width Lists Off Canvas Grid Blocks Navigation Single Level Multi Level Breadcrumbs Pagination Media Fluid Images Adaptive Images Image Grids Responsive Logos Responsive Video SVG Icons Modules Carousel Tabs Accordions Massaging Light Box Splash Screens Typography Type Styling Headings + Content Responsive Foot Notes Forms Basic Forms Form Elements
  39. 39. Design – Wireframes & Modules
  40. 40. Design – Fluid Typography The use of a scalable typographic foundation. Typographic sizes and vertical divisions in content, including all margins and padding, are set in EMs or REMs. Pixels are DEAD
  41. 41. Design – SVG Icons SVG is a truly resolution independent technique, that as you can probably tell means that it doesn’t matter if you are looking at an icon, shape or font on any devices. No pixelated icons or fonts anymore.
  42. 42. Design – Visual Design
  43. 43. Design – Responsive Prototype
  44. 44. Monitor – Responsive Testing http://responsivetest.net/ Making responsive needs more attention on testing & debugging on various break points. Test designs and make sure in-depth user analytics and act abased on usage + behavior.
  45. 45. Monitor – Accessibility Accessibility is not about disability. It is contextual and every one should able to access content from any devices / Resolutions.
  46. 46. Responsive Frame Work They usually offer complete frameworks with configurable features like styled- typography, sets of forms, buttons, icons and other reusable components built to provide navigation, alerts, popovers, and more, images frames, HTML templates, custom settings, etc.
  47. 47. Responsive Frame Work
  48. 48. Responsive Frame Work
  49. 49. Responsive Frame Work
  50. 50. Responsive Frame Work
  51. 51. Grid Construction Grid system help designers and developers to make fully responsive website, eliminating the frustration of flicking between browsers looking for alignment errors.
  52. 52. Rapid prototyping made easy Paper Prototypes
  53. 53. Responsive Wire Frames
  54. 54. Interactive Hi-fidelity Prototypes
  55. 55. Code Prototypes
  56. 56. Design – Fluid Typography Converting PX’s TO EM’s is no big deal
  57. 57. World’s first website http://info.cern.chThe website designed in 1993 works well today.
  58. 58. Adaptive Design + Media Queries Responsive web is…
  59. 59. Success mantra of Responsive Design
  60. 60. Mobile first approach Think about structured content
  61. 61. Tablets are taking the main stage shortly Now old legacy enterprise software are also started worrying about this
  62. 62. Static design’s don’t work any more. To make design decisions, You need to experience interactions.
  63. 63. Focus on user. Content is King. Above the fold matters.
  64. 64. What is yesterday is not today and today is not tomorrow
  65. 65. We need to really think out side the BOXES! The future is unpredictable…
  66. 66. Ranjeet Tayi User Experience Designer

×