next next

Apollo: A WordPress Theme From Scratch pt 2: Design

Written by Cebo Campbell on May 28th   •   1 Comment »

Designing Apollo has been a ride. If you followed the previous post, you saw how the sketches began to crystallize into something and the ideas came together. Before Photoshop was ever opened, I had a very good idea of direction and concept and most of the big “problems” already figured out. Armed with sketches and a very fundamental theme description: Bold, Clean, and Smooth, I jumped right in.

Images and Friends

One of the things I wanted to do with the showcase theme is show off people I admire. Most of them friends, I wanted all the images, portfolio pieces, team and contact information to be real things, not just dummy. In this case, I have enlisted the help of a few ultra-talented folks: Sarah Eiseman, Patrick Engman, Garrett Myers and a few others. They inspired the development of this theme and my hope would be to inspire the people who use it.

Widths and Grids and Colors

I usually don’t start with grids, but in this case I started with 960 grid that I expanded to 1200…the bigger, the bolder. One of my incoming issues was color. With any showcase theme, it is important to minimize color to really show off the imagery that is being showcased. With the site being all bold-n-what-not, reducing the colors was tougher than I thought. But, I started with a minimal color palette of white and gray, and, eventually, tossed in a blue for accent.

Designing For Function

Because I had the sketches, I knew, in many respects, what the layout would consistent of and how it would inevitably come together. What I was able to do then, was think less about the nature of the layout and more about the eventual functionality. With WP themes, users will be changing content, will have the ability to update sections and you, as the developer, have no idea what they can/will do. Designing with that in mind will save you tons of time in code. For example, if you are building a page that uses a special background or a unique color that works with the rest of your composition, the user may or may not want to modify that. If so, it could negatively effect the design as a whole, taking your wonderful work and making it something completely different. If you design for that, you can limit the update-able sections and keep the whole design intact.

There are times when I am designing something that I know I have no idea how to code. For example, this theme will have a two column layout. While that seems easy, that layout will need be dymanic, meaning, the user’s page content will have an indefinite height and that height will need be determined and then split in two. I have no idea how to do that. But I putting myself in a position to be forced to figure it out later, really stretches out my knowledge and creative use of code.

Alright, Enough Talk… Screenshots!

I typically design all the pages first, just so there are no suprises in code. Think of it as designing a full blueprint of the house before you build it. Sure, you could just throw that bedroom together, but it is always better to have a plan. Here are the pages designed:

Skip ahead to check Part 3: Development

  • Home (with variations)
  • Portfolio Page
  • Portfolio Single Page (with variations)
  • Team Page
  • Standard Page with Typography (variations)
  • 404 Page
  • Under Construction Page
  • Post Page (with variations)
  • Contact Us

Part 3: Development
















One thought on “Apollo: A WordPress Theme From Scratch pt 2: Design

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Recent Posts
Instagram
A Little About Me

I am just a dude who likes making things. I've worked as designer, a social media marketing director, a copywriter and even a pool cleaner. I own the boutique creative agency Novel Avenue, make WP themes, EE Themes and Ruby themes and honestly could not live without football. I am husband to a rad wife, dad to two kiddos and love what I do. Also, I am down for a beer if you're buying.
I am easy to find

HIT ME UP

  • My peeps on the web