The Zen of HTML Prototyping and Designing in the Browser

A primer in using HTML frameworks to create working prototypes and wireframes.

Transcript

1. THE ZEN OF HTML PROTOTYPING & Designing in the Browser Monday, May 6, 13
2. HOWDY. MY NAME IS JOSH. Monday, May 6, 13
3. ALL YOU EVER WANTED TO KNOW ABOUT HTML PROTOTYPING: • What is HTML prototyping? • Why should I do it? • How does it fit in to the design process? • How do I do it? • How do I sell it? • How does it work with Drupal? • Demo Time! • Links & resources Monday, May 6, 13
4. DISCLAIMER* *What I am about to tell you is not a be-all-end-all, set in stone process. It will not cure cancer or spew forth double rainbows with kittens as pilots. What I WILL discuss with you are methods and processes which have been a success for ME in the real world. I will also discuss things that have failed miserably, and how I learned from them. Monday, May 6, 13
5. SO, WHAT’S THIS PROTOTYPING THING? Monday, May 6, 13
6. “Prototyping is rendering ideas to understand them better.” JARED M. SPOOL Monday, May 6, 13
7. WIREFRAMING vs. PROTOTYPING vs. HTML PROTOTYPING Monday, May 6, 13
8. WIREFRAMES ARE A SERIES OF STATIC IMAGES AND DOCUMENTS. Yet we attempt to use them to describe multi- dimensional user experiences. Monday, May 6, 13
9. WIREFRAMES ALONE CANNOT TELL THE WHOLE STORY. They can, however, suck time & money, create confusion, and make false promises. Monday, May 6, 13
10. A prototype is an early sample or model built to test a concept or process or to act as a thing to be replicated or learned from. Monday, May 6, 13
11. Prototyping with HTML creates a living, breathing environment for users to interact with. Monday, May 6, 13
12. The goal of HTML prototyping is to discover and solve design problems early on in the process by iterating, testing, implementing and refining. Monday, May 6, 13
13. IT’S VERY HARD TO DO THAT WITH A SET OF PDF WIREFRAMES. Monday, May 6, 13
14. WHY PROTOTYPE INSTEAD OF WIREFRAME? Monday, May 6, 13
15. WIREFRAMES CAN’T HANDLE RESPONSIVE DESIGN. PROTOTYPING CAN. Let’s do some math... Monday, May 6, 13
16. (Demonstration and Support Graphics) Monday, May 6, 13
17. Creating static wireframes for responsive design is a F#$%ING NIGHTMARE! Monday, May 6, 13
18. “One of the most important skills in RWD is the ability to control the layout (how content shifts and reflows at various widths).” TRENT WALTON Monday, May 6, 13
19. PROTOTYPING FORCES YOU TO DISCOVER AND SOLVE PROBLEMS EARLY ON This is where designing in the browser comes in Monday, May 6, 13
20. (Demonstration and Support Graphics) Monday, May 6, 13
21. PROTOTYPES SHOW, RATHER THAN DESCRIBE When you need to demonstrate complex user interactions to clients and developers, “describing” these interactions with a static wireframe creates too many unanswered questions. Monday, May 6, 13
22. (Demonstration and Support Graphics) Monday, May 6, 13
23. PROTOTYPES ARE MORE REPRESENTATIVE OF THE FINAL PRODUCT. So many benefits to this! Monday, May 6, 13
24. (Demonstration and Support Graphics) Monday, May 6, 13
25. EASIER ITERATION - DESIGN, BUILD, TEST & EVALUATE FOR THE WIN Escape the print mentality. Monday, May 6, 13
26. (Demonstration and Support Graphics) Monday, May 6, 13
27. HOW DOES PROTOTYPING FIT INTO MY PROCESS? Monday, May 6, 13
28. THE OLD WAY IS VERY LINEAR. THE WEB ISN’T. DISCOVER Strategists DESIGN Designers DEVELOP Developers DEPLOY Client & Users WEBSITE! Profit!!! Monday, May 6, 13
29. THE OLD WAY IS VERY LINEAR. THE WEB ISN’T. DISCOVER Strategists DESIGN Designers DEVELOP Developers DEPLOY Client & Users Wireframes go somewhere in here... WEBSITE! Profit!!! Monday, May 6, 13
30. A BETTER WAY, A BETTER PROCESS Monday, May 6, 13
31. PURPOSE CONTENT & HIERARCHY SYSTEMS & STYLE STRATEGY DESIGN DEVELOPMENT Monday, May 6, 13
32. PURPOSE CONTENT & HIERARCHY SYSTEMS & STYLE STRATEGY DESIGN DEVELOPMENT Prototyping fits nicely in the middle Make iterative prototypes Monday, May 6, 13
33. HTML Prototyping: IS IT DESIGN? IS IT STRATEGY? IS IT FRONT-END DEV? Monday, May 6, 13
34. YES. Monday, May 6, 13
35. YOU’VE SOLD ME ON PROTOTYPING. WHERE DO I START? Monday, May 6, 13
36. EVERY TEAM, PROJECT & SITUATION IS VERY DIFFERENT. Start by evaluating these things. Monday, May 6, 13
37. DISPOSABLE REUSABLE Only for communicating Lets developers create their own HTML / CSS Less time in prototyping phase, but more time in development phase. Sets HTML structure for final product Requires more collaboration between design & development More time in prototyping phase, but more less time in development phase. OR Monday, May 6, 13
38. Prototyping with HTML allows you to clearly separate the UX from the aesthetic design. Take advantage of this. Monday, May 6, 13
39. SKETCH FIRST! Monday, May 6, 13
40. START WITH CONTENT, NOT DEVICE. Monday, May 6, 13
41. “...We need to shed the notion that we create layouts from a canvas in. We need to flip it on its head, and create layouts from the content out.” MARK BOULTON Monday, May 6, 13
42. CREATE ONCE, PUBLISH EVERYWHERE. IF YDK, YOU BETTER GTS! Monday, May 6, 13
43. MOBILE OR DESKTOP FIRST? YEP. Start with the most complicated interactions first, but create a mobile-first CSS structure. Monday, May 6, 13
44. BECOME FRIENDS WITH YOUR DEVELOPER(S) Prototyping with HTML requires collaboration to be successful. Then again, so does anything. Monday, May 6, 13
45. CHANGE EXPECTATIONS Most clients and internal stakeholders expect a waterfall approach. It’s your job as a designer to change their expectation. Monday, May 6, 13
46. LET’S TALK GEAR <GRUNT!> Monday, May 6, 13
47. FRAMEWORKS vs. HOME-BREWING Monday, May 6, 13
48. PROS OF PROTOTYPING FRAMEWORKS Speed Built-in grid Built-in styles Built-in components Pre-tested in various browsers Open-source community Widespread use Support Upgrades & updates Easy knowledge transfer Monday, May 6, 13
49. CONS OF PROTOTYPING FRAMEWORKS Working with someone else’s code Learning curve Proprietary markup Might not be the best fit for your situation Can be tough to implement in Drupal Monday, May 6, 13
50. PROS OF CUSTOM PROTOTYPES Flexibility Customization Creates HTML structure for final product Not reliant on any specific program or technology (Sass, Codekit, etc.) Can be customized / optimized for Drupal markup Over time, you can build up a component / style library. Monday, May 6, 13
51. CONS OF PROTOTYPING FRAMEWORKS Starting from scratch (or at least relatively) No immediate baked-in styles, grid, typography, components, etc. Possibly longer implementation time On your own for support & testing Knowledge transfer may be difficult Monday, May 6, 13
52. ZURB FOUNDATION 4 Now 97% more semantic! Runs on Sass or CSS Mobile First Uses Box-Sizing for grid Can disable presentational classes Large community of users Lots of support Only supports IE 9+ PROTOTYPING FRAMEWORKS Monday, May 6, 13
53. TWITTER BOOTSTRAP Not so semantic Runs on LESS or CSS Desktop First Uses presentational classes Large community of users Lots of support & documentation Doesn’t always play well with Drupal Support for IE 7+ PROTOTYPING FRAMEWORKS Monday, May 6, 13
54. ROCK HAMMER Requires Hammer for Mac Tons of development features How does it work with Drupal? No idea. PROTOTYPING FRAMEWORKS Monday, May 6, 13
55. OTHER FRAMEWORKS (THERE’S A SHIPLOAD) LESS Jetstrap Divshot LayoutIt Frameless Mobile Boilerplate Wirefy Sass Responsive Kraken Susy Grids Zen Grids HTML5 Boilerplate Semantic.gs CodeKit The list goes on... Monday, May 6, 13
56. ...AND THERE’S EVEN MORE WHERE THAT CAME FROM. Monday, May 6, 13
57. COOL. NOW HOW DO I GET MY TEAM ONBOARD? Monday, May 6, 13
58. HOW MUCH DOES IT COST? Monday, May 6, 13
59. Imagine asking a Real Estate company, “How much does a house cost?” Well it depends. First off, what are the essentials you need? Three bedrooms because you have two kids? Central air conditioning because you live down south? Now that we have the essentials, what are some of the less essential, yet nice features? Basement? Extra storage? Large backyard? Three car garage? What if you could have it your way? How about a pool? Sounds nice right? BRIAN HOFF Monday, May 6, 13
60. YOU SHOULD HAVE ALREADY HAD TIME & BUDGET FOR WIREFRAMES... RIGHT? Overall, the amount of time you spend creating HTML prototypes should cut down on front-end development time as compared to a traditional wireframe approach. Monday, May 6, 13
61. ALLOW FOR SOME TIME FOR EXPERIMENTATION New things always take time to learn. Talk to your team on how to best approach this. Monday, May 6, 13
62. DON’T BE AFRAID. OWN THAT SH*T Monday, May 6, 13
63. DUDE. IT’S DRUPALCON. TALK ABOUT DRUPAL. Monday, May 6, 13
64. KEEP YOUR MARKUP FREE OF PRESENTATIONAL CLASSES. Monday, May 6, 13
65. DIVIDE YOUR HTML & CSS INTO PARTIALS, LIKE DRUPAL DOES. Monday, May 6, 13
66. PROTOBOTS, DECOUPLING, & OTHER JUNK (Section to talk about protobots) Monday, May 6, 13
67. USE FOUNDATION / BOOTSTRAP THEMES. Monday, May 6, 13
68. DEMO TIME. LET’S DO THIS! Monday, May 6, 13
69. GIVE ME SOME LINKS! Go to github.com/puturlherewhendone for all of the links and resources used in this presentation Monday, May 6, 13
70. THANKS! twitter.com/joshriggs dribbble.com/joshriggs josh.riggs@gmail.com lullabot.com Monday, May 6, 13