Death, Taxes & Viewport Chrome: Designing for Uncertainty

Click here to load reader

  • date post

    27-Jan-2015
  • Category

    Technology

  • view

    107
  • download

    2

Embed Size (px)

description

Some things are certain: death, taxes, and–if you’re a web professional–the inability to know the capabilities, access speed, and dimensions of the viewport through which your design is viewed. As a designer, you must know how your content and design will be consumed before you can prepare its presentation. Web CMS’s can deliver on the technology and content management, but you must know how to design and create buildable, sustainable designs that move and scale from the smallest screens to the largest. Remember: you’re designing a responsive system of visual hierarchy, not simply a page.

Transcript of Death, Taxes & Viewport Chrome: Designing for Uncertainty

  • 1. Death, Taxes &Viewport Chrome the only thing certain is uncertainty itselfedUI Conference (#eduiconf) Jason Pamental (@jpamental)24 September 2012 thinkinginpencil.com.comMonday, September 24, 12

2. About Me Jason Pamental Web Strategist, Designer, Technologist Have been a strategist, designer, developer & cat-pixel-wrangler since roughly the launch of Netscape 1 Can be found @jpamental in most places Post thoughts, work & pics from Instagr.am @ thinkinginpencil.com.com#eduiconfMonday, September 24, 12 3. Few Things AreCertain Well all die eventually Usually after paying a lot of taxes We have no idea how someone is going to view our design none Really. Think about that last one .com#eduiconfMonday, September 24, 12 4. You Dont KnowJack Where we admit we know nothing I kid, I kid... sorta HTML5, CSS3 & Web Fonts: game has changed in the past year or 2 Device/Platform multiplier mayhem no way to keep up with all of them At a bigger inflection point than any before: only a short time from desktop being a minority .com #eduiconfMonday, September 24, 12 5. But one more little challenge... .com #eduiconfMonday, September 24, 12 6. You Dont Know Your User, Either Impossible to know how your design will be consumed Or what else they might be doing at the time Desktop/Laptop/Tablet/eReader/ Phone/Console/TV/Car So what DO you know? Design (and thats more than coloring pixels) .com #eduiconfMonday, September 24, 12 7. Were Not Designing Pages Were designing systems of relationships & hierarchy to infer meaning & importance Good design has structure but that structure must be fluid 960 pixels is a copout. Our work will be viewed on phones, tablets, tvs more than on computers as we know them .com #eduiconfMonday, September 24, 12 8. Were DesigningMeaning Design is about conveying information & understanding.comMonday, September 24, 12 9. Were DesigningMeaning Design is about conveying information & understanding Information & understanding must hold true no matter how its conveyed.comMonday, September 24, 12 10. Were DesigningMeaning Design is about conveying information & understanding Information & understanding must hold true no matter how its conveyed How users understand & learn is as crucial as how they see.comMonday, September 24, 12 11. Were DesigningMeaning Design is about conveying information & understanding Information & understanding must hold true no matter how its conveyed How users understand & learn is as crucial as how they see Start with semantics & adapt your presentation to theLogo Nav capabilities of the device on

which your design is viewed.comMonday, September 24, 12 12. Psychology &Cognitive Scienceare The New Black In order to preserve meaning & reinforce understanding, you must know how learning works Once you know how learning works, you can tailor your system of design That system of visual & information hierarchy can survive across platforms & screen sizes .com #eduiconfMonday, September 24, 12 13. Everythings Relative Every element on screen has importance (or it should) Importance is learned by its relationship to everything else on the screen Know tools that convey hierarchy: color, type, size, visual cues (underline, shape) Must hold up when the screen size changes or input mode shifts.com #eduiconfMonday, September 24, 12 14. Location, LocationLocation Desktops are used, well at a desk.comMonday, September 24, 12 15. Location, LocationLocation Desktops are used, well at a desk Laptops might be in a coffee shop.comMonday, September 24, 12 16. Location, LocationLocation Desktops are used, well at a desk Laptops might be in a coffee shop Tablets prefer couches (highest usage in evening).comMonday, September 24, 12 17. Location, LocationLocation Desktops are used, well at a desk Laptops might be in a coffee shop Tablets prefer couches (highest usage in evening) Phones fill the gaps... all of them (in line, in the car, on the train, in bed, in the loo yes, there too) .comMonday, September 24, 12 18. Your Mileage WillVary With every device & kind of usage comes a differing level of focus Focus of attention & mode of input dictates your design approach Size matters but attention matters more What the user is ALSO doing at the time matters is even more critical .com #eduiconfMonday, September 24, 12 19. Please Pass theGestalt Our attention is drawn by contrast.comMonday, September 24, 12 20. Please Pass theGestalt Our attention is drawnA Big Headline by contrast An

is bigger than a

for a reason.comMonday, September 24, 12 21. Please Pass theGestalt Our attention is drawnA Big Headline by contrast Steering now south-eastward by Ahabs levelled steel, and her progress An

is biggersolely determined by Ahabs level log and line; the Pequod held on her path than a

for a reason towards the Equator. Making Conventions are yourso long a passage through such un- Frenemies frequented waters, descrying no ships, and ere long, side- ways impelled by unvarying trade winds, over waves monotonously mild; all these seemed the strange calm things preluding some riotous and desperate scene..comMonday, September 24, 12 22. Please Pass theGestalt Our attention is drawnA Big Headline by contrast Steering now south-eastward by Ahabs levelled steel, and her progress An

is biggersolely determined by Ahabs level log and line; the Pequod held on her path than a

for a reason towards the Equator. MakingMend it, eh? Conventions are yourso long a passage I think we through such un-had best have Frenemies frequented waters, a new line descrying no ships, Use them to reduceand ere long, side- altogether.cognitive barriers ways impelled by unvarying trade winds, over waves monotonously mild; all these seemed the strange calm things preluding some riotous and desperate scene..comMonday, September 24, 12 23. Please Pass theGestalt Our attention is drawnA Big Headline by contrast Steering now south-eastward by Ahabs levelled steel, and her progress An

is biggersolely determined by Ahabs level log and line; the Pequod held on her path than a

for a reason towards the Equator. MakingMend it, eh? Conventions are yourso long a passage I think we through such un-had best have Frenemies frequented waters, a new line descrying no ships, Use them to reduceand ere long, side- altogether.cognitive barriers ways impelled by unvarying trade winds, over waves monotonously mild; Defy them & createall these seemed the strange calmunexpected contrastthings preluding some riotous and desperate scene..comMonday, September 24, 12 24. Task-Appropriate Design is the OTHER New Black A place for everything & everything in its place.com #eduiconfMonday, September 24, 12 25. Task-Appropriate Design is the OTHER New Black A place for everything & everything in its place But the place might be different on a phone... or in a car.com #eduiconfMonday, September 24, 12 26. Task-Appropriate Design is the OTHER New Black A place for everything & everything in its place But the place might be different on a phone... or in a car As may be the importance of some tasks versus others.com #eduiconfMonday, September 24, 12 27. Its not the Whatbut the Why & How Josh Clark: I have some attention to spend but how are they spending it? @LukeW: with one eye & one thumb There is no mobile user there are only mobile devices Tasks vary by circumstances of use (the why) How users accomplish those tasks varies by device capability (hover, touch, swipe) .com #eduiconfMonday, September 24, 12 28. For Example Restaurant site on a phone: What I can eat & how do I get there?.com #eduiconfMonday, September 24, 12 29. For Example Restaurant site on a phone: What I can eat & how do I get there? Non-profit on a laptop: Are they for real, whos involved, how do I help?.com#eduiconfMonday, September 24, 12 30. For Example Restaurant site on a phone: What I can eat & how do I get there? Non-profit on a laptop: Are they for real, whos involved, how do I help? eBay from either: I want to buy that Ferrari now. Really..com#eduiconfMonday, September 24, 12 31. For Example Restaurant site on a phone: What I can eat & how do I get there? Non-profit on a laptop: Are they for real, whos involved, how do I help? eBay from either: I want to buy that Ferrari now. Really. Contexts may coincide with one case or the other but neither should exclude the other behavior.com#eduiconfMonday, September 24, 12 32. The Medium Is the Message But the device capabilities should dictate how you present it Hover on a desktop aids exploration & speeds browsing Touching/swiping on a small screen is more natural (but dont forget about fat fingers. Again: size matters) .com #eduiconfMonday, September 24, 12 33. Re-think Your Design Thinking .com#eduiconfMonday, September 24, 12 34. Design by Sharpie Sketch out your design with a fat tip marker to quickly sort out hierarchy.com#eduiconfMonday, September 24, 12 35. Design by Sharpie Sketch out your design with a fat tip marker to quickly sort out hierarchy Try 3 or 4 sizes & adjust relative scale.com#eduiconfMonday, September 24, 12 36. Design by Sharpie Sketch out your design with a fat tip marker to quickly sort out hierarchy Try 3 or 4 sizes & adjust relative scale Dont forget about BIG (#RWD isnt just for smartphones you know).com#eduiconfMonday, September 24, 12 37. Design by Sharpie Sketch out your design with a fat tip marker to quickly sort out hierarchy Try 3 or 4 sizes & adjust relative scale Dont forget about BIG (#RWD isnt just for smartphones you know) Now interaction: whats natural to the device & method of use.com#eduiconfMond