Workshop: A Website Is Not A Poster

Slide 1

Slide 1 text

A WEBSITE IS NOT A POSTER DESIGNING SUCESSFULLY FOR THE WEB Flickr: dcmaster

Slide 2

Slide 2 text

HI, I’M MICHELLE @marktimemedia i do design for print&web&wordpress

Slide 3

Slide 3 text

HI, I’M MICHELLE @marktimemedia i also do a lot of work with developers Can’t we all just get along?

Slide 4

Slide 4 text

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

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

BUT IT’S ALSO VERY UNIQUE

Slide 7

Slide 7 text

PRINT DESIGN IS ABOUT CONTROL Flickr: The Other Dan

Slide 8

Slide 8 text

PRINT DESIGN Long, precise process Deﬁned stopping point Shared understanding of goals

Slide 9

Slide 9 text

THE WEB IS ABOUT LETTING GO OF CONTROL Flickr: intermayer

Slide 10

Slide 10 text

DYNAMIC ENVIRONMENT Different Browsers Different Devices Different Resolutions Flickr: Jeremy Keith

Slide 11

Slide 11 text

AGILE & ITERATIONS Evolving Content Building In The Browser Flickr: Stéfan

Slide 12

Slide 12 text

Flickr: slworking2 DISCONNECT BETWEEN DESIGNER & DEVELOPER

Slide 13

Slide 13 text

IT WOULD BE LIKE BUILDING A PRINTER TO FIT YOUR DESIGN IF PRINTING WERE LIKE WEB DESIGN… Flickr: Kenoir

Slide 14

Slide 14 text

ADDRESS THE DISCONNECT

Slide 15

Slide 15 text

COLLABORATION AND COMMUNICATION Flickr: the rik pics

Slide 16

Slide 16 text

Flickr: slworking2 INCLUDE THE DEVELOPER EARLY

Slide 17

Slide 17 text

COMMUNICATE YOUR WORKFLOWS Flickr: siddhu2020

Slide 18

Slide 18 text

BE READY TO EXPLAIN “WHY” Flickr: birgerking

Slide 19

Slide 19 text

REMEMBER: THERE IS NO “YOU SUCK” IN TEAM Flickr: siddhu2020

Slide 20

Slide 20 text

RESPECT EACH OTHER Flickr: photography.andreas

Slide 21

Slide 21 text

EDUCATE EACH OTHER Flickr: photography.andreas

Slide 22

Slide 22 text

Flickr: h.koppdelaney You have the same goals: Deliver a quality project within scope and within budget REMEMBER THE BIG PICTURE

Slide 23

Slide 23 text

DESIGNER BEST PRACTICES Flickr: derrickcollins Make the developer love you!

Slide 24

Slide 24 text

1. THE DESIGN PROCESS Flickr: Mike Rohde

Slide 25

Slide 25 text

THE MOST IMPORTANT QUESTION: WHAT DOES THIS DO?

Slide 26

Slide 26 text

DESIGN ELEMENTS RATHER THAN LITERAL MOCKUPS http://styletil.es

Slide 27

Slide 27 text

DISPLAY MOCKUPS IN CONTEXT

Slide 28

Slide 28 text

ACCOUNT FOR THE EXTREMES: CONTENT

Slide 29

Slide 29 text

ACCOUNT FOR THE EXTREMES: DISPLAY SIZE http://3them.es

Slide 30

Slide 30 text

CONSIDER CONSISTENCY & REUSABILITY OF ELEMENTS

Slide 31

Slide 31 text

DESIGN THE HIDDEN ELEMENTS

Slide 32

Slide 32 text

UNDERSTAND THE TOOLS WordPress CMS Speciﬁc grids/frameworks WP starter themes/frameworks Speciﬁc plugins HTML/CSS Flickr: carlaarena

Slide 33

Slide 33 text

Understand the CMS (WordPress) UNDERSTANDING WORDPRESS

Slide 34

Slide 34 text

DESIGNING FOR WORDPRESS Separation of content, layout, & functionality Database, themes, & plugins Use of content types Taxonomies, posts/pages, & custom post types Relationships between data Template Hierarchy Data organization for ease of use

Slide 35

Slide 35 text

Understand the CMS (WordPress) UNDERSTANDING CSS GRIDS & FRAMEWORKS

Slide 36

Slide 36 text

DESIGNING FOR CSS GRIDS & FRAMEWORKS Content width Existing margins, gutters, columns Responsive considerations Grids vs. frameworks Framework elements Buttons, tables, alerts, tabs, icons, etc.

Slide 37

Slide 37 text

Understand the CMS (WordPress) UNDERSTANDING WP FRAMEWORKS & STARTER THEMES

Slide 38

Slide 38 text

DESIGNING FOR FRAMEWORKS WordPress framework vs. design framework Parent/Child themes Theme options vs. custom Custom functionality Custom widgets & other elements

Slide 39

Slide 39 text

DESIGNING FOR STARTER THEMES Styling for existing/included libraries Needs customization

Slide 40

Slide 40 text

Understand the CMS (WordPress) UNDERSTANDING PLUGINS

Slide 41

Slide 41 text

DESIGNING FOR PLUGINS: SOME QUESTIONS TO ASK How do they look by default? How easy is it to overwrite existing styles? How easy is it to add new classes/functionality? What new elements are being introduced?

Slide 42

Slide 42 text

DESIGNING FOR PLUGINS: EXAMPLE ELEMENTS Forms (ex: Gravity Forms) Fields, inputs, buttons, etc. eCommerce (ex: WooCommerce) Product pages, shopping carts, product search results Social (ex: BuddyPress/bbPress) Proﬁle pages, notiﬁcations, forums, messages

Slide 43

Slide 43 text

Understand the CMS (WordPress) UNDERSTANDING HTML/CSS

