35

Hi all. I'm Jin and I'll be working on the designs for the Stack Exchange sites as they graduate from the beta phase. Each site will have its own unique theme that will reflects its topic. However, all sites will share quite a bit of common elements so they feel like they're part of the Stack Exchange family.

For Cooking site design, here are some of my ideas:

Design Goal I'd like the site to resemble the feel of cooking books and magazines, or restaurant menus. It should put people in the "cooking mood." I've been looking through a lot of cooking publications lately and I see some common design elements in them. I also think adding a slight vintage look to the design will suit the theme of "Seasoned Advice."

Colors

alt text

Warm and vibrant colors are appetizing. Here's the color palette I came up with for the site, inspired by cooking books.

alt text

Logo We have a great domain name picked out, "Seasoned Advice." I think a chef's hat is the most recognizable imagery associated with cooking. It is used in most cultures.

Initial Design Here's my mockup of the homepage. I used some old paper texture to give it the vintage look, and the colors are inspired by cooking books. The background of the site is a picnic table cloth pattern. Again, the goal of this design is to create that warm, appetizing and joyful feeling associated with cooking. You can see a full resolution version here.

I'd love to hear your feedback.

Mock-up for retro/pastel-ish site theme

Update added Question view page mockup. (not all site elements present).

alt text

7
  • Quick question: the font-size for the votes/answers/views numbers seems really small compared to the existing sites - any particular reason for that?
    – Shog9
    Sep 20, 2010 at 17:06
  • 2
    Ready to serve?
    – Ivo Flipse
    Sep 20, 2010 at 17:07
  • 1
    @knives They're slightly smaller yes. But I think they're still readable. The reason I reduced their size is because this particular design is very colorful, and can get to the point of "looking busy." I feel bigger numbers would make it more noisy. The most important number is the "answer" number, and it has more visual emphasis than the other 2.
    – Jin
    Sep 20, 2010 at 17:21
  • 2
    Beautiful, my friend! Sep 20, 2010 at 17:51
  • 1
    Can you link to a tiff or png? I'm catching some bluriness in spots, but suspect it's lousy jpeg compression on the Anti-Aliased pixels. Sep 20, 2010 at 18:36
  • This looks really, really good. I'm very impressed. Well done! Sep 21, 2010 at 12:09
  • 5
    I don't have anything constructive to offer accept the color scheme hurts my eyes, the design looks campy, and I would be embarassed if my friends caught me looking at this site at work. I like clean and "techy" though.
    – Varuuknahl
    Sep 22, 2010 at 14:53

15 Answers 15

21

Wow. I've been wondering what you were going to come up with for our site. It looks perfect.

3
  • 3
    Gorgeous! I really like it!
    – Martha F.
    Sep 20, 2010 at 17:08
  • WOW! I love it!!!
    – dolma33
    Sep 21, 2010 at 17:50
  • Indeed - amazing work Jin! Oct 25, 2010 at 1:33
10

I'm kind of with Michael on this. The colour palette, while lovely, is a bit busy for my tastes. And the overall design... I understand what you were going for, but I think it looks a little too much like Grandma Macallister's Cookie Swap and Recipe Farm. Again, much like Michael said, it is not a bad design. It's just not a good design for my understanding of what this site is supposed to be: clean, factual, professional. Not 'homey.' And I'm not really a huge fan of the chef hat... why not a whisk, a knife, a spoon?

I really do like the cloche for answered questions though.

I guess what I'm saying is I'd really prefer to load up something that looks clean and crisp, a place where Answers Are Found, y'know?

Edited to add image. I am (OBVIOUSLY) not a designer, but I figured that a quick sketch of what I was trying to say would be more useful than my words. Colours from your palette, jin. alt text

