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.
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
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.
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.
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 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.
Hey friend, want free DIY design stuff?
I've got an entire library of FREE goods just for you! Join the 10,000+ others and get instant access now!
I love reading about your thought process on this! Plan, plan, plan – that seems to be a key here. Doing mockups is just about the only way to *really* know what things will look like. I’m glad you found a theme that works so well for you.
Thanks Jennifer. Took a while but glad i did!
Thank you SO MUCH for sharing all of this but especially the What WP Theme is This site. This is my favorite thing I’ve learned today. I should’ve known there was a way to identify what theme a site was built on…never occurred to me to actually go look for a tool ! I’m going to be in Copy+Paste+Search mode for the rest of the evening!
Haha Elle, that’s awesome! I love that tool too, it’s super useful!
I love reading all about your redesign! 🙂
I found a way to target your hero images separately if you’re interested.
This will target both of them, obviously:
But then you can use this to specifically target only the first one:
#content > .full-width-image:first-child
I hope that helps. 🙂
Oh my gosh Ashley, i just had a face palm moment! I didn’t even think to do that! I always think that just works with lists. Thank you thank you!
Thanks so much for coming by to check out my recap. I’ll be making a post soon about mistakes made during the redesign/launch and will be sure to include your help in it!
HEY EVERYBODY! Ashley is an amazing WordPress developer who helped me at the 11th hour when I needed some plugin development before launch! 🙂
I’ve been following this series, and this is the most exciting post for me. (I LOVE searching out, investigating, and tweaking WP themes).
It’s really awesome you found yours on Theme Forest. I usually avoid that place like the plague, but I’m happy to hear there are still great themes available there.
Haha I KNOW Angie! I was really surprised when I realized it was from Theme Forest, that’s why I did so much research! So far so good though.
I had a feeling you’d like this post 😉 For those of you reading this, check out Angie’s free ebook on How to Choose a WordPress theme! http://www.studiostoryville.com/choosing-a-theme/