Upload
cody-landefeld
View
2.734
Download
0
Embed Size (px)
DESCRIPTION
This is from a talk given at Wordcamp Orange County given about WordPress theme design. #wcoc
Citation preview
STRATEGIC APPROACH
TO THEME DESIGN
by Cody Landefeld
www.codyl.com | @codyLcL
Saturday, May 14, 2011
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.
www.codyl.com | @codyLcL
Saturday, May 14, 2011
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
www.codyl.com | @codyLcL
Saturday, May 14, 2011
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.
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!
www.codyl.com | @codyLcL
Saturday, May 14, 2011
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.
www.codyl.com | @codyLcL
Saturday, May 14, 2011
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.
1. WIRE FRAMING
www.codyl.com | @codyLcL
Saturday, May 14, 2011
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.
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.
www.codyl.com | @codyLcL
Saturday, May 14, 2011
WIRE FRAMING APPS
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.
www.codyl.com | @codyLcL
Saturday, May 14, 2011
WIRE FRAMING APPS
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.
www.codyl.com | @codyLcL
Saturday, May 14, 2011
WIRE FRAMING APPS
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.
iMOCKUPS
www.codyl.com | @codyLcL
Saturday, May 14, 2011
WIRE FRAMING APPS
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.
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.
www.codyl.com | @codyLcL
Saturday, May 14, 2011
APPS FOR COMPUTER
www.codyl.com | @codyLcL
Saturday, May 14, 2011
APPS FOR COMPUTER
www.codyl.com | @codyLcL
Saturday, May 14, 2011
APPS FOR COMPUTER
OMNIGRAFFLE
www.codyl.com | @codyLcL
Saturday, May 14, 2011
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
www.codyl.com | @codyLcL
Saturday, May 14, 2011
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
www.codyl.com | @codyLcL
Saturday, May 14, 2011
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
BALSAMIQ
www.codyl.com | @codyLcL
Saturday, May 14, 2011
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
This application is available for desktop and work for both Windows and Mac.
BALSAMIQ
www.codyl.com | @codyLcL
Saturday, May 14, 2011
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
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.
www.codyl.com | @codyLcL
Saturday, May 14, 2011
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.
www.codyl.com | @codyLcL
Saturday, May 14, 2011
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
www.codyl.com | @codyLcL
Saturday, May 14, 2011
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 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.
www.codyl.com | @codyLcL
Saturday, May 14, 2011
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.”
www.codyl.com | @codyLcL
Saturday, May 14, 2011
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.”
www.codyl.com | @codyLcL
Saturday, May 14, 2011
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.”
www.codyl.com | @codyLcL
Saturday, May 14, 2011
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.”
www.codyl.com | @codyLcL
Saturday, May 14, 2011
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.
www.codyl.com | @codyLcL
Saturday, May 14, 2011
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.
www.codyl.com | @codyLcL
Saturday, May 14, 2011
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.
www.codyl.com | @codyLcL
Saturday, May 14, 2011
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.
www.codyl.com | @codyLcL
Saturday, May 14, 2011
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.
www.codyl.com | @codyLcL
Saturday, May 14, 2011
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.
www.codyl.com | @codyLcL
Saturday, May 14, 2011
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.
www.codyl.com | @codyLcL
Saturday, May 14, 2011
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.
www.codyl.com | @codyLcL
Saturday, May 14, 2011
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.
www.codyl.com | @codyLcL
Saturday, May 14, 2011
2. Multiple Sidebars - In some cases you will need to have varying sidebars.
www.codyl.com | @codyLcL
Saturday, May 14, 2011
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.
www.codyl.com | @codyLcL
Saturday, May 14, 2011
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
www.codyl.com | @codyLcL
Saturday, May 14, 2011
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
On most sites it’s standard to consider the menu and allowing users to be able to see all parent and subpages.
www.codyl.com | @codyLcL
Saturday, May 14, 2011
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
On most sites it’s standard to consider the menu and allowing users to be able to see all parent and subpages.
www.codyl.com | @codyLcL
Saturday, May 14, 2011
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.
www.codyl.com | @codyLcL
Saturday, May 14, 2011
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.
www.codyl.com | @codyLcL
Saturday, May 14, 2011
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...
www.codyl.com | @codyLcL
Saturday, May 14, 2011
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.
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...
www.codyl.com | @codyLcL
Saturday, May 14, 2011
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.
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!
www.codyl.com | @codyLcL
Saturday, May 14, 2011