strategic approach to theme design

STRATEGIC APPROACH

TO THEME DESIGN

by Cody Landefeld

www.codyl.com | @codyLcL

Saturday, May 14, 2011

http://www.codyl.com


ABOUT MEMy name is Cody Landefeld and I am a web strategist for businesses. Our company plans, builds, and oversees amazing things for the web.

I began using designing for the web in 2000 and began using WordPress in 2006.







INTRODUCTION







INTRODUCTIONThis talk is about designing your WordPress theme. Throughout our time we are going to cover elements of the functional design of your custom theme. I will be covering essential parts for business sites and blogs alike. So strap in and let’s begin!





APPROACHING DESIGN

Whether you are a designer or a developer, approaching design can be tricky. Planning your design is extremely important to the process.

It’s also important to be speci!c to whatever model you are designing for. We usually design for businesses that need a strong marketing placement on their site. But the design might just be for a personal blog and might not need the same elements.





APPROACHING DESIGN



1. WIRE FRAMING





APPROACHING DESIGN



1. WIRE FRAMING

So before you begin opening Photoshop and begin creating a design you want to consider wire-framing your design.

If you do your wire framing on regular paper this is completely acceptable. Unless if you want to have more of a digital rendering, it makes sense to use an application on your computer or tablet.





WIRE FRAMING APPS







WIRE FRAMING APPS



iMOCKUPS





WIRE FRAMING APPS



iMOCKUPSOne app we use is iMockups for iPad. It allows you to wireframe your application and export the images as jpegs to use inside photoshop as a guide with a polished design.





APPS FOR COMPUTER





APPS FOR COMPUTER

OMNIGRAFFLE





APPS FOR COMPUTER

This application is available for both desktop and iPad. This app is much more deep for "owcharts and sitemapping as well. De!nitely a worthwhile tool for developers. (Desktop version is Mac only)

OMNIGRAFFLE





APPS FOR COMPUTER


OMNIGRAFFLE

BALSAMIQ





APPS FOR COMPUTER


OMNIGRAFFLE

This application is available for desktop and work for both Windows and Mac.

BALSAMIQ





APPS FOR COMPUTER


OMNIGRAFFLE

This application is available for desktop and work for both Windows and Mac.

BALSAMIQ

Since covering the plan for design it’s ef!cient to move forward into your actual design.





2. THE DESIGN PROCESSWhen approaching design it’s important to carefully consider the model you are designing for. Doing some of the proper planning will help you with the time in this process. Please take it from me that I have spent a great deal of unnecessary time being ill prepared for the design process.

This means often times larger sites will have several template pages to consider having varied layouts for.







TEMPLATE CONSIDERATION







TEMPLATE CONSIDERATIONTo be most successful in designing for a whole WordPress theme, it is important to consider how involved or minimal your homepage and subpages will be.

That said, you will want to consider also how much the user has to scroll or even at all when coming to the website. I would suggest trying to !t all content snippets in an area that most 13 inch laptops can see without having to scroll. Let’s look at some examples.





BEGIN WITH THE HEADER

Project Example: Suncoast Dental Homepage

This homepage was designed with the intention of telling the user from the outset exactly what this business is and what it does. As simply done as possible. This also is an idea we consider for clients who don’t know much about SEO.

Secondly, there is a look at the of!ce locations inside the header to the right of the logo.

It’s important to set up your design and consider the user this way. I call this a “voluntary user-experience.”





CONTINUING ONTO THE HOMEPAGE

Next we have a slideshow that is speci!c only to the homepage. This is pretty much a gold-standard choice in most designs since you can visually represent your posts and entice users to check into most recent content. We designed this slideshow to have an automatic rotation with an additional control on the left-hand side to allow users to continue on with their “voluntary user-experience.”





Lastly, we split the lower portion into three columns.

Again these are speci!c to the homepage template. It’s important to remember there is a great chance and especially in this case that entire page (except header and footer) is only used on the homepage.





Project Example: Dr H - GLEN HALVORSON, MD

This homepage was designed with similar intentions of the last page. We want to have content setup for SEO at top, along with similar content in the sidebar.

We again have a simple slideshow rotating in the middle of the homepage here.

Another portion to remember in designing your template is the users subconscious ability to be able to take action on certain items on your page.





This is extremely important if you are selling a product, service, or just wanting to gain more readership.

Speci!cally notice the great contrast between the general colors of the site and the action buttons.

Next I want to speci!cally draw your attention to the sidebar. We have a sidebar that is used throughout the homepage and subpage templates.





This is extremely important if you are selling a product, service, or just wanting to gain more readership.

Speci!cally notice the great contrast between the general colors of the site and the action buttons.

Next I want to speci!cally draw your attention to the sidebar. We have a sidebar that is used throughout the homepage and subpage templates.

This goes back to the planning stage. We de!nitely want to be spending ample time to consider where to go with user experience. How they come there, and what they are there to do.

If you are a blogger and you are in need of expanding your market and readership, you are distributing articles and posts that users will not be seeing your homepage, not knocking on the door and politely asking to come in.





MOVING ONTO THE SUBPAGE

Instead of project examples for this point, I can draw your attention to general examples of subpage best practices.

One thing that has to be considered is the subpage will most likely your most used template page. This means you have to come correct with it.

Here are some suggestions to consider when designing this template page.

1.Sidebar - This could be the !rst time we are considering the sidebar.





2. Multiple Sidebars - In some cases you will need to have varying sidebars.





Content Area - Depending on if your content is all used for posts or for general page content. Be sure to setup a good environment for images and text.






FINISHING WITH THE FOOTER






FINISHING WITH THE FOOTER

On most sites it’s standard to consider the menu and allowing users to be able to see all parent and subpages.





We also might want to consider pointing people to your social media sites as well in the footer so on every single page someone can easily follow you on the Twitter of the Facebook.

Additionally this is a great place again to sell or market your e-mail newsletter. We have done this on a few of our recent sites so this way it’s less intrusive saving the top space of the header and allows users to see it on every page and sign-up when they so choose.







IN CONCLUSION...







These are great areas to begin with your design. Obviously I would recommend digging in on some more blogs and consult a professional if you have a business idea or website to get done.

IN CONCLUSION...







These are great areas to begin with your design. Obviously I would recommend digging in on some more blogs and consult a professional if you have a business idea or website to get done.

IN CONCLUSION...

THANK YOU!





strategic approach to theme design

Technology