20
  • I completely agree with you, and I like how you put it. Sep 21, 2010 at 23:11
  • 2
    You and Michael both make very good points actually... it's hard to know what to think. Are we Martha Stewart, grandma's home cookin', picnics and porcelain and pumpkin pie, or are we Gordon Ramsay, fine dining, brushed stainless steel and tempered glass, extra-large plates and tiny portions and lychee sorbets? The former is probably going to appeal to our much wider audience of home cooks... but I'm divining that the latter is more likely to attract the real chefs and cooking professionals. We need both for the site to survive. Is there any middle ground here?
    – Aaronut
    Sep 21, 2010 at 23:35
  • 5
    Well without being a designer's nightmare, we want to be friendly but precise. I think Jin's warm palette takes care of the friendly, and a simple sleek design takes care of the precision. And to answer your question, I think we're neither; we're Alton Brown, really.
    – daniel
    Sep 21, 2010 at 23:38
  • 1
    @roux @micheal, I think @Aaronut put it nicely. Cooking is so broad, and I doubt there would be one design that'd please everyone. So I went for one that has the widest appeal. Right now most cooking users are techies from Stackoverflow with an interesting in cooking. Down the road we'd love to attract non-techies too. I believe a vintage warm look would give a welcoming first time experience. And I don't think it'd turn professional chefs away. Why would it?
    – Jin
    Sep 22, 2010 at 1:47
  • 1
    As for the design being homey and not clean, I think the problem may be you're seeing all the design elements at once in the mockups. Only the header/footer is heavy. If you only look at the body section, it's rather clean. In reality you'd only see about 800-1k pixel vertically at one time. Having that said, I do agree to tune down some colors. I'll be doing that when I"m converting to CSS.
    – Jin
    Sep 22, 2010 at 1:50
  • 2
    As for the logo "I'm not really a huge fan of the chef hat hat... why not a whisk, a knife, a spoon?" Someone else could easily say "why a spoon, why not a chef's hat?" I picked Chef's hat over a utensil because I felt Chef's Hat conveyed "cooking" more.
    – Jin
    Sep 22, 2010 at 1:54
  • 2
    Jin, I really do understand where you're coming from. But the point and appeal of a site like this over the standard forums or recipe sites is that we aim for clarity and precision. As a designer, you know that design must support the message. I just don't feel that your design supports the message we have here. It is a good design, I must reiterate. I just don't think it conveys the feeling that needs to be conveyed here.
    – daniel
    Sep 22, 2010 at 2:32
  • 4
    Further: I cannot speak for all professional chefs, but speaking as one... if I were to come across a site that looked very homey and nice, I likely would make the judgement--we all make judgements; that's what design is for--that it isn't a site for people who are serious about food. As for chef hat vs other things.. plenty of items are just as iconic as the (rarely used in actual kitchens anymore) tall white hat. And finally.. you said 'initial design' in your post. But from what you are saying, it seems more like 'final design.'
    – daniel
    Sep 22, 2010 at 2:35
  • 1
    Oh and... I've looked at lots of design mockups in my time, I'm used to making allowances. It's the combination of the warm colours plus the picnic cloth plus the ribbon plus the font plus the cute chef hat that make it seem homey, as opposed to clean and contemporary.
    – daniel
    Sep 22, 2010 at 2:38
  • 1
    @roux this design isn't final, that's what the comments are for :). However, the overall look and feel is established to have a wider appeal. Can you be more specific about what the "message" is? and what "feeling" should people have? What defines "professional?" Looking at most the questions asked on the site, a lot of them are about home cooking. Is there any serious sites that you like that you can share the links?
    – Jin
    Sep 22, 2010 at 2:42
  • 2
    @jin, @roux - I agree with roux, there are virtually no chefs that wear chef's hats anymore. That is a throwback to Chef Boyardee for the most part. So a knife, spoon, whisk etc. is much more representative of a working kitchen. Sep 22, 2010 at 2:59
  • 2
    I thought I had been, sorry. The message--the subtext that runs through the faq and the voting system--is that people come here for specific answers to specific questions, not a homey recipe exchange (both approaches have their value, obviously). Aaronut encapsulated it well with his Martha Stewart/Gordon Ramsay comparison. Defining 'professional'... you said you were looking at restaurant menus for inspiration. They are (in serious/fine dining) almost uniformly simple and elegant.
    – daniel
    Sep 22, 2010 at 3:11
  • 1
    And honestly, the best site I can think of to demonstrate clean and simple is this one right here. Apple would be another example of simple and elegant design (though of course useless here as it is so heavily image-based).
    – daniel
    Sep 22, 2010 at 3:13
  • 1
    @Michael: A knife or spoon can just as easily signify eating, and we want to downplay the non-cooking aspects of "food and cooking". I liked the pepper shaker idea, personally...
    – Aaronut
    Sep 22, 2010 at 16:34
  • 1
    Aaronut, I didn't mean specifics of the current design, just the general simplicity of it.
    – daniel
    Sep 22, 2010 at 18:57
