Getting Real with Responsive Wireframes

From Artifact East, 2013

Transcript

1. Jared Ponchot // @jponch // Artifact East 2013 With Responsive Wireframes GETTING REAL
2. HI, MY NAME IS JARED PONCHOT & I’m a unicorn
3. 1. WHY WIREFRAME 2. WHY HTLM WIREFRAMES 3. HOW TO
4. BLESSING!
5. WHY WIREFRAME
7. CHEAP & UGLY
8. FURTHER CLARIFY ... CONTENT, STRUCTURE & PRIORITY
9. LIGHT-WEIGHT, LIVING DELIVERABLES
10. DISPLAY MODEL ‣ Capture the types of displays your site will need ‣ Brainstorm the components for each display ‣ Prioritize the components for each display ‣ Discover patterns ‣ Identify the unique things to design for and with
11. DISPLAY MODEL WIREFRAME
12. PURPOSE CONTENT STYLE STRATEGY DESIGN DEVELOPMENT
13. PURPOSE CONTENT STYLE WIREFRAMES
14. PURPOSE, NOT PREFERENCE PRIORITY, NOT PLACEMENT SYSTEMS, NOT PAGES
15. “ — Victor Papanek DESIGN IS THE CONSCIOUS EFFORT TO IMPOSE A MEANINGFUL ORDER
16. WHY HTML WIREFRAMES?
17. http://imgur.com/a/q1WIO
20. Photo by lukew http://www.flickr.com/photos/lukew/7382743430/in/photostream
21. “ — from 37Signals “Getting Real” GETTING REAL DELIVERS BETTER RESULTS BECAUSE IT FORCES YOU TO DEAL WITH THE ACTUAL PROBLEMS YOU'RE TRYING TO SOLVE INSTEAD OF YOUR IDEAS ABOUT THOSE PROBLEMS. IT FORCES YOU TO DEAL WITH REALITY.
22. “ — from the Agile Manifesto WORKING SOFTWARE ALWAYS TRUMPS DOCUMENTS ABOUT WORKING SOFTWARE.
23. BONUS REASON: IT’S NOT THAT HARD!
24. USE A FRAMEWORK ROLL YOUR OWN? or
25. FRAMEWORK PROS ‣ Low learning curve ‣ Speed ‣ Built-in grid ‣ Built-in styles ‣ Built-in components (some) ‣ Pre-tested in browsers ‣ Open-source community ‣ Widespread use ‣ Support ‣ Upgrades & updates ‣ Easy knowledge transfer
26. FRAMEWORK CONS ‣ Working with someone else’s code ‣ Learning curve ‣ Might not be the best fit for your situation
27. ROLL YOUR OWN PROS ‣ Ownership ‣ Flexibility ‣ Customization ‣ More likely creates HTML/styles for final product ‣ Build up your own component / style library
28. ROLL YOUR OWN CONS ‣ Initial time/thought investment ‣ Lots of choices to be made (grid, directory structure, etc.) ‣ Possibly longer implementation time ‣ On your own for support & testing ‣ Create your own documentation
29. PROTOTYPING FRAMEWORKS ‣Twitter Bootsrap ‣Zurb Foundation ‣ Gumby ‣ Wirefy ‣ Proty ‣ Skeleton ‣ 320 and up ‣ and so on ...
30. BOOTSTRAP Pros ‣ Popular ‣ Lots of documentation ‣ 4 default break points ‣ Templates & Components ‣ Active development Cons ‣ Not semantic ‣ Not mobile first (now mobile first)
31. FOUNDATION Pros ‣ Popular ‣ Mobile first ‣ Optionally semantic ‣ Templates & Components ‣ Active development ‣ Paid training available Cons ‣ Only 1 default break point (small/large)
32. GETTING STARTED WITH FOUNDATION
33. THE PLACES YOU’LL GO ‣ DOWNLOAD: http://foundation.zurb.com ‣ DOCUMENTATION: http://foundation.zurb.com/docs/ ‣ TEMPLATES: http://foundation.zurb.com/templates.php
34. GETTING STARTED ‣ Grid ‣ Templates ‣ Other Goodies
35. THE GRID ‣ 12 columns (small and large) ‣ Nestable ‣ Fluid, with an arbitrary max-width
36. x = number of grid columns Small screen: “small-x columns” Large screen: “large-x columns”
37. <div class="row"> <div class="small-12 large-8 columns">...</div> </div>
38. small-12 large-6 <div class="row"> <div class="small-12 large-6 columns">...</div> </div>
39. small-12 <div class="row"> <div class="small-12 columns">...</div> </div>
40. small-12 large-8 large-offset-4 <div class="row"> <div class="small-12 large-8 large-offset-4 columns">...</div> </div>
41. small-12 large-8 large-offset-3 <div class="row"> <div class="small-12 large-1 columns">...</div> <div class="small-12 large-8 large-offset-3 columns">...</div> </div>
42. small-10 large-8 large-centered <div class="row"> <div class="small-10 large-8 large-centered columns">...</div> </div>
43. small-10 large-8 large-uncentered <div class="row"> <div class="small-10 small-centered large-8 large-uncentered columns">...</div> </div>
44. small-12 large-8 & large-4 <div class="row"> <div class="small-12 large-8 columns">...</div> <div class="small-12 large-4 columns">...</div> </div>
45. small-8 within small-12 small-8 within large-5 <div class="row"> <div class="small-12 large-5 columns"> <div class="row"> <div class="small-8 columns">...</div> </div> </div> </div>
51. COMPONENTS & ELEMENTS ‣ Navigation ‣ Buttons ‣ Forms ‣ Typography ‣ Components
57. LET’S GIVE IT A TRY!
58. Site Name Portfolio Item Portfolio Item Portfolio Item Portfolio Item Legal text Portfolio Item Portfolio Item Navigation Portfolio Item Portfolio Item Portfolio Item Portfolio Item Portfolio Item Portfolio Item Legal text Menu
70. Site Name Portfolio Item Portfolio Item Portfolio Item Portfolio Item Legal text Portfolio Item Portfolio Item Navigation Portfolio Item Portfolio Item Portfolio Item Portfolio Item Portfolio Item Portfolio Item Legal text Menu
73. I’M PARTIAL TO PARTIALS
76. <!-- @import ../_partials/nav-primary -->
77. INDEX.HTML ‣ index.kit ‣ Document Head ‣ Primary Navigation ‣ Global Footer ‣ Document Foot
84. LESSONS FROM THE FRONT LINES
85. HELPFUL TIPS ‣ Keep sketching ‣ Keep innovating ‣ Keep it cheap ‣ Keep iterating
86. TA DA! Jared Ponchot // @jponch // Artifact East 2013
87. HELPFUL LINKS ‣ http://foundation.zurb.com ‣ http://html5boilerplate.com ‣ http://incident57.com/codekit/ ‣ http://html5doctor.com ‣ http://www.dontfeartheinternet.com/ html/html ‣ http://www.codeschool.com/courses/ assembling-sass ‣ http://bradfrost.github.io/this-is- responsive/resources.html#frameworks