Slide 44

Slide 44 text

A WEB DESIGNER SHOULD BE ABLE TO READ AND UNDERSTAND HTML & CSS EVEN IF THEY DON’T WANT TO WRITE IT

Slide 45

Slide 45 text

UGH, WHY DO I HAVE TO KNOW THAT STUFF!? Isn’t all that scary code stuff what the developers are for?

Slide 46

Slide 46 text

JUST AS A PRINT DESIGNER NEEDS TO UNDERSTAND THE PRINTING PROCESS… … A WEB DESIGNER NEEDS TO UNDERSTAND THE TOOLS THAT BUILD THEIR DESIGNS

Slide 47

Slide 47 text

HTML/CSS IS THE BLUEPRINT Flickr: enﬁlm

Slide 48

Slide 48 text

SEMANTIC MARKUP: IT’S ABOUT MEANING Flickr: See-‐ming Lee 李思明 SML

Slide 49

Slide 49 text

LAYOUT HIERARCHY : WHAT IS THIS?

Image: Jenna Marbles h0p://www.youtube.com/watch?v=t4sXjJJjcWQ What Are This?

Slide 50

Slide 50 text

Slide 51

Slide 51 text

TYPOGRAPHIC HIERARCHY: HOW IMPORTANT IS THIS? Flickr: Xosé Castro Headings Paragraphs Lists Blockquotes Hierarchical meaning, not just visual styling

Slide 52

Slide 52 text

Slide 53

Slide 53 text

COMPATIBILITY WITH AVAILABLE TECHNOLOGIES http://html5readiness.com

Slide 54

Slide 54 text

Semantics Hierarchy Web Typography Pixels/Resolution How CSS Works Box Model Options available for customizations: •  CSS3 effects •  JavaScript libraries •  Web fonts Image: Github

Slide 55

Slide 55 text

DON’T PANIC: THERE ARE PLENTY OF PLACES TO LEARN THIS STUFF http://www.w3schools.com/css/ http://learncss.tutsplus.com/ http://css-tricks.com/ http://www.lynda.com http://coding.smashingmagazine.com http://www.adobe.com/devnet/dreamweaver/css.html http://www.codeschool.com/paths/html-css

Slide 56

Slide 56 text

2. THE BUILD PROCESS Flickr: elidr

Slide 57

Slide 57 text

DELIVERABLES IN A FORMAT THE DEVELOPER CAN USE

Slide 58

Slide 58 text

FILE TYPE AND RESOLUTION you talked to the developer about this, right?

Slide 59

Slide 59 text

Avoid using layer effects for anything besides images Use vectors when possible, but based on whole pixels Use non-destructive editing and effects RGB color, Retina/HDPI support

Slide 60

Slide 60 text

PROVIDE ALL IMAGE ASSETS Embedded, Pre-cropped/sized, Sliced, Or Exportable from their own ﬁle

Slide 61

Slide 61 text

LABEL, GROUP, ORGANIZE, LABEL, AND DID I MENTION LABEL?

Slide 62

Slide 62 text

DESCRIBE FUNCTIONALITY

Slide 63

Slide 63 text

DESCRIBE SIZES, COLORS, ETC.

Slide 64

Slide 64 text

SPECCTR FOR ADOBE http://www.specctr.com/

Slide 65

Slide 65 text

MACAW: NEW DESIGN WORKFLOW

Slide 66

Slide 66 text

BUILDING CSS STYLE GUIDES remember that discussion on hierarchy? time to take it a step further.

Slide 67

Slide 67 text

INCLUDED IN YOUR STYLE GUIDE Colors Headings Text Lists Fonts Links Buttons Forms Icons Tooltips Navigation Asides POSSIBLE REUSABLE ELEMENTS:

Slide 68

Slide 68 text

LAYOUT/MOCKUP OF ELEMENTS

Slide 69

Slide 69 text

CSS COMMENTS EXAMPLE http://www.coding.smashingmagazine.com

Slide 70

Slide 70 text

PATTERN LIBRARY EXAMPLE http://www.bbc.co.uk/gel

Slide 71

Slide 71 text

PEARS: WORDPRESS PATTERN LIBRARY http://pea.rs/

Slide 72

Slide 72 text

BRAD FROST: ATOMIC DESIGN http://pattern-lab.info/

Slide 73

Slide 73 text

3. THE REVIEW & REVISION PROCESS Flickr: Jeﬀ Youngstrom

Slide 74

Slide 74 text

TAKE AN ACTIVE ROLE IN CSS ALONGSIDE DEVELOPER

Slide 75

Slide 75 text

UNDERSTANDABLE VERSION CONTROL & NOTATE CHANGES

Slide 76

Slide 76 text

FOCUS ON CONSISTENCY OF BRAND & USABILITY, NOT PIXEL-PERFECTION

Slide 77

Slide 77 text

CLIENT EDUCATION Flickr: Pink Sherbet Photography

Slide 78

Slide 78 text

A NON-EXHAUSTIVE LIST OF COOL RESOURCES Building a Live Style Guide/ Pattern Library http://pea.rs/ http://pattern-lab.info/ http://warpspire.com/kss/ http://kaleistyleguide.com http://patternprimer.adactio.com (https://github.com/adactio/ Pattern-Primer) Better Practices for Design Files http://styletil.es http://photoshopetiquette.com/ http://mattgemmell.com/2012/02/02/how- designers-can-help-developers/ http://www.dtelepathy.com/blog/design/25-best- practices-collaborative-work-photoshop http://www.noupe.com/how-tos/when-designers- and-developers-work-together.html

Slide 79

Slide 79 text

QUESTIONS? Michelle Schulp [email protected] @marktimemedia bit.ly/web-not-poster-workshop Flickr: dcmaster