# Design Ideas for Mathematics Site

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.

In the past few months, we have received emails from users who expressed that they would like to keep the current "Sketchy" theme for the final Math site. We were told it's a fitting theme for Math because of the grid paper and its simplicity. We like the Sketchy theme too, but it's only for Beta sites.

For the final theme, my goal is to have a simple and clean look, but at the same time the design should reflect math and academia. The visual elements should be subtle so they don't overwhelm the content.

Design

please click on the image to see the full resolution verison.

As you can see it's a simple and functional design. I used a different grid paper pattern for the background, and it should remind you of the Beta theme. I believe the serif typeface on the header and questions work well for the academic look. (The math equations on the current site are set in serif).

Logo

I made the logo section large and prominent. I feel this centered masthead treatment provides a good balance to the clean body section, and also gives the site a publication feel. As for the logo, I was inspired by WolfamAlpha's rhomic hexecontahedron and the Penrose Triangle. The geometry shape goes well with the serif typeface.

"Mathy Elements"

I wanted to add subtle math related elements to aid the visuals. I was careful to not over- do it incase it made the site look cheesy.

• Stats box[votes, answers, views], I put a very subtle matrix bracket around it. I kept the coloring very faint, so when repeated across multiple rows they won't make the site look boxy.

• Accepted answer background. "∴" is the math notation for "therefore." I thought it's fitting for the accepted answer. Not having a solid color for background also keeps the site airy.

• Badges: geometric shapes. The full badge is a mini black chalk board. the badge-tag version will be a green board.

After researching on the math topic for the design process, I really would love to have more homage to famous equations and theorems. I wanted to include Euler's Identity somewhere but failed to do so. I originally had Euler's polyhedrons as main nav link graphics to go with the text. But they made the design look busy.

Feedback

Researching on math reminds me of how beautiful math is. I've been a long time fan of math since grade school. I think the execution of this design works with the goal I had in mind. The visuals are there to aid the feeling, while not overwhelming the cleanness. Please let me know what you think.

• The therefore-triangles are a very cute and clever touch, but they remind me of Flux Capacitors and Sam Fisher, which in themselves are awesome things, but not exactly the perfect image for the site. But then again, I don't know; I'm a horrible design person. Which is why this is a comment and not a full answer. – Justin L. Oct 25 '10 at 0:21
• @Justin, as I answered to @Isaac below, I'll add a subtle green background color with ∴ too. I typically do quite a bit of post launch tweaking, we'll see how it works out. – Jin Oct 25 '10 at 2:42
• @Jin: Serif doesn't look good. Please change it to what font it used during the beta stage – Chandru1 Oct 25 '10 at 20:21
• @Jin: At least the font used in Webapps site is very good. Perhaps it will be a good idea for Math to use that font as well. – Chandru1 Oct 26 '10 at 9:19
• @Jin: Why no response! Have i asked anything wrong! – Chandru1 Oct 27 '10 at 16:31
• @Chandru1 sorry for the late response. I have fixed some css problems which deemed critical, will be on live when the programming team deploy next time. However I have no changed the font choice since I see it being a subjective one. – Jin Oct 27 '10 at 17:11
• @Jin: Please, Jin, honestly speaking i dont like the current font why do you find it subjective. Please try to create a good font which is eye catching and a bit dark as well. Sorry for the disturbance. – Chandru1 Oct 27 '10 at 17:13
• @Jin: I say this because, i spend a lot of time on this site, and i don't want to see this font! – Chandru1 Oct 27 '10 at 17:18
• @Chandru1: Jin is right, it is a subjective issue, i.e. a matter of opinion whether one "likes" the current font. There are others of us who think the serif font looks good on the site. Can you post some concrete reasons why you don't like it? – user856 Oct 28 '10 at 1:37
• @Rahul: Why i am saying that is because the present font looks very light. Were as the font which was used in the beta stage was descent and clean. – Chandru1 Oct 28 '10 at 6:17
• @Jin Hi, Jin, what references did you use for the first logo? I saw Feynman wearing the a shirt with this MSE icon on it in a CS lecture: youtube.com/watch?v=EKWGGDXe5MA – Shuhao Cao May 30 '13 at 5:49

