Design for Salesforce Stack Exchange

Question

I'm Jin; I work on the designs for Stack Exchange sites as they graduate from the beta phase. Each site has its own representative branding that reflects its topic and culture, however, all sites share common elements so they feel like they are part of the Stack Exchange family. Once this design goes up, you will receive a link in the footer of other sites in the network, and you will gain the ability to migrate content to and from other sites.

Design Process

We've been working with the helpful design team at Salesforce.com for this community's site design. We wanted to come up with a design that's unique, but also reflects Salesforce's official branding. We collaborated on many of the site design elements from color scheme to logo. I'm a big fan of their Salesforce1 app design guide. Its clean and minimalistic style works very well for the design I had in mind.

Logo

The logo is inspired by the official Salesforce logo. The nodes and lines convey the cloud computing service Salesforce offers. The flat geometric shape and thin typeface combination provide a light and airy feeling.

The logo mark is versatile elsewhere too, not just for site use. For example, future promotional materials:

Site Design

Please see the mockups below. While they do not contain all the site elements, they should give you a good overall look and feel of the new design. Click on the images below to see the full res versions.

Homepage

Question page

The overall look and feel is clean and elegant. The body content section is for readability without too much distraction. The dark blue header balances the minimalist look below. I used the color scheme from the Salesforce design guide. The font used is PT Sans, a gentle Humanist typeface.

I believe the branding and site design work very well for this community. It's unique and yet familiar to Salesforce devs and users. Assuming not too many major design changes based on your feedback, we'll launch the new design and graduate the site from Beta soon. An early congrats from me!

Answer 1

This looks great, I definitely think the minimalist design is the way to go. StackExchange is about the content.

I'm personally not a great fan of how a number of the other non-beta sites look, as I find their designs are too busy and that they distract from the content (english and rpg being the worst offenders).

Great work, I'm looking forward to getting some stickers!

PS. I think it's good that this design is close to the ux one, who better to follow for a good user experience!

Answer 2

I love the stickers.. But i certainly would like to have the light blue with white text on the site than the darkblue as it is currently in the mockup.

Maybe we have a another mockup with the light blue bg and white text and ask for a vote from the members ?

UPDATE

i.Image provided by jin

Answer 3

Maybe I'm missing something but I wish the code were displayed in a smaller font so there is less horizontal scrolling. It is hard to understand someone's problem if one has to either copy-paste into some other editor or horizontally scroll.

Most code posts easily extend past the viewport

Answer 4

I agree with @jkraybill. The dark blue background with light blue text doesn't have enough contrast for me. Have you tried reversing the two to use the light blue solid background with the darker text? I'd like to see how that would look. I also think the dark blue doesn't provide enough contrast between that band and the standard black StackExchange header at the very top. In that particular example, I think you may have also missed out on an opportunity to add some distinctive branding by omitting the white border around the networking logo.

I like the networking logo that you've created. Well done and distinctive from anything similar that I've seen. Is a nice change from the simple clouds that we're accustomed to seeing EVERYWHERE. LOL! I think that you worked with Salesforce on your design was a good thing in general.

At the same time, I think there's also something to be said for creating a style that's truly distinctive to SF.SE. I think it important to remember that people came here for a reason as opposed to staying on the SF Boards. I also think that now that SF has reorganized their boards, there's even more reason for people to come here instead (talk about bland, both in appearance and content).

One thing that I'd like to see is an obvious link to CHAT. That's something we've discussed here in meta. Its very difficult to find unless you already know where it is. As a consequence, chat is very underutilized on this site.

There's also been the suggestion to provide a sticky section with links to Developer Documentation on SF's Web Site in Possible to have a sticky section?. See my response to that question for more on the subject. I don't know if links to specific docs could be returned as related to the question or not. But that might be a nice feature to have that would save us a lot of time in looking up the links to documentation when answering a question.

From the same discussion, is there a way to provide links to tag WIKI's related to the question that's being asked that would show up at the top of the Related Questions list? That's a feature that I believe some of us would also like to see. See @PeterKnolle answer to Possible to have a sticky section?. Many thought this would also be a great help to us that would keep users on the SF.SE site; I suspect part of SE's goal in providing links.

I appreciate your asking for our input and taking the time to listen to what we have to say. That speaks highly of your organization and responsiveness to your users.

Thank you for all the obvious hard work and thought you're putting into this. I look forward to seeing this site graduating from beta in the near future. :)

Answer 5

Stop Press! Great Designwork Jin, how about giving consideration to a stronger identity between both StackExchange and Salesforce by also incorporating unique elements of each. Use the gradient blue element from the SE Logo in the Cloud and use the Salesforce font for the Salesforce name.

Answer 6

I am not sure if it is too late to provide feedback, but here it is anyway:

I find that the logo does not look very nice in the browser tab and on the browser bookmark bar (see image attached). I think this is because the "network" lines in the logo are transparent. When put on a gray background, the low contrast makes the logo lose its shape and it looks a bit messy. I wonder if one of the follow might fix my complaint:

1. Use a version of the logo which does not use transparent lines
2. Use one of the versions of the logo which are a solid colour (like the ones used to represent the badges)

Apart from that, I really like the design. Nice job.

Answer 7

I thank you for the hard time, and I am defo not a UX guy or a designer, but this one is boring IMO. Minimalistic is fine, but what about some more color? I know other SO sites have unique, colorfull, schemes. How bout adding some here?

Maybe its just too close to the beta design we already have, and i was looking for a change, once we graduate?!

Its awesome to know that SF design team were involved on the process.

An idea:in sf, each object has its own icon, and color, maybe add something like that?

Again, i really appreciate your work, and I am Not sure what i miss, but if we had a chance to vote on design concept, i dont think i would on this one.

Answer 8

Sorry, if it's totally OK for others.

Answer 9

My design two cents, and I don't mean to be insulting to anyone, but the first thing that comes to mind when seeing the bronze "cloud" badge is dog poo.

Answer 10

blueblueblueblueblueblueblueblueblueblueblueblueblueblueblueblueblueblueblueblueblueblueblueblueblueblueblueblueblueblueblueblueblueblueblueblueblueblueblueblueblueblueblueblueblueblue...

---

How about red? Orange? Yellow?

Brown?

Notblue?

There's nothing wrong with blue, but the whole page looks... cool. It needs a contrasting secondary color.