24

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.

I'm currently in the brain storming phase and I'd LOVE to hear your thoughts and suggestions.

For Web Applications site design, here are some of my ideas:

Overall Look and Feel I think it'd be appropriate if the design resembles the look of modern web application sites. I'm a fan of clean and polished sites such as Mint.com and MailChimp. There are many others too.

Logo: There are a few submissions to the logo proposal thread already. If you have any you'd like to submit, feel free post there. Please note: I prefer gray-scaled logo submissions, that way we can judge the IDEA of the logo more objectively. We can always add colors to the logo later. Also, the logo itself(sans the site title text) should be able to fit in a square dimension nicely. This way we can use it for favicons, mobile touch icons etc.

Color Palette I'm thinking of an overall light themed design, with some bold colors for accents. For main content area background, I'm thinking about a very light gray. I normally use Kuler to create color palettes. Feel free post your own palettes here.

Icons & Buttons You can see all the icons we currently use for SE beta sites in one sprite. For the design, I think I'll use more "Web Application-ish" style buttons and icons. This doesn't mean super shiny 3d web2.0, but it should reflect of the overall look and feel we're trying to accomplish.

Please post your ideas about the points above. Or, if you have a favorite web app related site that has a design you love, please list here and tell us what you like about it.

Lastly, I'd like to point out that I won't change the layout and structure of the site too much. The design goal is to create a "skin" that's not only pleasant on the eye, but appropriate to what the site's content is about.

UPDATE

A sneak peek at some design elements I've been working on, I'd love to hear your thoughts. The idea is to have a clean but polished design; something a bit more "web app-ish" than a "web site." Of course these are not final, as I'm constantly tweaking. If you have a site that has UX pattern you love, simply post a URL in comment or answer section.

alt text

alt text

alt text alt text

alt text

5
  • 7
    I think all the up-votes say it all really. Nice clean design.
    – ChrisF Mod
    Commented Aug 25, 2010 at 19:39
  • 1
    Oooh my name looks so pretty ^.^
    – phwd Mod
    Commented Aug 27, 2010 at 0:42
  • I like it but my first impression was "Mac apple store" rather than a generic webapp :P, kind of how Apples Forum would look if they had modern SE tech instead of old forums
    – bangoker
    Commented Sep 16, 2010 at 17:51
  • @bangoker maybe the color scheme gives it that appearance and rounded corners but we will not know for sure the impression until we get some "feel" into it (transitions, clicking etc)
    – phwd Mod
    Commented Sep 17, 2010 at 17:09
  • Love it. In particular I like the font and the very light background for tag, answers. Also the badges are great!
    – Drake
    Commented Sep 19, 2010 at 16:42

1 Answer 1

Reset to default
6

Here are couple full screen shots that cover most design elements in the theme concept.

For now I'm using the logo concept I posted in the Logo Thread. If you have comments about the logo, please post there.

From the number of upvotes on the screenshots I posted earlier, and the feedback I got from the chat room, I feel most folks approve of this design. If you have any feedback, please let me know!

Thanks.

Homepage

alt text

Question View

alt text

Re: rchern:

Here's a comparison of the header vertical space against the Sketchy and the Trilogy designs. As you can see, it's about the same as the Trilogy, and shorter than Sketchy.

alt text

9
  • Shouldn't it be "Nothing to Install" rather than "Nonthing to install" (an extra "n" seems to have crept in).
    – ChrisF Mod
    Commented Aug 30, 2010 at 19:25
  • @ChrisF doh fixed. I blame Mac!
    – Jin
    Commented Aug 30, 2010 at 19:49
  • @Jin, how much vertical space does the header take compared to currently?
    – Rebecca Chernoff Mod
    Commented Aug 30, 2010 at 19:54
  • 1
    Where will the meta link be moved to ?
    – phwd Mod
    Commented Aug 30, 2010 at 20:35
  • @phwd the meta link will be where it is now, next to the "About." I just noticed I didn't include it in the mockup(by accident). At this point I stopped tweaking the photoshop file. I'm fixing/implementing design bugs in CSS instead.
    – Jin
    Commented Aug 30, 2010 at 20:48
  • The only thing that seems missing is a clearer distinction between the different UI elements, perhaps the thin line used in Sketchy would already suffice. But right now, the end of a Question and the start of an Answer isn't all very clear. This makes some of the interface elements seem to float, because they lack some 'context'
    – Ivo Flipse
    Commented Aug 30, 2010 at 22:11
  • 3
    One comment. Do you want to emphasize asking a question so much? Or would it be better to downplay the ask a question button, and up-play the search?
    – jjnguy
    Commented Sep 12, 2010 at 22:44
  • I agree can the search be emphasized a bit more ? It seems to be blending with the background a bit to much. Or is "ask a question" the intended hot spot ?
    – phwd Mod
    Commented Sep 17, 2010 at 17:06
  • agreed on emphasizing the search. I'll make it more prominent. The design is 95% in CSS now. I'm working out some lil bugs.
    – Jin
    Commented Sep 17, 2010 at 17:30

You must log in to answer this question.

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