60

I’m Stéphane, senior product designer at Stack Exchange. First, I wanted to congratulate you because this site is now starting the process of moving out of beta to become a fully-graduated site! Well done!

Graduation and Your Site Design

Graduation comes with a few perks. I have already begun work on your site's design, which will give you your own unique theme that reflects your topic and culture. This will help brand your site as unique, even while you share common elements with other sites that show you are part of a bigger Stack Exchange family.

Once the design goes up, you will receive a link in the footer of other sites in the network, along with the ability to migrate content to and from other sites — and the notoriety of a public launch that says, "Congratulations, you finally made it!"

Design Concept

For our academia.se community's site design and branding, I wanted to have a "campus life" feel. I think it's most effectively conveyed with a hand-drawn illustration style. It has a personal and lively feel to it. I've gathered some artwork I found online for setting up a mood board.

Mood Board

mood

Color scheme

color scheme

This color scheme reminds me of autumn. It's warm and inviting. Fall is also when a new academic year starts. All the pastel colors bring calm and harmony and they are lighted up by the green and the red. This way we can balance our design from calmness to more contrasted and focused area.

Logo

All the knowledge has always been passed on by books through the years, they are the origins of teaching. The idea was to evoke some books in a bookcase but in a non figurative way.

Logo

I believe this modernized logo works in other mediums to promote our site as well.

Swag

Business cards / stickers / t-shirt

Click on the image to view it at full size.

swag t shirt

Overall site design

Click on the images to view them at full size.

home

question

Main illustration

Click on the image to view it at full size.

illustration

I believe the design captures the mood I was going for. I'd love to hear your feedback. If there are no major design changes, we're hoping to launch the site soon. Thank you for being an awesome community!

Edit:

Thank you for your valued feedback! I've changed the badges based on your answers and comments. They now are mortarboards.

Click on the image to view it at full size. Badges

Regarding the question list, I will tweak some vertical space and font size during the coding to have the most perfect rendering across browsers.

13
  • 27
    Hello Stéphane, and thanks for your very nice work on our design!
    – F'x
    Commented Apr 11, 2014 at 13:37
  • 2
    Mods can get swag?!?
    – eykanal
    Commented Apr 11, 2014 at 18:04
  • Sorry for the lack of manners earlier—RL duties and SE commenting don't mix too well. But in spite of my comments, I really do like the general conception, and it's clear a lot of work went into it. I'm excited to see the (interim and?) final version(s)!
    – aeismail
    Commented Apr 11, 2014 at 21:23
  • 1
    Oh; I am happy to see this post.
    – seteropere
    Commented Apr 13, 2014 at 21:45
  • 10
    The badges look GREAT! love the update!!
    – ff524
    Commented Apr 14, 2014 at 16:31
  • 1
    I like this! Especially the logo; clean, simple but still fitting. The bell tower should probably be made from ivory, though.</snark>
    – Raphael
    Commented Apr 14, 2014 at 23:42
  • I think less ornate would be better. Having things that resemble actual buildings might evoke negative connotations in some ("That looks like the building I was hazed in!"), while more generic representations are less likely to do so. Also I recommend more use of tools and some (perhaps less) use of mortarboards and diplomas, which many users may not have. Perhaps an abstract version of podium with microphone might serve instead of the books. Also presenting things as tools may evoke the idea that this forum is a tool, to be used to aid learning, and not replace it.
    – Not Quite An Outsider
    Commented Apr 15, 2014 at 18:38
  • 3
    When can we put in an order for a shirt?
    – Austin Henley
    Commented Apr 16, 2014 at 2:36
  • I would prefer a more "serious" looking design with different colors, but that's just me. Especially the door colors bothered me.
    – Kogesho
    Commented Apr 18, 2014 at 7:18
  • I was just thinking - the badges - would there be an elegant way to make the badge levels bronze - bachelors, silver - masters, gold - phd? I think it would be cool if you could pull it off, but I personally am having trouble visualizing what it might look like. Just an idea to throw out there. Side note, I love the elegance of the books in the logo.
    – corsiKa
    Commented Apr 21, 2014 at 15:37
  • 1
    I have just one word to say: BEAUTIFUL!
    – Kaveh
    Commented Apr 24, 2014 at 17:21
  • I just got shocked by the beauty and freshness of your design! Love this!
    – Sibbs Gambling
    Commented Apr 27, 2014 at 3:23
  • I just visited this site after a couple of months absence and I just wanted to say: great job! A nice, fresh look. Really like it!
    – Bram Vanroy
    Commented May 19, 2014 at 7:29