8

First of all, that's really gorgeous. I do see a couple of points that might be slightly improved though.

  1. I'm having a little bit of trouble reading the white text on the light green background in the "Welcome New User!" div. Can you change that to the gray that's used in the title part of that div?

  2. The text color in the tags and in the Votes and Views indicators is a little bit light as well. Maybe you could darken those up a shade or two?

Those two changes would really enhance the readability of the text, but other than that I think this design is beautiful. Great work.

3
  • 4
    agreed. I'm not set on how the tags look. They're always tricky. Photoshop renders text rather poorly, especially when the contrast isn't too high. I'll be sure to tweak these changes you mentioned when I'm converting to CSS.
    – Jin
    Sep 20, 2010 at 17:25
  • I was going to post a new comment, but this pretty well sums up my only beefs with the design. Looks fantastic. Sep 20, 2010 at 18:33
  • I fully agree. The site design looks great and these couple of small changes would be the finishing touches.
    – Noldorin
    Sep 20, 2010 at 22:14
5

Fantastic design, great choice of colours too.

5

Overall I love it, and I can't wait to see it go live. I do have a few specific comments:

  • The silver badge circle at the very top looks blue to me. Maybe it's just my eyes playing tricks on me, but it does not look like the same colour as the example silver badges on the sidebar.

  • I'm finding the vote/view counts just a little bit hard to read. It looks like you've used the same shade of gray as the current theme, but there's not a lot of contrast against the textured corn-silk background. Maybe you could just use a darker shade of gray?

  • Similarly, the tags also have low contrast according to my screen/eyes. If there's anything you can do to make them easier to read without messing up the palette, it would really help.

  • By the way, the dish icon for accepted answer is a great idea. Not only does it look good but I actually think it communicates the concept better than the check mark ever did.

  • The new user text still says "Food & Cooking." I know this has very little to do with the graphic design but I just want to make sure nobody forgets. Also - contrast issues there too, the white text is quite hard to read.

Other than those minor issues I think you've done an absolutely fantastic job. Thanks!

5
  • 1
    Looks like Bill beat me to the punch on a few of those - still, it's good to know that I'm not the only one.
    – Aaronut
    Sep 20, 2010 at 17:27
  • 1
    thanks! Issues regarding text contrast, I'll definitely change them. Usability/Readability is most important to me. The mockup is to convey the overall feel. I'll address all the color/text issues during the CSS phase. In my experience it's more efficient to do it while I'm converting to CSS, since it's a lot faster than tweaking a static image mockup.
    – Jin
    Sep 20, 2010 at 17:29
  • Makes sense @Jin, especially now that you mention Photoshop - I know how quirky/crappy its anti-aliased text can be.
    – Aaronut
    Sep 20, 2010 at 17:35
  • 1
    tell me about it. I don't understand why Photoshop doesn't use OS's text rendering engine. Its text rendering is terrible.
    – Jin
    Sep 20, 2010 at 17:43
  • @Jin: at least on Windows, the OS-rendered text tends to look good because of the sub-pixel rendering (Windows' non-ClearType antialiasing is kinda crappy). PS could use that to render text, but it would look pretty weird on screens that have a subpixel layout different from your own or in printed materials (you'll see this in screenshots sometimes, especially when scaling or blending intensifies or skews the colors).
    – Shog9
    Sep 20, 2010 at 18:16
4

I like this a lot. Two comments:

  • I don't think the background looks like a table cloth. To me it looks more like a fence. That pattern of cloth for a picnic is always red in my mind. I think it's partly the colors and partly also that it's vertical (because my screen is vertical), so I think of it as a lattice fence rather than the cloth.
  • Is that the suggestion for the logo as well? For some reason, I see that as a three eyed cow rather than a chef's hat on a person. Something about it just doesn't work for me at all.

But otherwise, I think this is a killer layout / design.

