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

Wordpress design + dev for curious beginners

Paul Mederos
September 12, 2012

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.

Paul Mederos

September 12, 2012
Tweet

Other Decks in Design

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