• Like
  • Save
Strategic Approach to Theme Design
Upcoming SlideShare
Loading in...5
×
 

Strategic Approach to Theme Design

on

  • 3,007 views

This is from a talk given at Wordcamp Orange County given about WordPress theme design. #wcoc

This is from a talk given at Wordcamp Orange County given about WordPress theme design. #wcoc

Statistics

Views

Total Views
3,007
Views on SlideShare
2,993
Embed Views
14

Actions

Likes
3
Downloads
20
Comments
0

3 Embeds 14

http://www.diversesolutions.com 12
http://www.techgig.com 1
http://www.twylah.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Strategic Approach to Theme Design Strategic Approach to Theme Design Presentation Transcript

    • cL www.codyl.com | @codyL STRATEGIC APPROACH TO THEME DESIGN by Cody LandefeldSaturday, May 14, 2011
    • cL www.codyl.com | @codyL 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.Saturday, May 14, 2011
    • cL www.codyl.com | @codyL 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. INTRODUCTIONSaturday, May 14, 2011
    • cL www.codyl.com | @codyL 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. 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!Saturday, May 14, 2011
    • cL www.codyl.com | @codyL 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.Saturday, May 14, 2011
    • cL www.codyl.com | @codyL 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 FRAMINGSaturday, May 14, 2011
    • cL www.codyl.com | @codyL 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.Saturday, May 14, 2011
    • cL www.codyl.com | @codyL 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.Saturday, May 14, 2011
    • cL www.codyl.com | @codyL 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.Saturday, May 14, 2011
    • cL www.codyl.com | @codyL 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. iMOCKUPSSaturday, May 14, 2011
    • cL www.codyl.com | @codyL 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 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.Saturday, May 14, 2011
    • cL www.codyl.com | @codyL APPS FOR COMPUTERSaturday, May 14, 2011
    • cL www.codyl.com | @codyL APPS FOR COMPUTERSaturday, May 14, 2011
    • cL www.codyl.com | @codyL APPS FOR COMPUTER OMNIGRAFFLESaturday, May 14, 2011
    • cL www.codyl.com | @codyL 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)Saturday, May 14, 2011
    • cL www.codyl.com | @codyL 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)Saturday, May 14, 2011
    • cL www.codyl.com | @codyL 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) BALSAMIQSaturday, May 14, 2011
    • cL www.codyl.com | @codyL 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) BALSAMIQ This application is available for desktop and work for both Windows and Mac.Saturday, May 14, 2011
    • cL www.codyl.com | @codyL 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) 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.Saturday, May 14, 2011
    • cL www.codyl.com | @codyL 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.Saturday, May 14, 2011
    • cL www.codyl.com | @codyL 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. TEMPLATE CONSIDERATIONSaturday, May 14, 2011
    • cL www.codyl.com | @codyL 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. 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.Saturday, May 14, 2011
    • cL www.codyl.com | @codyL 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.”Saturday, May 14, 2011
    • cL www.codyl.com | @codyL 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.”Saturday, May 14, 2011
    • cL www.codyl.com | @codyL 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.”Saturday, May 14, 2011
    • cL www.codyl.com | @codyL 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.”Saturday, May 14, 2011
    • cL www.codyl.com | @codyL 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.Saturday, May 14, 2011
    • cL www.codyl.com | @codyL 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.Saturday, May 14, 2011
    • cL www.codyl.com | @codyL 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.Saturday, May 14, 2011
    • cL www.codyl.com | @codyL 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.Saturday, May 14, 2011
    • cL www.codyl.com | @codyL 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.Saturday, May 14, 2011
    • cL www.codyl.com | @codyL 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.Saturday, May 14, 2011
    • cL www.codyl.com | @codyL 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.Saturday, May 14, 2011
    • cL www.codyl.com | @codyL 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.Saturday, May 14, 2011
    • cL www.codyl.com | @codyL 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.Saturday, May 14, 2011
    • cL www.codyl.com | @codyL 2. Multiple Sidebars - In some cases you will need to have varying sidebars.Saturday, May 14, 2011
    • cL www.codyl.com | @codyL 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.Saturday, May 14, 2011
    • cL www.codyl.com | @codyL 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 FOOTERSaturday, May 14, 2011
    • cL www.codyl.com | @codyL 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.Saturday, May 14, 2011
    • cL www.codyl.com | @codyL 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.Saturday, May 14, 2011
    • cL www.codyl.com | @codyL 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.Saturday, May 14, 2011
    • cL www.codyl.com | @codyL 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.Saturday, May 14, 2011
    • cL www.codyl.com | @codyL 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...Saturday, May 14, 2011
    • cL www.codyl.com | @codyL 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.Saturday, May 14, 2011
    • cL www.codyl.com | @codyL 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. THANK YOU!Saturday, May 14, 2011