35

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.

Thank you for your input in the brainstorming session thread.

Logo

The logo is a key element in the design because it's not just used on the site. It represents the community in other mediums as well, for example t-shirts, stickers, business cards and other types of swag. It should be memorable and stand on its own. During my research on SharePoint for the design, I've read several articles that gave me inspiration for the logo design.

According to The SharePoint Wheel (via Wikipedia),

Microsoft's SharePoint marketing refers to the "SharePoint Wheel" to help describe the package of functionality built into the SharePoint platform. The wheel refers to six abstract functional abilities: Sites, Communities, Content, Search, Insights, and Composites.

From Meet the father of Microsoft SharePoint: Jeff Teper

“Teper saw a trend from customers. He was in our competitive team,” recalled Tom Rizzo, a director of marketing in the SharePoint group. “People had lots of documents and file shares. Search, documents, Office and the Web were all coming together. They (Teper and his colleagues) told (Chairman) Bill (Gates) and (CEO) Steve (Ballmer) that we needed to invest in this category.”

I want the logo to reflect the six functions and the sharing concepts.

SharePoint Logo

The nodes represent the six functions. The cube formed by the nodes and the connecting lines convey the idea that SharePoint is a whole service package. The flow bounded inside of the cube also forms an "S." I believe this logo design works very well both in form and function.

Will it translate well to other mediums? I think so. Here are some mockups of the T-shirts and moderator cards we'll be making in the future.

click on the images below to see the full resolution versions

SharePoint.se Moderator Cards

Sharepoint.se T-shirt

Overall Site Design

For the site design, I agree with Alex Angas's comment:

SharePoint is always changing. [...] So to base the design on what SharePoint is right now either in look or features, is something that won't stand the test of time.

[...] a design that's fairly generic but tips its head to Microsoft's aesthetics may be worth considering.

I've given this a lot of thought. SharePoint by itself doesn't have a visual guideline. People use it as a CMS and create templates for it. I think the design should somewhat resemble Microsoft's UI design aesthetics. But which MS UI? Microsoft's designs have evolved quite a bit over the years.

Two years ago, when I saw the Microsoft Office Labs 2019 Vision video, I was truly impressed. Since then, we're seeing more elegant designs by Microsoft, namely the Metro UI that's being used on the Win7 Phone and the upcoming Windows 8. I believe the Metro UI is the future for MS products.

Microsoft Metro UI

I love the simplistic elegance of the Metro UI and I believe it would serve a content heavy site such as ours very well. Its vibrant pictogram icons and elegant typography give a good balance to a minimalistic design.

Here's the final SharePoint Stack Exchange site design I came up with, the design goals are:

  • to mimic the Microsoft Metro UI
  • to have a strong branding identity to set SharePoint.SE apart from all the other SP sites.
  • still feel like a part of the Stack Exchange network.

click on the images below to see the full resolution versions

SharePoint.SE Homepage Design

SharePoint.SE Question Page Design

The mockups above do not have all the site elements, but they should give you a good idea of the overall look and feel.

I'd love to hear your feedback. If there are no major design changes, I'd like to launch the site very soon. So an early congrats from me, and thank you for being an awesome community!

5
  • 6
    WHAT? NO TIPPING BEAKER OF BLUE LIQUID?!
    – Shog9
    Sep 9, 2011 at 0:18
  • If I pre-order t-shirt now do I get discount? :) Sep 9, 2011 at 7:00
  • 2
    That is really really sweet. My only critique would be that the main content area in light grey (where all the Q&A action happens) looks like it's being poked through in an iframe. It doesn't gel with the surrounding dark "metro" look too well. The 'S' logo in cube rocks though.
    – Kev
    Sep 9, 2011 at 9:00
  • @Kev I didn't want the main area to be a dark theme because it'd be hard to read. Also I spent quite some time tweaking the translucency of the main content background. I'm still not 100% set on what I have now. I may make the sidebar area more translucent, but keep the main(left side) pure white.
    – Jin
    Sep 9, 2011 at 16:11
  • Maybe once it's in production the dynamics of actually using the site where the focus is on the content, navigation and pushing buttons rather than looking at a static image will change that feeling. Don't get me wrong I think it's probably my favourite design so far despite what I've said. Makes Stack Overflow look like it could do with a wee make over now :)
    – Kev
    Sep 9, 2011 at 17:16

