The Epic Behind-the-Scenes Details of the DYOB Redesign: Day 4

Wow! It’s Day 4 already of the DYOB Relaunch week! All week long I’m walking you through my redesign story, the reasons behind some of the decisions I made and also what went wrong.

Can you believe I’m STILL sick? Ugh. Anyway, today I’ll be talking about how I came up with the design you see before you and why I chose the WordPress theme I have.

Here’s the agenda:

Day One: What’s the Point?
Day Two: The Design/Branding Process
Day Three: Font Palettes
Day Four: Design Mockups and Why I Chose My Theme (below)
Day Five: Turning Your Blog into a Business/Making Money from Your Blog
Day Six: Newsletters
Day Seven: Social Media

Note: Some links (with a *) are affiliate links which means I may receive a small commission should you purchase something using my link. Read the full disclosure here.

DAY FOUR: Design Mockups and Why I Chose My Theme

When I created DYOB a little over two years ago, I designed it from scratch in Photoshop* and then implemented the design into my theme. Fortunately, the flexibility of the Genesis* sample child theme allowed me to create pretty much whatever layouts I wanted.

That took a lot of time and I knew that this time around, I wanted to start with something that was far enough ahead that I wasn’t starting from scratch. After blogging for a while, I had come to want or need certain features for my theme. That made it important for me to find a theme that had most of these elements and functionality already built in. Then the idea would be to create a design mockup around that theme’s layout.

Which is the right way to do it?

Of course there is not right way. We all work differently, even professional web designers. You just have to find what works for you. That said, I’ve done both and I’ll tell you: for me it’s a heck of a lot faster to work with an existing theme than it is to design it from scratch. And given that I wanted to give myself a month to get the design out, I opted for the faster method.

Over the last two years, there has been some functionality that I wanted to have but couldn’t quite make them happen, or I didn’t have the time to. As you may or may not know, I’m not a full-on developer. I can usually work around PHP and Javascript, but it doesn’t come naturally to me. So I’d been on the hunt for over a year for a theme that had most of what I wanted so that I didn’t have to hack at it as much.

Here was my short wish list:

• The ability to display the latest posts by category (this was a biggie for me)
• A hero (a large full width image) at the top of the home page
• A flexible home page that allowed me to insert custom content as well as blog post previews
• Mega drop down menu ability
• A customizable archive page (like this gorgeous one on Elle & Company)
• Responsive design

Searching for the Perfect Theme

Over the last year, every time I saw a new theme or website, I paid attention to its features and layout. Would it fit what I had in mind? Did it have any of these features? I kept a running list in Evernote of blogs that had layouts I liked and also themes that had what I was looking for.

One day I stumbled upon a blog that had my #1 item! I used WhatWPThemeIsThat.com to find out which theme it was. It was called Simple Mag* and to my surprise, a Theme Forest theme.

Now if you’ve been following me for a while, you’ll know that I’m not usually a huge fan of Theme Forest. I have bought a few themes from them before and many of them have had issues. Either they’re not coded well and therefore don’t work well with customizations or they are so complicated that trying to get it to look anything like the demo is an impossible feat!

The truth is there are good and bad theme developers anywhere. The trick is to find the good ones.

Here’s how I determined whether or not to buy this theme:

The Simple Mag theme had 5 stars from over 10,000 sales! That’s a good starting sign, but I didn’t stop there. I spent a lot of time looking into the reviews on the theme developer and the theme. I checked dates on the developer responses to ensure they were timely and I even asked a few questions myself, to which I got timely responses. I saw that they had a support forum and from the reviews, it sounded like it was pretty active. That made me feel safe that I would be able to get the support I needed if I needed it.

So did Simple Mag have all the features on my wish list?

• Ability to display latest posts by category instead of date
• Hero image
• Flexible home page with custom content and blog post previews (comes with a Page Composer built in)
• Mega drop down menu
• Customizable archive page
• Responsive

Almost. The archive page I could live without. Besides, I’m pretty sure there are plugins I can find that would alleviate that problem in the future if I really wanted it. Sold. I bought it.

My Must Have

My #1 requirement was the ability to display posts by category on the home page, as opposed to listing them by post date alone. I wanted people to be able to quickly see sample posts from the most popular categories to get a better idea of the different types of content I offer. It surprised me how few themes actually have this ability so that had really narrowed my choices down.

Has Simple Mag lived up to its promises?

Again, almost. No theme is ever perfect, that’s probably why people develop their own. Luckily none of the issues have been deal breakers and I’ve mostly found ways around them.

Here are some of the minor issues I have found with it so far

• I am using two full width image components on the home page: one for the hero image and one for my mission. I couldn’t find a way to add a custom class to each one so that I could target the styles on one and not the other. No biggie, I just had to compromise.
• I really wanted to add a repeating background image to the hero image so that the centered image itself could stay the same height as the page increased and decreased in width (it’s a responsive thing). I could not make this happen. But I dealt with it.
• The styles are a little difficult to override in some places without having a super long complicated style sheet. This isn’t that big of a deal for most people but as someone who likes to keep their style sheets as under-bloated as possible, it irks me just a little.
• I thought I’d be able to select which posts appear in the mega menu dropdown under tutorials, but it only picks the last 3. Again, details…

These were all pretty small issues that I could live with so overall I have to say I’m quite happy with the theme so far!

The Design Mockup

Let me back up a bit and tell you that after I had chosen Simple Mag but before I actually bought the theme, I worked on some design mockups first to make sure I could make it into what I envisioned. Here’s what I did:

I took screenshots of the demo’s home page and a blog post page and opened them in Photoshop* as a starting point. That way I had the correct measurements for the different columns and components. Then I went to town designing stuff in my own colors, fonts and whims.

Graphics

You’ll be pleased to know that all the Design Cuts graphics bundles* I bought went to good use! I used the Feminine Mockup Creator* to create the hero image. I used two fonts from some bundles, TT Chocolates* and VeryBerry Pro.* The gold texture that shows up in little hints here and there, the coral pattern and the floral pattern are all also from Design Cuts bundles.

Photoshoot

Last fall when I started thinking about redesigning, I already had an idea that I would be using aqua/seafoam and coral and it just so happened that I bought 2 new dresses last summer in those colors. So last fall before the weather turned, I took the day off work, took our son to daycare and had my husband take me out on a photoshoot throughout our neighborhood. I’ve been sitting on these photos ever since and I’m psyched to finally be able to use them!

The Result

The final mockup is pretty close to what you see now. Because I had been planning it in my head for quite some time, I honestly didn’t go through a bunch of design iterations for once. The only thing I’ve been having trouble with for some reason is creating a few post title image templates. But I’ll figure it out as I go along. What I have now is a good start and they’ll evolve into something better soon.

Day Four Giveaways

And now the moment you’ve all been waiting for… the giveaways! We’ve got three prizes again for three lucky winners!

Learn more about the giveaways and enter here.