Design for the Apple StackExchange site

Question

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 reflect 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.

First, I want to say an early congrats for the upcoming launch of Apple.stackexchange.com. Thank you for being an awesome community!

As an Apple user myself, I've always appreciated Apple's designs in UI and hardware. I think what makes Apple's design stand out is that they pay great attention to detail. Apple draws a fine balance between eye-candy and simplistic elegance.

The design goal for our Apple site is to maintain the branding of the Stack Exchange Q&A family, something you're familiar with from using the Beta site, or other SE sites. At the same time, the design needs to give this community its own identity that's associated with Apple. For new users to the site, the design should invoke that "Apple" feeling right away.

I had a great pleasure working with Mike Rundle, the talented designer who provided me with the initial mockups. I have since tweaked his designs a bit. I believe the designs below work well and represent what this site is about.

(click on images to see full resolution versions)

I'm aiming to have the site launched later this week, in time for the Macworld Expo.

Bonus: here's the publicity card we designed to be handed out at MacworldExpo:

Answer 1

The design looks great, I have a few suggestions if you're open to them. They're small things, but I know that "small" doesn't always mean "easy to change". :)

1. On most of the other SE sites, the ask button is separated and more distinct from the rest of the top navigation, usually a different color. Is there a way we could get it to stand out more?

2. Would it be possible for the sidebar to maybe look more like a drawer? I.e. something like this?

3. I'm not crazy about the yellow gradient behind the question title (and it wouldn't work if the sidebar became a drawer) and it looks like it might not handle long titles well. Using the same format as "Top Questions" on the home page screenshot might work better, or even just putting the title down in the body.

4. Using an envelope at the top of the screen made sense when that was the notification for new replies, but now that that's been shifted to the unified inbox maybe it could be replaced with something more suitable that means "recent activity" - a clock maybe?

5. I think it might look better if the font used for the question list were regular instead of bold

6. The tags are white on white with a faint border, which makes them blend into the page. Maybe add a very light background color, or even just a stronger border? I also think that maybe a more rounded shape, like the mail recipient bubble in iOS, might look better than the generic tag look:

   

7. The global inbox/Stack Exchange logo is a little hard to read as it's white on light gray (very light at the top)

8. In the sidebar, "interesting tags" and "Ignored Tags" have slightly different styles. I like the font used for "Ignored Tags", but I also would like to keep the text all lowercase like "interesting tags"

Even if you don't change a thing, it still looks great and I can't wait to launch! Would it be possible to use the askdifferent.com domain as the primary domain for the site?

Answer 2

Well, I'd like to add my 2¢

I Agree with most of Kyle's points.

In no particular order…

• The Drawer idea is neat, I don't like it on the left side. It would disrupt the whole website look (in comparison to other SE sites).

• The "ASK Question" (and the whole line) deserves some attention, it's too subtle and sites like Ubuntu have a very distinctive "ask", separated from the rest. However Cooking has a single line, all the same color. I'm not sure which one is better, but I am sure that the current implementation in those designs is not very easy to read. We could use something from the Finder itself: If anything, the disclose triangles would help.

• The yellow/greenish/iTunes gradient in the title question: I like it, at least at first. It remains to be seen how would that work for a longer title and/or what happens if it's made a little bit smaller/non bold. I like how it gives the Apple look. I'd probably try using iTunes colors tho. As ugly as iTunes may be, it's some sort of "visual trademark".

Compare:

vs

• The envelope: A few sites still use them, but there are some notable exceptions, like Askubuntu, which uses an @. I don't know about this. :s

• Tags: I believe tags could be tweaked to look like Mac tags. There are numerous examples around. For example, taken from "Things":

• Completely agree that the Stackexchange icon/logo is hard to read with the current colors. I believe that the text should be made Gray/Black like the res of the "menu bar".

• I liked the idea of moving the "texts" to the left and leaving the icons on the right, I don't know if that's possible.

• The search box is ok, looks like apple (kinda) but… i'd use something more spotlight like:

• Agree with Kyle about the style in interesting tags/Ignored. Lower case wins. Ignored Tags style too.

A few contributions of my own

• The Answer editor, has a black background in the toolbar, it looks "cool" but has nothing to do with Apple's applications or Cocoa. I'd like an idea more oriented towards a standard Cocoa app, that "blends" with the text:

• The "Post Your Answer" button is ok too, but should be on the right. Mac users are used to button alignment "the right way"™ ;)

• The "Answered" box (green) should be the same color as the "iTunes" thing we mentioned earlier. That green might look nice, but has nothing to do there. The orange, blue, black, gray, makes it look too full of colors.

