33

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)

AppleSE homepage design

AppleSE Question design

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:

AppleSE card design

  • 1
    Sweet, looks awesome! Sorry I wasn't more patient, but it was definitely worth the wait. – Kyle Cronin Jan 26 '11 at 0:47
  • @Kyle My apologies for not pushing it out sooner. I was doing quite a bit pixel pushing. Also at the same time I needed to make sure the design would be implementable with the our HTML structure constraints and CSS3 limits. So there was a little of switching back 'n forth between Photoshop and looking at Firebug. – Jin Jan 26 '11 at 1:33
  • @Dori, aiming for Thursday morning. 10am Cali time. I thought it starts officially on Thursday morning, according to their web site. – Jin Jan 26 '11 at 2:04
  • Is there any way to play with the design on a test site before it goes live? – Kyle Cronin Jan 26 '11 at 3:14
  • @Kyle we have a dev server. That's where I deploy and test the design before it launches to live. – Jin Jan 26 '11 at 3:17
  • care to share the address? :) – Kyle Cronin Jan 26 '11 at 3:30
  • @Kyle I'm afraid it's a private server. – Jin Jan 26 '11 at 3:33
  • 1
    I wanna know how new people can understand that this site is for asking about apple product? (fron GUI) – Am1rr3zA Jan 26 '11 at 11:22
  • 1
    Surely the display should not change just when we go live. testing the interface is a part of beta testing. Production should be the same as the last beta - otherwise you need to retest. – user151019 Jan 26 '11 at 14:45
  • 1
    Just a quick aside: we run a usability testing service at intuitionhq.com - I'd be more than happy to set you up with a test just so you can check how the new design is working out. Let me know if you're interested and I'll get on to it. – Ciaocibai Jan 26 '11 at 20:17
  • 1
    OMG QUIT HOLDING OUT THAT'S FRACKING AWESOME JIN I'M HATING ALL OF THE REST OF SOIS SITES NOW BECAUSE YOU'VE DONE IT AGAIN! – jcolebrand Jan 27 '11 at 0:39
  • 2
    @Dori I'm still working on the CSS conversion. there's a lot to be done. The conversion is more involved than any SE sites I've done. Realistically, the site will be launched early tomorrow morning. – Jin Jan 27 '11 at 21:04
  • 1
    @jin Just loving it, whatever you change or not. It's excellent right now. With any proposed changes implemented, it will be hmm.... excellent. Our lovely site with its new design. Can't wait anymore! :) – LudoMC Jan 28 '11 at 13:01
  • 1
    @Jin, this site design is awesome. Well done to you and those you worked with. – Nicole Feb 15 '11 at 17:55
  • 1
    Probably the greatest compliment I can pay is in my recent post under preferred alternatives to Apple Support Communities for providing support to users and developers of Apple products and services: The Ask Different experience is incredibly satisfying. In a nutshell: I find what exists there faultless — a rare unconditional compliment from me … I use the word faultless extremely rarely :-) Thanks to Jin and everyone else who makes Ask Different so pleasing! – Graham Perrin Aug 3 '11 at 12:55
12

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:

    enter image description here

  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?

  • Kyle, good points. I'll see what I can do. I typically do a a lot tweaking as I convert to CSS based on feedback. The drawer idea is interesting, i'll see if it's feasible to do. – Jin Jan 26 '11 at 2:47
  • @Jin Cool - I might be pushing my luck, but how feasible would it be to have a button that toggles the drawer? Because that would be awesome :) – Kyle Cronin Jan 26 '11 at 2:49
  • @Kyle are you a disciple of Kai Krause? :) I'm afraid it's not feasible at all :( – Jin Jan 26 '11 at 3:00
  • @Jin I thought I'd try anyway. I hadn't heard of Krause, but I'll do some research and let you know :) – Kyle Cronin Jan 26 '11 at 3:11
  • @Dori it was a compliment. I think I'm one of very few people who actually loved Kai's UI back in the 90s. As outrageous as it was, it did pave the way for a lot of visual elements we see today. Kai also wrote some of the earliest Photoshop tuts on the internet, as well a comprehensive study of realistic rendering of shapes. – Jin Jan 26 '11 at 8:22
  • @Kyle, I'm for changing the shape of the tag to the capsule. However I'm reserved about changing the color. Colored tags may look good on the actual question page, but they'll totally clutter up the homepage and question listing page when repeated. you can try to play with the concept yourself. Maybe I'll end up using a super faint blue. – Jin Jan 26 '11 at 20:18
  • @Jin Definitely keep the color faint, the image in my post was meant to show the shape I was talking about, but not the color. However, I'm not sure what you mean when you say that tags with background colors clutter the page - the majority of SE sites have tags with a different background color than the page they're on and they look fine. – Kyle Cronin Jan 26 '11 at 21:30
  • @Jin Hi, in the few days since joining Ask Different I have had problems at least twice with the paleness of the pale blue text on white background; paleness of pale blue text on pale blue background. I wasn't going to mention it but on both occasions, the word blindness from lack of contrast contributed to confusion. FYI asked as a question: Is the pale blue of texts — on white and pale blue backgrounds — too pale at Ask Different? — if you'd prefer me to convert that question to an answer here, just say. Thanks :-) – Graham Perrin Aug 3 '11 at 10:51
