Jared Ponchot // @jponch // Artifact East 2013
With Responsive Wireframes
GETTING REAL
Slide 2
Slide 2 text
HI, MY NAME IS
JARED PONCHOT
& I’m a unicorn
Slide 3
Slide 3 text
1.
WHY WIREFRAME
2.
WHY HTLM WIREFRAMES
3.
HOW TO
Slide 4
Slide 4 text
BLESSING!
Slide 5
Slide 5 text
WHY WIREFRAME
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
CHEAP & UGLY
Slide 8
Slide 8 text
FURTHER CLARIFY ...
CONTENT, STRUCTURE &
PRIORITY
Slide 9
Slide 9 text
LIGHT-WEIGHT, LIVING
DELIVERABLES
Slide 10
Slide 10 text
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
Slide 11
Slide 11 text
DISPLAY
MODEL WIREFRAME
Slide 12
Slide 12 text
PURPOSE CONTENT
STYLE
STRATEGY
DESIGN
DEVELOPMENT
Slide 13
Slide 13 text
PURPOSE CONTENT
STYLE
WIREFRAMES
Slide 14
Slide 14 text
PURPOSE, NOT PREFERENCE
PRIORITY, NOT PLACEMENT
SYSTEMS, NOT PAGES
Slide 15
Slide 15 text
“
— Victor Papanek
DESIGN IS THE CONSCIOUS EFFORT
TO IMPOSE A MEANINGFUL ORDER
Slide 16
Slide 16 text
WHY
HTML WIREFRAMES?
Slide 17
Slide 17 text
http://imgur.com/a/q1WIO
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
Photo by lukew http://www.flickr.com/photos/lukew/7382743430/in/photostream
Slide 21
Slide 21 text
“
— 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.
Slide 22
Slide 22 text
“
— from the Agile Manifesto
WORKING SOFTWARE ALWAYS TRUMPS
DOCUMENTS ABOUT WORKING SOFTWARE.
Slide 23
Slide 23 text
BONUS REASON:
IT’S NOT THAT HARD!
Slide 24
Slide 24 text
USE A FRAMEWORK
ROLL YOUR OWN?
or
Slide 25
Slide 25 text
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
Slide 26
Slide 26 text
FRAMEWORK CONS
‣ Working with someone else’s code
‣ Learning curve
‣ Might not be the best fit for your situation
Slide 27
Slide 27 text
ROLL YOUR OWN PROS
‣ Ownership
‣ Flexibility
‣ Customization
‣ More likely creates HTML/styles for final product
‣ Build up your own component / style library
Slide 28
Slide 28 text
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
Slide 29
Slide 29 text
PROTOTYPING FRAMEWORKS
‣Twitter Bootsrap
‣Zurb Foundation
‣ Gumby
‣ Wirefy
‣ Proty
‣ Skeleton
‣ 320 and up
‣ and so on ...
Slide 30
Slide 30 text
BOOTSTRAP
Pros
‣ Popular
‣ Lots of documentation
‣ 4 default break points
‣ Templates & Components
‣ Active development
Cons
‣ Not semantic
‣ Not mobile first (now mobile first)
Slide 31
Slide 31 text
FOUNDATION
Pros
‣ Popular
‣ Mobile first
‣ Optionally semantic
‣ Templates & Components
‣ Active development
‣ Paid training available
Cons
‣ Only 1 default break point
(small/large)
Slide 32
Slide 32 text
GETTING STARTED WITH
FOUNDATION
Slide 33
Slide 33 text
THE PLACES YOU’LL GO
‣ DOWNLOAD: http://foundation.zurb.com
‣ DOCUMENTATION: http://foundation.zurb.com/docs/
‣ TEMPLATES: http://foundation.zurb.com/templates.php
Slide 34
Slide 34 text
GETTING STARTED
‣ Grid
‣ Templates
‣ Other Goodies
Slide 35
Slide 35 text
THE GRID
‣ 12 columns (small and large)
‣ Nestable
‣ Fluid, with an arbitrary max-width
Slide 36
Slide 36 text
x = number of grid columns
Small screen: “small-x columns”
Large screen: “large-x columns”
Slide 37
Slide 37 text
...
Slide 38
Slide 38 text
small-12 large-6
...
Slide 39
Slide 39 text
small-12
...
Slide 40
Slide 40 text
small-12 large-8 large-offset-4
...
Slide 41
Slide 41 text
small-12 large-8 large-offset-3
...
...
Slide 42
Slide 42 text
small-10 large-8 large-centered
...
Slide 43
Slide 43 text
small-10 large-8 large-uncentered
...
Slide 44
Slide 44 text
small-12 large-8 & large-4
...
...
Slide 45
Slide 45 text
small-8 within small-12
small-8 within large-5
...
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
COMPONENTS & ELEMENTS
‣ Navigation
‣ Buttons
‣ Forms
‣ Typography
‣ Components
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
No content
Slide 57
Slide 57 text
LET’S GIVE IT A TRY!
Slide 58
Slide 58 text
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
Slide 59
Slide 59 text
No content
Slide 60
Slide 60 text
No content
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
No content
Slide 64
Slide 64 text
No content
Slide 65
Slide 65 text
No content
Slide 66
Slide 66 text
No content
Slide 67
Slide 67 text
No content
Slide 68
Slide 68 text
No content
Slide 69
Slide 69 text
No content
Slide 70
Slide 70 text
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
Slide 71
Slide 71 text
No content
Slide 72
Slide 72 text
No content
Slide 73
Slide 73 text
I’M PARTIAL TO PARTIALS
Slide 74
Slide 74 text
No content
Slide 75
Slide 75 text
No content
Slide 76
Slide 76 text
Slide 77
Slide 77 text
INDEX.HTML
‣ index.kit
‣ Document Head
‣ Primary Navigation
‣ Global Footer
‣ Document Foot