I like the design, especially the greater use of serif fonts, the new grid background, and the overall simplicity of it. The only changes I'd suggest are moving the logo out of the middle of the title and to the left (i.e. "*MATHEMATICS" instead of "MATHE*MATICS") and altering the indication of an accepted answer to at least include a slight green background.

edit: I really like the checkmark background for the answer count on questions with accepted answers.

• thanks for the feedback. Will do. – Jin Oct 24 '10 at 21:15
• The logo in the word made it very hard for me to read. – Carl Mummert Oct 24 '10 at 23:31
• @carl agreed. i'm making the change in css conversion. – Jin Oct 25 '10 at 2:12
• I agree with Isaac here, the logo splitting the word is a bit awkward. Otherwise, looks nice. – Noldorin Oct 25 '10 at 9:32

Great design overall, but some minor nits (do I need to open a new question? :) )

1. Could the separator between question titles be put back? I feel that the questions all clump together without it :p (Moreover, math.SE is the only site across the SE 2.0 network & Math Overflow without the separator).

2. Because a Bronze badge is already an equilateral triangle, having the Comment upvote button an equilateral triangle too is quite confusing. I suggest that the Comment upvote button be an up arrow too, to be consistent with the Post upvote button.

3. The lines are too dense. Together with the serif font it makes a paragraph of text quite hard to read. I think the line-height should be increased by 10%. The following shows a comparison between text from this site and a LaTeX generated document.

4. The <textarea> should use monospace font.

• @KennyTM, great feedback. I'll put the changes in tonight. thanks. – Jin Oct 25 '10 at 20:42
• The separator is there, but very light, so it probably needs to be darker... – Isaac Oct 25 '10 at 20:46
• @Isaac, @Jin: Many things on the new site are very light. I get the feeling that maybe Jin has very different monitor gamma than the rest of us... – user856 Oct 25 '10 at 21:02
• @Rahul, I'm changing the css to boost the contrast. I tested on 2 PCs and 1 Mac with different gamma settings when I was doing the css. weird. changes coming soon. thanks. – Jin Oct 25 '10 at 21:19
• @Rahul, @Jin: I can't adequately judge brightness at the moment because the better of my monitors went out of service a few days ago and this one I'm forced to use now starts shifting colors drastically with as little as 10° deflection from normal. – Isaac Oct 25 '10 at 22:04
• @Jin: With more time on the site, point #3 above is really an issue—the leading is too tight for Georgia in general and way too tight for Georgia with inline math. – Isaac Oct 26 '10 at 6:07
• @Kenny TM: Is it possible, for you to redesign the site in such a way such that the Math site uses the font which is being used by Webapps site. (I don't know the name so i am giving a reference.) – Chandru1 Oct 26 '10 at 9:21
• @Chandru: You should ask Jin, not me. – kennytm Oct 26 '10 at 9:24
• @Kenny TM: I apologize. – Chandru1 Oct 26 '10 at 9:25
• +1 for the item 2. This still confuses me after several days. – Tsuyoshi Ito Oct 29 '10 at 22:28

I quite like the proposed theme, and agree with most of the comments others have posted here. Thank you very much for your nice work!

The only thing that sticks out poorly at me is the bunch of blackboards behind the badges. I think that they (i) cross the line from subtle to cheesy that you have carefully avoided elsewhere, and, more importantly, (ii) they are visually very distracting, having a big black "weight" around a small element which is not of primary importance on the front page. I strongly feel that this should be reworked.

Also, I agree with Justin's comment about the accepted answer background; I could not recognize the three dots as a "therefore" symbol until I read the text. It was a nice thought, but part of the difficulty is that one never sees a "therefore" symbol with other things inside it. Perhaps a green outlined circle around the number instead? Other sites have a rounded filled rectangle, we could have a perfect geometrical figure instead, and keeping it in outline only might still keep the design light and airy.

• In fact, MO became a much more pleasant place when Anton hid the recent tags and the badges from the home page with some CSS magic moves. They add an enormous amount of noise to the page and, as far as I have seen, provide very, very little value---for example, no one complained when Anton killed them! – Mariano Suárez-Álvarez Oct 25 '10 at 3:04
• agreed. For the other sites, I normally keep the badge treatment simple. I may just do the same for the Math site. I think having the Gold/Silver/Bronze badges in different shapes is already enough for the uniqueness. – Jin Oct 25 '10 at 3:06

Nice design.

I second @Issac's suggestions on the logo placement.

I also find the colour used for the questions a bit too bright and putting a strain on the eyes. Perhaps something a bit toned down?

• I'll darken it some, or switch to a navy blue color. The reason I chose dark red is because we'll also have the new Meta site design too. Typically the Meta design is a desaturated version of the parent site. I wanted to make the distinction more obvious by make the Math parent site links more colorful. – Jin Oct 25 '10 at 2:15
• @Jin: The Meta design can be made desaturated simply by making the questions gray. On meta.SO they do this, and it works well. I think the layout and typography alone will help to tie the meta site closely to the parent, so colour issues for meta should not constrain the colour choices for the parent site. For what it's worth, I like the red much more than the current blue, though I would agree to toning it down a little. – user856 Oct 25 '10 at 2:30
• @Jin: I find the proposed red color for question titles much harsher on my eyes than the blue used in the beta. It it possible to use something closer to the beta color sheme? – Gone Oct 25 '10 at 2:52
• @Bill I'm thinking about going with much darker maroon for the question title links than my mockup, something like #681616. or the Dark blue from the logo type #0f3559. – Jin Oct 25 '10 at 2:55

I think you made a lot of good choices. The extra markup on the math site in the LaTeX support adds a lot of extra symbols to the questions and answers, so keeping the design simple will keep it from getting too busy.

The "therefore" symbol for accepted answers is spot on. I really like that this element keeps changing across the different sites to suit the community that the site is designed for. Maybe you could do the same for things like favorited ("starred") questions and "diamond" moderators, giving them regular geometric shapes for the math site?

• I'd think we're better off keeping the ♦ for the mods consistent across all sites. – Isaac Oct 25 '10 at 3:00
• thans. I agree with @Isaac on ♦ for mods, to keep it consistent with the other sites. – Jin Oct 25 '10 at 3:47

:-) :-) :-) :-) :-)

