Wordpress design + dev for curious beginners

Just getting into interactive design or front-end development? You should know about WordPress, and how it enables you to quickly launch sites. In this presentation I cover Why WordPress is so popular, and give you a quick rundown on how to get started with templates and install WordPress on your web host.

This presentation was given during a Design Alexandria meetup at Viget Labs in Falls Church, VA.

Transcript

1. WORDPRESS
   DESIGN + DEV
   FOR CURIOUS BEGINNERS
   Ready? Follow me on Twitter @pvm
   Be sure to mention @DesignAVA or #WPdesign
   

   View Slide

2. TODAY’S PRESENTATION OVERVIEW
   Why use WordPress?
   What is WordPress?
   How do I use WordPress?
   

   View Slide

3. WHY WORDPRESS?
   WordPress 1makes it easy for you to update
   content, 2it’s incredibly well-supported by the
   community, and 3designers & developers can be
   found everywhere.
   

   View Slide

4. EASY-TO-USE CMS
   It’s easy to update content.
   WordPress was originally meant to be a simple blogging
   platform, but it’s evolved to manage all sorts of content.
   

   View Slide

5. OVER 60 MILLION STRONG
   It’s incredibly well-supported by a strong community.
   WordPress is a great general purpose framework that takes
   80% of what a web developer does and turns it into a simple
   package; Developers love to build plugins, templates, and
   tools to make it more awesome.
   

   View Slide

6. EVERYONE BUILDS FOR WORDPRESS
   It’s easy to find developers that know it.
   A large community and a low learning-curve means
   WordPress savvy developers can be found anywhere. This
   makes it an ideal choice for businesses (cheaper, better
   support.)
   

   View Slide

7. BRING ON THE WORDPRESS
   Fig. 1 - Wordpress’ power level
   

   View Slide

8. BAREBONES WORDPRESS
   

   View Slide

9. BAREBONES WORDPRESS - ADMIN BACKEND
   Users
   

   View Slide

10. BAREBONES WORDPRESS - DEV BACKEND
    Developers
    

    View Slide

11. SITES I HAVE BUILT WITH WORDPRESS
    Restin Digital
    http://restinchairs.com
    

    View Slide

12. SITES I HAVE BUILT WITH WORDPRESS
    Culture Camp DC
    http://culturecampdc.com
    

    View Slide

13. SITES I HAVE BUILT WITH WORDPRESS
    COA Corp.
    http://dc.cleanersofamerica.com
    

    View Slide

14. SITES THAT TALENTED PEOPLE HAVE BUILT
    nclud
    http://nclud.com
    

    View Slide

15. SITES THAT TALENTED PEOPLE HAVE BUILT
    Mashable
    http://mashable.com
    

    View Slide

16. SITES THAT TALENTED PEOPLE HAVE BUILT
    NY Times Blogs
    http://www.nytimes.com/interactive/blogs/directory.html
    

    View Slide

17. SITES THAT TALENTED PEOPLE HAVE BUILT
    Kobe Bryant
    http://kb24.com
    

    View Slide

18. HOW DO I USE WORDPRESS
    Fig. 2 - East enough for a cat
    

    View Slide

19. DESIGN PROCESS IS SIMILAR
    As a designer, your process does not change.
    Why?
    The discovery, research, information architecture, user
    experience, content strategy, sketching, wire-framing, and
    prototyping stay mostly* the same.
    *But keep these next slides in mind.
    Designing for WordPress is like designing for any other backend.
    

    View Slide

20. SITE STRUCTURE SIMILARITIES
    Most WordPress sites have a similar structure.
    Home - Product/Services - About Us - Contact Us - Blog
    Why?
    Because most WordPress sites are built with content in mind,
    for a small business on a tight budget*. The core component
    of content is the blog. The rest of the site remains static.
    *there are always exceptions, but this is the overwhelming standard case.
    

    View Slide

21. THINK IN MODULES
    Design with modules in mind.
    Sidebars and widgets will be used throughout the site.
    Why?
    Because WordPress uses Widgets (or modules) to place the
    same content in different pieces of the site. The same
    navigation used in the footer may be used in a sub-page
    sidebar. They can be easily shifted around by the user.
    

    View Slide

22. NO NEED TO START FROM SCRATCH
    Find a good template and use it as a start.
    Thousands of well-designed templates exist. Use them to your advantage.
    Wait a second, isn’t this crazy talk? Build off of someone
    else’s work? Absolutely. WordPress is used because of it’s
    speed. An experienced person can design, develop, and
    tweak a site from scratch to full completion in under 10 hours.
    I recommend the following sites as starters:
    ThemeForest - http://themeforest.net
    WooThemes - http://woothemes.com
    StudioPress - http://www.studiopress.com
    

    View Slide

23. BUT STARTING FROM SCRATCH IS MAGICAL
    A good developer will start from scratch.
    Custom tailor the site to your needs.
    Why?
    I mentioned most sites follow the same structure, so most
    sites can be templated. But for those special projects, a good
    developer may start from near-scratch, choosing a
    framework to make life easier. This allows development of
    custom modules that allow you to do pretty much anything.
    Personally, I’ve only used the Genesis Framework to build a site from scratch:
    http://www.studiopress.com/themes/genesis
    

    View Slide

24. ACTION-PACKED INSTALL
    Fig. 3 - WordPress is fast to install.
    

    View Slide

25. DESIGN IS DONE - WHAT NOW?
    Download the latest WordPress from http://wordpress.org/
    and gather server information (FTP, Database.)
    1
    

    View Slide

26. SERVER UPLOAD IS SEXY
    Unzip your files, and connect to your server via FTP, and
    upload the WordPress directory to your root directory.
    2
    I use Coda 2 or Transmit for my FTP needs.
    

    View Slide

27. ALL YOUR CONFIGURATION ARE BELONG TO US
    Visit your website and follow the WordPress configuration
    setup wizard. You’ll need your Database info.
    3
    You’ll need your Database
    address, name, username,
    and password.
    

    View Slide

28. IT’S THEME TIME!
    Navigate to Appearance > Settings and upload your theme.
    4
    

    View Slide

29. CONTENT ADDING PARTY
    Start adding content. Create Pages, Posts, Menus, and
    Widgets. Your theme probably has extra options to configure.
    5
    

    View Slide

30. THAT’S ALL, FOLKS.
    Fig. 4 - Social is good.
    My name is Paul Mederos.
    I’m a Designer and Engineer at Enchant,
    and Lead Engineer at Foster.ly
    Find me on Twitter @pvm
    Read my blog at http://paulmederos.com
    and many thanks to Viget for tonight’s space!
    

    View Slide