LMD_ipad

Art Of: Designing A Custom WordPress Theme

Hello Everyone!

It’s been a few months since I re-launched my portfolio site, www.lorettamaydesign.com and I promised from the re-launch post that I would go into details about my process.

Step One: Requirements

If you’re designing for yourself or a client, there are a ton of questions that have to be answered before you even start sketching.

First you address the problem(s):

1) I want updating my site to not require hand code anymore
The answer to number one was by choosing a CMS (content management system) that is easy to use. I chose WordPress. My reasons for that will be in a further post. This is a really important decision and must be made early because it affects how you design, and what type of developer you work with. Not every developer knows how to code a custom theme for WordPress.

2) I want to attract a more serious client
The solution came in two parts: designing a more professional looking website, will attract more professional clients. Second, I added a contact form that was a little more in-depth and required a budget to be selected from a drop down. Since I defined the values, they know right upfront the minimum I will work for.

The first part of the process for me was being honest with myself and writing down a few things. I wrote down who I’m making this website for. The answer started out with “I work with small businesses” but my challenge has always been to find the right type of small clients; the ones that are actually serious about what they are doing and not just “a hobbyist that wants a logo”.

So I wrote down the types of companies that make me really excited, like can’t sleep at night excited. This actually goes well with what I heard Dyana Valentine say at the Creative Freelance Conference in San Francisco not too long ago. She said “think of that client that makes you want to run outside with out pants on…” and after we figured out that client, we were to think of the problem we wanted to help them solve. That was the basis of our pitch. This information manifested itself right on my home page with my big and bold intro.

Screen shot 2013-07-26 at 7.44.23 PM

Once I figured out who I was speaking to and what services I wanted to highlight, I moved on to what information I wanted my viewers to see and how I wanted them to see it. 

I did this by writing down my goals for the website:

1) I wanted them to see what services I provide directly from the homepage. 

2) I wanted them to be drawn in immediately by my latest work on the home page.

Screen shot 2013-07-26 at 7.54.32 PM

 

3) I wanted to provide evidence of my work ethic.

Screen shot 2013-07-26 at 8.03.55 PM

 

 

4) I wanted to provide clear organization about the types of projects there are in my portfolio. 

Screen shot 2013-07-26 at 8.09.29 PM

 

 

5) I wanted them to contact me for project opportunities.

The goal of any portfolio is to have a potential client or employer contact you for work. While that was important, what was even more so was the type of client that contacts me. I wanted my contact form to ask the right questions so that I could filter out a serious client from someone who has no clue what they want. I did this by asking them to choose a service package as well as give me a rough due date and name their budget upfront. I’ve learned that clients unwilling to give me a number up front don’t want to pay much. Also if they see the options that nothing is below $1000, then the people only willing to pay $500 won’t contact me at all.

Screen shot 2013-07-26 at 8.04.06 PM

 

Step 2: Site maps

So once I knew what type of information I needed to have, I created the site map. This is a useful tool for both me and the developer. It tells me how many pages must be made as well as how they link to each other.

Originally I had a services page all on its own, but then I realized I could put the services that I wanted to highlight in a slider on the homepage like small shop studio.

Here’s my final site map:

LMD_WIRES

Step 3: Wire frames

I took a skillshare class on wireframing, which I highly suggest you look into if you’re interested in web design but have a formal education in print, like me. The three main things I learned from that class were to keep it black and white. Adding color isn’t important at this point. Also the actual content doesn’t need to be present, just use boxes and greek copy to show their general placement and size relative to the page. d

I went through a few wireframe phases before I sent them off to my developer to take a look and give me an estimate.

Screen shot 2013-07-26 at 8.11.54 PM

Step 4: Styling and Visual Research

I looked at both agency websites and individual designer websites and found elements that I could incorporate into my own look. Here’s a few examples of things that inspired my look and feel:

Homepage:

I loved the use of photography on this page.

Screen Shot 2012-12-26 at 11.17.14 AM

The bold san serif font inspired my typography.

2378478238742653

 

I love how small shop showcases their services directly on the homepage.

Screen Shot 2012-12-26 at 10.43.17 AM

Footer:

I really liked the ability to subscribe to a mailing list in the footer.

Screen Shot 2013-03-27 at 3.54.43 PM

Most footers have just one color, but this tiny little bar of orange onto of the pink just adds a little something extra.

Screen Shot 2013-03-27 at 3.50.59 PM

This horizontal bar actually inspired my vertical bar throughout the site.

Screen Shot 2013-02-01 at 6.07.12 PM

Elements:

LOVE this curated collage of bits that support the “brand styling” service

462345432

 

This was the inspiration for my “pull quote” on my project page

Screen Shot 2013-03-05 at 3.07.37 PM

 

Jessica Hische’s project page shows clear info:

Screen Shot 2013-01-26 at 2.24.42 PM

 

This concludes part one of my process to designing a WordPress website theme. Stay tuned for the second half, where I get into word press specific limitations.

 

 

 

 

 

4 Comments