Slide 1

Slide 1 text

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  

Slide 16

Slide 16 text

@marktimemedia WHAT IS A DESIGN SYSTEM?

Slide 17

Slide 17 text

@marktimemedia AESTHETIC RULES  

Slide 18

Slide 18 text

@marktimemedia ELEMENT RULES Flickr:  halDeak  

Slide 19

Slide 19 text

@marktimemedia Flickr:  Prince  Lang  Gallery  

Slide 20

Slide 20 text

@marktimemedia CATALOGUE DESIGN Flickr:  Zsolt  LesF  

Slide 21

Slide 21 text

@marktimemedia BRAND GUIDES Flickr:  Fluid  Design  

Slide 22

Slide 22 text

@marktimemedia WHY DO WE NEED A SYSTEM?

Slide 23

Slide 23 text

@marktimemedia PURPOSEFUL CONTENT-FIRST DESIGN Flickr:  

Slide 24

Slide 24 text

@marktimemedia DIGITAL IS A LIVING PROCESS

Slide 25

Slide 25 text

@marktimemedia CONTENT IS NEVER Flickr:  Idrose   PERFECT

Slide 26

Slide 26 text

@marktimemedia TRADITIONAL SOLUTIONS

Slide 27

Slide 27 text

@marktimemedia WE’RE DOING UNNECCESARY WORK

Slide 28

Slide 28 text

@marktimemedia WHERE DOES DESIGN FIT IN THIS WORKFLOW?

Slide 29

Slide 29 text

@marktimemedia DESIGNERS ARE PROBLEM SOLVERS

Slide 30

Slide 30 text

@marktimemedia DESIGN IS HOW IT WORKS

Slide 31

Slide 31 text

@marktimemedia NOT CHANGING THE PROCESS, JUST THE PRODUCT Flickr:  Pete  Fletch  

Slide 32

Slide 32 text

@marktimemedia HOW DO WE DESIGN FOR SYSTEMS?

Slide 33

Slide 33 text

@marktimemedia DEFINE THE RULES Flickr:  Ma0  J  Newman  

Slide 34

Slide 34 text

@marktimemedia DESIGN FOR PATTERNS NOT PAGES Flickr:  svenwerk  

Slide 35

Slide 35 text

@marktimemedia CONTENT TYPES

Slide 36

Slide 36 text

@marktimemedia SPECIFIC COMPONENTS

Slide 37

Slide 37 text

@marktimemedia MODULES

Slide 38

Slide 38 text

@marktimemedia TEMPLATES

Slide 39

Slide 39 text

@marktimemedia DELIVERABLES

Slide 40

Slide 40 text

@marktimemedia STYLE TILES http://styletil.es

Slide 41

Slide 41 text

@marktimemedia SITE ELEMENTS

Slide 42

Slide 42 text

@marktimemedia GRIDS & WIREFRAMES

Slide 43

Slide 43 text

@marktimemedia ANNOTATED MOCKUPS https://www.specctr.com/

Slide 44

Slide 44 text

@marktimemedia PATTERN LIBRARY http://www.bbc.co.uk/gel

Slide 45

Slide 45 text

@marktimemedia Flickr:  Fm  ellis   TEST THE  

Slide 46

Slide 46 text

@marktimemedia DESIGN FOR CONTENT IMPERFECT  

Slide 47

Slide 47 text

@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

Slide 72

Slide 72 text

@marktimemedia QUESTIONS? Michelle Schulp michelle@marktimemedia.com @marktimemedia bit.ly/aiga-website-not-poster