Slide 1
Slide 1 text
MAKING THINGS PRETTY
AND START
DESIGNING
STOP
Flickr: m-s-y
Slide 2
Slide 2 text
HI, I’M MICHELLE
@marktimemedia
i do design for
print&web&wordpress
Slide 3
Slide 3 text
WHAT IS
DESIGN?
Flickr: Haags Uitburo @marktimemedia
Slide 4
Slide 4 text
Design both
TRANSFORMS
INSPIRES
BLUEPRINT
and
an idea
into a
for something that
ADDS VALUE
@marktimemedia
Slide 5
Slide 5 text
Design both
TRANSFORMS
INSPIRES
BLUEPRINT
and
an idea
into a
for something that
ADDS VALUE
@marktimemedia
Slide 6
Slide 6 text
DESIGN IS…
ATTENTION TO DETAIL
Flickr: Nick Sherman @marktimemedia
Slide 7
Slide 7 text
FUNDAMENTALS OF
COMPOSITION
LINE
COLOR
SHAPE
TEXTURE
SPACE
HIERARCHY
SCALE
CONTRAST
UNITY
GESTALT
TYPOGRAPHY
BALANCE
PATTERN
{ }
A! C M e &
@marktimemedia
Slide 8
Slide 8 text
DESIGN IS…
FUNDAMENTAL
Flickr: Nick Sherman @marktimemedia
Slide 9
Slide 9 text
DESIGN IS…
THE BIG PICTURE
Flickr: SpaceShoe @marktimemedia
Slide 10
Slide 10 text
INTERIOR
DECORATING
Flickr: Mirage Floors @marktimemedia
Slide 11
Slide 11 text
INTERIOR
DESIGN
Flickr: Stuck In Customs @marktimemedia
Slide 12
Slide 12 text
Design is
Multidisciplinary
@marktimemedia
Slide 13
Slide 13 text
USABILITY
User Experience
Marketing
Psychology
Accessibility
AESTHETIC FACTORS
WEB DESIGN
AESTHETICS STRUCTURE
Illustration
Photography
Art
Branding
Development
Content Strategy
@marktimemedia
Slide 14
Slide 14 text
Flickr: .sarahwynne
The Most Important Question
IS NOT HOW but
@marktimemedia
Slide 15
Slide 15 text
BE
DELIBERATE.
@marktimemedia
Slide 16
Slide 16 text
Flickr: ebayink
“MOBILE FIRST”
@marktimemedia
Slide 17
Slide 17 text
Flickr: ebayink
BE DELIBERATE.
@marktimemedia
“What are the most important
elements, messages, actions,
and content of your site?”
Slide 18
Slide 18 text
BUT I THOUGHT
DESIGN WAS ABOUT
MAKING THINGS
Flickr: Stephen Geyer
LOOK
GOOD?
Isn’t that why you
paid all that money to
go to design school?
@marktimemedia
Slide 19
Slide 19 text
I LIKE ATTRACTIVE THINGS.
Obviously,
Adobe Creative Suite @marktimemedia
Slide 20
Slide 20 text
Flickr: thelearningcurvedotca
But things do not
always need to
be attractive to
SOLVE A PROBLEM
@marktimemedia
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
• Example #2 Drudge
Slide 23
Slide 23 text
• Example #4 Google
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
• Example #3 Lings
Slide 26
Slide 26 text
• Example #3 Lings
Slide 27
Slide 27 text
DESIGN IS…
PROBLEM SOLVING
@marktimemedia
Slide 28
Slide 28 text
DESIGN IS NOT FOR YOU OR
FOR YOUR CLIENT
DESIGN
IS…
NOT FOR YOU
…OR YOUR CLIENT
Flickr: h.koppdelaney @marktimemedia
Slide 29
Slide 29 text
ALL
DECISIONS
NEED TO
MAKE SENSE IN
CONTEXT
@marktimemedia
Slide 30
Slide 30 text
Source: xkcd
Slide 31
Slide 31 text
DESIGN IS…
UNDERSTANDING
& INTERPRETING
Flickr: stephenjohnbryde @marktimemedia
Slide 32
Slide 32 text
Design both
TRANSFORMS
INSPIRES
BLUEPRINT
and
an idea
into a
for something that
ADDS VALUE
@marktimemedia
Slide 33
Slide 33 text
FEELINGS
GOALS
STRATEGY
@marktimemedia
Slide 34
Slide 34 text
“Our logo is ugly.”
“The current website is not working for us.”
“We want to do something di erent.”
FEELINGS
@marktimemedia
Slide 35
Slide 35 text
GOALS
“We need to update our brand to reflect our
new company values.”
“We need to o er the online services our clients
expect from our business.”
“We need to distinguish ourselves in the
marketplace from our competitors.”
@marktimemedia
Slide 36
Slide 36 text
Current
Successes
Established
Brand
Existing
Problems
Customer
Needs
Emerging
Ideas
Competitive
Landscape
Budget
Constraints
Opportunity to
Di erentiate
DESIGN
STRATEGY
@marktimemedia
Slide 37
Slide 37 text
DESIGN IS… A PROCESS
DESIGN IS…
A PROCESS
Flickr: wineandcheese @marktimemedia
Slide 38
Slide 38 text
Design both
TRANSFORMS
INSPIRES
BLUEPRINT
and
an idea
into a
for something that
ADDS VALUE
@marktimemedia
Slide 39
Slide 39 text
SCIENTIFIC
METHOD
@marktimemedia
Slide 40
Slide 40 text
RESEARCH
HYPOTHESIS
EXPERIMENT
ANALYZE
REPORT
@marktimemedia
Slide 41
Slide 41 text
RESEARCH
STRATEGY
IMPLEMENT
EVALUATE
ADJUST
@marktimemedia
Slide 42
Slide 42 text
RESEARCH
STRATEGY
IMPLEMENT
EVALUATE
ADJUST
DESIGN STRATEGY
DEVELOPMENT
TESTING & ANALYTICS
CONTENT & RESEARCH
@marktimemedia
Slide 43
Slide 43 text
WATERFALL MODEL
Flickr: Stuck In Customs @marktimemedia
Slide 44
Slide 44 text
Source: Web Designer Depot
LINEAR DESIGN
@marktimemedia
Slide 45
Slide 45 text
Flickr: Stuck In Customs
IS THIS THE
BEST PROCESS FOR
WEB DESIGN?
@marktimemedia
Slide 46
Slide 46 text
PRINT
DESIGN
IS LIKE A
SYMPHONY
Flickr: Alsal Photography @marktimemedia
Slide 47
Slide 47 text
WEB DESIGN
IS LIKE JAZZ
Flickr: Tom Marcello @marktimemedia
Slide 48
Slide 48 text
• Additional process method (book p. 29)
• Iterations, dynamic, overlap
DESIGN FEEDBACK
@marktimemedia
Slide 49
Slide 49 text
AGILE MODEL
Flickr: only alice @marktimemedia
Slide 50
Slide 50 text
• Additional process method (book p. 29)
• Iterations, dynamic, overlap
PROTOTYPING PROGRAMMING
STYLE
APPLICATION
QA LAUNCH
CONTENT CREATION CONTENT ENTRY
DESIGN
from The Strategic Web Designer
by Christopher Butler
@marktimemedia
Slide 51
Slide 51 text
COMMUNICATE
COLLABORATE
ITERATE
@marktimemedia
Slide 52
Slide 52 text
• Additional process method (book p. 29)
• Iterations, dynamic, overlap
PROTOTYPING PROGRAMMING
STYLE
APPLICATION
QA LAUNCH
CONTENT CREATION CONTENT ENTRY
DESIGN
ITERATION
@marktimemedia
Slide 53
Slide 53 text
• Additional process method (book p. 29)
• Iterations, dynamic, overlap
GRAYSCREEN PROTOTYPE WHITESCREEN PROTOTYPE
CONTENT CREATION
MOOD BOARDS
STYLE
GUIDES
SPECIFIC
GRAPHICS
@marktimemedia
Slide 54
Slide 54 text
Source: HOW Interactive Design
COLLABORATION:
GRAYSCREEN PROTOTYPE
@marktimemedia
Slide 55
Slide 55 text
DESIGN: STYLE TILES
@marktimemedia
Slide 56
Slide 56 text
DESIGN: STYLE GUIDES
Source: Smashing Magazine @marktimemedia
Slide 57
Slide 57 text
DESIGN: SPECIFIC GRAPHICS
Source: dribbble @marktimemedia
Slide 58
Slide 58 text
DEVELOPMENT:
WHITESCREEN PROTOTYPE
Source: Newfangled @marktimemedia
Slide 59
Slide 59 text
• Additional process method (book p. 29)
• Iterations, dynamic, overlap
PROTOTYPING PROGRAMMING
STYLE
APPLICATION
QA LAUNCH
CONTENT CREATION CONTENT ENTRY
DESIGN
“SIGNOFF”
@marktimemedia
Slide 60
Slide 60 text
• Additional process method (book p. 29)
• Iterations, dynamic, overlap
PROTOTYPING PROGRAMMING
STYLE
APPLICATION
QA LAUNCH
CONTENT CREATION CONTENT ENTRY
DESIGN
EXECUTION
@marktimemedia
Slide 61
Slide 61 text
• Additional process method (book p. 29)
• Iterations, dynamic, overlap
PROTOTYPING PROGRAMMING
STYLE
APPLICATION
QA LAUNCH
CONTENT CREATION CONTENT ENTRY
DESIGN
@marktimemedia
Slide 62
Slide 62 text
• Additional process method (book p. 29)
• Iterations, dynamic, overlap
TESTING & ANALYTICS
PROTOTYPING
Site Analytics
A/B Testing
UX Testing
Surveys & Feedback
Integrated Marketing
Goal Evaluation
@marktimemedia
Slide 63
Slide 63 text
WHAT IS THIS
ALL FOR?
@marktimemedia
Slide 64
Slide 64 text
Design both
TRANSFORMS
INSPIRES
BLUEPRINT
and
an idea
into a
for something that
ADDS VALUE
@marktimemedia
Slide 65
Slide 65 text
DESIGN ADDS VALUE
Flickr: Stuck In Customs @marktimemedia
Slide 66
Slide 66 text
NOT A PIXEL-
PUSHING MONKEY
Flickr: Masashi Mochida @marktimemedia
Slide 67
Slide 67 text
TRUSTED PARTNER
Flickr: Eyesplash – The thing about spring @marktimemedia
Slide 68
Slide 68 text
HOW DO I
START?
@marktimemedia
Slide 69
Slide 69 text
BE A DESIGNER
See the Big Picture & the Details
Question, Understand, and Interpret
Be Deliberate and always ask Why
Solve The Problem (it’s not about you)
Be Agile: communicate, collaborate, iterate
@marktimemedia
Slide 70
Slide 70 text
KEEP
CALM
AND
LEARN
MORE
@marktimemedia
Slide 71
Slide 71 text
A NON-EXHAUSTIVE LIST OF
COOL RESOURCES
Actual Books
• Don’t Make Me Think by Steve Krug
• The Strategic Web Designer by
Christopher Butler
• Launching The Imagination by
Mary Stewart
• The Visual Display of Quantitative
Information by Edward Tufte
• A Type Primer by John Kane
• The Non-Designers series by
Robin Williams
• A Website That Works by Mark O’Brien
Blogs & Online Resources
• HOW Design
• UX Magazine
• A List Apart
• Smashing Magazine
• Fast Co.Design
• Web Design Ledger
• Web Designer Depot
• Noupe
• You The Designer
@marktimemedia
Slide 72
Slide 72 text
Flickr: Pete Fletch
NOW START
DESIGNING!
Michelle Schulp
[email protected]
@marktimemedia
Slides: bit.ly/start-designing
SO STOP MAKING THINGS PRETTY…