Design Ideas for Mathematics Site

Question

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.

And early congrats on graduating Beta. Thank you for your patience.

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

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?

Answer 5

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?

Answer 6

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

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!

Answer 7

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)

Answer 8

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.

Answer 9

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!

Answer 10

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.

Answer 11

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