7

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: finder 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: iTunes

vs

AppleSE

  • 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":

things tags

  • 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:

spotlight

  • 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:

pages

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

  • I actually like the black toolbar, and moving forward, it actually may make more sense and be more of a norm for Mac users, with the full screen stuff in 10.7. – jmlumpkin Jan 26 '11 at 13:44
  • I like your idea about "The Answer editor" – Am1rr3zA Jan 26 '11 at 15:50
  • @Martin: I really like the finder/question idea... alternating blue and white is a pretty standard mac convention – Robert S Ciaccio Jan 26 '11 at 17:28
  • The use of the  has been discussed at considerable length already elsewhere in meta and it was agreed upon by everyone that its use would clearly run afoul of Apple's copyright. – Philip Regan Jan 26 '11 at 21:19
  • Please see the comments to this question for the discussion: meta.apple.stackexchange.com/questions/205/official-site-title – Philip Regan Jan 26 '11 at 21:25
  • I think it's silly to copy OS X beyond a few thematic inspirations. This is a webpage heavy on text content, not an app. – Bleep Bloop Feb 10 '11 at 20:39
7

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.

  • 2
    Mark, Ask Different was the highest voted domain name. I can change the tag line to something more descriptive, "Answers for your Apple questions" – Jin Jan 26 '11 at 16:04
  • When was the vote? – user151019 Jan 26 '11 at 17:38
  • @mark here's the domain voting thread: meta.apple.stackexchange.com/questions/9/… – Jin Jan 26 '11 at 19:59
  • I don't think Apple has had a really has a significant tagline or slogan for quite a while. There was the whole "Hi, I'm a Mac" string of commercials, but offhand I don't think there would be an easy way to make that fit in the paradigm of this website. – Philip Regan Jan 26 '11 at 21:23
  • 1
    @Philip Regan: +250 Apple slogans and accelerating: en.wikipedia.org/wiki/List_of_Apple_Inc._slogans <grin> – Robert Cartaino Jan 27 '11 at 0:28
  • 1
    @Robert: I'm talking about company-wide slogans, something that defines the company, not individual products. "Switch" was the last one in 2003. But that list is an excellent source of content. – Philip Regan Jan 27 '11 at 2:36
  • For the benefit of newcomers to this question/answer: Official Site Title – Graham Perrin Aug 3 '11 at 12:27
5

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

lolApple

A hint of the future?

  • saw this already. I've updated the topbar style locally already to mimic the look. I'm still keeping our topbar lighter though. – Jin Jan 26 '11 at 16:06
  • @jin in any case, i believe that Apple.SE's topbar tries to mimic OSX's menu bar rather than that type of bar. Did we go too crazy with the "requests" ? :) Nothing that some bacon can't solve… – Martin Marconcini Jan 26 '11 at 16:08
  • ín i like the suggestions so far, many great points. I won't be able to implement them all for the launch, but there's definitely room for tweaking, as always. re: bacon, you know my weak spot... – Jin Jan 26 '11 at 20:14
  • @Jin Don't worry, let's ship, then tweak, as already mentioned; or Bacon. ;) – Martin Marconcini Jan 26 '11 at 23:45
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.

  • Here here. Well said. Push early, and then tweak from there. – Ciaocibai Jan 26 '11 at 20:13
  • 3
    "Real artists ship." :) – Jin Jan 26 '11 at 20:14
  • Yeah, I agree; I believe our suggestions were only things that could be changed in our opinions, but not necessarily "bugs" that render it unusable. – Martin Marconcini Jan 26 '11 at 23:44
  • can we keep the word "beta" on the logo indefinitely? :P – Robert S Ciaccio Jan 27 '11 at 10:39
4

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.

  • @calavera, my concern is that it's not convention for our sites. the top left spot is always reserved for the SE logo. I'll definitely do some tweaking to the tags. However I'm careful about not to give it too much visual attention(colors, 3d etc) because when heavily repeated on the question listing page, they'll make the site seem very busy. – Jin Jan 26 '11 at 5:17
  • Initially I was skeptical, but it actually looks pretty good. I left SE in the top left though, as @Jin said, because it's a platform standard. – Kyle Cronin Jan 26 '11 at 5:42
  • @Kyle: that looks awesome! The only thing is that I really like the "drawer" look on the right side, but not quite as much when the bar is on the left. – Robert S Ciaccio Jan 26 '11 at 6:47
  • @Jin: maybe if they just had a more rounded look with a relatively light background color? – Robert S Ciaccio Jan 26 '11 at 6:53
  • @calavera So keep the drawer on the right? Or did you want the original sidebar on the left? – Kyle Cronin Jan 26 '11 at 7:03
  • @KyleCronin: I guess I'd like to see how the original sidebar looks on the left compared to the drawer style on the left. – Robert S Ciaccio Jan 26 '11 at 7:16
  • 1
    @calavera here you go – Kyle Cronin Jan 26 '11 at 7:46
  • @KyleCronin: nevermind, the drawer style looks better :P – Robert S Ciaccio Jan 26 '11 at 15:22
4

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

enter image description here

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

  • I don't know about the © but I'd definitely add the  instead of the Mailbox if possible ;) – Martin Marconcini Jan 26 '11 at 23:42
0

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)

You must log in to answer this question.

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