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
2. TODAY’S PRESENTATION OVERVIEW Why use WordPress? What is WordPress? How do I use WordPress?
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.
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.
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.
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.)
7. BRING ON THE WORDPRESS Fig. 1 - Wordpress’ power level
8. BAREBONES WORDPRESS
9. BAREBONES WORDPRESS - ADMIN BACKEND Users
10. BAREBONES WORDPRESS - DEV BACKEND Developers
11. SITES I HAVE BUILT WITH WORDPRESS Restin Digital http://restinchairs.com
12. SITES I HAVE BUILT WITH WORDPRESS Culture Camp DC http://culturecampdc.com
13. SITES I HAVE BUILT WITH WORDPRESS COA Corp. http://dc.cleanersofamerica.com
14. SITES THAT TALENTED PEOPLE HAVE BUILT nclud http://nclud.com
15. SITES THAT TALENTED PEOPLE HAVE BUILT Mashable http://mashable.com
16. SITES THAT TALENTED PEOPLE HAVE BUILT NY Times Blogs http://www.nytimes.com/interactive/blogs/directory.html
17. SITES THAT TALENTED PEOPLE HAVE BUILT Kobe Bryant http://kb24.com
18. HOW DO I USE WORDPRESS Fig. 2 - East enough for a cat
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.
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.
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.
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
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
24. ACTION-PACKED INSTALL Fig. 3 - WordPress is fast to install.
25. DESIGN IS DONE - WHAT NOW? Download the latest WordPress from http://wordpress.org/ and gather server information (FTP, Database.) 1
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.
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.
28. IT’S THEME TIME! Navigate to Appearance > Settings and upload your theme. 4
29. CONTENT ADDING PARTY Start adding content. Create Pages, Posts, Menus, and Widgets. Your theme probably has extra options to configure. 5
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!