15 Answers 15

13

Great work, Jin. It feels so "Microsoft" I wouldn't be surprised if casual visitors believe it's officially sanctioned (that may be good or bad!). Just wanted to get that out there now - I'm going to take the evening to digest it and add to this post.

10

One word: AMAZING! I am loving it... Great work Jin :-D

5

Excellent!

Can the t-shirts have a bigger logo - Superman style?

2
  • 1
    As SharePoint dev and consultant I do a lot of rescuing, so a Superman-style shirt would be awesome :) (However I doubt if mere mortals will recognize the S for SharePoint)
    – Dribbel
    Sep 9, 2011 at 7:27
  • @Vedran the tshirt is just a mockup. the logo can certainly be adjusted.
    – Jin
    Sep 9, 2011 at 16:14
5

I like it. A lot. Probably too much. Where's my t-shirt? :P

3

Awesome work Jin!!! The very first impression itself represents Windows. Great work!

3

I personally do not like this logo, but like the overall site look and feel.

3

Looks Cool.......will really give a MS look and feel make the different from other SE sites...Looking forward for the new design Jin! It looks FANTASTIC!

3

The logo is pretty good, however i'm not sure about the multiple node colors. Your eyes don't really flow around the design, they are pulled to the lower left. I would look at either a two color scheme, cooler colors, or play with the placement of the current colors to either give it a more balanced look or control the visual flow.

The ask a question button creates a bit too much tension on the page with its contrast to the cooler palette surrounding it. If you notice your eyes immediately jump to the ask a question button, then to the logo, and logo drives you off the page to the left, and when you re-focus you are drawn back up to the button, so you end up fighting the flow to get down the page.

The content area already contrasts with the background, so by toning down those two elements it should naturally lift it to the main focus area, and keep your eyes from jumping back up to the top of the page.

1
  • 1
    good point about the node colors. i'll re-arrange them some and play with the color of the Ask Question button.
    – Jin
    Sep 9, 2011 at 17:55
3

I.want.that.shirt.

I'll order two cause I'll end up wearing it out right away ;)

3

looks awesome! bout time we get a real design ;)

3

I really love this design. The metro theme is something that totally makes sense for SharePoint.SE. The logo is awesome, the theme fits perfectly with Microsoft's new stuff, and it gives us our own unique identity.

The only things I noticed are small but I think would help with consistency.

Tags: Keep the tag-shaped tags instead of just the boxes (same shape we have now, just not sketchy). The tag shape matches the pair of tags in the "Tags" navigation bar at the top.

Answered questions: I like your checkmark graphic that is used on the Q&A page. Maybe we could also use a lighter variant on the question list page? IMO, a checkmark helps signal the question is answered better than just a green background. Kinda like how Cooking.SE has the dinner thingy.

Favorites icon: Doesn't this conflict with the "Badges" top nav button? They are nearly the same. I think it should stay a star but maybe remove the circle around it (like how it is in IE 8 or FF for bookmarking a page). Or maybe find a different icon for badges/gold/silver/bronze?

Colors: +1 to @Jesus regarding the Ask a Question button. I think the "Add Comment" and tag "Add" buttons should also be blue-ish instead of white text on black?

3

Very nice design. You could try a slightly lighter color for the page background, without moving too far from the Microsoft palette :)

2

Love it too.

I look forward to get rid of the current sad design

2

two words: really awesome!! :D

2

Outstanding, Jin! It's a design we can all be proud of. Thanks for the detailed explanation of your inspiration.

You must log in to answer this question.

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