3
  • 1
    Hm...to me the background looked more like a cookbook cover (BH&G) without being copy-cat-y
    – justkt
    Sep 20, 2010 at 19:00
  • 2
    I have used green table cloths before, but I do agree red is a lot more common. The reason I went with green is beacuse it's more soothing than a red one. I also didn't want the pattern to get more complicated since it'd draw more attention than it needs to be.
    – Jin
    Sep 20, 2010 at 19:10
  • +1 for three-eyed cow... sorry.
    – Marti
    Oct 6, 2010 at 4:26
4

So I'll throw in my two cents; I think it is a solid design, but not what I would hope for on this site. The feel is intentionally very retro. To me it seems like a site that would be run by Better Homes and Gardens. I would much rather see (and participate in) a site with a very modern, clean look... no chef hats or picnic tables. See the food (not the site design) on these sites for what I would dream of as inspiration:

http://studiokitchen.typepad.com/

http://www.playingwithfireandwater.com/

And of course please don't take this in any way as an insult! I really do think your design is well done, just not the direction I wish we would head.

8
  • 5
    @Michael, appreciate the feedback! I'm a big fan of minimalist, clean designs. The site you pointed, and a lot of modern "cleaner" magazines I've been reading can get away with that because there are tons of photos of vibrant food to offset the site design. Taking the photos away you're left with a cold and bland design. We don't have a photos on the site(except in a few in posts). Our site is mostly text. That's why I compensated with more graphical elements, and the slightly vintage look worked well IMO.
    – Jin
    Sep 21, 2010 at 18:30
  • I have to admit I wasn't totally crazy about the chef hat for a logo either. Unfortunately there weren't really any ideas submitted that were more original. And that's more of a conceptual issue than a design one.
    – Aaronut
    Sep 21, 2010 at 19:49
  • 1
    Those sites look great Michael, but a similar approach would look sterile and uninviting on a SE. The images make those sites so the style must stay out of the way. We don't have images to carry the load.
    – hobodave
    Sep 21, 2010 at 20:00
  • @hobodave, @Jin - I read this answer (correct me, @Michael, if I'm wrong) as being about the food photography on these sites - which also has clean lines but a lot brighter colors and certainly not a retro feel.
    – justkt
    Sep 21, 2010 at 20:12
  • 3
    @hobodave @justkt @jin - actually, justk understood me correctly. I'm not talking about the site design of those sites, I'm talking about the feel, which as you say is very much informed by the photography. I'd like to see us have a site design that takes those clean, vibrant, geometric, minimalist, intelligent concepts. I feel like the "looks like an old cookbook" thing has been done, and doesn't really set us apart. Especially when part of what sets us apart is the tech background that many of us bring. Sep 21, 2010 at 23:09
  • 1
    @Michael:Yeah. I really think (I may be harping) that our site design needs to convey precision--after all, we reject most things that don't/can't have a precise answer. (Also I love PWFAW, and thank you for turning me on to Studiokitchen. I may apply there (Speck); I like the blog and the way chef thinks about food.)
    – daniel
    Sep 21, 2010 at 23:36
  • @roux, if you like those sites, see also Ideas In Food and Cooking Issues, more great high-tech stuff. Sep 22, 2010 at 6:19
  • oh god just what I need, more blogs... click click :P
    – daniel
    Sep 22, 2010 at 7:19
4

My first impression is that the chef's hat/head needs to go. It's a bit too "cartoony" and detracts somewhat from the elegance of the design. Aaronut mentioned a pepper shaker in one of his comments. I think a pepper grinder would be better (perhaps that's what he meant?). It is an iconic kitchen implement and would fit well with the site name, Seasoned Advice.

2
  • That is what I meant, yes. I originally proposed my zany idea of merging it with a face, but if the size of the image makes that impractical then just a pepper grinder is probably fine too.
    – Aaronut
    Sep 23, 2010 at 20:49
  • @Aaronut: Got it. I hadn't seen that post.
    – raven
    Sep 23, 2010 at 22:29
3

Looks pretty good... Two small complaints:

  1. As Bill and Aarobot, the tags are kinda hard to read. I know they're sorta low-contrast on all the sites, but for whatever reason I'm having a lot of trouble with this one - whether it's the font, the specific colors, or just the jpeg compression, my eyes get twitchy just trying to pick it out.

  2. "Ask Question" doesn't stand out from the "view" links. Normally, there's a bit of space there, pushing it to the right, making it stand out a bit.

I'm also a bit concerned about the textured, "heavy paper" background: It looks nice on the front page, but I'm worried it might impact readability on the actual Q&A pages - would be nice to see that in a mock-up as well...

Personally, I'm not wild about the very rich color scheme, but as you note that does seem to be the tradition in cooking magazines - so probably a good choice for the target demographic.

3
  • good point about the Ask Question location. I'll either add more spacing, or give the AQ link some special visual treatment. Regarding the paper texture, it's not too bad with body text. I'll post another screenshot of the Question view page later today.
    – Jin
    Sep 20, 2010 at 17:58
  • I had actually assumed that the texture was just the "cover page" and that the background would be different (plainer) for actual Q&A, much like an actual cookbook (the pages are usually white, or at least the content areas are). It would make sense. But we'll see what it looks like on the Q&A pages...
    – Aaronut
    Sep 20, 2010 at 21:08
  • @Aaronut, I'll be making the background texture a lot lighter. It'd be a faint egg white.
    – Jin
    Sep 22, 2010 at 2:14
3

I love it.

But. The picnic table background feels over used to me. Other cooking discussion sites I've been on use it. I feel like we need something else, something better and not so cliched.

Also, how are ads going to fit into this design? Are there going to be ads on the SE sites once we leave beta?

4
  • The team has mentioned in the past that ads are at least 6 months away. I'm not sure if they meant 6 months after the beta or 6 months after the announcement, but either way it's going to be a while before we see any.
    – Aaronut
    Sep 21, 2010 at 14:26
  • 1
    I'm not sure when the ads will show up to be honest. But I did design the col widths with the ads in mind. regarding the table cloths background, I haven't really seen a lot cooking sites with it, can you link me some? I feel it is a "cheese factor" but in a good way.
    – Jin
    Sep 21, 2010 at 18:36
  • 1
    @Jin Here's one I know of that uses it: discusscooking.com Sep 27, 2010 at 10:49
  • Cheese factors can be a good thing, like when they are more "tongue in cheek" than "cheesy". To me real cheese is animated gifs. A table cloth background? That's just a good way to bring a softer side to something that is about as cold, impersonal and far away from cooking as you can get: a website. Sort of like how the MailChimp developers include cheesy jokes on every page of their interface via the little cartoon chimp at the top of the page. It just brings a more personal feel to the application. Oct 25, 2010 at 1:45
2

Very nice!

I like the color scheme. I love the chef-tray-and-cover icon for "answers".

I'm not keen on the folded ribbon effect, on the "recent badges" and particularly the nav bar. I think that effect is pretty common, and just doesn't stand out.

The gingham background really says "cooking" to me.

I love how the gaming site design has coins for the gold, silver and bronze badges. Perhaps the cooking site should have prize ribbons for the badges. Like this, but smaller of course: http://www.istockphoto.com/file_thumbview_approve/3491587/2/istockphoto_3491587-gold-ribbon.jpg

Lastly, I consider myself a "baker", but not a "cook" or "chef". So perhaps the Welcome New User copy could include "baker"?

Thanks very much for giving use the opportunity to provide feedback on your excellent design!

3
  • 1
    FYI, the cover for the tray is called a cloche, in case you run into the word elsewhere.
    – daniel
    Oct 1, 2010 at 20:01
  • I believe the most general and all-encompassing term would be "culinary" - as in "Seasoned Advice is a collaboratively edited question and answer site for culinary professionals and enthusiasts." Or perhaps "...site dedicated to the culinary arts."
    – Aaronut
    Oct 1, 2010 at 22:13
  • @roux - Thanks!
    – KatieK
    Oct 5, 2010 at 19:06
1

I'm a big fan overall. I see a cookbook connection and really like it.

On the latest screenshot of the answer page, I'd request one tweak. Can you remove the drop shadow under the vote count on answers & questions? It looks a bit...1999 to me.

1
  • 1
    done. :) in fact i forgot to take it off. it was meant as a white 1px text-shadow for embossing effect. it didn't look right.
    – Jin
    Sep 21, 2010 at 18:26
1

The tags are very bland and blend in too much with the background. I think a border, shadow or some effect in like that on the tags will help them stand out more.

1

In answering this question, something pretty important dawned on me. How good (bad) are inline images going to look on it? Images overwhelmingly have a white background; I imagine this will look pretty terrible when shown on the cream colored body shown in your mockups.

Examples:

White background with and without borders

Food pictures with and without white background, with and without borders, on a white background

Textured background with and without borders Food pictures with and without white background, with and without borders, on a textured background

13
  • I think Jin addressed that concern in the comments to this answer. He says the background for question/answer spaces will be a "faint egg white."
    – Aaronut
    Sep 22, 2010 at 17:00
  • 1
    I think worst case scenario if the white background vs egg white page background turns out to be an issue, the images could have some kind of simple treatment. I wouldn't go so far as to give them a polaroid type border or anything crazy, but maybe a simple CSS shadow and very light 1px border on the non-shadowed areas just to make the images look like they belong there. Something similar to the vote count emboss, perhaps. Sep 22, 2010 at 17:05
  • @Aaronut: There is still going to be a noticeable contrast to a stark white background.
    – hobodave
    Sep 22, 2010 at 17:08
  • This is an excellent concern. Those of us who know how will often add a border or drop-shadow even when the background color is white, but it might be a good idea for the site to do something automatically (for reasons of consistency and taste)
    – Shog9
    Sep 22, 2010 at 17:49
  • @Knives: You can control the style of img tags on these sites?
    – hobodave
    Sep 22, 2010 at 18:01
  • @hobodave: you can do basically anything with CSS. The problem is, if borders or whatnot need to be added to photos, it's just going to make pages even busier.
    – daniel
    Sep 22, 2010 at 18:58
  • @roux: I understand what CSS is, I'm referring specifically to embedding images on this site. From what I can see we can't specify our own CSS or style attributes.
    – hobodave
    Sep 22, 2010 at 19:11
  • Well you could using Greasemonkey. What I meant is that the CSS could be coded to automagically add a border or a drop-shadow.
    – daniel
    Sep 22, 2010 at 19:22
  • @roux: Gotcha. I was just trying to clarify Knives' statement which read to me like we could do that now.
    – hobodave
    Sep 22, 2010 at 19:43
  • @hobodave: when you're posting an image, you can give it a border or whatever simply by modifying the actual image - but this requires at least a basic knowledge of image editing, and (more importantly) a bit of time and effort on the part of the author. BTW: I hope you don't mind, I've added examples of images on both white and the proposed textured background, with the same images drawn with borders for comparison.
    – Shog9
    Sep 22, 2010 at 20:46
  • @hobodave, i already lightened up the background texture by a lot. it's pretty much a super faint egg white texture. i tested the images against it and it looks pretty good. i'll post a screenshot later when the css conversion is completed.
    – Jin
    Sep 22, 2010 at 21:15
  • 1
    p.s. i won't be adding a css border to the images. as @roux pointed out, it'd make the page busier.
    – Jin
    Sep 22, 2010 at 21:16
  • @Knives: Aha! That's what you meant, for some reason that never entered my mind, I just thought CSS. :)
    – hobodave
    Sep 23, 2010 at 0:27
1

Dude - amazing. I think you nailed it on the aesthetic. I see there are tons of other opinions, as always there will be. And you cannot make everybody 100% happy. But you did a very good job of producing a design that works exceptionally well at conveying the theme of the site, and not being at all obtrusive (IMO). This sucker belongs on some CSS galleries now!

Good work, Jin!

FYI - I really think you made a smart move pulling from the "old fashion cooking" aesthetic here. It's instantly recognizable for the theme, and although the primary Stack Exchange users at this time are likely to be tech heads who are the most familiar with the Stack Exchange family of sites (and consequently more confortable with the minimalist style represented on other Stack Exchange sites), a site like this is bound to draw a very non-tech crowd over time. And you design will most certainly hit a home run with them. Kudos.

1
  • 1
    thanks. Cooking is the first non-techy site we have. I specifically designed this theme for everyday people. It's something that'd be inviting to people like my parents or my neighbors. Although I'm a big fan of minimalist design myself, I just don't think it'd trigger the right emotional response. A lot minimalist cooking publications and sites can get away with it, because they have tons of vibrant food photos to balance simplicity, we can't do it here.
    – Jin
    Oct 25, 2010 at 2:11

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .