Drawing in Quicksand                            Visual Systems, Drupal & The Modern Web World                         Drup...
About Me                    + Jason Pamental                         principal, co-founder of h+w design                  ...
Let’s Talk About Change                    + a Change in Drupal                    + a Change in Awareness                ...
Changing Drupal                    + It’s hard to steer a boat of 630,000                    + Focus on design led by Drie...
Changing Awareness                    + The web is growing up (slowly & quickly)                    + Users don’t just wan...
Process Progress                    + The Decline & Fall of the Photoshop Empire                    + Tiles not Comps     ...
The Web Has Left the Building                    + It’s in our pocket                    + It’s on the couch              ...
It’s Time To Rethink Our                              Design Thinking                         and Drupal will be our canva...
because frankly, we can’t                  be certain of all that much                                       hwdesignco.co...
So What DO We Know?                    + Our Client                      (their business, their workflows, their pain point...
So if it weren’t for Slide #3                   we’d be all set, right?                                        hwdesignco....
Not exactly.                         (hurts, doesn’t it?)                                           hwdesignco.com | @jpam...
Know Your Client,      Know Their Content                    + Knowing the business can highlight                         ...
And Because Content Changes                    + We can define its structure                         (both semantically and...
A Perplexing Paradox                    + Hierarchy in structure of content is fairly static                      (title i...
Design & Web Standards,                         Sitting in a Tree                           (with Drupal)                 ...
Power to the People                    + and their Web clients                    + Since we don’t know what that client i...
So don’t do that.                                         hwdesignco.com | @jpamental | DrupalCampWMASunday, January 20, 13
Embrace the New World Order                    + Discover & Map                    + Know the content structure           ...
Paradox Lost                    + Give your device previews the squint test                    + Decode your apps: make a ...
How, you ask?                                         hwdesignco.com | @jpamental | DrupalCampWMASunday, January 20, 13
We’re Not Designing Pages                    + We’re designing systems of relationships                         & hierarch...
We’re Designing Meaning                                       hwdesignco.com | @jpamental | DrupalCampWMASunday, January 2...
Psychology & Cognitive      Science are The New Black                    + In order to preserve meaning & reinforce       ...
Task-Appropriate Design is the      OTHER New Black                    + A place for everything &                         ...
It’s not the What but the      Why & How                    + Josh Clark: ‘I have some attention to spend’ –              ...
Guess what?                                       hwdesignco.com | @jpamental | DrupalCampWMASunday, January 20, 13
Drupal Can Do That                    + Nothing we’ve discussed is impossible (or                         in some cases ev...
The Medium Is the Message                    + But device capabilities should dictate how                         you pres...
Makes the ‘thinking’ part                  sound pretty important, huh?                                        hwdesignco....
Why Harp on This?                    + Because designing a page in Photoshop                         is simply fantasy    ...
Be Prepared                    + You know design                    + You know your client (or you should)                ...
Now Get Out & Go Make                          Something Awesome                                      Hello.              ...
Thank You!                         Jason Pamental (@jpamental)                            jason@hwdesignco.com            ...
Resources                    + Mobile UI Patterns:                         http://mobile-patterns.com/dashboard-navigation...
Books                    + Responsive Web Design                         Ethan Marcotte, A Book Apart                    +...
Upcoming SlideShare
Loading in …5
×

Drawing on Quicksand: Visual Systems, Drupal & The Modern Web World

1,223 views
1,106 views

Published on

My keynote presentation from the Western Massachusetts DrupalCamp at UMass Amherst on Jan. 19th, 2013.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,223
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Drawing on Quicksand: Visual Systems, Drupal & The Modern Web World

  1. 1. Drawing in Quicksand Visual Systems, Drupal & The Modern Web World DrupalCamp Western MA (#drupalcampma) Jason Pamental | @jpamental 19 January, 2013 http://hwdesignco.comSunday, January 20, 13
  2. 2. About Me + Jason Pamental principal, co-founder of h+w design + 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 @ hwdesignco.com hwdesignco.com | @jpamental | DrupalCampWMASunday, January 20, 13
  3. 3. Let’s Talk About Change + a Change in Drupal + a Change in Awareness + a Change in Process + a Change in the Web in short: let’s talk about Design hwdesignco.com | @jpamental | DrupalCampWMASunday, January 20, 13
  4. 4. Changing Drupal + It’s hard to steer a boat of 630,000 + Focus on design led by Dries + Markup machismo by Morten + Mobile made first by John Albin + Pioneering UX led by Kevin Oleary Focus on design, usability & the admin hwdesignco.com | @jpamental | DrupalCampWMASunday, January 20, 13
  5. 5. Changing Awareness + The web is growing up (slowly & quickly) + Users don’t just want to access – they want to experience + Tools like Drupal & Wordpress mean the next amazing site is one smart dropout away. You can’t afford to suck So what will make your site memorable? hwdesignco.com | @jpamental | DrupalCampWMASunday, January 20, 13
  6. 6. Process Progress + The Decline & Fall of the Photoshop Empire + Tiles not Comps + Prototype, not promises + Never, ever use Arial again So why do we still think in pages? hwdesignco.com | @jpamental | DrupalCampWMASunday, January 20, 13
  7. 7. The Web Has Left the Building + It’s in our pocket + It’s on the couch + It’s on our television + It’s in the dash So why do we still think 960 matters? hwdesignco.com | @jpamental | DrupalCampWMASunday, January 20, 13
  8. 8. It’s Time To Rethink Our Design Thinking and Drupal will be our canvas hwdesignco.com | @jpamental | DrupalCampWMASunday, January 20, 13
  9. 9. because frankly, we can’t be certain of all that much hwdesignco.com | @jpamental | DrupalCampWMASunday, January 20, 13
  10. 10. So What DO We Know? + Our Client (their business, their workflows, their pain points) + Their Content (today’s version at least) + Drupal (our Swiss Army knife) + Design (and that’s more than coloring pixels) hwdesignco.com | @jpamental | DrupalCampWMASunday, January 20, 13
  11. 11. So if it weren’t for Slide #3 we’d be all set, right? hwdesignco.com | @jpamental | DrupalCampWMASunday, January 20, 13
  12. 12. Not exactly. (hurts, doesn’t it?) hwdesignco.com | @jpamental | DrupalCampWMASunday, January 20, 13
  13. 13. Know Your Client, Know Their Content + Knowing the business can highlight opportunities and adjacencies that lead to innovation + Design from the Content Out (it’s not just for buzzwords anymore) + Be prepared for change + Why? Because it’s in a CMS hwdesignco.com | @jpamental | DrupalCampWMASunday, January 20, 13
  14. 14. And Because Content Changes + We can define its structure (both semantically and technically) + But we can’t know its, well, content + That, by the way, is the point of a CMS + Here’s where design gets REALLY important hwdesignco.com | @jpamental | DrupalCampWMASunday, January 20, 13
  15. 15. A Perplexing Paradox + Hierarchy in structure of content is fairly static (title is always important, image captions less so) + Representation of that hierarchy changes with visual scale of the whole + UI must afford the same controls but must adapt to the mode of interaction + These are very different things hwdesignco.com | @jpamental | DrupalCampWMASunday, January 20, 13
  16. 16. Design & Web Standards, Sitting in a Tree (with Drupal) hwdesignco.com | @jpamental | DrupalCampWMASunday, January 20, 13
  17. 17. Power to the People + and their Web clients + Since we don’t know what that client is, the solution has to live there, not on the server (for now) + Drupal can help us deliver + Doing so from scratch can be hard hwdesignco.com | @jpamental | DrupalCampWMASunday, January 20, 13
  18. 18. So don’t do that. hwdesignco.com | @jpamental | DrupalCampWMASunday, January 20, 13
  19. 19. Embrace the New World Order + Discover & Map + Know the content structure + Drupal as Prototype Engine + Style Tiles: develop the design vocabulary + Use your framework (built or borrowed) + Adjust design to maintain hierarchy at different scales hwdesignco.com | @jpamental | DrupalCampWMASunday, January 20, 13
  20. 20. Paradox Lost + Give your device previews the squint test + Decode your apps: make a list, check the device – what is it that delights you? + Use conventions to build appropriately + Use Drupal to deliver one platform with many experiences hwdesignco.com | @jpamental | DrupalCampWMASunday, January 20, 13
  21. 21. How, you ask? hwdesignco.com | @jpamental | DrupalCampWMASunday, January 20, 13
  22. 22. We’re Not Designing Pages + We’re designing systems of relationships & hierarchy to infer meaning & importance + Good design has structure – but that structure must be fluid + Information & understanding must hold true no matter how it’s conveyed hwdesignco.com | @jpamental | DrupalCampWMASunday, January 20, 13
  23. 23. We’re Designing Meaning hwdesignco.com | @jpamental | DrupalCampWMASunday, January 20, 13
  24. 24. Psychology & Cognitive Science are 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 hwdesignco.com | @jpamental | DrupalCampWMASunday, January 20, 13
  25. 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 + As may be the importance of some tasks versus others hwdesignco.com | @jpamental | DrupalCampWMASunday, January 20, 13
  26. 26. It’s not the What but 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) hwdesignco.com | @jpamental | DrupalCampWMASunday, January 20, 13
  27. 27. Guess what? hwdesignco.com | @jpamental | DrupalCampWMASunday, January 20, 13
  28. 28. Drupal Can Do That + Nothing we’ve discussed is impossible (or in some cases even very difficult) in Drupal + It just takes... Thought. + Carefully considered combinations of design patterns, themes & modules that leverage existing technologies & techniques can get you there hwdesignco.com | @jpamental | DrupalCampWMASunday, January 20, 13
  29. 29. The Medium Is the Message + But 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 don’t forget about fat fingers) + Focus of attention & mode of input dictates your design approach hwdesignco.com | @jpamental | DrupalCampWMASunday, January 20, 13
  30. 30. Makes the ‘thinking’ part sound pretty important, huh? hwdesignco.com | @jpamental | DrupalCampWMASunday, January 20, 13
  31. 31. Why Harp on This? + Because designing a page in Photoshop is simply fantasy + Worse: designing just a page is only 1/400th of the answer (or less) + Even prototyping in static HTML only tells part of the story (though doing so responsively is a start) hwdesignco.com | @jpamental | DrupalCampWMASunday, January 20, 13
  32. 32. Be Prepared + You know design + You know your client (or you should) + You know the web & what can be done on it + Don’t stop looking, seeing & learning + Use Drupal to help + Design meaning not pages hwdesignco.com | @jpamental | DrupalCampWMASunday, January 20, 13
  33. 33. Now Get Out & Go Make Something Awesome Hello. make I’m a web professional and I Awesome Uncertainty FTW hwdesignco.com | @jpamental | DrupalCampWMASunday, January 20, 13
  34. 34. Thank You! Jason Pamental (@jpamental) jason@hwdesignco.com Jason Pamental | @jpamental http://hwdesignco.comSunday, January 20, 13
  35. 35. Resources + Mobile UI Patterns: http://mobile-patterns.com/dashboard-navigation + LukeW’s Multi-Device Layout Patterns http://www.lukew.com/ff/entry.asp?1514 + Navicon (blog post) Jeremy Keith (excellent post w/lots of references) + StyleTil.es (website) Samantha Warren (this is your start, then go Google) hwdesignco.com | @jpamental | DrupalCampWMASunday, January 20, 13
  36. 36. Books + Responsive Web Design Ethan Marcotte, A Book Apart + Adaptive Web Design Aaron Gustafson, Easy Readers + Mobile First Luke Wroblewski, A Book Apart + Don’t Make Me Think Steve Krug (really - you still have to read it) + The Design of Everyday Things Don Norman (web usability learned from the design of doors) hwdesignco.com | @jpamental | DrupalCampWMASunday, January 20, 13

×