Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designing beyond the pixel-perfect idealistic case

F383c6a4dc55e331bbe2987b622cee6b?s=47 Stéphanie Walter
February 06, 2021
520

Designing beyond the pixel-perfect idealistic case

I face a challenge as a designer: how do I help bridge the gaps between that idealistic pixel perfect image of a site and the real deal? Between design and dev teams? How to design flexible and modular systems that work with real content, real diverse users with different needs, beyond pixel perfect mockups

Replay here: https://www.youtube.com/watch?v=WOByIUL-_7I

F383c6a4dc55e331bbe2987b622cee6b?s=128

Stéphanie Walter

February 06, 2021
Tweet

Transcript

  1. Designing beyond the pixel-perfect idealistic case Stéphanie Walter - 2021

  2. Designing the “pixel perfect best case scenario” page… And then

    reality happens: real content, different browsers, and of course, real users. By Alison Burke (@tired_actor)
  3. Designing for scale, beyond the “default" state

  4. Perfect idealistic case Reality

  5. Logo Navigation item 01 Top Menu Top Menu Top Menu

    Top Menu Navigation item 02 Navigation item 03 Navigation item 04 Logo Search Navigation item 01 Top Menu Top Menu Top Menu Top Menu Navigation item 02 Navigation item 03 Navigation item 04 Page title Section Title Logo Search Navigation item 01 Top Menu Top Menu Top Menu Top Menu Navigation item 02 Navigation item 03 Navigation item 04 Page title Section Title Tile title Tile title Tile title Tile title Tile title Logo Search Content goes here :) Content goes here :) Content goes here :) Navigation item 01 Top Menu Top Menu Top Menu Top Menu Navigation item 02 Navigation item 03 Navigation item 04 Page title Section Title Tile title Tile title Tile title Tile title Tile title Logo Search Content goes here :) Content goes here :) Content goes here :) Content goes here :) Content goes here :) Loading Flows: How is my page going to load? 1 2 3 4 5
  6. What is my component going to look like while it

    loads?
  7. https://www.mysuperwebsite.com Bad Request Error 1337 Your browser sent a request

    that this server could not understand (have you tried Kligon?) Size of a request field exceed the total weight of the moon. Apache Server wathever that means here
  8. Navigation item 01 Top Menu Top Menu Top Menu Top

    Menu Navigation item 02 Navigation item 03 Navigation item 04 Page title Section Title Logo Search There is a technical problem with the content of this page. If the problem persists, please contact XXXXX technical support team by email (xxx@xxx.org) or phone (Ext. 0000) Example of error at whole page loading level
  9. Navigation item 01 Top Menu Top Menu Top Menu Top

    Menu Navigation item 02 Navigation item 03 Navigation item 04 Page title Section Title Logo Search There is a technical problem with the content of this page. If the problem persists, please contact XXXXX technical support team by email (xxx@xxx.org) or phone (Ext. 0000) Tile title Tile title Tile title Tile title Tile title Content goes here :) Content goes here :) Content goes here :) Content goes here :) Example of error at component loading level
  10. Bad design, bad copy here: my name is correct, your

    system is the issue here.
  11. Designing error messages ๏ Identify the error cases with dev

    team ๏ Tell users how to recover from the error (if possible, not always the case) ๏ Be consistent in language used (UX writing) ๏ Don’t blame users. EVER. It’s not their fault, it’s the system’s fault. (Voice and Tone) 1337 Connection timed out error with proxy server. OK Problem connecting to the device Please check your internet connection and try again. Try again Cancel
  12. Empty states can be interesting design opportunities Settings History Tasks

    3 Tasks Manager 9 41 It looks like you don’t have any tasks to validate at the moment. All caught up!
  13. Launch a search with different criteria and click the “Save

    to My Dashboard” button to see your saved search here. There are no saved searches yet. Search a content by keyword All Search a content by name, id, etc. My Dashboard My Saved Searches 1 First use empty states can be used for onboarding
  14. What happens if there is no image? It really is

    possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques (12 votes) My Grand’ Ma’s Gluten Free Pan Pizza Save GLUTEN FREE MAIN DISH Preparation time: 3 hours Cooking time: 25 min Serving: 4-6 persons Cost: 3€/person It really is possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques (12 votes) My Grand’ Ma’s Gluten Free Pan Pizza Save GLUTEN FREE MAIN DISH Preparation time: 3 hours Cooking time: 25 min Serving: 4-6 persons Cost: 3€/person
  15. What happens if there’s no content value (yet)? It really

    is possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques (0 votes) Gluten Free Pan Pizza Save GLUTEN FREE MAIN DISH Preparation time: 3 hours Cooking time: 25 min Serving: 4-6 persons Cost: 3€/person It really is possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques (No Rating available) Gluten Free Pan Pizza Save GLUTEN FREE MAIN DISH Preparation time: 3 hours Cooking time: 25 min Serving: 4-6 persons Cost: 3€/person It really is possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques Gluten Free Pan Pizza GLUTEN FREE MAIN DISH Preparation time: 3 hours Cooking time: 25 min Serving: 4-6 persons
  16. I don’t need to “design” all of them, just “decide”

    what will happen and communicate this to / with the dev team.
  17. Design system + checklist helps “not forget” about different states

    Loading My division Label Card title My division Label 2019 Label 2019 Label Data Population Empty state - no data Card title My division Label 2019 Label 2019 Label There are no [Elements Title] to display. Error and warning My division Label Card title There is a technical problem with the content of this Tile. If the problem persists, please contact Serapis technical support team by email (serapis_help@eib.org) or phone (Ext. 54000) My division Label 2019 Label 2020 Label
  18. Card title 1234- 4321 OPERATION NAME HERE (MAX CHAR 255

    BUT MOST ARE 52 CHAR MAX) 12345 CONTRACT NAME HERE (MAX CHAR 255 BUT MOST ARE 72 CHAR MAX) 1234- 4321 OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX) WITH MORE TEXT SO IT NEEDS 2 LINES TO DISPLAY 12345 CONTRACT NAME HERE (MAX CHAR 255 BUT MOST ARE 72 CHAR MAX) 12345-01 COUNTERPART NAME SOMETHING SA Card title 1234- 4321 OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX) Card title 1-5 of 15 5 Row per tile 1234- 4321 OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX) 12345 CONTRACT NAME HERE (MAX CHAR 255 BUT MOST ARE 72 CHAR MAX) 1234- 4321 OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX) WITH MORE TEXT SO IT NEEDS 2 LINES TO DISPLAY 12345 CONTRACT NAME HERE (MAX CHAR 255 BUT MOST ARE 72 CHAR MAX) 12345-01 COUNTERPART NAME SOMETHING SA Card title 1234- 4321 OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX) 12345 CONTRACT NAME HERE (MAX CHAR 255 BUT MOST ARE 72 CHAR MAX) 1234- 4321 OPERATION NAME HERE (MAX CHAR 255 BUT MOST ARE 52 CHAR MAX) WITH MORE TEXT SO IT NEEDS 2 LINES TO DISPLAY 12345 CONTRACT NAME HERE (MAX CHAR 255 BUT MOST ARE 72 CHAR MAX) COUNTERPART NAME SOMETHING SA How does the component scale?
  19. It really is possible to make excellent gluten free pizza

    at home in your own oven with our different recipes and techniques (12 votes) My Grand’ Ma’s Gluten Free Pan Pizza Save GLUTEN FREE MAIN DISH Preparation time: 3 hours Cooking time: 25 min Serving: 4-6 persons Cost: 3€/person It really is possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques (12 votes) Gluten Free Pan Pizza Save GLUTEN FREE MAIN DISH Preparation time: 3 hours Cooking time: 25 min Serving: 4-6 persons Cost: 3€/person What happens if the title needs 2 lines or more?
  20. It really is possible to make excellent gluten free pizza

    at home in your own oven with our different recipes and techniques (12 votes) Save My Grand’ Ma’s Gluten Free Pan Pizza GLUTEN FREE MAIN DISH It really is possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques (12 votes) Save My Grand’ Ma’s Gluten Free Pan Pizza GLUTEN FREE MAIN DISH It really is possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques (12 votes) Save Gluten Free Pan Pizza GLUTEN FREE MAIN DISH It really is possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques (12 votes) Save Gluten Free Pan Pizza GLUTEN FREE MAIN DISH It really is possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques (12 votes) Save Gluten Free Pan Pizza GLUTEN FREE MAIN DISH It really is possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques (12 votes) Save Gluten Free Pan Pizza GLUTEN FREE MAIN DISH It really is possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques (12 votes) Save My Grand’ Ma’s Gluten Free Pan Pizza GLUTEN FREE MAIN DISH It really is possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques (12 votes) Save My Grand’ Ma’s Gluten Free Pan Pizza GLUTEN FREE MAIN DISH It really is possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques (12 votes) Save Gluten Free Pan Pizza GLUTEN FREE MAIN DISH It really is possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques (12 votes) Save Gluten Free Pan Pizza GLUTEN FREE MAIN DISH It really is possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques (12 votes) Save Gluten Free Pan Pizza GLUTEN FREE MAIN DISH It really is possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques (12 votes) Save Gluten Free Pan Pizza GLUTEN FREE MAIN DISH How does it behave in a gallery with different content length?
  21. Does my design still work with other languages? Stef Geoff

  22. Scaling content tips ๏ If you use “fake content”, make

    sure the structure is close to the real one. ๏ If you are a designer: ask the devs for the limits of those fields in the database, ask for min, max and average content length. ๏ If you are a developer: if something is missing, ask the designer how it should behave. ๏ For translations: try to know upfront if you need other languages, which ones, and the ratio of those.
  23. Providing different interaction states Action Verb Focus Action Verb Disabled

    Focus Action Verb Active Action Verb Default Action Verb Hover Action Verb Disabled
  24. All Item 02 Item 01 All Item 02 Item 01

    All Item 02 Item 01 All Item 02 Item 01 All Item 02 Item 01 All All All Item 01 Item 01 All By default the current item is highlighted <keydown>: the next element is highlighted. <keyup>: the previous element is highlighted. If the user hits <enter>, this element becomes the active one and the dropdown closes When user hovers another element, we apply the default “dropdown hover” style. If the user clicks on an element, this element becomes the active one and the dropdown closes. User open the dropdown menu when: - they click on it - they put the keyboard focus on it and hit <enter> / <space> Interaction flow What about keyboard users? Components detailed documentation
  25. Services Portfolio Services FAQ Blog Contact us What about touch

    users?
  26. Documenting interactions, steps and cases to bridge the gap with

    dev teams Task flow Screen flow
  27. Show don’t tell: interactive prototypes

  28. Designing beyond arbitrary screen sizes

  29. Our design tool still “force” us to design static pictures

    of “what the product will look like.
  30. The “default best screen case scenario” version It really is

    possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques (12 votes) Gluten Free Pan Pizza Save GLUTEN FREE MAIN DISH Preparation time: 3 hours Cooking time: 25 min Serving: 4-6 persons Cost: 3€/person
  31. The“mobile variant” of the component (or page) It really is

    possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques (12 votes) Gluten Free Pan Pizza Save GLUTEN FREE MAIN DISH Preparation time: 3 hours Cooking time: 25 min Serving: 4-6 persons Cost: 3€/person It really is possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques (12 votes) Save Gluten Free Pan Pizza GLUTEN FREE MAIN DISH
  32. “Filter Sidebar” Header Header Footer It really is possible to

    make excellent gluten free pizza at home in your own oven with our different recipes and techniques (12 votes) Gluten Free Pan Pizza Save GLUTEN FREE MAIN DISH Preparation time: 3 hours Cooking time: 25 min Serving: 4-6 persons Cost: 3€/person It really is possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques (12 votes) Gluten Free Pan Pizza Save GLUTEN FREE MAIN DISH Preparation time: 3 hours Cooking time: 25 min Serving: 4-6 persons Cost: 3€/person It really is possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques (12 votes) Gluten Free Pan Pizza Save GLUTEN FREE MAIN DISH Preparation time: 3 hours Cooking time: 25 min Serving: 4-6 persons Cost: 3€/person Header Footer Filter toggle button It really is possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques (12 votes) Save Gluten Free Pan Pizza GLUTEN FREE MAIN DISH It really is possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques (12 votes) Save Gluten Free Pan Pizza GLUTEN FREE MAIN DISH It really is possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques (12 votes) Save Gluten Free Pan Pizza GLUTEN FREE MAIN DISH
  33. All good, right ?

  34. Header Filter toggle button Footer It really is possible to

    make excellent gluten free pizza at home in your own oven with our different recipes and techniques (12 votes) Save Gluten Free Pan Pizza GLUTEN FREE MAIN DISH It really is possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques (12 votes) Save Gluten Free Pan Pizza GLUTEN FREE MAIN DISH It really is possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques (12 votes) Save Gluten Free Pan Pizza GLUTEN FREE MAIN DISH What about those “in-betweens”? Header Footer Filter toggle button It really is possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques (12 votes) Save Gluten Free Pan Pizza GLUTEN FREE MAIN DISH It really is possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques (12 votes) Save Gluten Free Pan Pizza GLUTEN FREE MAIN DISH It really is possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques (12 votes) Save Gluten Free Pan Pizza GLUTEN FREE MAIN DISH
  35. (12 votes) It really is possible to make excellent gluten

    free pizza at home in your own oven with our different recipes and techniques Gluten Free Pan Pizza Save GLUTEN FREE MAIN DISH It really is possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques (12 votes) Gluten Free Pan Pizza Save GLUTEN FREE MAIN DISH Preparation time: 3 hours Cooking time: 25 min Serving: 4-6 persons Cost: 3€/person It really is possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques (12 votes) Save Gluten Free Pan Pizza GLUTEN FREE MAIN DISH You might need more… M L S
  36. M S L Header Footer Filter toggle button It really

    is possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques (12 votes) Save Gluten Free Pan Pizza GLUTEN FREE MAIN DISH It really is possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques (12 votes) Save Gluten Free Pan Pizza GLUTEN FREE MAIN DISH It really is possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques (12 votes) Save Gluten Free Pan Pizza GLUTEN FREE MAIN DISH “Filter Sidebar” Header Header Footer It really is possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques (12 votes) Gluten Free Pan Pizza Save GLUTEN FREE MAIN DISH Preparation time: 3 hours Cooking time: 25 min Serving: 4-6 persons Cost: 3€/person It really is possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques (12 votes) Gluten Free Pan Pizza Save GLUTEN FREE MAIN DISH Preparation time: 3 hours Cooking time: 25 min Serving: 4-6 persons Cost: 3€/person It really is possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques (12 votes) Gluten Free Pan Pizza Save GLUTEN FREE MAIN DISH Preparation time: 3 hours Cooking time: 25 min Serving: 4-6 persons Cost: 3€/person Header Filter toggle button Footer It really is possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques (12 votes) Gluten Free Pan Pizza Save GLUTEN FREE MAIN DISH Preparation time: 3 hours Cooking time: 25 min Serving: 4-6 persons Cost: 3€/person It really is possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques (12 votes) Gluten Free Pan Pizza Save GLUTEN FREE MAIN DISH Preparation time: 3 hours Cooking time: 25 min Serving: 4-6 persons Cost: 3€/person It really is possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques (12 votes) Gluten Free Pan Pizza Save GLUTEN FREE MAIN DISH Preparation time: 3 hours Cooking time: 25 min Serving: 4-6 persons Cost: 3€/person Header Filter toggle button Footer (12 votes) It really is possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques Gluten Free Pan Pizza Save GLUTEN FREE MAIN DISH (12 votes) It really is possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques Gluten Free Pan Pizza Save GLUTEN FREE MAIN DISH (12 votes) It really is possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques Gluten Free Pan Pizza Save GLUTEN FREE MAIN DISH L
  37. Designs get more flexible, but the final export is still

    “static images”
  38. How to build flexible products, from “ideal pixel perfect condition”

    in design tools to the browser?
  39. Intrinsic Web Design in “Everything You Know About Web Design

    Just Changed” by Jen Simmons
  40. Intrinsic Web Design Instead of changing styles based on the

    size of a viewport (or how big the screen of the device is), components automatically lay themselves out based on their own ‘ideal’ conditions.” Definition by Jay Frestone
  41. Flexbox, Grid Layout, clamp() and more to build responsive layouts

    without media queries
  42. Codepen Demo by Geoffrey Crofte

  43. It really is possible to make excellent gluten free pizza

    at home in your own oven with our different recipes and techniques (12 votes) Gluten Free Pan Pizza Save GLUTEN FREE MAIN DISH Preparation time: 3 hours Cooking time: 25 min Serving: 4-6 persons Cost: 3€/person (12 votes) It really is possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques Gluten Free Pan Pizza Save GLUTEN FREE MAIN DISH It really is possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques (12 votes) Save Gluten Free Pan Pizza GLUTEN FREE MAIN DISH This one needs container queries It really is possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques (12 votes) Gluten Free Pan Pizza Save GLUTEN FREE MAIN DISH (12 votes) It really is possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques Gluten Free Pan Pizza Save GLUTEN FREE MAIN DISH Save It really is possible to make excellent gluten free pizza at home in your own oven with our different recipes and techniques (12 votes) Gluten Free Pan Pizza GLUTEN FREE MAIN DISH
  44. Did you say Container Queries? Soooooon

  45. As a designer, my job is to show my developers

    this “ideal” conditions. Then we leave the precise implementation up to the browser.
  46. We need to stop obsessing over pixel perfection and embrace

    the fluid flexible nature of the web: Design in tools, Decide in the browser!
  47. Designing for different user situations

  48. Dark vs Light mode: prefers- color-scheme

  49. Some animations can make people sick: prefers- reduced-motion

  50. There’s more to come with level 5 media queries

  51. Light it up demo by by Mandy Michael Using multiple

    device sensors to adapt to user environment
  52. Design with offline support (and local cache) in mind

  53. You are offline. Your email(s) will be sent once you

    are online again 1 unsent messsage in mailbox Here goes the message subject Some message description goes here 12:30 S Here goes the message subject Some message description goes here 12:30 S Here goes the message subject Some message description goes here 12:30 S Here goes the message subject Some message description goes here 12:30 S “Ideal” state “Synchronization fail” state “Synchronizing” state “Synchronization success” state Design for “periodically synchronized data in the background”
  54. Designing for different “network conditions”

  55. Going beyond what happens in the app/site, understanding user behaviour

    and journeys Phases PHASE 1 PHASE 2 PHASE 3 Touchpoints & channels Emotions and pain points Actions / Tasks Opportunities for features and improvements User, goal, scope
  56. Designing beyond happy path and assumptions

  57. Why do we ask for this? Is this the right

    way to ask for this? Gender * Male Female
  58. Is my default the “right” assumption for everyone? Your timeline

    Congratulation you lost 2kg in the last month! !
  59. Putting validation gates on top of wrong assumptions… Via dcousineau

  60. Is it going to stress / irritate some users?

  61. How might this get abused?

  62. database.platformabuse.org

  63. Act instead of react: the bad actors workshop

  64. None
  65. Challenge your assumptions. This means: build more diverse teams!

  66. You need to deeply understand your users needs and behaviour.

    ALL of them (not just the ones looking and acting like you…)
  67. In the end, it all comes down to the balance

    of Building the right thing vs. building the thing right (Laura Klein)
  68. And I think we can have both: building, designing the

    right thing, the right flexible way, together.