$30 off During Our Annual Pro Sale. View Details »

Workshop: A Website Is Not A Poster

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.

Michelle Schulp Hunt

January 15, 2014
Tweet

More Decks by Michelle Schulp Hunt

Other Decks in Design

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

  4. A WEBSITE IS
    LIKE A POSTER?
    Principles of hierarchy
    Communicating a message
    Getting attention
    Inspiring call to action
    Flickr:  Ma0hew  Kenwrick  

    View Slide

  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  

    View Slide

  6. BUT IT’S ALSO VERY
    UNIQUE

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  12. Flickr:  slworking2  
    DISCONNECT BETWEEN
    DESIGNER & DEVELOPER

    View Slide

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

    View Slide

  14. ADDRESS THE
    DISCONNECT

    View Slide

  15. COLLABORATION AND
    COMMUNICATION
    Flickr:  the  rik  pics  

    View Slide

  16. Flickr:  slworking2  
    INCLUDE THE
    DEVELOPER EARLY

    View Slide

  17. COMMUNICATE
    YOUR WORKFLOWS
    Flickr:  siddhu2020  

    View Slide

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

    View Slide

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

    View Slide

  20. RESPECT
    EACH OTHER
    Flickr:  photography.andreas  

    View Slide

  21. EDUCATE
    EACH OTHER
    Flickr:  photography.andreas  

    View Slide

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

    View Slide

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

    View Slide

  24. 1. THE DESIGN PROCESS
    Flickr:  Mike  Rohde  

    View Slide

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

    View Slide

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

    View Slide

  27. DISPLAY MOCKUPS IN CONTEXT

    View Slide

  28. ACCOUNT FOR THE EXTREMES:
    CONTENT

    View Slide

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

    View Slide

  30. CONSIDER CONSISTENCY &
    REUSABILITY OF ELEMENTS

    View Slide

  31. DESIGN THE HIDDEN ELEMENTS

    View Slide

  32. UNDERSTAND
    THE TOOLS
    WordPress CMS
    Specific grids/frameworks
    WP starter themes/frameworks
    Specific plugins
    HTML/CSS
    Flickr:  carlaarena  

    View Slide

  33. Understand the CMS (WordPress)
    UNDERSTANDING
    WORDPRESS

    View Slide

  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

    View Slide

  35. Understand the CMS (WordPress)
    UNDERSTANDING
    CSS GRIDS &
    FRAMEWORKS

    View Slide

  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.

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  40. Understand the CMS (WordPress)
    UNDERSTANDING
    PLUGINS

    View Slide

  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?

    View Slide

  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

    View Slide

  43. Understand the CMS (WordPress)
    UNDERSTANDING
    HTML/CSS

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  47. HTML/CSS IS THE
    BLUEPRINT
    Flickr:  enfilm  

    View Slide

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

    View Slide

  49. LAYOUT HIERARCHY :
    WHAT IS THIS?







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

    View Slide





  50. View Slide

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

    View Slide











  52. View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  56. 2. THE BUILD PROCESS
    Flickr:  elidr  

    View Slide

  57. DELIVERABLES
    IN A FORMAT THE
    DEVELOPER CAN USE

    View Slide

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

    View Slide

  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

    View Slide

  60. PROVIDE ALL IMAGE ASSETS
    Embedded, Pre-cropped/sized, Sliced,
    Or Exportable from their own file

    View Slide

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

    View Slide

  62. DESCRIBE FUNCTIONALITY

    View Slide

  63. DESCRIBE SIZES, COLORS, ETC.

    View Slide

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

    View Slide

  65. MACAW: NEW DESIGN WORKFLOW

    View Slide

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

    View Slide

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

    View Slide

  68. LAYOUT/MOCKUP OF ELEMENTS

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  74. TAKE AN ACTIVE ROLE IN CSS
    ALONGSIDE DEVELOPER

    View Slide

  75. UNDERSTANDABLE VERSION
    CONTROL & NOTATE CHANGES

    View Slide

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

    View Slide

  77. CLIENT
    EDUCATION
    Flickr:  Pink  Sherbet  Photography  

    View Slide

  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

    View Slide

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

    View Slide