Visual Recipes Design Process

by Jonathan Longnecker

After a long wait; we’re excited to be able to show you a really cool project we worked on several months ago. Visual Recipes is a site with a great idea: Take pictures for each step of your process when making a delicious dish and post it online. Great for visual learners (like myself) and great for the users who get to share their recipes.

The site already got quite a bit of traffic, but it’s age was starting to show. They were ready to overhaul it inside and out as well as add some new features.

Old Design

Visual Recipes came to us with several requests:

  • Create a new logo
  • Re-design the site
  • Create HTML/CSS
  • Give advice the backend development as the site was transitioned to ExpressionEngine.

For time’s sake let’s look at the logo and design of the recipe page template:

Logo Design

Visual Recipes wanted the site and logo to be much more family friendly, fun, inviting, etc… We talked a lot about retro colors and rounded corners. You’ll see most of it made it’s way in, but not in the way we originally thought. The journey is always fascinating.

Nate went straight to work on the logo. The first round was very strong and actually has all the elements in place for the final. They liked the last one the most so we refined the letterforms and iconography. We thought v.2 was the winner, but they kept seeing a sea monster in the letter “v.” Fair enough smile So a small tweak and the final version is born. Retro and fun for sure. We dressed it up a bit with strokes and shadows.

Logo Steps

Web Design

The web design proved to be quite a bit more difficult. I can’t detail the entire process here as there were quite a few pages, but we’re going to focus on the recipe page since it’s really the heart of the site. In addition to guiding visitors to read the info and participate more reliably, we were adding member profiles, sharing to social networking sites and dealing with ad placement considerations. In short, this was much more than putting a pretty face on what was already there. We were starting from scratch.

Sometimes a design comes together quickly and sometimes it’s hard work. This was definitely the latter.

Wireframes were definitely the best place to start, so we got right to it. We tried a few layouts before settling on a wider 2 column design. This is where it gets interesting.

Wireframe

Looking at the first round; I’m not really sure what I was thinking. I know we were trying to get the rounded corners and retro colors thing but none of it felt right. Pretty sure I told them that when I sent it, too! Somewhere to start at least.

First Design

We both decided those retro colors weren’t happening. And it still looked too much like the wireframe, but with rounded corners. We needed to find some style and personality.

Round 2 was better. We found some great retro food illustrations and sprinkled them throughout the site. Made a fun background, too. The colors are happier, but it still felt really subdued.

Design 2

Round 3 added most of the typography we see in the final, but mostly consisted of trying out different background colors. At this point, we both agreed that while it looked ok, the feel and details were sorely lacking. It wasn’t kick awesome yet. I decided to take some time and explore some other directions.

Design 3

In round 4 something magical finally happened. It all started to come together. It began with the style of the photos. Nothing huge, but it was a square polaroid looking thing with curled shadows underneath to make it look like it was sitting on top of the page. That suddenly freed me from the rounded corners. I killed most of them immediately. We used various forms of the paper shadow on everything, even the ads. Then we realized the “sticky note” look worked really well with the handwritten font we were already using. All the buttons became scribbled blocks of color istead of rounded capsules. All the colors were intensified. Now it was starting to have some feel!

The final piece of the puzzle was the background. We had struggled with this from day one and I was determined to find just the right thing. Turns out it was really simple. Make it look like a kitchen, genius! A subtle repeated tile background was perfect. And for fun, a mini kitchen counter at the bottom.

Final Design Footer

I can’t tell you how excited I was to show this version to Visual Recipes. We even found a way to put a top banner ad in tastefully! There were a few minor tweaks after this, but we both knew this was it when we saw it. Sometimes a design comes together quickly and sometimes it’s hard work. This was definitely the latter, but we’re both very happy with the results.

Recipe DropdownFrom here we designed a ton of pages - The homepage, blog page, member page, and most importantly adding a new recipe page to name a few. We worked closely with Visual Recipes to make that whole process much easier. Did we mention the huge category dropdown? So many little details adds up to much awesomeness.

So here’s the deal. You like food? Yeah, that’s pretty much everyone. Go check it out. You’ll be hungry in no time. You like to cook? Go sign up and add some recipes. You’ll help more people learn to cook and the world will be a better place. Do it now. Visit Visual Recipes →.

P.S. – If you want to learn how to create a more profitable web shop check out Freakishly Profitable. It's the best way to make a "monster" adjustment to your web studio's bottom line.

February 19, 2010

Design

Comments

  1. Great re-design and great post Jonathan.

    I love seeing how the process progresses with the wire frames to the final site.

  2. Thanks, Gene!

  3. I can so relate to this. Sometimes you keep working on a design, telling yourself this may do, but deep in your heart knowing this isn’t “it” yet. It may take stepping away from it for a day, or looking through some inspiration, or simply going back to the drawing board, ie. sketches. You’ll know when you got it once you’re filled with joy and excitement about the new design direction. Usually the clients can tell too! Great post, thanks for sharing the details! smile

  4. Really nice work Jonathan. I struggle with my own process so it is nice to see how others accomplish getting from point A to the finished product. Is it an ExpressionEngine based site?

  5. Redesign looks fantastic! I like all the subtle details. Maybe in a future article you could get into CMS usage(Expression Engine?) and implementation. Keep up the good work!

  6. Thanks guys, it is an EE site, but we didn’t build it. Visual Recipes actually learned EE from scratch and put it together. I was very impressed. We just sort of guided them for overall setup and add-ons.

  7. Great work, Jonathan and Nate. I like the kitchen counter at the bottom. Seems like the theme and typography really came together for you.

    Thanks for sharing your process. It is always good to see how a design comes to be. Good learning experience. I enjoyed the journey.

    Keep up the kick awesome work.

  8. Nice site!  You WILL see recipe contributions from me on their site. 
    Side note: The top right link on that site says “Sign Up” (2 words) while the blue action banner just below the main pic(s) says “Signup” (1 word).  I am sad that my mind finds errors before it sees the beauty.  But it IS a very good looking site guys!

  9. Thanks, Jeph. I’ll let them know wink

  10. Wow, really amazing work.  You guys never cease to amaze me!  Every time you guys come out with a new design i want to go back and redesign everything.  grin

  11. Wow, I really like what you guys have done w/ this site! Awesome work!

  12. Beautiful website, gentlemen. You guys continue to be an inspiration!

  13. Thanks Matt, Scott and Rex!

  14. That website looks completely awesome! I’m so impressed! If you are free to share, how long did that whole process take from start to finish? 1 month? 2 months? 3 months? more or less?

    All that impeccable design must have taken forever, but it all looks sick now.

    Just wondered if you were free to share exactly how long it took to do all that stuff.
    Thomas

  15. @Thomas, thanks for the kind words, man. Looking back through basecamp I’m a little embarrassed at how long it took. Let’s just say project start to finish was way more than 3 months. Not that we were working on it non stop for that long, but still. Need to speed it up I guess smile

  16. Haha, it’s all good…awesome design just takes time. The view of the end prize always takes away the pain of the road leading up to it (at least from the designers point of view lol).

    Your designs have given me new creative insights - can’t wait to build upon them! Keep up the good work.
    Thomas

  17. Awesome, Thomas. Go forth and create the kick-awesome!

  18. Sorry, but I’ve got to ask - is that hand-drawn type in the logo or a commercially available font?

    Great redesign!

  19. @Christian It’s a Veer font…Sugar Pie I think…

  20. nice work, love the font type!

  21. Awesome work, love the color choices! raspberry keep it up!

  22. Great Post. So informative! So pleased to have found your site when researching food websites.



Behold our Amazing Portfolio

Check it Out