Develop like a designer

+
Develop like a designer
+presented in partnership between
connect.tech 2017, beetches!

+
Hi!
The design process
Step 1: User research
Step 2: Design
Step 3: Testing + iteration
Intermission
Step 4: MVP
Step 5: Bedazzle it
Step 6: Adapt + deliver
Thanks!
AGENDA

Hi!
get your unicorn invaded by +

+
A unicorn is a mythical user experience
designer with an advanced and adaptive
skill range. Outstanding skills in
graphic design, rapid prototyping, front
end development, user testing, technical
speciﬁcations, marketing and branding.
It does not have an opinion, it has a
process, and will harmonize with any
environment.
It’s also a fluffy horse with a horn
projecting from it's head, blueish shoes,
ribbon neck thing and a blinking eye.
Big enough to be used as a cleaning
sponge and small enough to be sealed in
a Jiffy bag.
source: Jeff Gothelf
WHY UNICORNS?

+
design director, j+e creative
importantshit.co
calamityjd
cloudjammer
jd jordan

+
creative director, 9th path creative
9thpathcreative.com
chickerbp
chickerbp
brandy porter

The design process
what’s better than bacon? +

Everything is designed
whether we make time for it or not.

FUNCTIONALITY
RELIABILITY
USABILITY
JOY
HIERARCHY OF NEED

FUNCTIONALITY
RELIABILITY
USABILITY
JOY
DESIGN
ENGINEERING
HIERARCHY OF NEED

EXPLORATION
RESEARCH + DESIGN TESTING ENGINEERING
REFINEMENT
DESIGN PROCESS

+
User research
these guys know how to find waldo +
STEP ONE

The key to good design isn’t tools or technology.
It’s empathy.

THE FIRST RULE OF USER EXPERIENCE
YOU ARE NOT
THE USER

YOU ARE NOT
THE USER
THE SECOND RULE OF USER EXPERIENCE

DON’T
ASSUME
THE THIRD RULE OF USER EXPERIENCE
SERIOUSLY. DON’T DO IT.

+
USER RESEARCH IS IMPORTANT BECAUSE…
- It focuses on the impact of design on a user,
- It teaches us about user behaviors, needs, and
motivations through inquiry and observation,
- It helps us solve real (not assumed) problems,
- It helps us identify issues (and gaps) that
business needs and interests haven’t identiﬁed.

+
USER RESEARCH METHODS
- Interviews
- Contextual Inquiry
- Surveys
- Diary Studies
- Card Sorting
- Eye Tracking
- Data Analysis
- A/B Testing

ASK
QUESTIONS
THE SECRET OF USER EXPERIENCE
CHANNEL YOUR INNER FIVE-YEAR-OLD

+
ASK WHY TO VALIDATE THE PROBLEM
The client:
The client:
The user:
The user:
The client:
The client:
We need a bigger SHARE button
People aren’t sharing the documents they create
We’re nervous about sharing
We’re not sure who will see what we share
We don’t tell them who will see what they share
We don’t have that data in our system

+
THE FIVE Ws
- is our stakeholder?
- is our user (demographics, education, culture)?
- is the competition?
- solves similar problems
WHO…

+
THE FIVE Ws
- is their inherent knowledge?
- are their habits?
- are their relationships with people?
- are their relationships with products and devices?
- device are they using?
WHAT…

+
THE FIVE Ws
- do they need our solution (situation)?
- do they use it (context of use)?
- are they in their user journey (the phases of use)?
WHEN…

+
THE FIVE Ws
- are they when they use it (context off use)?
- else is their attention?
- are their experience touchpoints?
WHERE…

+
THE FIVE Ws
- do they need our solution?
- not use something that already exists?
- would they use our solution again?
WHY…

HOW?
THE FIVE Ws
THAT’S WHY THEY PAY YOU
THE BIG BUCKS.

+
TIPS FOR ASKING GOOD QUESTIONS
- Ask open-ended questions
- Ask about actual behavior, not intention
- Avoid leading questions
- Avoid compound questions
- Avoid pointing out speciﬁc issues

EXERCISE
DELIVERED HOT AND FRESH

+
METHODS TO SYNTHESIZE USER RESEARCH
- Call out quotes
- Card sorting
- Mindmapping
- Afﬁnity mapping
- Personas
- Journey mapping