14 Answers 14

Reset to default
22

I love it! The images, the fonts, the color palette. I particularly like the hint towards books in the site logo.

My one suggestion has to do with the medals. Not sure how the open triangle shape fits with the theme, and the thin lines make it blend in. I agree partly with what was suggested above... I think the medals should be mortarboards, similar to what is shown here:

enter image description here

I would suggest, though, to color the entire cap gold, silver, or bronze; the small icon size does do away with details. That being said, this sort of thing did work fairly well with the android community (see their little android-themed medals). I think we could do something similar here.

3
15

Thanks for the design… and soliciting feedback: it's not easy, and you'll sure get lot of helpful yet contradictory advice from all around…

So, while trying to avoid the nefarious “design by committee” effect, here's some of my “gut reaction” to the look:

  • Very positive first reaction: elegant, clean design… calming effect
  • My eyes first went to the buildings. They don't shock my as odd or foreign on the site's design, but I do not associate them spontaneously with “campus” buildings. Maybe because campuses all around have very different styles, and it's hard to draw a “universally recognized campus look”.
  • Then I looked at the logo, and title font. Love both: nice logo, I immediately saw books; almost geometric font (academia, maths, geometric drawings), yet subtly rounded.
  • Front page is well balanced, clear focus on the questions… however, the questions lists seems somewhat unbalanced to me: I wonder what was feeling weird about it, but I think it's 1. the large amount of vertical white space, 2. the fact that numbers (votes and views) are so much larger that the question title itself.
  • Question page: not much to say, looks very good. I noticed a resemblance in “up and down” pen nibs with TeX site, but it doesn't bother me at all. Maybe one thing: the style of the “accepted” mark is a bit too geometric, or it's simply too large.
  • One final detail: the gold/silver/bronze chevrons should be bolder, as they're not very visible as it.

Thanks again for your very nice work!

