Strategic Approach to Theme Design

cL www.codyl.com | @codyL

STRATEGIC APPROACH
TO THEME DESIGN
by Cody Landefeld

Saturday, May 14, 2011


ABOUT ME
My 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.



ABOUT ME

INTRODUCTION



ABOUT ME

INTRODUCTION
This 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


iMOCKUPS
One 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
OMNIGRAFFLE
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)



APPS FOR COMPUTER
OMNIGRAFFLE

BALSAMIQ



APPS FOR COMPUTER
OMNIGRAFFLE

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



APPS FOR COMPUTER
OMNIGRAFFLE

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

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



2. THE DESIGN PROCESS
When 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.




for.

TEMPLATE CONSIDERATION




for.

TEMPLATE CONSIDERATION
To 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...





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.

THANK YOU!


Strategic Approach to Theme Design

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Strategic Approach to Theme Design

Similar to Strategic Approach to Theme Design (20)

More from Cody Landefeld

More from Cody Landefeld (9)

Recently uploaded

Recently uploaded (20)

Strategic Approach to Theme Design