+
AFFINITY MAPPING
Affinity mapping is a way to find patterns in
qualitative (not quantitive) data. To make one:
- Write down memorable or significant answers
- Organize the data by the insights it suggests
- Categorize insights under “I” statements to keep the
analysis from the user’s (your!) point of view
- Timebox the exercise

+
A PERSONAS IS…
- An aggregate summary of user research data,
- A convenient reminder who the user is,
- A touchstone to make design less subjective,
- A living document that requires repeated
validation through user research and updates.

CURRENT CLIENTS
WHO ARE THEY?
25-34 YEARS OLD 35-44 YEARS OLD 45-54 YEARS OLD 55 OR OLDER
HIGH S. BACHELOR'S DEGREE MASTER'S DEGREE DOCTORATE
-$20,000 $20-50,000 $50-75,000 $75-100,000 $100-150,000 $150,000+
-$20,000 $20-50K $50-75,000 $75-100,000 $100,000+
‣ Coaching through the legal process
‣ Recommendations on how to handle difficult
situations with their exes
‣ Advice on how to handle the impact of
family-law cases on family and lifestyle
‣ To feel prepared for hearings and court
‣ To see that there is a positive outcome at the
end of the process
NEEDS PAIN POINTS OPPORTUNITIES
NO KIDS 1 KID 2 KIDS 3 KIDS
THROUGH MUTUAL AGREEMENT IN MEDIATION IN COURT
MOTHER HAS CUSTODY OF THE KIDS EQUAL CUSTODY OF THE KIDS
AGE
AVERAGE
$77-95
0 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%
EDUCATION
INCOME
EX’S INCOME
KIDS WITH EX
DIVORCED
CUSTODY
SINGLE REMARRIEDMARITAL STATUS
‣ The cost
‣ The stress of family law cases and the process
‣ Parenting through divorce
‣ Gathering all of the relevant information
specific to their case
‣ Unresponsive websites and tools
‣ Difficulty finding good resources
‣ Decision-making in a high-stress process
‣ Focus on life after divorce
‣ Communication/cost efficiencies
‣ Digital communication with attorneys
‣ Pre-hearing checklists (tailored to strategy)
‣ Trackable communication with exes
‣ Check-ins, to keep on track
‣ Documentation recommendations
‣ Recommendation tool
AVERAGE
$64-82
AVERAGE 
38-47
AVERAGE 
1.27

PROFESSOR PLUM
THE PRESTIGE SEEKER
- Stay ahead of the curve
- Shape the movement through reviews + feedback
that others will read
- Recognition
- Hands on experience
- Expect more delight & surprise
- Active on social media
- Tech savvy
- Brand conscious
- Driven by success
- Achievement oriented

+
Design
who’s got two thumbs and are doing a workshop at connect.tech? +
STEP TWO

Good design
is as little design as possible.

Good design
is not subjective.

YOUR BIG WORD FOR THE DAY:
HEURISTICSIT’S GREEK. FOR “HIGHER HOURLY RATE”

+
DIETER RAMS’ HEURISTICS
- Innovative
- Useful
- Aesthetic
- Understandable (no instructions!)
- Unobtrusive
- Honest
- Long-lasting
- Thorough down to the last detail
- Environmentally friendly
- As little design as possible
GOOD DESIGN IS…

+
ABBY COVERT’S HEURISTICS
- Findable
- Accessible
- Clear
- Communicative
- Useful
- Credible
- Controllable
- Valuable
- Learnable
- Delightful
GOOD DESIGN IS…

Good design
ﬁnds the sweet spot.

BUSINESS USER
YAS!
GOOD DESIGN IS BALANCE
TECHNOLOGY

+
UX DESIGN DELIVERABLES
- User ﬂows
- Site maps
- Sketches
- Wireframes
- Content
- Visual design comps
- Product speciﬁcations
- Experience prototypes
- Functional prototypes