8
  • 9
    I agree on the campus comment. It struck me as American.
    – gerrit
    Commented Apr 11, 2014 at 14:46
  • 2
    I had a similar thought as well (before reading this answer), that the buildings don't suggest anything academic and thus they seem out of place.
    – David Z
    Commented Apr 11, 2014 at 20:09
  • I agree about the buildings, but the clock tower looks just like the University of Memphis clock tower.
    – Austin Henley
    Commented Apr 14, 2014 at 22:04
  • 3
    The campus is lacking one essential thing: people! A campus is never empty. In particular, a queue in front of the canteen. And economics students sunbathing. ;)
    – Raphael
    Commented Apr 14, 2014 at 23:43
  • @Raphael just had the same thought.. also Academia.se is all about the people... (:
    – Ran G.
    Commented Apr 15, 2014 at 5:10
  • It's spring break, campus is empty. See the bus in the footer? It's loaded with people headed to the beach. Kidding aside, we talked about adding little people figures, but it'd be too distracting(and hard!). Re: campus looking American... Stéphane is French. We talked about the visuals, and agreed the illustration should cover traditional brick buildings and something modern too. While it may not be 100% representative of every campus, but I believe it does capture a "campus" feel.
    – Jin
    Commented Apr 15, 2014 at 8:12
  • 1
    @Jin my thought was that the doors look a little too reminiscent of tiny hearts. So to me this header image suggests something to do with Valentine's Day.
    – David Z
    Commented Apr 23, 2014 at 20:28
  • @Jin Too bad. I thought that if birds are possible, people should also be.
    – Raphael
    Commented Apr 25, 2014 at 8:48
6

A few comments on the design so far:

  • The "medals" icons should perhaps be closer to mortarboards, with gold, silver, and bronze tassels.
  • I would personally prefer a somewhat more assertive font for the main body text.
  • Because of the abovementioned mortarboards, standard black is also an appropriate "academic-themed" color—as are strong "standard" colors (blue, red, green, yellow, purple, etc.) in the "hoods" awarded to master's and doctoral degree recipients.
  • The pen nibs are a little too reminiscent of the TeX SE site.
4
  • 6
    I support the idea of using mortarboards for the medals, though I guess that it is better if they are single-coloured, as the tassel will only amount for a few pixels.
    – Wrzlprmft Mod
    Commented Apr 11, 2014 at 13:08
  • I think that's a cool idea, however I'm afraid morterboards will be too detailed for an icon in such small size.
    – Jin
    Commented Apr 11, 2014 at 14:17
  • @Jin: It doesn't have to actually be mortarboards, but it should maybe at least suggest mortarboards.
    – aeismail
    Commented Apr 11, 2014 at 14:34
  • @Jin: See my comment on eykanal’s answer.
    – Wrzlprmft Mod
    Commented Apr 11, 2014 at 21:18
6

Great work. A few small suggestions:

Reduce the vertical space taken up by each question on question listing pages. It seems that currently (24th April 2014; only about half the number of questions can fit on the screen as beta sites or stack overflow. Perhaps the vertical white space could be dramatically reduced. This is important when you want to quickly scan questions.

enter image description here enter image description here

Increase contrast in between followed and not followed links. See for example the following two links. The bottom one I have followed; the top one I have not followed. enter image description here

4

Thanks for the design, it looks quite neat! Just to echo what was said in other answers:

  • I like the mortarboards a lot for the badges.
  • The colour theme and the logo are quite nice.
  • The buildings do not really talk to me, they do not have a particular "academic" feeling, and although I think the idea of representing a campus is good, the current designs are a bit too neutral. But at the same time, I don't have any better idea.
4

Is there a way to increase the contrast between the text and background ? or use a darker shade of gray ? Maybe it's my (not-yet-!!)-old eyes, or maybe others have the same problem ?

1
  • 1
    I have the same problem. Light font & gray colour. Too little contrast. It is tiresome to try to read posts here. Please switch back to black text.
    – Jukka Suomela
    Commented May 3, 2014 at 10:59
2

Very small point. I think of the clock tower as a quintessential icon of university campuses and in the design it captures my vision, which is a good thing. When the sky line is presented in a circular fashion the position of the clock tower at 2:00 invokes thoughts of the Mars gender symbol for males. I would suggest rotating the skyline so that the clock tower faces a different direction, maybe 10:00.

4
  • 1
    I doubt many people will see it this way, but it's a valid point, and changing the direction to 10:00 would fix this issue in an otherwise harmless way.
    – Anonymous Mathematician
    Commented Apr 13, 2014 at 13:38
  • 4
    Huh. I associate clock towers more with churches and train stations than with universities.
    – Gilles 'SO- stop being evil'
    Commented Apr 15, 2014 at 0:00
  • Something is really going wrong (in America?) if one really has to consider that people are offended by the circular swag. (Also, it is arguably more likely that somebody is offended by the unavoidable phallicness of the clock tower – not that I would give in to that.)
    – Wrzlprmft Mod
    Commented Apr 15, 2014 at 11:46
  • @Gilles: Maybe it's an American thing. Every US university campus I can think of has a clock tower, or wishes it did, but hardly any of our churches have clock towers, and we have hardly any train stations, period. :)
    – Nate Eldredge
    Commented Apr 23, 2014 at 21:48
2

I just noticed a layout bug (?) on FF 26.0 (running Ubuntu):

enter image description here

The green box indicating an accepted answer is badly positioned; the text should be vertically centered:

enter image description here

I notice that your screenshots above look more like this than the bad one above, so maybe it's a platform-specific thing?

1

I like it a lot. Thank you!

  • I especially like the "fallen book" logo.
  • I think the colour scheme, font choices and text layout work really well, but I question the way that lines that are not the first line in a bulletted list item appear to lose the indent that the first line has (does that make sense?)
  • I don't love the buildings, but I don't hate them either. There's a risk that trying to make them too "college campus" risks making them too twee and "My idealised American undergrad experience" ;-) I like the way that the logo and links are integrated vertically with the buildings picture, either side of the tower. Will this still work in narrow browser windows? (or more to the point, will it fail gracefully?)
  • I don't like the nibs for the upvote and downvote buttons. There's no handwriting or fountain pen motif anywhere else in the design, and it seems to reflect a view of academia that is... perhaps archaic? As well as, as somebody else mentioned, being a tad reminiscent of tex.stackexchange. I don't have any bright ideas for what to use instead, though. (maybe the mortarboards? Not sure... maybe just arrow in a circle, to reflect the !-inna-circle that you have in the top right for "Community bulletins"?)

Thanks again for all the work :-)

1

Overall, I like the look a lot. One criticism: in the related questions list, the white question score on a pale grey background is almost impossible to read.

1

I suspect the discussion over the design is over, but if it's not I personally find the yellow-ish highlighting of quoted text quite unpleasant. I understand it's part of the color theme, but I think it's esthetically sub-optimal in this context.

quotation example

Alternatively, we could use a larger indent, a smaller font and quotation chevrons.

0

First off, thanks a lot for the work so far, it looks pretty amazing. A few comments:

  • Love the color scheme, I certainly see the association with autumn, and semester start. I think it's pretty cool whether it was a design criteria or something that came up after you had an working concept already.

  • Logo: The concept with the books and the simplified representation is clean, neat and will work fine in many context, my only concern is whether or not it resembles the logo for the telecom company Ericsson. Although the coloring and the orientation of the bars create enough distinction, so I suppose it's not an issue really.

  • Logo text: I feel that the font used for 'ACADEMIA' is a bit weak when used side by side with the logo. The line height of the logo and the text is not the same, so that the text looks like the little sibling, both on height and weight. Considering that we are going with all caps I find it slightly disturbing geometrically. Maybe that's just me with my symmetry obsession. Did you consider experimenting with bolder fonts?

  • Badges: I was going to suggest that the "book" resemblance with the badges wasn't really coming through, but many have already commented on it. I love the mortarboard concept! :)

  • Main page: I agree with the previous assessments on the votes/answers are taking too much space in comparison with the title. Otherwise it's really nice

  • Question page: I also agree with the criticism regarding the use of fountain pen illustrations for up/down-votes. It both resembles Tex.SE and lacks any direct connection with doing research (IMHO). Unfortunately I don't have a better suggestion at this point. I will get back to this answer, if I do come up with something.

  • I have to mention that the general idea of a campus is a bit lost on me when I look at the main illustration. Despite being very crisp and elegant, I do not associate it with a campus, a university, or being a student/academic in any way.

Maybe an illustration with some items commonly used in academia could be a better fit? Some suggestions: a blackboard, a microscope, textbooks, computers...

Overall great stuff, looking forward to the end product :)

