21

I'm Jin, I work 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 and culture. However, all sites will share common elements so they feel like they're part of the Stack Exchange family.

I have to admit I was a bit nervous when I first started to brainstorm for the design for this site. I really know nothing about Mathematica. The last math tool I used was Maple in college, many years ago. My concern went away rather quickly after I did some research on the associated aesthetics with Mathematica and its community sites.

Logo

For the overall feel of the site design, I think a clean and minimalist look is most fitting, to resemble the main WRI's site. Therefore the logo should be more vibrant in color and geometrically intricate. While I was trying to come up with some logo concepts on my own, I was informed by people in the chatroom that there was an unofficial Mathematica.SE logo that's been used in the community Ads.

Logo

I immediately fell in love with this logo design. It's energetic, vibrant and bears some resemblance to the official WM logo but has a flare of its own. More importantly, it's purely generated by Mathematica. I think this is the first time a SE community designed its own logo! Credit: Wxffles designed the logo, which was tweaked by J. M. and coloured by Verbeia. Also thanks to Szabolcs and J. M. for providing me with the vector file.

Site Design

For the rest of the site design, I picked the colors from the logo as accent colors. The design goal, as mentioned above, is to keep things simple and clean.

please click on images to view the full resolution versions.

Homepage

Question Page

For some design elements I subtly mimic the look of the WRI site.

Community

The site design is only part of the whole design package. Once the site graduates, its chatroom, twitter account page, newsletter, and network Ads will get a facelift as well. Outside of the digital realm, I'll be creating Mathematica branded goodies too. Below are some mockups:

Moderator Card

Moderator Card

Site mini-card

Mini Card

T-shirt

Tshirt

I'd love to hear your feedback. If there are no major design changes, I'm aiming to launch the site next Tuesday or Wednesday. An early congrats from me!

EDIT: I have updated the mockups. Fixed typo on the cards and sidebar banner. Also updated the badge icons and the favorite star on the question page. As of now, I'm not totally set on the subtle background pattern used in the header and footer. I really like the Penrose tiles Verbeia made in the other thread. If I can get a tileable version of it, I'll use it.

Also, in case anyone's wondering:

Q: "I'm a moderator, when will I get my Mathematica mod cards as shown in the mockup?" A: After the first official election after the site graduates.

Q: "I want to get some mini-cards to pass around to my colleagues or classmates to promote this site, how do I get them?" A: The mini-card in the mockup is simply for mockup purpose right now. After the site graduates I'll start to create "real ones." I'll let the community decide which 3 most interesting questions to use for the mini-cards. I will make another post on this topic.

Q: "I want that t-shirt in the mockup, how do I get it?" A: typically a few months after the site graduates we send a "swag package" to the top 2 page users(sorted by reputation, all time). The package will include Mathematica t-shirt, stickers, mini-cards as well as Stack Exchange branded pen, sharpie, marker and stickers.

25
  • 3
    It looks wonderful!
    – J. M.'s slightly less busy Mod
    Jul 12, 2012 at 0:06
  • 1
    Just to note: Wxffles designed the logo, which was tweaked by J. M. and coloured by Verbeia :)
    – rm -rf Mod
    Jul 12, 2012 at 0:30
  • @R.M thanks! Edited my post.
    – Jin
    Jul 12, 2012 at 0:37
  • Also, I personally find it very hard to relate the magenta (RGB: 165, 56, 91) used everywhere to the logo, because the center of the logo is what stands out and magenta is only at the border. I feel the dark orange in the spikes (RGB: 213, 80, 56) would make relate to the logo more than magenta.
    – rm -rf Mod
    Jul 12, 2012 at 1:04
  • 1
    @R.M I don't mind the magenta as while it is a lesser portion of the color scheme in the logo, I think it ties it well together.
    – rcollyer
    Jul 12, 2012 at 1:34
  • @rcollyer which is why I posted it as a minor comment :) Jin knows what he's doing, but it hit me as a wee bit odd at first... I didn't notice it in chat because it was just one word. It's different with a page full of questions and links. I'm sure I'll adjust if we went with the current one, but just put it out there in case others felt the same
    – rm -rf Mod
    Jul 12, 2012 at 1:37
  • @R.M I figured that was your reasoning, and I was just posting my counter reasoning. 1, 2, 3 ... Comment War? Or, for the comic book inclined: Flame On!
    – rcollyer
    Jul 12, 2012 at 1:38
  • @rcollyer It's on!
    – rm -rf Mod
    Jul 12, 2012 at 1:39
  • 1
    @rcollyer Comment party in Jin's inbox! He deserves it for all the hardwork :D
    – rm -rf Mod
    Jul 12, 2012 at 1:40
  • @R.M It's not like he's doing anything else for SE, anyway. We deserve all of his time and attention! :P
    – rcollyer
    Jul 12, 2012 at 1:41
  • 4
    @rcollyer "Jin, I'mma let you finish your other designs, but this is the most important site of all time! OF ALL TIME!"
    – rm -rf Mod
    Jul 12, 2012 at 1:45
  • @R.M of course, you know what this really means, don't you? Another gold badge for a lot of us!
    – rcollyer
    Jul 12, 2012 at 1:54
  • 2
    I noticed that the badges in the flairs of users in this page are round still, unlike the awesome little stars at the top of the page. They should be consistent.
    – Verbeia
    Jul 12, 2012 at 3:40
  • 2
    @Jin It's a very nice design! Some very small comments: do you think the logo is a bit too small in some places, e.g. the cards and the site title? Not sure simply making it bigger in the site title would improve it, but I still have this impression that it's a bit small there or maybe there's too much space around? This is something extremely minor though. | Italicizing Mathematica was a good decision, please keep it that way! (In the ad in the sidebar it's still written as "Mathematica Answers" which is not as good.)
    – Szabolcs
    Jul 12, 2012 at 7:48
  • 7
    Could you show us the quotation style too (in addition to the code block style), and also how two two styles nest? Some people have used the quotation style to distinguish input (code) from program output. Personally I don't like using the quotation style this way, but the fact is it's present in many existing posts, so it must look reasonable in the new design as well.
    – Szabolcs
    Jul 12, 2012 at 7:58