Conclusion

The design looks neat and even if we don't change anything, it's very nice and I really like it. Would love to be able to "use" it to see how it feels. Thanks for including a question where my name appears :)

And where's Apple?

As pointed by Am1rr3zA, the only caveat is that by "just" looking at that, there's no indication whatsoever that this is a place for asking questions about Apple. The cloverleaf is nice, but not immediately associated with Apple (unless you are an Apple user already) but Windows users using Apple products, have no ⌘ in their computers and/or keyboards. Perhaps the mailbox icon could be replaced with a little Apple? ;-)

@Jin, great work. @All of us, gratz for what we've accomplished so far and thanks to @jeff and company for all their hard work. We're just insignificant peasants in what is already the greatest network of Q&A.

Answer 3

As others note the site needs to make it clear it is for Apple questions - perhaps as a sub text saying Mac, iPhone, iPad (and whatever else Apple do).

Ask Different does not make me think of Apple at all - and I have use Apple PCs for 10 years. (When did Apple last use Think Different and have they ever used in connection with iPhones etc?) (Ah google from wikipaedia says 2002 so NOTHING to do with iPhones, iPods etc.

I would not I am in the UK so have not seen US based advertising.

Answer 4

As an aside, Apple modified their own homepage… blackening the header:

A hint of the future?

Answer 5

I like it. It could be tweaked, but then all complex projects like this could be tweaked, and while I don't entirely disagree with what's being suggested, we could "design by committee" this thing 'til the cows come home.

I say, let it fly.

Answer 6

I think it looks awesome! A couple points:

• Have you tried a version of the interface where the right hand sidebar is swapped to the left side? I know this is totally different from other SE sites, but this is Apple.SE after all, and it might look really cool since Apple apps tend to have a left hand sidebar.

• I love the menubar look at the top. Similar to above, I think it would look perfect if the "word" links (logout, chat, etc) moved over to the left like the Mac menubar, and any icon based links would be on the right. Maybe even put a mini version of the clover logo on the top left? :)

• I 100% agree with Kyle on the tags thing... It would be great to have the tags look like the little bubbles used for selecting multiple bits of information in many apps and preference dialogs.

Answer 7

I have to say that out of everything on here, this is the only part I feel really strongly about:

Even though this is a different convention, I really think that it fits so well and looks so great that it outweighs any negative in this case... Thanks to Kyle for throwing it together

Answer 8

The top of the page is great.

I find the body text too difficult to read. Too heavy, too cluttered. I would suggest removing the high contrast boxes around the answers and sidebar. Use a simple light background that differentiate from the "paper" texture. Keep all the sweet details in the GUI: the buttons, the tags, the icons, etc.

Typography: I'm really a beginner there, but my feel is that the fonts are "monochromatic": the font size is too similar throughout the page. I think the design could use two contrasting types. Maybe one for titles and one for body.

The CC button at the bottom right seems to get far more highlight than it should relative to the rest of the content. I would have imagined it as subdued, flat, and really out of the way (ie. iconic).

Likewise for the logo icon. I like the COMMAND key symbol in the logo, but I feel the extra "recessed" border around it makes it heavy and cluttered. A simple drop shadow (basically the inner "button" in the symbol) would be sufficient.

The search box top right is a little thin and could use more vertical inner space.

Since the Design is heavily influenced by the Apple GUI, I'll try to find some comparisons:

• The apple.com homepage: all the background is light (good), so that the main content really comes forward. Here, the main content is boxed into thick contrasting borders which feel really heavy and make it hard to separate the content from the design.
• Note the main box on the apple.com homepage is a lighter color than the texture background, white, no texture. I think that would be best here. It would be a lot easier to read through the answers. It would "breathe" more.

Also, use more colour. I think that's an element of Apple's website design: contrasting the colours with the site layout which is essentially monochromatic.

Disclaimer: I'm not a designer, and I know it's easier to critique than do it. I appreciate the design work but with the best intentions, I just wanted to point out that the design is, all things considered, less "usable" (in terms of readability and conciseness) than the simple StackOverflow design. The ideal design imho would be to stop adding CSS3 cruft and remove things one by one until you get middle way between the sweet OS X inspired GUI, and the simplicity and lightness of the original StackOverflow design.

Designs that I find more readable:

• ProWebmasters : could use a little differentiaton in background, or maybe a nice thin vertical line between body and sidebar, to guide the eye, but otherwise easy to read, which is what matters most on this type of site.
• Game development : use the white background for body text, no boxes around answers (just simple lines, or dotted lines separation)