Post three in my series on the web design process for the responsive site for “Daisy Plates”, an imaginary boutique catering business, details creation of a logo and selection of a color scheme. Please view part two for a reminder of how we got to this point.

Step 3: create a logo

Once I had decided on “Daisy Plates” as a name for the business, I set to thinking about the logo. At the same time (and honestly before I decided on the name as well) I really started thinking about the remaining steps of my design process, because they are so intertwined. I decided first that I would limit the site to four main sections based on the services Daisy’s company would offer: Dining, Catering, Bakery and Gifts. I would also need areas for contacting the company, general background info about the company and a news reel.

My first idea was to design the site like a plate – white with rounded corners, sitting on a patterned placemat. The plate would have the logo in the middle, and four subtle quadrants, like those divided plates you might find your appetizers on in a restaurant. Important details like contact info would go in the top right corner of the plate. There would be a nice contrast between the placemat and plate.

Another idea involving a plate was similar to the first, but no longer had the quadrants. The four sections would have links on the plate and the plate would have a subtle background image related to the main design concept (a daisy at this point). I started to think about having photo-realistic elements of a napkin overlaying the top left corner on a diagonal and then a spoon in the same direction on the bottom right. Rolling over these would have them move in a subtle way, and clicking them would go to special areas of the site, like a contest perhaps.

I liked these ideas design-wise, thinking of the lovely contrasts in color and texture, but then re-focused. I want to build a responsive site, so I thought it might be a good idea to simplify things for the first go. More on that later.

Back to the logo!

Before I had decided on “Daisy Plates”, I knew I wanted a small symbol to represent the site as part of the logo. I thought of a small gift box with a bow, but then that was not food-related enough. I considered a small decorated cookie as well as a candied pear with a bow which were both very food-related, but didn’t really run with “Daisy Plates” to me. It became obvious that working in a daisy somehow while keeping the site from looking like a flower shop would be the plan.

I did a lot of initial sketches with simple daisies, and started to see how the “d” and “p” in “Daisy Plates” (lowercase) had oval shapes like petals and long straight shapes like stems. If I could somehow squeeze the words together in the right way, I could make a daisy shape of some sort. I started to work on this in Photoshop, with a couple of tips here and there from a Graphic Artist associate on how to use some PS features in the way I wanted.

I determined the site was going to have just a few colors, and high contrast. I wanted the logo to be sharp and modern, but also fun and with a rounded appearance. I played around with fonts until I found one that fit the bill, and then started splitting up my letters as needed and adding shapes to get the effect I wanted. In the end, some letters became bigger than others, and the “a” in “Daisy” got pulled into the daisy shape. I added some finer detail to finish out the first design. I stepped away from the logo and took a look. Hmmm…the finer details made the daisy look too much like a fly, as in “buzzzz”. Not exactly the concept you want for a catering site!

I decided to simplify things more, and bring in a rich yellow center. Now that looked like a daisy! The yellow is warm and I could see a few color schemes working with it, and is also bright and cheery, which worked with what I wanted to convey with the site design. I saved the logo as a PNG with considerations for the Web and called it done.

Step 4: determine a color scheme for the site

Now that I had the logo with the warm yellow center, I moved on to thinking about color schemes. I used the site kuler to get some ideas.

Although I know it is a bit of an intense color, I couldn’t get red out of my mind. I could see a rich red napkin and/or placemat. So I tried to find a scheme to work in rich red and warm yellow. In the end, I decided on a scheme of rich rasberry-ish red (not as intense) with a secondary lighter raspberry, the warm yellow with a secondary warm beige, as well as black and white. Some of these color choices were determined as I worked on the mock-ups.

This color scheme says warm, cheery, inviting and classy to me, which I finally determined is the tone I would like the “Daisy Plates” site to project.

Next post – mockups!