Of all the website redesigns I've seen in the last 10 years, this is the best I've seen. And that's coming from a typography weenie who hates the use of Helvetica Narrow on street signs, and Comic Sans everywhere.

great job!

Seeing it online I find that

• I do not like at all that the red from the currently active item in the 'menu' right below 'MATHEMATICS' spills over to its underline below.

• the text for the votes/answers/views is way too dim? Why is the internet favouring impossible -to-read-text these days?

• The check mark on questions with accepted answers is also impossibly light.

• When switching from the parent site to the meta site, everything stays put except for the logo: make the two equally wide, so that the 'meta' part in the one on meta does not screw with the centering of the rest.

• Most of the text on meta is also in a dim color best designed for text one does not expect to be read by anyone!

One can have a classic look with strong colors! (And I don't really thing the attempt at a classic style works that greatly, because of fonts...)

• The default font size for the main text seems to have been reduced (and we all know how great are serifs at small sizes on current screens!) If I tell the browser to scale things up, the margins disappear and the page starts looking broken. Moreover, if Firefox is scaling also the logo image, it looks really bad :/ (Scaling only the text results in the red bottom border of the currently selected item in the top menu at a different hight that the black rule)
• Mariano, I'll make some changes accordingly. thank you for your input. If you have any future findings, could you start a new post? that way it's easy for me to track. Thanks. – Jin Oct 25 '10 at 19:55
• @Jin In particular I agree with the second point, I really think the contrast is too low. – BBischof Oct 26 '10 at 2:43
• I agree, the contrast is way too dim. – Greg Graviton Oct 26 '10 at 8:18

I'd say ditch the three dots around the number for answered questions. It looks silly and adds nothing to the page.

Also, I'm not such a huge fan of the font. You should look at the LaTeX fonts and use one of them for the title.

As Chandru1 say the font is not good for mathematics. In particular $x^e$ may be confused with $x^\varepsilon$. Also, I have tested this on Firefox on XP (bad) and Opera on Linux(Ubuntu 10.10) (good). Please reconsider the font. Otherwise I like the new design - Good Job Jin + others!

• AD.: I don't think the typeface for mathematics was changed, it still looks like the same Computer Modern (the default TeX face) to me. Maybe its size is different? That could affect legibility, especially of super- and subscripts. It might help Jin if you could post a screenshot of what the problematic math rendering looks like. – user856 Oct 27 '10 at 13:16
• @AD: The fonts for math are the default ones from MathJax. It should be due to the font size (it is 15px now, 14px in beta.) – kennytm Oct 27 '10 at 13:43
• @A.D. could you please start a new question for this issue and post a screenshot so I can see? I'll adjust the font-size if needed. – Jin Oct 27 '10 at 17:13
• @AD: BTW, besides the font size difference, MathOverflow has enabled image fonts while this site does not. This may also be the cause of $x^e = x^\varepsilon$. – kennytm Oct 29 '10 at 8:26

Now that the contrast is stronger, I somehow feel that the color scheme is too monotone, i.e. I can't easily distinguish the different site elements (questions, tags, sidebar). (Some parts are still too dim, though.)

I don't know why, but somehow I feel that the text is harder to read now, especially compared to mathoverflow or stackoverflow. That seems to be due to the serif font (with a too small line height)?

The serif font also seems to make the design "busy" while it's also eerily austere.

I don't know, the site just feels hard to use to me right now.

Having just the enormous, unqualified, festooned word MATHEMATICS at the top can create an impression of claiming ownership over that field. Some humility is in order.

Calling it MATH.SE or some other word different from Mathematics per se, or using a smaller and perhaps more generic font, could help. Compare with MathOverflow to see the difference in this respect -- and it would also be relatively un-humble for a site carrying much less knowledge than MathOverflow, to have a much larger and more in-your-face logo. Less is more.

(I'm not suggesting that m.SE should view itself as somehow less than other forums -- just that it avoid the appearance of "over the top" self-promotion.)

• I think you're reading too much into it. It wasn't the intention and others and myself didn't see it that way. For the logo type, I simply use whatever the site proposal title is. – Jin Oct 25 '10 at 3:39
• If the eventual title is something other than MATHEMATICS then my comments do not apply. But if the title stays as in the picture, then: the impression created in the viewers exists independently of the authors' intentions, so I don't think describing the humility of the latter is that relevant to the end result. If the title is huge this is a fact on its own regardless of intentions. Nothing personal. – T.. Oct 25 '10 at 4:17
• @T.. I doubt anyone who comes to the site will think this is "The Math" site. We have sites titled Game Development, Gaming, Webmasters etc so far, and they certainly do not claim ownership of those topics and people understand that. At the end, we see what we want to see. – Jin Oct 25 '10 at 4:25
• @Jin: Does this mean that we can look forward to a meta thread on choosing the site title in the near future? – user856 Oct 25 '10 at 4:28
• I should also say, although the choice of language in my answer already incorporates this idea, that the point was not that everyone must reach this interpretation of the design, but that the displayed design is very much open to such a reading. It is the "Caesar's wife" standard, where the appearance of propriety (or in this case, humility) has a separate importance from the propriety itself. The MathOverflow page design is much less open to the interpretations I described. – T.. Oct 25 '10 at 4:30
• @Jin: math.SE differs from the other sites (Gaming etc), in part because of its relationship to MathOverflow. The value and contents of math.SE are largely a function of how much of the MO user base (academics and other knowledgeable types) it can attract as contributors. Otherwise it will be another "been there, done that, jumped the shark within a year" math site when the big contributors get bored and new questions repeat the old. As the elevator pitch fiasco shows, any appearance of hucksterism or self-promotion from SO alienates the math crowd and it's wise to avoid it in the logo. – T.. Oct 25 '10 at 4:52
• @T..: The notion that we exist only in so far as MO users grace us with their presence is rather condescending and demeans the substantial contributions of the many people here who are not from MO. – Isaac Oct 25 '10 at 4:58
• @Isaac: I haven't posited that notion. I am commenting based on the collapse (or obsolescence) processes observed in earlier math forums. MO became such a hit largely because earlier venues got to be lame or defunct, for reasons along the lines I described here and elsewhere. It would be good for math.SE to avoid this rut. The better technology gives it a certain honeymoon period (as in the case of every past forum with best-of-its-time software) but demographic and volume issues are king, and much the same as in every prior case. – T.. Oct 25 '10 at 5:08