4 Answers 4

Reset to default
8

Looks good. Various comments...

  • If you look at What should our site design look like? and search for 'And some badges with the hyperbolic polygon theme', there are some nice badge icons. (Actually, maybe those are what you're using for the up/down votes.)

  • The pattern in the gray banner background is subtle to the point I can barely tell it's there on my screen.

  • The cards have a consistent typo ('Mathemtica').

  • I wonder if the moderator cards would benefit from reversing the colors for the 'Q' so that it stands out better.

  • I like the code block style.

5
  • 6
    Hey Brett, could you maybe ask for us if WRI is kosher with using "Mathematica" in the site name?
    – J. M.'s slightly less busy Mod
    Jul 12, 2012 at 1:24
  • 2
    I must admit, I like those badges quite a bit, and they fall in line with Chinese dragon mythology: 3 toes for the lesser dragons, 4 for the lords, and 5 for the emperor dragon.
    – rcollyer
    Jul 12, 2012 at 1:36
  • 1
    +1 for the "badges with the hyperbolic polygon theme" suggestion.
    – Ajasja
    Jul 12, 2012 at 11:03
  • I missed the badges suggestion somehow, great idea. I have updated the mockups. I also updated the "Q" in moderator card design, I think it stands out more now. As for the subtlety in the background pattern, it's always a tricky one depends on people's monitors. In my past experience, gamma setting varies quite a bit depends on the model, age etc. My goal is to make the pattern barely visible so you know it's there, but not obvious enough to overwhelm everything else.
    – Jin
    Jul 12, 2012 at 18:30
  • 1
    @Jin The badges are small, and buried in text -- I'm not surprised you missed them...
    – Brett Champion
    Jul 12, 2012 at 20:21
7

I love this, and I'm so pleased that the logo could be the beginnings of such a lovely design.

A few small suggestions - only very minor

  • I second R.M's comment about the star below the vote count being a different shape than the logo. I would suggest using the shape of the inner star (the upside down bit) in the logo as a template, and matching its colors.
  • I love the up and down vote icons.
  • I agree with Brett's suggestion to use the badges in the other post. At the least they need to be stars in user flair in posts as well as in the top menu bar.
  • Have you changed the font for code blocks? It looks even better than in the beta somehow.
  • As well as fixing the typo in the business cards, I'd suggest hyphenating "community driven". It's an adjectival phrase and hyphenating is common practice for them.
  • I agree with the comments of others that the hex pattern is too indistinct. Also can we come up with a more interesting tiling? Hexgrid makes me think of tabletop wargaming and RPGs.

Maybe someone can come up with something nice in Mathematica for the tiling pattern? I don't have time right now but maybe someone does?

EDIT I have a few suggestions for tiling in an answer to the earlier question about the site design.

9
  • I kinda like the hexagonal tiling, although it reminds me of Android Enthusiasts... it would be awesome if the tilings were somehow based on the structure of the logo, but alas, that is impossible because regular tilings of pentagons cannot be done on a plane
    – rm -rf Mod
    Jul 12, 2012 at 4:48
  • 1
    Well then, why not a Penrose Tiling?
    – CHM
    Jul 12, 2012 at 5:10
  • Or even a Gosper tile.
    – J. M.'s slightly less busy Mod
    Jul 12, 2012 at 6:20
  • @CHM I was about to suggest a non-periodic tiling as well :-) Non-periodicity might not be so convenient for web design though... it'd still add a nice and subtle touch. It would reflect the spirit of the site. Anyone up for implementing it in Mma so we can send Jin a vector version?
    – Szabolcs
    Jul 12, 2012 at 7:50
  • @Szabolcs: there's code for it in Wagon's book, IIRC.
    – J. M.'s slightly less busy Mod
    Jul 12, 2012 at 14:28
  • @CHM Yes, that would be nice, but it matters here because in web design, they just have one copy and repeat it using css. That way, it is optimized (e.g. they have to transfer only a small file to the user rather than a large full length one, thus conserving bandwidth)
    – rm -rf Mod
    Jul 12, 2012 at 16:40
  • @R.M I understand, admittedly hadn't thought about it. But I'm sure there's a way around this. I also like JM's idea of Gosper tiling - maybe this would fit quite well. I propose we use one of the many plane-filling curves.
    – CHM
    Jul 12, 2012 at 16:49
  • I have updated the post, see my notes. I like the tiles you made for the header/footer background. Is there anyway I can get a tileable version of that?
    – Jin
    Jul 12, 2012 at 18:32
  • 1
    Here's a Penrose tile based background that is periodically repeatable: meta.mathematica.stackexchange.com/a/554/12
    – Szabolcs
    Jul 13, 2012 at 11:46
