Last year, the theme I used was pulled from the WordPress repository without warning. The creator decided not to pursue updating it in the future. Though the theme still works, at some WordPress update, it will stop working. This forced me to find a new theme. It took about three months from start to finish. Of course, I could have done it faster, but this allowed me to consider lots of options and let the design sit — kind of like when you need to let your manuscript sit before you edit. The following is a plan of action for your redesign.
Thoughtology: Think Globally
Remember everything needs to be rebranded like Twitter, Goodreads*, Gravatar*, Blogger/Google+ Profile*, Newsletter service, etc.
*Those only need to be looked at if you change your avatar as I did.
- Content area: color, look, style
- Widgets: header, top, side, content, footer (there are so many places for ’em)
- Images within widgets and what I call standard elements (bullets, dividers, quotes, etc.) You might’ve notice I kept my butterflies, but I had to change their color from red to blue. I also snuck a butterfly into my header. Did you notice it?
Make a test site. This can be done no matter what platform you use. You can tweak and test to your heart’s content. Start by adding copycat pages and posts, not all of them, but 4-10. This will allowed you to see how the old stuff looks with the new design, and what you’ll need to manually fix after the redesign.
Play. Whether you have an idea of what you want or are clueless, play with themes. Find one you like the basic look of, then tweak it, mess with code, put up a fake header. See what you can and can’t do. I went through several different themes before settling on this one. This may overlap with the next step, but if you’re not great at coding, do this step first.
- Choose a responsive theme—one that shrinks the header too. Not all WordPress or Blogger themes do this.
- Choose a mobile friendly theme. Not all WordPress or Blogger themes are.
Work. It had to come into play at some point.
- Start with mood. What mood do you want to create? Happy, dark and edgy, romantic? This will obviously be linked to your genre. I wanted to go darker and have an urban feel with a touch of magic.
- Choose your basic colors. This will tie your site together. It’s two or three colors, and usually in the same tone or value or in the same color range. Mine is blue, teal, and black. Think about what the colors and color combos trigger in most people. (See my color posts.)
- Design your header. This is the most important design element. It’s the first thing people see. It should clue visitors in on your site’s focus. It can pull them in or turn them away! This is a biggie.
- Make sure to include your name or logo. Mine is actually not part of the header, but a layered graphic on top of the header. That part took me the longest time to get right, so you better like it.
- The width can vary, but if it isn’t full size—center that sucker.
- Don’t make the height take up the whole screen. Let your content peak through. People hate scrolling to find out what’s on the page. Visitors should be able to read a post title and a few lines of copy at least. If you want a giant header, create a splash page (a homepage with that image only, the rest of the site should have a smaller matching header). However, be aware that splash pages are dated, bad for SEO, and may turn visitors away due to large graphics slowly loading on the page.
- Don’t squish or stretch images to fit. They look ugly and amateur. Crop it or use a different image.
- When you have one you like, optimize it. You need to reduce the byte size. This is necessary. Too large slows down load time; Google’s prickly and gives you bad marks—and lower ranking. And “they” say people won’t wait more than three seconds before they give up and leave.
- Design your background. Solid color, pattern, or image, whatever you choose, make it fit with your header.
- Design your widgets. (Widgets are areas of content that don’t don’t require HTML or CSS knowledge for modification.) This includes the content area. Choose the font, style, titles, etc. This is a good time to think about the order of widgets and wording too. Update images. I created new follow buttons to go with my theme.
- Don’t clutter your sidebars or footers. No one will read them.
- Really think about the order stuff appears. Important stuff like the follow buttons up high!
- Don’t bother with an archives or tags widget. People don’t use them; they use the search or click on the tags within the post.
- Choose your accent color. This is best for links or things you want to stand out. Mine is an orange-red (the compliment of my blue and teal).
- Create your site icon/favicon. That’s the image that shows in the browser next to the URL. Mine is a butterfly.
Once all that is done, making the switch on your actually site will be quick and painless.
Sites to help you in your endeavors:
- Optimizilla: optomize your images
- Validator.w3.org: code checker
- Pingdom Tools: speed test
- Googles Mobile Friendly Test: see if you pass and see how it looks