+
PRODUCT SPECIFICATION
FILE NAME
Skot Carruth
Untitled
CREATOR
Mon Feb 24 2014MODIFICATION DATE
Title of Document
DESCRIPTION Enter document description here
VERSION HISTORY Version history here
How to use this document
Naming Things
• Edit the Head/Foot shared layer to set the title document title at the top of the
page.
• Rename the canvases to set the page titles
Using Layer Master
• The Layer Master is non-printing canvas that simply holds the shared layers
used by all of the canvas types in the document. This ensures that you don't
lose any of your shared layers should you delete it from a canvas.
• Drag shared layers over your working canvas to use as a page master (e.g.
wireframe or storyboard)
Presentation
• This document was created with dimensions of 22" by 34" so that you may
work at 100% and project your schematics at 100% in landscape mode.
Exporting and Printing
• Select menu: File > Export
• From the export dialog:
Select Format: PDF Vector Image
Select Export Area: Entire Document
• Print the PDF, being sure that your Printer Handling options are set to "Scale to
fit paper size."
More information
http://konigi.com/tools/omnigraffle-ux-template
Version info:
Version 2.5.1 (11/28/11)
Title of your document goes here
Site Map
Mon Feb 24 2014
Creator
Modified
Skot Carruth
3 / 17
Home
1.0 Section
1.1 Sub-section
1.1.1 Sub-
section
1.1.1.1 Sub-
section
1.2 Sub-section 1.3 Sub-Section
1.2.1 Sub-
section
1.2.2 Sub-
section
2.0 Section
Section 2.1 2.2 Sub-Section
Section 2.1.1
Section 2.1.1.1
3.0 Section
3.1 Subsection
3.1.1 Sub-
section
3.1.1.1 Sub-
Section
4.0 Section
4.1 Subsection
4.1.1 Subsection
4.1.1.1
Subsection
4.2 Subsection 4.3 Subsection
This is a sitemap example. The
easiest way to quickly create
sitemaps manually from the top
down is to use Outline mode
(View > Outline or Opt-Cmd-2).
For a consistent look, select a
diagramming style (Format >
Choose Diagram Style).
Persona Overview
Mon Feb 24 2014
Creator
Modified
Skot Carruth
4 / 17
PR
IM
ARY
Age: 47
Occupation: Investment analyst, FInancial
Services Firm
Gear: Windows XP, Internet Explorer,
Broadband, Palm
Age
Occupation
Gear
Quote
Trusted visitor (recipient)
Mark OlsonTeresa Vacaro
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Quisque pharetra.
Maecenas urna. Nulla sapien. Sed
dignissim aliquet quam.
Etiam vel sem et ipsum iaculis gravida.
Sed lacus lacus, ultrices ut, aliquet a,
hendrerit sit amet, tellus. Mauris tempor
mauris eu justo. Cras tortor nunc, dictum
ac, tristique vitae, pellentesque nec, sem.
Proin scelerisque laoreet risus.
Vivamus quis sapien. Fusce fermentum.
Vestibulum a est. Aliquam erat volutpat.
Etiam purus ligula, rhoncus vel, fringilla in,
mattis eu, tortor.
Donec non urna. Aliquam sodales luctus
augue. Duis condimentum, quam at tempor
gravida, erat nunc dignissim quam, non
venenatis massa metus eu augue.
Proin at augue facilisis lacus luctus dictum.
Nullam suscipit dignissim eros. Proin
turpis.
Age: 26
Occupation: Advertising, Junior Designer
Gear: Windows XP, IE, IPhone
mattis eu, tortor.
turpis.
mattis eu, tortor.
turpis.
Member, TV addict
Social Network user
Member
mattis eu, tortor.
turpis.
Age: 29
Occupation: Real Estate Agent
Gear: Windows XP, IE, iPhone
I'm no geek, but I love using the Internet
for connecting with people, whether it's
via email and discussion groups or at
MeetUps.
Golf is my passion. Knowledge is my
occupation. With regard to technology,
keep it simple or I won't use it.
Tracy Irving
mattis eu, tortor.
turpis.
Age: 21
Occupation: Student, Film & Television major
Gear: Mac OS X, Firefox, iPhone
Public visitor
I work hard, so the web is an
entertainment outlet for me–it's my TV.
Chris Simms
Job Title
Goals
Pete VargasName
Member
Age: 35
Occupation: Account Manager, Enterprise
Software Vendor
Gear: Windows XP, IE, Broadband,
Blackberry
I want to get things done, be smarter,
and have better toys.
I'm blogging this.
Detailed Persona
Mon Feb 24 2014
Creator
Modified
Skot Carruth
5 / 17
• Lorem ipsum dolor sit amet, consectetur adipiscing elit.
8. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
FeaturesScenariosGoals and Motivations
Personal Background
Chris is a gadget head and early adopter. He travels a lot, spends a good deal of
time in hotels, and is constantly trying to keep on top of projects. He uses the web
to stay on top of tech industry trends. Is interested in TV and not user generated
content with the exception of his own. Likes features on sites that are quick and
simple to use.
I want to get things done, be smarter,
and have better toys.
Demographics
Age: 35
Occupation: Account Manager, Enterprise
Software Vendor
Gear: Windows XP, IE, Broadband,
Blackberry
Needs
• Better signal to noise ratio
• To get things done
• Some sense of privacy
• Ability to access or use expert features of a site when he wants to
• Indication that any social activity or rating will give him something back
• Wants community or expert features to get out of the way when they're
meaningless to him
Tech Comforts
PC: High
Web: High
Chris Simms
Member
Mental Model
Mon Feb 24 2014
Creator
Modified
Skot Carruth
6 / 17
Save for later Share RepublishRate & Comment
GroupsPlaylistsDescribewutzit
WatchFind
Create Organize
InteractView
wutzitping from
SlingPlayer
wutzitping from
my own media,
e.g. camcorder
Embedding
wutzit in an
external site
Tagging a wutzit Creating a
playlist
Creating groups
Rating a wutzit
Adding wutzit to
playlist
Adding wutzit to
group
Sending to a
friend via email
client
Sending to a
friend via
"Share" UI
Favoriting
people
Watching video
via a direct link
sent or found off
site
Watching video
off site, e.g. in a
weblog
Browsing by
show or channel
Searching for a
wutzit using
global search
Re-use
Commenting
Naming a wutzit
Favorites
Favoriting
(people, wutzits,
shows, etc.)
Favoriting show/
channel/wutzit
etc.
RegisterHow do I use it?What is it?
Learn
How did these
wutzits get
here?
What can I find
here?
What's a wutzit?
How do I create
a wutzit?
Join
Create an
account
What do I get for
joining?
Manage
My VideosMy Account
View my wutzits
View my
favorites
Edit my account
info
Change my
password
Remove wutzits
Remove
favorites
Desired features that came up
repeatedly in interviews and
surveys with wutzit users
Features we can expect to get
heavy use by very active members,
esp. social network users
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
Wireframe 1 Up
Mon Feb 24 2014
Creator
Modified
Skot Carruth
7 / 17
1. Note label Note label
1.1 Lorem ipsum dolor sit amet consectateur nonummy lorenzino. Interdum volgus videt, est ubi peccat.
Si veteres ita miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat.
1.2 Si quaedam nimis antique, si peraque dure dicere credit eos.
Lorem ipsum dolor sit amet consectateur nonummy lorenzino. Interdum volgus videt, est ubi peccat.
Si veteres ita miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat. Si quaedam nimis
antique, si peraque dure dicere credit eos.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
Wireframe / Storyboard
Mon Feb 24 2014
Creator
Modified
Skot Carruth
9 / 17
Small Wireframe
Mon Feb 24 2014
Creator
Modified
Skot Carruth
10 / 17
Heading
1. Notes block
Use tab for first line.
Following lines are indented to mimick
numbered lists, without using OG's numbered
list.
2. Notes Block
list.
Heading Heading Heading Heading
1. Notes block
list.
2. Notes Block
list.
1. Notes block
list.
2. Notes Block
list.
1. Notes block
list.
2. Notes Block
list.
1. Notes block
list.
2. Notes Block
list.
Storyboard & Notes
Mon Feb 24 2014
Creator
Modified
Skot Carruth
12 / 17
Lorem ipsum dolor sit amet consectateur nonummy lorenzino. Interdum volgus videt, est ubi peccat. Si veteres ita
miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat. Si quaedam nimis antique, si peraque dure dicere
credit eos.
credit eos.
credit eos.
credit eos.
credit eos.
credit eos.
credit eos.
credit eos.
credit eos.
credit eos.
credit eos.
credit eos.
Carrier 12:00 PM
Page Title
http://www.domain.com Google
Carrier 12:00 PM
Page Title
Carrier 12:00 PM
Page Title
Carrier 12:00 PM
Page Title
Carrier 12:00 PM
Page Title
iPhone Wireframe
Mon Feb 24 2014
Creator
Modified
Skot Carruth
13 / 17
Lorem ipsum dolor sit amet consectateur nonummy
lorenzino. Interdum volgus videt, est ubi peccat. Si veteres
ita miratur laudatque poetas, ut nihil anteferat, nihil illis
comparet, errat. Si quaedam nimis antique, si peraque
dure dicere credit eos.
iPad Wireframe 1 up Portrait
Mon Feb 24 2014
Creator
Modified
Skot Carruth
14 / 17
1.1 Lorem ipsum dolor sit amet consectateur nonummy lorenzino. Interdum volgus videt, est ubi
peccat. Si veteres ita miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat.
Lorem ipsum dolor sit amet consectateur nonummy lorenzino. Interdum volgus videt, est ubi
peccat. Si veteres ita miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat. Si
quaedam nimis antique, si peraque dure dicere credit eos.
iPad Wireframe 1 up Landscape
Mon Feb 24 2014
Creator
Modified
Skot Carruth
16 / 17
1.1 Lorem ipsum dolor sit amet consectateur nonummy lorenzino.
Interdum volgus videt, est ubi peccat. Si veteres ita miratur laudatque
poetas, ut nihil anteferat, nihil illis comparet, errat.
Lorem ipsum dolor sit amet consectateur nonummy lorenzino.
poetas, ut nihil anteferat, nihil illis comparet, errat. Si quaedam nimis