-3

I find the question-page's low contrast quite tiring on the eyes. The question body text, and the "share | edit Edited ..." link text, aren't that comfortable to read.

Oh, and the circle of buildings on some of the swag just looks weird.

3
  • The text looks that awkward because it isn’t properly hinted. As hinting is done by your system anyway, it’s hard to say how this aspect will look like for you on the final site.
    – Wrzlprmft Mod
    Commented Apr 11, 2014 at 13:00
  • what @Wrzlprmft said. Photoshop really renders text poorly for mockup purpose. Real system font rendering will be more clear and readable.
    – Jin
    Commented Apr 11, 2014 at 14:18
  • 2
    I actually really like the circle buildings; Academia is multinational, and the graphic conveys that sense.
    – eykanal
    Commented Apr 11, 2014 at 17:56
-3

I have a thought regarding the up/down indicator. Since we spend most of our time grading, why not have a check mark for up, and an X for down. For an accepted answer (which used to have a check mark), we could instead use a gold star.

5
  • 8
    This will be very confusing for almost anybody used to other Stack Exchanges. Also, what do we do to with favorite questions?
    – Wrzlprmft Mod
    Commented Apr 15, 2014 at 22:25
  • Hmm. There is that.
    – Suresh
    Commented Apr 15, 2014 at 22:36
  • 3
    What are the current up/down indicators? Pen nibs? That seems really off to me (maybe it varies by school or department, but I don't think I've ever seen anyone in academia use or discuss fountain pens), so I'd be happy if we could replace them with something else.
    – Anonymous Mathematician
    Commented Apr 16, 2014 at 13:20
  • Note that the tick and cross symbols are not universal. For example, in Finland and Sweden, the tick symbol means "wrong". (OTOH, this is an English-langauge site and tick/cross seems standard in English-speaking contexts.)
    – David Richerby
    Commented Apr 24, 2014 at 21:29
  • 1
    @AnonymousMathematician I agree that it's not a strong association but I've known several academics who've used fountain pens and I used one myself for a while. On the other hand, I imagine the same would be true if I were in any other profession where people spend a reasonable amount of time writing.
    – David Richerby
    Commented Apr 24, 2014 at 21:40

You must log in to answer this question.

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