As part of a promotion for the website (really just for my own entertainment) I had offered to help build or redesign a website for free. The winner is Eco-Mami! The prize is a redesign of the current Eco-Mami website. The site is about a green stay-at-home mom who shares simple and easy to follow tips on how everyone can live life a little more Eco-friendly each day.
This was a great choice for me to work on. The site has tons of great content and just needed a bit of sprucing up to improve the aesthetics. The current design is a very simple blog design layout. The logo was already well established which gives the redesign a jump off point from which to work. The only stipulations of the redesign were that it had to continue to use the existing logo, keep the site’s “Eco Tips” easily accessible, and of course, make it look good.
The redesign is still a work on progress, but I’d like to share some of the design progress to give a sneak peak into it’s development. Because the site is already well established it was easy coming up with the theme… keep it green! The first thing I did was search on stock.xchange for images to use as inspiration and maybe incorporate into the site. I eventually found the one located at the top of this post. (Courtesy of Mihai Tamasila. Click here to see the photo at stock.xchange)
I actually started using a combination of colors from the logo and the brightest and darkest greens from this image. Suprisingly enough, the first draft came out to be a lot more intense, almost neon green than anticipated. You can see the first draft below:
Although a good start, it needed to be toned down some. It was suggested to me that I use more earth tones to soften the feel of the site and coinside with the nature of the site a bit more (a lot more than those original bright colors). So, I came up with 3 alternate designs below:
Ultimately the third one won out. There is still some work to do on the side bar elements and footer, but as you can see, the bulk of the blog’s elements are accounted for. Stay tuned to see the final outcome.
John, very nice designs! I really like the first earth tone version, but I can sure see how it evolved into a more professional looking site. What kind of time went into making these drafts?
The first draft probably took me about 4 hours. (You’ll notice I didn’t quite clean up the sidebar and need to add elements to the footer still). However, all 3 redesigns probably only took me about an hour, 2 tops. Its really all in how you set up your Photoshop PSD. I’ve come a long way with that and keeping your PSD organized makes it pretty easy and quick to swap out colors, effects, fonts etc.
Oh god. The font. Maybe it’s just that font in white on the epileptic background, or maybe the picture isn’t high-res enough, but it makes my head hurt 🙁
At least do this to the text (ignore the crappy looking font, I just did it in GIMP:) http://i.imgur.com/IcSl9.jpg
Actually that’s a really good idea. I was actually thinking of doing something like that. With the splattered background it’s just too hard to read the text. It doesn’t matter what text color either because the background has so man different colors in it. I’ll give this a shot and let you know how that goes. Thanks for the advice!