+
SKETCHES ARE PART OF THE PROCESS
- Anyone can do it
- They simply the complex
- They communicate visually
- They validate ideas
- Even rough or poorly-illustrated sketches can
communicate effectively
- And you don’t need any fancy tools to do it!

BREAKOUT
DESIGN A FOOD DELIVERY APP

+
Testing + iteration
ux unicorns ≠ bronies +
STEP THREE

+
GET READY TO PROTOTYPE!
- Download POP by Marvel 
(Prototype on Paper)

You gotta rock out
with your design out.

Feedback is humbling
because it shows us how to be better.

+
PROCESS YOUR FEEDBACK
- Don’t take it personally 
(it’s about the work, not you)
- Empathize; don’t defend 
(you won’t be there in the wild)
- Look for trends
- Prioritize the issues
- Consider the user
- Disregard as necessary
- Get back to work!

TESTING!
GET
FEEDBACKSERIOUSLY. DO IT.

+
Intermission
+who’s about to go get lunch?

+
MVP or MLP
+we took your jetpacks
STEP FOUR

A Minimum Viable Product gets to market.
A Minimun Lovable Product gets to users.

DESIGN, MEET REALITY
FEATURE
PRIORITIZATIONAVOIDING THE CREEPS

+
USER FLOWS
- An illustration of movement
through a system
- Shows how users go from
point A to point B
- Focus on the happy path!

