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

Other Decks in Design



    on Twitter @pvm Be sure to mention @DesignAVA or #WPdesign
  2. 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.
  3. 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.
  4. 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.
  5. 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.)
  6. 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.
  7. 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.
  8. 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.
  9. 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
  10. 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
  11. DESIGN IS DONE - WHAT NOW? Download the latest WordPress

    from http://wordpress.org/ and gather server information (FTP, Database.) 1
  12. 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.

    and follow the WordPress configuration setup wizard. You’ll need your Database info. 3 You’ll need your Database address, name, username, and password.
  14. CONTENT ADDING PARTY Start adding content. Create Pages, Posts, Menus,

    and Widgets. Your theme probably has extra options to configure. 5
  15. 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!