5

Firstly let me offer my thanks for all your hard work. The design looks great!

I agree with all the answers given so far and also with R.M's comment about the text color. The latter will be the subject of this answer, because obviously color preferences are very subjective and I'd like to see whether others feel the same way. I'll mention up front that I'm using an uncalibrated TN panel, so it's entirely possible that I'm not seeing the design as intended and that my comments below would become immediately invalid if I went out and bought a color calibration device. But because most people won't do that, I think a strong consensus view is especially important here.

In my opinion, there's a subtle clash between the plum color used for question titles, logo text, "Add" buttons for the tags, and the links at the bottom of the page, and the burgundy color of the "Welcome" panel and the "Questions" and "active" headings. These colors are very similar, but not exactly the same, and to me the design would feel more consistent if the same color were adopted for both sets of elements.

With these general comments out of the way, please vote yes or no for the following!

Personally I prefer the burgundy as it stands, although for better contrast it could perhaps be just slightly darker. Similarly I would be open to a slight darkening of the shade of orange used for the posters' names, to approximately match the color of the bronze badge.

Finally, it seems to me that the visibility of the hexagonal tiling is strongly dependent on the gamma settings of the monitor in question. I find it marginally visible on a Samsung SyncMaster 2343BW and almost invisible on an Iiyama ProLite E2274HDS, both of which have the manufacturer's standard sRGB profiles installed and R/G/B gamma each adjusted by eye. Neither of these are particularly good monitors by any means, but I think they're fairly representative of what most people will have on their desks. As such I think a bit more contrast could be beneficial for this design element (which, I must say, is really nice and deserves to be seen).

2
  • So far I have tested the contrast on 4 monitors at home, two PC monitors and two Macs. 6 monitors if you count my iPad/iPhone). But I do agree with you the color choice should be "safe" for most people out there. It's always been a tricky thing to do since everyone's monitor gamma setting may be different. I originally had the link color darker, but it didn't pass my color blind simulator test because it looked too close to the body text color. I think this is something I'll have to keep on tweaking post site launch, as I often do.
    – Jin
    Jul 12, 2012 at 18:45
  • @Jin okay! If darker text would be nuisance to colorblind people then let's not do that. What do you think about the suggestion to change the plum colored elements to burgundy to match the Welcome box?
    – Oleksandr R.
    Jul 13, 2012 at 16:54
5

Jin, first a big thank to you not only for the hard work, but especially for including us in the process! I really like your design in all details, but since you asked for constructive comments, let this comment be about...

Colors

As far as I have understood this, you took the colors from the logo, since they look nice. Although I basically support this, let me point out some things. First, the colors for the logo where take from one of the color gradients of Mathematica. These "SunsetColors" are beautiful but they don't contain all colors we need for the site and they are not designed to look beautiful on a website.

That's why in my opinion the green in your screen-shots does not really fit with the red.

Wouldn't it be better to do this the other way around? You choose the site colors so that they play really nice together. Then we can really easily create a color-gradient from the red tones and colorize the logo.

With this approach, you can ensure that the site-colors follow some rules (share some lumination properties or follow some rules in color-space). If you look for instance on the solarized colors you may notice the difference.

Code Highlighting

Most posts on Mathematica.SE will have a lot of code. You surely noticed our highlighting for the language. It would be really nice, if you could choose some colors for the codeblocks which will fit perfectly into the rest of the design. Currently we have

  • black for keywords, braces
  • gray for comments
  • blue for undefined symbols
  • red for numbers, strings
  • green for pattern objects

If you could provide those tones which fit with the gray of the code-box and the overall design, this would be awesome.

3
  • We use Google Prettify for coding highlighting. I believe I could overwrite it with site specific CSS. I can't promise I can get the code coloring changes in for the Tuesday launch. But I like the color choices you suggested so I most likely will tweak it post site launch!
    – Jin
    Jul 16, 2012 at 6:08
  • @Jin Yes, I know. I worked on the Mathematica plugin for Google Prettify. And yes, you could simply adjust the css file for the prettify with your versions of green, red, ...
    – halirutan Mod
    Jul 16, 2012 at 12:08
  • 1
    @Jin Could you give us a hint (in chat maybe) on what the logo will be before tomorrow's launch?
    – rm -rf Mod
    Jul 16, 2012 at 13:22

You must log in to answer this question.

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