EXERCISE
SYNTHESIZE AND PRIORITIZE

Bedazzle it!
our piñata drops mini bottles +
STEP FIVE

TIME FOR THE SKINNY JEANS
LAYOUT
PRINCIPLESUSE A GRID, FOR THE LOVE OF ALL THAT IS HOLY

+
GESTALT PRINCIPLES
Order Individuality Segregation DisOrder Hierarchy
Isolation Protection Balance Instability Unity or equality

Hipster Ipsum Text
This is a sub title.
Tempor consequat nulla mustache selvage. Trust fund
raw denim readymade tempor odio, sint authentic
chambray hoodie truffaut mustache commodo. Photo
booth meggings magna, quis thundercats nihil small
batch hella mcsweeney's aliqua. Veniam organic
iphone, labore shoreditch portland 8-bit mollit VHS
hella cred. Post-ironic food truck mustache church-
key, sunt consectetur cray you probably haven't heard
of them readymade raw denim accusamus veniam
squid iphone 8-bit. Odd future brunch nostrud PBR.
Banjo selvage skateboard viral cred chillwave.
January 24, 2013
Hipster Ipsum Text
This is a subtitle
Tempor consequat nulla mustache selvage. Trust fund raw denim readymade tempor odio, sint authentic chambray hoodie
truffaut mustache commodo. Photo booth meggings magna, quis thundercats nihil small batch hella mcsweeney's aliqua. Veniam
organic iphone, labore shoreditch portland 8-bit mollit VHS hella cred. Post-ironic food truck mustache church-key, sunt
consectetur cray you probably haven't heard of them readymade raw denim accusamus veniam squid iphone 8-bit. Odd future
brunch nostrud PBR. Banjo selvage skateboard viral cred chillwave.
January 24, 2013
GESTALT PRINCIPLES

GESTALT PRINCIPLES: WHITE SPACE

Home page Product list Product detail

Main navigation
FunctionsMasthead
Footer
Main navigation
FunctionsMasthead
Footer
Main navigation
FunctionsMasthead
Footer

