Wordpress design + dev for curious beginners

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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.

Slide 4

Slide 4 text

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.

Slide 5

Slide 5 text

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.

Slide 6

Slide 6 text

EVERYONE BUILDS FOR WORDPRESS It’s easy to ﬁnd 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.)

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

BAREBONES WORDPRESS

Slide 9

Slide 9 text

BAREBONES WORDPRESS - ADMIN BACKEND Users

Slide 10

Slide 10 text

BAREBONES WORDPRESS - DEV BACKEND Developers

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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.

Slide 20

Slide 20 text

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.

Slide 21

Slide 21 text

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 diﬀerent 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.

Slide 22

Slide 22 text

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 oﬀ 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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

SERVER UPLOAD IS SEXY Unzip your ﬁles, 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.

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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!