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.

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
    michelle@marktimemedia.com
    @marktimemedia
    bit.ly/web-not-poster-workshop
    Flickr:  dcmaster  
    

    View Slide