Designing For WordPress

When designing for WordPress, it is important to keep the needs of your target audience in mind with predetermined goals that are specific and measurable. In this session, I will talk about the principles of good web design for the broadest audience possible. I will show you how to use general composition, scale, proportion and the use of color and fonts to convey a feeling, as well as resources for finding media that complies with licensing terms.

Transcript

1. DESIGNING FOR WORDPRESS
   Suzette Franck
   (mt) Media Temple WordPress Evangelist
   2013 Boston WordCamp #WCBOS
   Friday, October 25, 2013
   

   View Slide

2. ABOUT ME
   send tweets to @mt_Suzette
   

   View Slide

3. SUZETTE FRANCK with a “CK”
   ★WordPress Evangelist @ Media Temple
   ★Born in Hollywood, California Native
   ★19+ Years Coding & Web Development
   ★Developed over 200 WordPress sites
   ★Speaking at 12 WordCamps this year
   ★Reg. Contributor on WPwatercooler.com
   ★Hosted DradCast Episode 17
   ★Blogs at: suzettefranck.com
   ★Slides: speakerdeck.com/suzettefranck
   Tweet me!
   @mt_Suzette
   

   View Slide

4. AGENDA
   { #agenda: visibility: visible; }
   

   View Slide

5. WHAT WE WILL COVER
   ★Website Goal and Core Audience
   ★Picking a Color Scheme
   ★Anatomy of a Website
   ★Composition and Layout
   ★Web Typography
   ★Licensing and Creative Commons
   ★Image Resources
   

   View Slide

6. DEFINING SUCCESS
   eye on the prize
   

   View Slide

7. WHAT IS YOUR FOCUS?
   ★Who will be using your website?
   ★Why will they use your website?
   ★How will they use your website?
   ★What is the purpose of the website?
   WRITE IT DOWN AND POST IT
   WHERE YOU CAN SEE IT!
   

   View Slide

8. COLOR SCHEME
   the language of color
   

   View Slide

9. COLOR AS AN ENIVIRONMENT
   ★Emotion vs. Apathy
   ★Movement vs. Stillness
   ★Chaos vs. Harmony
   ★Warm vs. Cool
   ★Bright vs. Muted
   

   View Slide

10. COLOR ASSOCIATIONS
    ★Red - love, dramatic, dynamic, powerful, passion
    ★Orange - energy, warning, enthusiasm, creativity
    ★Yellow - caution, vibrancy, happiness, alert
    ★Green - nature, wealth, stability, environment
    ★Blue - calming, intelligence, honesty, melancholy
    ★Purple - royalty, power, prestige, depression
    ★White - purity, truth, perfection, light, sacredness
    ★Black - mystery, death, evil, elegance, formality
    

    View Slide

11. BASIC COLOR WHEEL
    ★Primary: Red, Blue, Yellow
    ★Secondary: Orange, Green, Purple
    ★Tertiary: Intermediate Colors
    

    View Slide

12. COLOR SCHEMES
    

    View Slide

13. HUE, TINT, SHADE, & TONE
    PURE COLOR PLUS WHITE PLUS BLACK PLUS GRAY
    

    View Slide

14. KULER.ADOBE.COM
    

    View Slide

15. COLORSCHEMEDESIGNER.COM
    

    View Slide

16. COLOURLOVERS.COM
    

    View Slide

17. ANATOMY
    parts is not necessarily parts
    

    View Slide

18. WORDPRESS PARTS
    CLICK ME!
    Name of Business
    A very catchy tagline
    NAVIGATION | NAVIGATION | NAVIGATION | NAVIGATION
    Copyright 2013 by Name
    WIDGET
    code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry.
    code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry.
    code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry.
    code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry.
    code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry.
    code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry.
    code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry.
    Content Heading
    code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry.
    code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry.
    code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry.
    code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry.
    code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry.
    code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry.
    code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry.
    WIDGET
    

    View Slide

19. HEADER
    Name of Business
    A very catchy tagline
    NAVIGATION | NAVIGATION | NAVIGATION | NAVIGATION
    CLICK ME!
    LOGO CALL TO ACTION
    NAVIGATION
    

    View Slide

20. BODY/CONTENT
    Content Heading
    code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry.
    code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry.
    code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry.
    code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry.
    code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry.
    code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry.
    code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry.
    code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry.
    code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry.
    code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry.
    code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry.
    code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry.
    code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry.
    code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry.
    SIDEBAR CONTENT
    WIDGET
    WIDGET
    WIDGETS
    

    View Slide

21. SIMPLE FOOTER
    Copyright 2013 by Name
    COPYRIGHT/
    CREDITS
    

    View Slide

22. EXPANDED FOOTER
    Copyright 2013 by Name
    COPYRIGHT/
    CREDITS
    WIDGET WIDGET
    WIDGET
    NAVIGATION | NAVIGATION | NAVIGATION | NAVIGATION | NAVIGATION
    NAVIGATION
    CLICK ME!
    CALL TO ACTION
    WIDGETS
    

    View Slide

23. COMPOSITION
    placement and proportion are everything
    

    View Slide

24. PIET MONDRIAN
    

    View Slide

25. LINE UP ELEMENTS
    CHAOS HARMONY
    Name of Business
    A very catchy tagline
    NAVIGATION | NAVIGATION | NAVIGATION | NAVIGATION
    CLICK ME!
    Copyright 2013 by Name
    WIDGET
    WIDGET
    Content Heading
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    Lorem Ipsum has been the industry's standard dummy text ever since the
    1500s, when an unknown printer took a galley of type and scrambled it to
    make a type specimen book. It has survived not only five centuries, but also
    the leap into electronic typesetting, remaining essentially unchanged. It was
    popularised in the 1960s with the release of Letraset sheets containing
    Lorem Ipsum passages, and more recently with desktop publishing software
    like Aldus PageMaker including versions of Lorem Ipsum.
    Name of Business
    A very catchy tagline
    CLICK ME!
    Copyright 2013 by Name
    WIDGET
    WIDGET
    Lorem Ipsum is simply dummy text of the printing and typesetting
    industry. Lorem Ipsum has been the industry's standard dummy text
    ever since the 1500s, when an unknown printer took a galley of type and
    scrambled it to make a type specimen book. It has survived not only five
    centuries, but also the leap into electronic typesetting, remaining
    essentially unchanged. It was popularised in the 1960s with the release
    of Letraset sheets containing Lorem Ipsum passages, and more recently
    with desktop publishing software like Aldus PageMaker including
    versions of Lorem Ipsum.
    Content Heading
    NAVIGATION | NAVIGATION | NAVIGATION | NAVIGATION
    X
    

    View Slide

26. PHI - THE GOLDEN RATIO
    ★Leonardo Da Vinci Used
    ★“Divine Proportion”
    ★Appears in art & music
    ★Appears often in nature
    ★Aesthetically pleasing
    Phi ( Φ = 1.618033988749895… )
    

    View Slide

27. EXAMPLES OF GOLDEN RATIO
    

    View Slide

28. RULE OF THIRDS
    

    View Slide

29. EXAMPLE OF RULE OF THIRDS
    

    View Slide

30. WEBSITE LAYOUT EXAMPLE
    

    View Slide

31. TYPOGRAPHY
    a font is not just a font
    

    View Slide

32. WHY USE TEXT?
    ★Fonts have come to web publishing
    ★Text loads faster than images
    ★Google understands text and can index it
    ★Accessibility for Screen Readers
    ★Readability for visitor
    ★Easy to update compared to images
    ★Use image for logo only, navigation should be text
    

    View Slide

33. WEB TYPOGRAPHY
    ★Fonts can be embedded via @font-face
    ★Cufón (Javascript) not as good
    ★Check licensing for web embedding
    ★Store original fonts in your theme folder
    ★Test in different browsers, will NEVER be same
    ★Paid fonts have better kerning/scaling
    ★Embed different styles of same font (bold, italic)
    to improve browser rendering
    

    View Slide

34. FONTSQUIRREL.COM
    

    View Slide

35. WEB FONT GENERATOR
    

    View Slide

36. DOWNLOAD ZIP FILE
    

    View Slide

37. VIEW STYLESHEET.CSS
    

    View Slide

38. DAFONT.COM
    

    View Slide

39. GOOGLE.COM/FONTS
    

    View Slide

40. GOOGLE FONTS IN WORDPRESS
    function load_fonts() {
    wp_register_style('googleFonts', 'http://fonts.googleapis.com/css?family=Rock+Salt|Neucha');
    wp_enqueue_style( 'googleFonts');
    }
    add_action('wp_print_styles', 'load_fonts');
    DON’T ADD THIS TO YOUR HEADER.PHP
    DO ADD THIS TO YOUR FUNCTIONS.PHP
    XXXXX
    

    View Slide

41. WP GOOGLE FONTS
    

    View Slide

42. FONTS.COM
    

    View Slide

43. IDENTIFONT.COM
    

    View Slide

44. MYFONTS.COM/WhatTheFont
    

    View Slide

45. LICENSING
    the internet is not public domain
    

    View Slide

46. PUBLIC DOMAIN
    Works in the public domain are those whose
    intellectual property rights have expired, have been
    forfeited, or are inapplicable.
    Rights are country-based and vary, so read all
    licensing requirements before using a digital work
    GOOGLE IMAGE SEARCHES
    ARE NOT PUBLIC DOMAIN
    

    View Slide

47. CREATIVECOMMONS.ORG/CHOOSE/ZERO
    

    View Slide

48. CREATIVE COMMONS LICENSES
    

    View Slide

49. CC BY
    

    View Slide

50. CC BY-SA
    

    View Slide

51. CC BY-ND
    

    View Slide

52. CC BY-NC
    

    View Slide

53. CC BY-NC-SA
    

    View Slide

54. CC BY-NC-ND
    

    View Slide

55. CREATIVECOMMONS.ORG/CHOOSE
    

    View Slide

56. RESOURCES
    check it before you wreck it
    

    View Slide

57. WEB DESIGN BOOKS
    LISA SABIN-WILSON
    JASON BEAIRD
    

    View Slide

58. SEARCH.CREATIVECOMMONS.ORG
    

    View Slide

59. COMMONS.WIKIMEDIA.ORG
    

    View Slide

60. FLICKR.COM/CREATIVECOMMONS
    

    View Slide

61. FOTOPEDIA.COM
    

    View Slide

62. 123RF.COM
    

    View Slide

63. GETTYIMAGES.COM
    

    View Slide

64. PICMONKEY.COM
    

    View Slide

65. PICASION.COM
    

    View Slide

66. TINEYE.COM
    

    View Slide

67. TAKE AWAY REVIEW
    ★Don’t get distracted from your website goals
    ★Study general design principles
    ★Use colors and fonts to their full advantage
    ★License your digital media (Share Alike)
    ★Don’t search Google images for websites
    ★Have fun and make beautiful websites!
    

    View Slide

68. QUESTIONS?
    Suzette Franck
    suzette@mediatemple.net
    https://speakerdeck.com/suzettefranck
    

    View Slide