A
WEBSITE
IS NOT A
POSTER
DESIGNING SUCCESSFULLY FOR THE WEB
Flickr:
derrickcollins
Slide 2
Slide 2 text
@marktimemedia
I
Design
THINGS.
USUALLY
WORDPRESS.
HI, I’M
MICHELLE.
Slide 3
Slide 3 text
@marktimemedia
{DEVELOPERS}
I ALSO DO
A LOT OF
WORK WITH
Can’t we all just
get along?
Slide 4
Slide 4 text
@marktimemedia
A WEBSITE IS
LIKE A POSTER?
Principles of hierarchy
Communicating a message
Getting attention
Inspiring call to action
Flickr:
Ma0hew
Kenwrick
Slide 5
Slide 5 text
@marktimemedia
A WEBSITE IS
LIKE A POSTER?
Principles of hierarchy
Communicating a message
Getting attention
Inspiring call to action
ANY OTHER
FREAKIN’ TYPE
OF DESIGN
Flickr:
Ma0hew
Kenwrick
Slide 6
Slide 6 text
@marktimemedia
PRINT
DESIGN
IS ABOUT
Flickr:
The
Other
Dan
CONTROL
Slide 7
Slide 7 text
@marktimemedia
STATIC
ENVIRONMENT
Long, precise process
Defined stopping point
Shared understanding of goals
Slide 8
Slide 8 text
@marktimemedia
WEB DESIGN IS ABOUT
Flickr:
intermayer
LETTING
GO OF
CONTROL
Slide 9
Slide 9 text
@marktimemedia
DYNAMIC
ENVIRONMENT
Different Devices
Different Resolutions
Different Content
Flickr:
Jeremy
Keith
Slide 10
Slide 10 text
@marktimemedia
IF PRINTING WERE LIKE WEB DESIGN
WE’D BUILD
A NEW
TO OUTPUT
EACH
DESIGN
PRINTER
Flickr:
Kenoir
Slide 11
Slide 11 text
@marktimemedia
PRINT
DESIGN
IS LIKE A
SYMPHONY
Flickr:
Alsal
Photography
Slide 12
Slide 12 text
@marktimemedia
WEB DESIGN
IS LIKE JAZZ
Flickr:
Tom
Marcello
Slide 13
Slide 13 text
@marktimemedia
YOU, THE
COMPOSER
Flickr:
el_finco
Slide 14
Slide 14 text
@marktimemedia
DESIGN FOR
A
Flickr:
Basial
PAGE
Slide 15
Slide 15 text
@marktimemedia
DESIGN FOR A
Flickr:
Prince
Lang
Gallery
SYSTEM
@marktimemedia
DESIGN FOR THE
SYSTEM
NOT FOR THE DEVICE
Slide 48
Slide 48 text
@marktimemedia
THE
RULES
Flickr:
Harvard
Avenue
Slide 49
Slide 49 text
@marktimemedia
EXCEPTIONS
ADD
Flickr:
Nick
Sherman
COMPLEXITY
Slide 50
Slide 50 text
@marktimemedia
CHOOSE
COMPLEXITY
WISELY
Flickr:
Nick
Sherman
Slide 51
Slide 51 text
@marktimemedia
COLLABORATING
WITH
DEVELOPERS
Slide 52
Slide 52 text
@marktimemedia
RESPECT
EACH OTHER
THE PROCESS
Slide 53
Slide 53 text
@marktimemedia
INCLUDE THE
DEVELOPER
EARLY
Slide 54
Slide 54 text
@marktimemedia
SPEAKING A
COMMON
LANGUAGE
Slide 55
Slide 55 text
@marktimemedia
A WEB DESIGNER SHOULD
BE ABLE TO READ AND
UNDERSTAND
HTML & CSS
EVEN IF THEY DON’T
WANT TO WRITE IT
Slide 56
Slide 56 text
@marktimemedia
UGH, WHY DO I HAVE
TO KNOW THAT STUFF!?
Isn’t all that scary code
what the developers are for?
Slide 57
Slide 57 text
@marktimemedia
JUST AS A PRINT DESIGNER
NEEDS TO UNDERSTAND THE
PRINTING PROCESS…
… A WEB DESIGNER NEEDS TO
UNDERSTAND THE TOOLS THAT
BUILD THEIR DESIGNS
Slide 58
Slide 58 text
@marktimemedia
HTML/CSS IS THE
BLUEPRINT
Flickr:
enfilm
Slide 59
Slide 59 text
@marktimemedia
SEMANTIC MARKUP:
IT’S ABOUT
Flickr:
See-‐ming
Lee
李思明
SML
MEANING
Slide 60
Slide 60 text
@marktimemedia
LAYOUT HIERARCHY :
WHAT IS THIS?
Image:
Jenna
Marbles
h0p://www.youtube.com/watch?v=t4sXjJJjcWQ
What Are
This?
Slide 61
Slide 61 text
@marktimemedia
Slide 62
Slide 62 text
@marktimemedia
TYPOGRAPHIC HIERARCHY:
HOW IMPORTANT IS THIS?
Flickr:
Xosé
Castro
Headings
Paragraphs
Lists
Blockquotes
Hierarchical meaning,
not just visual styling
Slide 63
Slide 63 text
@marktimemedia
Slide 64
Slide 64 text
@marktimemedia
CSS
AS DESIGN
COMMUNICATION
Flickr:
xutheinsun
Slide 65
Slide 65 text
@marktimemedia
Colors
Fonts
Margins
Padding
Headings
Paragraphs
Lists
Links
Icons
Buttons
Forms
Tooltips
Navigation
Asides
POSSIBLE REUSABLE ELEMENTS:
Slide 66
Slide 66 text
@marktimemedia
INCLUDED IN A STYLE GUIDE
http://www.coding.smashingmagazine.com
Slide 67
Slide 67 text
@marktimemedia
EVALUATING
DEVELOPMENT
WORK
Flickr:
Kovah.de
Slide 68
Slide 68 text
@marktimemedia
QUALITY
VS PIXEL
PERFECTION
Flickr:
stephenjohnbryde
Slide 69
Slide 69 text
@marktimemedia
Flickr:
Flickr:
stephenjohnbryde
SPECIFIC
FEEDBACK
Slide 70
Slide 70 text
@marktimemedia
Flickr:
stephenjohnbryde
WHEN IT
DOESN’T WORK
Slide 71
Slide 71 text
@marktimemedia
Flickr:
stephenjohnbryde
KEEP THE
CONVERSATION
GOING