A NEW
TOOLBOX
S E C R E T S F R O M H A P P Y C O G
T E X A S S T A T E U N I V E R S I T Y / S A N M A R C O S , T X
K E V I N S H A R O N S O P H I E S H E P H E R D
Slide 2
Slide 2 text
Howd
Slide 3
Slide 3 text
Tonight:
• Happy what?
• Secrets: Shortcuts, corner
cutting tricks and tips, & jk lol.
• Case Study
Slide 4
Slide 4 text
Austin, TX
New York City, NY
Philadelphia, PA
Happy Cog
Slide 5
Slide 5 text
Secret #1
Jeffrey Zeldman
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
Education
Slide 8
Slide 8 text
Education:
• A List Apart
• A Book Apart
• An Event Apart
• Girl Develop It
• Ladies in Tech
Slide 9
Slide 9 text
Happy Cog:
• We share with the Community.
• Educate our clients.
• Mentor young designers.
Slide 10
Slide 10 text
Secret #2
“Go make some mistakes”
Slide 11
Slide 11 text
I wish.
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
Best Practices.
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
Web Standards:
“By releasing browsers which
do not uniformly support those
standards, browser makers are
injuring Web developers,
businesses and users alike.
—http://archive.webstandards.org/mission.html
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
Fluid Grids:
“But given all that we’ve achieved over
the past few years—moving past tables,
evangelizing standards… I do wish we’d
bend some of that ingenuity to break out
of our reliance on “minimum screen
resolution.”
—http://alistapart.com/article/fluidgrids
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
Best Practices
• Collaboration.
• Give ideas time to develop.
• Learn to separate evolution from broken
process.
Slide 21
Slide 21 text
Secret #3
All the details
Slide 22
Slide 22 text
HTML Wireframes
vs. Prototypes
Slide 23
Slide 23 text
HTML Wireframes
Twitter Bootstrap
Hand-rolled HTML
Twitter Bootstrap
Custom RAILS framework
Foundation
Yay!
Slide 24
Slide 24 text
Style Tiles,
Element Collages
Concept Boards
Slide 25
Slide 25 text
Oh no, a dirty word:
Clients
Slide 26
Slide 26 text
business
goals user needs
process
Slide 27
Slide 27 text
You get the clients you deserve.
Slide 28
Slide 28 text
Secret #4
Who are the UX
designers?
Slide 29
Slide 29 text
Everyone
Slide 30
Slide 30 text
Audience
Slide 31
Slide 31 text
Empath
Slide 32
Slide 32 text
“Designers”
Slide 33
Slide 33 text
“Visual Designer”
Slide 34
Slide 34 text
“Graphic Designer”
Slide 35
Slide 35 text
“Pretender”
Slide 36
Slide 36 text
“Camera guy”
Slide 37
Slide 37 text
Graphic Designer:
Paul Rand
Slide 38
Slide 38 text
Graphic Designer:
Paula Scher
Slide 39
Slide 39 text
she was a great
“visual designer”
1982–2013
Slide 40
Slide 40 text
Don’t be the “designer (who codes).”
Become a designer with a bigger toolbox.
Slide 41
Slide 41 text
Secret #5
Responsive Web
Design
Slide 42
Slide 42 text
Responsive
Web Design
Slide 43
Slide 43 text
Screens
Everywhere
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
The Pencil
Slide 46
Slide 46 text
Hashtag R-W-D, you guys.
Slide 47
Slide 47 text
Secret #6
The Secret Sauce
Slide 48
Slide 48 text
This stuff ain’t easy
Slide 49
Slide 49 text
Waterfall-ish
Slide 50
Slide 50 text
IA/UX Template Development
Timeline
Discovery
IA/UX
Graphic Design CMS
Slide 51
Slide 51 text
It all depends.
Slide 52
Slide 52 text
Typical Projects
Slide 53
Slide 53 text
The Big Brand
Slide 54
Slide 54 text
Universities
Slide 55
Slide 55 text
Atypical
Slide 56
Slide 56 text
Discovery.
Slide 57
Slide 57 text
The Kickoff
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
No content
Slide 60
Slide 60 text
UX
Slide 61
Slide 61 text
Content strategy is…
Slide 62
Slide 62 text
Content Strategy:
“…content strategy is to
copywriting as information
architecture is to design.”
—Rachel Lovinger, interesting person
You’re doing it wrong… “
“
—the twitters
Graphic Design:
Slide 67
Slide 67 text
Graphic Design:
• Textures, fonts, colors.
• Content.
• Solving problems on the front end and
the back end.
Slide 68
Slide 68 text
It’s not a collaboration if you don’t say “no.”
Slide 69
Slide 69 text
Atypical
Slide 70
Slide 70 text
Atypical:
• No branding.
• No work.
• No location.
• No identity.
• Oh crap…
Slide 71
Slide 71 text
Atypical Project
Process
Slide 72
Slide 72 text
Met Him Yesterday
My Dan Mall Moment
Seems like a Good Guy
To Be Continued...
Slide 73
Slide 73 text
Previous Client
+ App Developer
The Client
Slide 74
Slide 74 text
HTML Wireframes
Slide 75
Slide 75 text
HTML Wireframes
Slide 76
Slide 76 text
No content
Slide 77
Slide 77 text
No content
Slide 78
Slide 78 text
No content
Slide 79
Slide 79 text
No content
Slide 80
Slide 80 text
Design
Slide 81
Slide 81 text
HTML Wireframes
Concept Board
Timeline
Slide 82
Slide 82 text
No content
Slide 83
Slide 83 text
Personality
Slide 84
Slide 84 text
No content
Slide 85
Slide 85 text
No content
Slide 86
Slide 86 text
No content
Slide 87
Slide 87 text
No content
Slide 88
Slide 88 text
“You Can’t Have Happy Accidents
in the Browser
— Mark Boulton
Slide 89
Slide 89 text
No content
Slide 90
Slide 90 text
HTML Wireframes
Concept Board Home Page
Timeline
Slide 91
Slide 91 text
HTML Wireframes
Concept Board Home Page
Template Development
Timeline
Slide 92
Slide 92 text
HTML Wireframes
Concept Board Home Page
Template Development
Sub Pages
Timeline
Slide 93
Slide 93 text
In Photoshop
Home
Case Study
Blog Post
About
Team
Services
Slide 94
Slide 94 text
In Photoshop
In Photoshop
Slide 95
Slide 95 text
In Photoshop
In Photoshop
Slide 96
Slide 96 text
In Photoshop
In Photoshop
Slide 97
Slide 97 text
In Photoshop
In Photoshop
Slide 98
Slide 98 text
In Photoshop
In Photoshop
Slide 99
Slide 99 text
No content
Slide 100
Slide 100 text
11
6
Home
Case Study
Blog Post
About
Team
Services
Jobs
Job Listings
Blog Landing
Blog Archive
Work Listing
App Listing
App Case Study
App Variation
404
Contact
“How We Work”
Slide 101
Slide 101 text
Sketching
whiteboard
Slide 102
Slide 102 text
Designe Developer
Makes Design
Decisions in
Browser
Makes Design
Decisions in
Browser
Learned SASS Extensible Code
Team
Slide 103
Slide 103 text
Designer finds bug ➔ Files bug in Sifter ➔
Developer has question ➔ developer fixes
bug ➔ assign back to designer ➔ designer
looks at page to confirm ➔ designer closes
ticket
Designer Finds Bug ➔ Designer Fixes Bug
Q.A.
Slide 104
Slide 104 text
No content
Slide 105
Slide 105 text
HTML Wireframes
Concept Board Home Page Sub Pages
Timeline
Template Development
Slide 106
Slide 106 text
Remaining 11 pages x 4hrs = 44hrs
+ Tablet Design, 17 pages x 4hrs = 68hrs
+ Mobile Design, 17 pages x 4hrs = 68hrs
180 Hours (4.5 weeks)
Timeline
Slide 107
Slide 107 text
Early Design
Collaboration
QA the Whole Time
Using Sketches as Deliverable
What We Took Away
Slide 108
Slide 108 text
Thanks!
Kevin Sharon
@kevinsharon
Sophie Shepherd
@sophshepherd