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

UI FOR SMALL BUSINESS WORDPRESS WEBSITES

Greg Douglas
August 23, 2013

UI FOR SMALL BUSINESS WORDPRESS WEBSITES

Designing Awesome WordPress Websites For Small to Medium Size Businesses

Greg Douglas

August 23, 2013
Tweet

More Decks by Greg Douglas

Other Decks in Design

Transcript

  1. UI FOR SMALL
    BUSINESS WORDPRESS
    WEBSITES
    Designing Awesome WordPress Websites For Small to
    Medium Size Businesses
    Hollywood WordPress Meetup 8/14/2013

    View full-size slide

  2. 08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com
    Hi, I’m Greg Douglas
    Principal of Premium Interactive
    Designer / Front-end Developer
    Organizer of Hollywood WordPress Meetup
    Designing for the web since 1999
    @premiuminteract

    View full-size slide

  3. 08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com
    Organizing Your
    WordPress Project

    View full-size slide

  4. Slider
    Header
    NAVIGATION
    Footer Area
    Widget Widget
    Widget
    Body
    Sidebar Widgetized Area
    08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com
    Review of Our Website Canvas
    Header
    Navigation
    Slider
    Body
    Sidebar
    Footer

    View full-size slide

  5. 08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com
    Review of Our Website Canvas
    H1, H2, H3
    Body
    Plugins
    Footer Widget Footer Widget
    Footer Widget
    H1
    H2
    H3
    Body Content Lorum Ipsum askld kjashfkljh asdjlkfhakjls df
    klasdfhlkajs d kjahs dkl haskjl fkjla sdfklj asdkljfhakjsl d kjahs-
    dk j asklj falkjs hd kj asdfkljhasdfklj h
    Sidebar Widget
    Sidebar Widget

    View full-size slide

  6. 08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com
    Selecting a
    Framework/Theme

    View full-size slide

  7. 08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com
    Elegant Themes
    Thematic
    Theme Forest
    WooThemes
    Genesis
    Okay Themes
    Some are more newbie friendly and are easier to child theme where
    others are more developer friendly meaning that you will need to
    know how to code before designing for them.
    Some popular frameworks/themes include...

    View full-size slide

  8. 08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com
    Things To Keep In Mind
    When Selecting A Theme
    Things to Keep In Mind:
    * Choose a theme that already has some of the page templates you need or that
    you know you can easily customize to fit your needs
    * We now live in a responsive online world and selecting and designing for themes
    that are responsive is where it’s at

    View full-size slide

  9. 08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com

    View full-size slide

  10. 08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com 10
    Creating A Vision
    Board

    View full-size slide

  11. 08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com
    Preparing Your Vision Board
    What Goes Into Your Vision Board
    Drawings or sketches of your proposed solution
    Design inspirations
    Proposed font choices
    Proposed color scheme

    View full-size slide

  12. 08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com 12

    View full-size slide

  13. 08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com 13

    View full-size slide

  14. 08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com
    Researching For Your Design Inspiration
    Google Search “Great WordPress Website Design”
    Pinterest (Follow Design, Web Design)
    Other Design Studio Website Portfolios
    Communication Arts or Other Design Magazines
    Create An Inspiration Folder To Save Found Inspiration
    Tools To Inspire Your UI
    Website Design Friendly Fonts
    Google Fonts, Typekit, @fontface
    Color Scheme
    Color Scheme Designer, Google search three/four colors
    Inexpensive Design Sets
    Creative Market, Design Moo
    Design Inspiration

    View full-size slide

  15. 08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com
    Screen Grab Then
    Make It Fab

    View full-size slide

  16. 08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com
    Designing Your Graphics
    Setting Up Your File
    Open Screen Grab In Photoshop
    Set guides and establish main graphic assetts
    Organize Your Layers/Folders
    Cool Tools
    Page Layers App
    Adobe Captivate 7 (HD screen shots)

    View full-size slide

  17. 08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com

    View full-size slide

  18. 08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com 18

    View full-size slide

  19. 08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com
    Designing Your Main Pages
    19
    Two Pages To Design
    Home Page & One Sub Page
    Starting With The Home Page
    Design Sub Page For The Rest Of The Site Content

    View full-size slide

  20. 08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com 20

    View full-size slide

  21. 08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com 21

    View full-size slide

  22. 08/14/13 Greg Douglas | UI For WordPress | premiuminteractive.com
    Thank You
    Greg Douglas
    greg [at] premiuminteractive.com
    @premiuminteract

    View full-size slide