Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Workshop: A Website Is Not A Poster

E195ae45320d9202eaa01c9f1d31a416?s=47 Michelle Schulp
January 15, 2014

Workshop: A Website Is Not A Poster

In the world of print, designers have control over every point and pica, but with all the variables inherent to the web, that same desire for control leads to headaches, frustration, and bad practices. You will learn specific guidelines to let go of that control and design more effectively for the web, as well as how to collaborate with developers to ensure a successful project without all the usual struggles.

E195ae45320d9202eaa01c9f1d31a416?s=128

Michelle Schulp

January 15, 2014
Tweet

More Decks by Michelle Schulp

Other Decks in Design

Transcript

  1. A WEBSITE IS NOT A POSTER DESIGNING SUCESSFULLY FOR THE

    WEB Flickr:  dcmaster  
  2. HI, I’M MICHELLE @marktimemedia i do design for print&web&wordpress

  3. HI, I’M MICHELLE @marktimemedia i also do a lot of

    work with developers Can’t we all just get along?
  4. A WEBSITE IS LIKE A POSTER? Principles of hierarchy Communicating

    a message Getting attention Inspiring call to action Flickr:  Ma0hew  Kenwrick  
  5. 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  
  6. BUT IT’S ALSO VERY UNIQUE

  7. PRINT DESIGN IS ABOUT CONTROL Flickr:  The  Other  Dan  

  8. PRINT DESIGN Long, precise process Defined stopping point Shared understanding

    of goals
  9. THE WEB IS ABOUT LETTING GO OF CONTROL Flickr:  intermayer

     
  10. DYNAMIC ENVIRONMENT Different Browsers Different Devices Different Resolutions Flickr:  Jeremy

     Keith  
  11. AGILE & ITERATIONS Evolving Content Building In The Browser Flickr:

     Stéfan    
  12. Flickr:  slworking2   DISCONNECT BETWEEN DESIGNER & DEVELOPER

  13. IT WOULD BE LIKE BUILDING A PRINTER TO FIT YOUR

    DESIGN IF PRINTING WERE LIKE WEB DESIGN… Flickr:  Kenoir  
  14. ADDRESS THE DISCONNECT

  15. COLLABORATION AND COMMUNICATION Flickr:  the  rik  pics  

  16. Flickr:  slworking2   INCLUDE THE DEVELOPER EARLY

  17. COMMUNICATE YOUR WORKFLOWS Flickr:  siddhu2020  

  18. BE READY TO EXPLAIN “WHY” Flickr:  birgerking  

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

     
  20. RESPECT EACH OTHER Flickr:  photography.andreas  

  21. EDUCATE EACH OTHER Flickr:  photography.andreas  

  22. Flickr:  h.koppdelaney   You have the same goals: Deliver a

    quality project within scope and within budget REMEMBER THE BIG PICTURE
  23. DESIGNER BEST PRACTICES Flickr:  derrickcollins   Make the developer love

    you!
  24. 1. THE DESIGN PROCESS Flickr:  Mike  Rohde  

  25. THE MOST IMPORTANT QUESTION: WHAT DOES THIS DO?

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

  27. DISPLAY MOCKUPS IN CONTEXT

  28. ACCOUNT FOR THE EXTREMES: CONTENT

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

  30. CONSIDER CONSISTENCY & REUSABILITY OF ELEMENTS

  31. DESIGN THE HIDDEN ELEMENTS

  32. UNDERSTAND THE TOOLS WordPress CMS Specific grids/frameworks WP starter themes/frameworks

    Specific plugins HTML/CSS Flickr:  carlaarena  
  33. Understand the CMS (WordPress) UNDERSTANDING WORDPRESS

  34. 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
  35. Understand the CMS (WordPress) UNDERSTANDING CSS GRIDS & FRAMEWORKS

  36. DESIGNING FOR CSS GRIDS & FRAMEWORKS Content width Existing margins,

    gutters, columns Responsive considerations Grids vs. frameworks Framework elements Buttons, tables, alerts, tabs, icons, etc.
  37. Understand the CMS (WordPress) UNDERSTANDING WP FRAMEWORKS & STARTER THEMES

  38. DESIGNING FOR FRAMEWORKS WordPress framework vs. design framework Parent/Child themes

    Theme options vs. custom Custom functionality Custom widgets & other elements
  39. DESIGNING FOR STARTER THEMES Styling for existing/included libraries Needs customization

  40. Understand the CMS (WordPress) UNDERSTANDING PLUGINS

  41. 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?
  42. 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) Profile pages, notifications, forums, messages
  43. Understand the CMS (WordPress) UNDERSTANDING HTML/CSS

  44. A WEB DESIGNER SHOULD BE ABLE TO READ AND UNDERSTAND

    HTML & CSS EVEN IF THEY DON’T WANT TO WRITE IT
  45. UGH, WHY DO I HAVE TO KNOW THAT STUFF!? Isn’t

    all that scary code stuff what the developers are for?
  46. JUST AS A PRINT DESIGNER NEEDS TO UNDERSTAND THE PRINTING

    PROCESS… … A WEB DESIGNER NEEDS TO UNDERSTAND THE TOOLS THAT BUILD THEIR DESIGNS
  47. HTML/CSS IS THE BLUEPRINT Flickr:  enfilm  

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

       
  49. LAYOUT HIERARCHY : WHAT IS THIS? <div> <section> <article> <aside>

    <nav> <header> <sidebar> Image:  Jenna  Marbles  h0p://www.youtube.com/watch?v=t4sXjJJjcWQ   What Are This?
  50. <header> <section> <article> <aside> <nav>

  51. TYPOGRAPHIC HIERARCHY: HOW IMPORTANT IS THIS? Flickr:  Xosé  Castro  

      Headings Paragraphs Lists Blockquotes Hierarchical meaning, not just visual styling
  52. <h1> <h3> <p> <ol> <blockquote> <code> <p> <p> <p> <h3>

  53. COMPATIBILITY WITH AVAILABLE TECHNOLOGIES http://html5readiness.com

  54. Semantics Hierarchy Web Typography Pixels/Resolution How CSS Works Box Model

    Options available for customizations: •  CSS3 effects •  JavaScript libraries •  Web fonts Image:  Github  
  55. 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
  56. 2. THE BUILD PROCESS Flickr:  elidr  

  57. DELIVERABLES IN A FORMAT THE DEVELOPER CAN USE

  58. FILE TYPE AND RESOLUTION you talked to the developer about

    this, right?
  59. 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
  60. PROVIDE ALL IMAGE ASSETS Embedded, Pre-cropped/sized, Sliced, Or Exportable from

    their own file
  61. LABEL, GROUP, ORGANIZE, LABEL, AND DID I MENTION LABEL?

  62. DESCRIBE FUNCTIONALITY

  63. DESCRIBE SIZES, COLORS, ETC.

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

  65. MACAW: NEW DESIGN WORKFLOW

  66. BUILDING CSS STYLE GUIDES remember that discussion on hierarchy? time

    to take it a step further.
  67. INCLUDED IN YOUR STYLE GUIDE Colors Headings Text Lists Fonts

    Links Buttons Forms Icons Tooltips Navigation Asides POSSIBLE REUSABLE ELEMENTS:
  68. LAYOUT/MOCKUP OF ELEMENTS

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

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

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

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

  73. 3. THE REVIEW & REVISION PROCESS Flickr:  Jeff  Youngstrom  

  74. TAKE AN ACTIVE ROLE IN CSS ALONGSIDE DEVELOPER

  75. UNDERSTANDABLE VERSION CONTROL & NOTATE CHANGES

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

  77. CLIENT EDUCATION Flickr:  Pink  Sherbet  Photography  

  78. 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
  79. QUESTIONS? Michelle Schulp michelle@marktimemedia.com @marktimemedia bit.ly/web-not-poster-workshop Flickr:  dcmaster