I’ve been planning to redesign my website for years, but I’ve let client projects and other work come first. There were some tangly backend development issues to sort out, which only aided in my procrastination.

As a designer, I have perfectionistic tendencies. Which is why my last website was “finished” in December 2010. And that iteration was created in 48 hours before a surprise meeting with the Creative Director of the Chicago Bears. It was hand-coded in HTML and CSS, and was a pain to update.

I’ve sketched and researched and doodled new ideas. Nothing felt “good enough.” I sell website services, and a messy website felt unprofessional, so – a few months ago, I pulled down my 2010 site and had a “coming soon” banner instead. I thought it would give me the kick in the pants to get a new site finished.

So, after reading “Show Your Work,” I decided to take a risk, lift the kimono and show what happens when you re-design and re-develop a WordPress site live. I’ll be blogging and documenting my process as this website unfolds over the coming weeks.

Last week, I created a child theme to prepare the WordPress backend for my style changes. It’s important to create a custom child theme so that if Genesis gets updated in the future, you don’t lose all of your custom code.

Today, I created the first draft of a custom header, styled the navigation, adjusted the widths of the main content and sidebar, and adjusted the padding and margins throughout to give everything a little more breathing room. Things are still feeling a little too cramped to me, so I’ll continue working on it.

I also added in two sidebar widgets – my basic contact information and social media icons (using the “Simple Social Icons” plugin)

BEFORE:

AFTER:

What’s a fav icon? In your browser bar, there’s a little image next to the URL:

This image will also appear in browser tabs and in the bookmarks folder. Customizing it is a nice touch and helps readers find your site easily. The Genesis theme by StudioPress uses a black box with a G by default.

To create a fav icon, you can use an online generator like this, or you can create a 16px by 16px image in Photoshop. Save the file as “favicon.ico” (the name must be that, or it won’t work). That isn’t a default file type in Photoshop, so you can save it as a .png or .jpeg and just change the file extension afterward by renaming the file. Next, you’ll upload it to your WordPress theme’s folder on your server.

To do that, you can use an FTP client, or the File Manager from your web host’s cPanel (I use InMotion Hosting).

For this instance, I’m going to use the cPanel.

Click on “File Manager” and select “Web Root (public_html/www)”

In my case, I had to navigate to the Genesis theme folder’s image folder (/wp-content/themes/genesis/images)

And, as you can see, when I first installed the theme and imported some blog posts, the site looks pretty sad.

No navigation, no sidebar, no cool homepage. You have to add all of this in. So, I started out by adding a few key pages and created a new static page for my homepage. (To get the cool-looking homepage, you have to create artwork and configure special widgets. I just wanted to get something up that wasn’t my blog)

I am really disappointed at where the menu appeared. There are two menu placement options – one as you see here, and one where there would be a black bar above “Danielle Baird Design.” There isn’t a default way to get the navigation to appear to the right, as you see in the demo shot. I’ll have to edit the template’s CSS or find a plugin for the header widget area.

I’m able to troubleshoot this because I know how to edit the code, but this must be incredibly frustrating for the average person who’s trying to DIY.

Next, I’ll start making some design edits to the theme in order to customize the look.

“COLOURlovers is an international creative community that helps people discover their inner designer. We provide people with a wealth of user created & shared color inspiration as well as tools that make the creative process as simple as possible. Whether you’re simply looking for a color palette to kickstart your next project or want to produce a piece of vector art, we have the tools and services to help anybody from go from design inspiration to execution. There are 4,060,125 COLOURlovers around the world who have created 7,103,660 Colors, 3,139,088 Palettes and 3,997,390 Patterns.”

Perhaps you’re already familiar with the newspaper terms “above the fold” and “below the fold.” If not:

“Above the fold” is a graphic design concept that refers to the location of an important news story or a visually appealing photograph on the upper half of the front page of a newspaper. Most papers are delivered and displayed to customers folded up, meaning that only the top half of the front page is visible. Thus, an item that is “above the fold” may be one that the editors feel will entice people to buy the paper. (Wikipedia)

“Below the fold” (as you may have guessed) refers to the bottom half of the page.

These terms have carried over onto the web.

Definition:

tittle : the dot over i or j

Example Sentence:

Make sure you tittle your i’s and cross your t’s.

Origin:

Tittle comes from the Latin titulus, which originally meant “title.” Titulus came to refer to marks such as the abbreviated form of n written over a vowel (like the Spanish tilde, which indirectly got its name from titulus), and then to any mark above a letter.