FunctionsMasthead
Footer
FunctionsMasthead
Footer
FunctionsMasthead
Footer
Main navigation Main navigation Main navigation

FunctionsMasthead
Hero element
FeatureFeatureFeature
Content
Sidebar or
adverts
Footer
FunctionsMasthead
Item summary
Sidebar or
adverts
Footer
Section
navigation
Featured item
Item summary
Item summary
Item summary
Item summary
Item summary
Item summary
Item summary
Item summary
Item summary
FunctionsMasthead
Related items
Footer
Section
navigation
Item photo Item summary
Item name
Buying options
Reviews
Main navigation Main navigation Main navigation

THERE’S A REASON WHY WE ALL LIKE BLUE
COLOR AND
USABILITYIT’S NOT JUST FOR KIDS!

Color has a predictable and quantiﬁable
physiological effect that inﬂuences  
our perception and our behavior.

+
COLOR THEORY
MONOCHROMATIC TRIADS ANALOGOUS COMPLEMENTARY SPLIT-COMPLIMENTS

+
COLOR AND USABILITY: IOS COLOR PALETTE

COLOR AND USABILITY: MATERIAL COLOR PALETTE

JUST SAY NO TO COMIC SANS
TYPOGRAPHYPLAYING WITH YOUR SERIFS

+
TYPOGRAPHY PRINCIPALS
- Readability v. Legibility
- Spacing
- Clarity
- Mix and Matching Fonts 
(Limit yourself to no more than three typefaces)
- Consistency
- Overdoing Emphasis

+
TYPEOGRAPHY PRINCIPALS: HEAD VS BODY
- Some typefaces are
designed for use in
headlines (display faces)
- Don’t use a display face to
set body copy. Instead, pair
it with a subtler typeface.
- Or, mix weights and sizes
to create head vs. body
differentiation

TYPOGRAPHY PRINCIPALS: THE LITTLE TYPE

YOU HAD ME AT #
ICONOGRAPHYTHE OTHER -OGRAPHY

+
ICONOGRAPHY: PICK THE RIGHT AMOUNT OF DETAIL

ICONOGRAPHY: PICK THE RIGHT STYLE

ICON RESOURCES: THE NOUN PROJECT

ICONOGRAPHY: CHANGING WITH THE TIMES

+
Adapt + deliver
+hold onto the door, leo. hold on to the damn door
STEP SIX

REMEMBER WHEN WE JUST HAD ONE SCREEN?
PLATFORM
GUIDELINESIOS AND ANDROID AND WEB, OH MY!

+
SIZE
MATTERS
PLATFORM GUIDELINES

+
WHICH APPROACH IS RIGHT?
- Rich user experience
- Platform speciﬁc
- Proven path for mobile apps
Native
- App-like experience
- Leverages device capabilities
- Multiple platforms
- Fast-development cycles
- Cross-platform
- Instant updates
Hybrid Mobile web

STOP REINVENTING WHEELS
DESIGN
PATTERNSGENIUSES STEAL

+
DESIGN PATTERNS
- Good design is consistent
- Users learn interfaces faster when they are familiar
- Patterns help us design for a usability baseline quickly
- Recognizing and applying patterns is a critical skill for a designer

+
DESIGN PATTERNS
- Registration
- Login
- Sign out
- Paywall
- Account settings
- Carousels
- Image zoom
- Social share
- Commenting
- Pagination
- Inline errors
- Breadcrumbs
- Page headers
- Sidebar menu
- Tabs
- Faceted nav
- Expand/collapse
- Inline edit
- Modal edit
- Edit multiple
- Drag-and-drop
- View toggle
- Mode toggle
- Auto-complete
- Live preview
- Progress indicator
- …

A BETTER WAY
ATOMIC DESIGNNOW I AM BECOME DEATH, THE DESTROYER OF PSDS

+
ATOMIC DESIGN
- Brad Frost theory of content organization 
http://bradfrost.com/blog/post/atomic-web-design/

EXERCISE
IDENTIFY YOUR ATOMS AND MOLECULES

+
You’re awesome!
we also like coffee and beer +

+
design director, j+e creative
importantshit.co
calamityjd
cloudjammer
jd jordan
creative director, 9th path creative
9thpathcreative.com
chickerbp
chickerbp
brandy porter
Download this goodness as:  
bit.ly/2jGAjaP

Develop like a designer

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Develop like a designer

Ähnlich wie Develop like a designer (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Develop like a designer