A general overview of the "web design" industry and lots of other stuff too.

3. Gene Crawford
@genecrawford
gene@theironyard.com
unmatchedstyle.com
@unmatchedstyle

10. president@southcarolina.aiga.org

17. 23,916

18. Web Landscape Tour
1. UX vs. UI vs. “Web Designer”
2. Design Thinking
3. What is the “Web”
4. How to think about the industry
5. Q&A Time

21. User Experience

22. User Experience
A person's perceptions
and responses that result
from the use or
anticipated use of a
product, system or service

24. User Experience
on the web

29. UI
User Interface

42. IA
Information Architecture

57. Pattern
Libraries
UI + Developers

64. Usability Testing

65. UX Sprints
http://www.gv.com/sprint/

66. ONE DOES NOT SIMPLY
DO ALL OF THIS STUFF
ONE DOES NOT SIMPLY
DO ALL OF THIS STUFF

67. What is the
“WEB”?

68. Websites
+ Web Apps
+ Your Phones
+ Other Crap Too...

72. CONTEXT

75. 81% of Americans
between the ages
of 25–34 own a
smartphone.

76. 42% of smartphone owners
between the ages of 18–29
consider their phone as their
primary way of
accessing the internet.

77. Where are people using
mobile devices?
84% at home
80% during miscellaneous downtime throughout the day
76% waiting in lines of waiting for appointments
69% while shopping
64% at work
62% while watching TV (alt. study claims 84%)
47% during commute in to work
Source: https://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience/

78. Why?
Does any of this matter?

80. Apps vs. Web
all the same stuff....

81. Today’s web
is the
MOBILE WEB

83. Responsive Web Design

87. Responsive Web Design

88. Responsive Web Design

89. Some Basics

99. Think Mobile First

100. Mobile Web is Squishy

101. Think Mobile+Content First

103. Think Mobile+Content+Context First

107. Apps vs. Web
don’t make silos for your content...

109. Start mobile site then expand to be the full site.

113. http://www.snopes.com/history/american/gauge.asp

114. “Web” Design Landscape“Web” Design Landscape

119. +

122. UNITE THE CLANS

126. Designer or
UX or UI or
Interaction Designer or
Web Designer or
Web Developer or
Frontend Designer or
Frontend Engineer

127. All The Same THINGS

128. Portfolio
Based

137. Web Developer

138. Web Developer

139. Frontend Engineer

140. UI/UX Developer

141. Frontend Designer/Developer

142. Frontend Developer
IBM Design in Austin, TX
https://jobs.github.com/positions/6107bb14-191d-11e5-9060-f0d7dcf002cf

143. • Front-End Development: Coding valid HTML, CSS, JavaScript, and jQuery
• Visual Design: Understanding the use of color, grid, layout, and typography
• Mobile Integration: Creating consistent experiences through responsive layouts, touch
interactions, and input techniques
• Project Management: Incorporating iterative design, agile practices, and software
development life cycles
• Information Architecture: Planning experiences through site mapping, modelling, and
wireframes
• Interaction Design: Building flow, form design, micro-interactions, and transition
animations
• Copywriting and Content Strategy: Writing microcopy, content modelling, and content
inventories
• User Research: Conducting field research, usability studies, research synthesis, and data
analysis
http://centercentre.com/blog/2013-12-05-welcome-to-unicornicopia
CenterCenter Design Poll

145. For example, let’s take the field of graphic design. Say you’re a small company with a great idea and
you’re ready to hire a designer to build out your website. A standard graphic designer might show you a
portfolio of beautifully designed website images that look fantastic. A unicorn graphic designer will take it
much further:
• Not only did they do the visual design, but they are then able to turn that into code and build out the
website itself
• They have deep knowledge of user interaction (UI), going beyond the look and feel and delving into
best practices for how users interact with everything from menus and buttons to links and colors
• They’ve already thought several steps ahead in terms of the mobile experience, ensuring that your
site will look great on phones, tablets, laptops, and large monitors
• The content on the sites they show you isn’t filled with Lorem Ipsum placeholders, but copy that they
wrote themselves… typo-free, grammatically correct, and with a friendly but persuasive voice that
compels the user to take action
• And what’s that? You have a company softball team? Turns out they were all-state in high school,
can play any infield position, and hit .425 with 24 homers their senior year
http://www.salary.com/become-a-unicorn-employee/
The Unicorn “Designer”

146. Devsigner

147. Thank You!
Gene Crawford
@genecrawford | Gene@TheIronYard.com

148. UX CONCEPTS
From The Gallery
UnmatchedStyle.com

149. Call-to-Action

152. Microcopy
It’s all in teh details...

153. Good
Microcopy

156. Good
Microcopy

158. Design for Errors

161. facebook.com

166. “OnBoarding”

168. Twitter’s
New User
Experience

170. OnBoarding
&
Gamification

171. If it looks fast...

173. Looks FASTLooks FAST

176. Mental Model
Don’t Lose It...

179. Affordance
“Perceived” Affordance
when it comes to website
design.... The man Don Norman.
Affordance
“Perceived” Affordance
when it comes to website
design.... The man Don Norman.

186. Gestalt

190. Case Study

192. Confusing

198. Case Study

206. Avoid Failure Loops

207. Thank You!
Gene Crawford
@genecrawford | Gene@TheIronYard.com