8

Thank you for your help on the design brainstorm session. Below are the mockups for the final site theme based on some of the ideas we talked about.

(please click on images to see the full resolution versions)

mockup homepage

enter image description here

The design goal is to give this community a distinct look and feel, while still looking like a part of the Stack Exchange network. So I'm not making any layout changes.

The design should also reflect the Android branding. After looking at numerous Android related sites and UI patterns, I've become a big fan of its simplistic and elegant designs.

For the overall look and feel, I want to keep the site airy and clean. The faint honeycomb pattern in the background provides a pleasant noise, but does not get in the way of the content. I also think "Honeycomb" is an appropriate pattern to use because of the Android tablet name.

For the most of the site elements, I went for a "flat" look, polished by hints of translucency. The 3D effects are only reserved for action items such as buttons and widgets.

Of course I'm also using the established green (#A4C639) from the Android branding.

For the typeface, I'm using Droid Sans.

Please let me know what you think. Assuming there are no major design changes, the site will launch very soon.

| |
  • 1
    First impressions: it looks really good to me. Thank you for not over killing it with green. :) I'll take a look at this again in the morning when I'm at a desktop and see if I notice any problems. – Bryan Denny♦ Mar 23 '11 at 5:16
  • @Bryan, confession: I used the green for the question titles first. It was just too harsh against the white, even after I darkened it. – Jin Mar 23 '11 at 5:30
  • 1
    That looks great, nice work! – Matt Mar 23 '11 at 12:17
  • Do you have a sample of the 404 page? – ale Mar 23 '11 at 17:31
  • @Al I don't right now. Normally I do 404/captcha/error images last during the CSS conversion. But feel free to make suggestions. I'm thinking using the android robot for those. – Jin Mar 23 '11 at 17:44
4

A very pleasing selection of colours, however looking at the images, isn't there a bit too much wasted screen real estate on either side?

Also, I hope this is a fluid layout and renders well on most browsers including those on Android devices.

Finally - since we depend on QUESTIONS from users, perhaps the ASK QUESTION could be made more noticeable (either via a change of colouring or font / size)?

Great work, overall.

| |
  • Yes, I agree the ask question link should stand out more AND it's very important that this renders well on Android devices. – Matt Mar 23 '11 at 16:21
  • I can give the Ask Question link a different treatment. The layout is not fluid(as in using 100% of the screen width). It's a fixed width of 980px wish, center aligned. We do have plans for a mobile version down the road for all SE sites. – Jin Mar 23 '11 at 16:23
3

Love it, love the badge icons and the Andy's holding the banner up at the top, and the overall fairly clean look, with that bit of fun.

Not totally convinced about the honeycomb background, but also not sure what it could be replaced with.

One suggestion might to do with just making the bar at the top subtly ape the Android notification bar, by removing the background from the top bar, leaving it as a solid colour (or a slight gradient) and left aligning StackExchange logo, while right aligning the search box and icons, username, etc.

Anyway love it overall and don't take this as a criticism.

| |
  • 1
    I'll try a slight gradient on the bar. – Jin Mar 23 '11 at 17:29
1

I like it. I especially like the badge icons.

| |
1

Nice! My only gripe is that the "Recent Badges" puts the badge icons on an awfully dark background -- darker than even the header and footer banner background. That seems off to me, because it makes recent badges (which, I'll grant, are important) look like the most important thing on the page. I wonder if they couldn't be on a lighter background?

| |
  • 1
    I see what you mean. Keep in mind though, in the mockup, I simplified everything. So you see all the elements at once glance. In reality, the Recent Badges section gets buried further down the page, it doesn't really compete with the rest of the page. The reason I always use a dark gray or black background color for badges is because the gold/silver/bronze icons would show up well and not clash with the bgcolor. – Jin Mar 23 '11 at 16:22

You must log in to answer this question.

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