21

As you can see the new design just went live. Which means this site has been officially launched! Congratulations! Thank you for your valuable design feedback.

One thing you may notice that's different on the live site from my original design mockups is the logo change.

enter image description here

vs

enter image description here

The logo mark and logo type needed to be tweaked to be compliant to WRI's legal request. I believe the newer logo looks great too!

If you're still seeing the old favicons, please load the follow urls and do a hard browser refresh.

Main site favicon

Meta site favicon

We have also themed the chatroom, twitter account and email newsletter template for this site.

If you see any CSS/styling bugs, please start a new post here on Meta and tag it with design and bug.

Congrats on the launch and thank you for being an awesome community! I really appreciate all the help you provided during this design process!

8
  • 12
    This is one of the few sites where a lot of community input resulted in something really good looking. Nice work everyone!
    – Shog9
    Jul 17, 2012 at 20:25
  • Should suggestions get the same treatment as outright CSS bugs?
    – Brett Champion
    Jul 17, 2012 at 20:49
  • @BrettChampion if you have suggestions, feel free to post as an answer here.
    – Jin
    Jul 17, 2012 at 20:49
  • 6
    For those curious, is there a link to the text of WRI's legal request obout the logo?
    – JxB
    Jul 17, 2012 at 21:14
  • 3
    I agree with JxB's request. Since it was a formal, legal request from WRI, it is only appropriate that the contents be shared here, so that it is a documented part of our history
    – rm -rf Mod
    Jul 17, 2012 at 22:43
  • Looks great Jin! I still much prefer The Real Logo but that's not your fault!
    – Mr.Wizard
    Jul 17, 2012 at 23:01
  • Congratulations to us!
    – J. M.'s slightly less busy Mod
    Jul 18, 2012 at 0:28
  • 1
    You found a place to use the Penrose (aperiodic) tiles :)
    – Isaac
    Jul 22, 2012 at 17:45

10 Answers 10

Reset to default
6

You've done a great job of the design - integrating all the elements together very well. I love the subtle touches of detail and colour everywhere.

I'm probably the only one who's going to say this, but I think the logo you ended up with is much better than the one you started with! That one was a bit ugly and aggressive - and derivative. (Although the code that generate it was pretty cool.) The final graphic you went with, although not perfect, seems to offer a more relaxed and balanced face, harmonious rather than combative, and it seems - to me anyway - to be establishing an independent identity for the community, which is, after all, for helping people with their problems. With some buffing and polishing, I think the new logo will be pretty cool.

Thanks for your work! And in return, whenever your copy of Adobe Illustrator runs out of steam, come over to the site and get the Mathematica gurus on the case: Mathematica eats Penrose tiles for breakfast … :)

1
  • 3
    I like the idea of the site developing its own identity. Personally I liked the knots, especially some of the more complicated ones, and how the curves in the knots contrasted with the straight lines of the Penrose tile background.
    – Brett Champion
    Jul 18, 2012 at 14:48
6

On the user reputation page the titles of questions and posts are displayed in different sizes.
Rather than being informative this appears haphazard.

Mathematica graphics

4
  • on my machine, they're different fonts as well - Helvetica on top, then Verdana below... :)
    – cormullion
    Jul 19, 2012 at 22:08
  • @cormullion since you didn't vote I'm left wondering: do you find that behavior helpful or distracting?
    – Mr.Wizard
    Jul 19, 2012 at 22:14
  • I can see it would be confusing to distinguish them by font details alone. Perhaps a more visible indicator would be advisable. I rarely look at that page, though...
    – cormullion
    Jul 19, 2012 at 22:19
  • This is also visible in the drop down box from one's username showing recent upvote reputation events
    – Verbeia
    Jul 26, 2012 at 7:21
6

The only thing I would tweak about the design is the gray meta icon, which to my (possibly tired) eyes loses some of the interest of the original. It may be the resampling which could be fiddled with:

resampled logo

This is the result of running the large color version through an image-resampler I use, for which I'll include the source code by way of saying sorry for nit-picking:

originalImage = Import["an image"];
Manipulate[
 f = 
  Sharpen[ColorConvert[
    ImageAdjust[
     ImageResize[originalImage,  {width, height}, 
      Resampling -> resampling],
     {{redContrast, greenContrast, blueContrast}, 
      {redBrightness, greenBrightness, blueBrightness}}], 
    type], sharpness],
 {{width, 64}, 16, 200, 1, Appearance -> "Labeled"},
 {{height, 64}, 16, 200, 1, Appearance -> "Labeled"},
 {type, {"RGB", "GrayScale"}}, {{resampling, "Lanczos"}, {"Nearest", 
   "Bilinear", "Biquadratic", "Bicubic", "Gaussian", "Lanczos", 
   "Cosine", "Hamming"}, ControlType -> SetterBar},
 {sharpness, 0, 10},
 {{redContrast, 0}, -1, 1}, {{greenContrast, 0}, -1, 1}, 
  {{blueContrast, 0}, -1, 1},
 {{redBrightness, 0}, -1, 1}, {{greenBrightness, 0}, -1, 1}, 
  {{blueBrightness, 0}, -1, 1}]

(* Export["name-for-resampled-image.png", f] eval when finished *)

I usually find that "Lanczos" gives the best results for smaller icons.

imageresampler

4
  • Nice! I pointed this out to Jin in chat when we launched, but didn't follow up on it and it probably got lost in all the rejoicing. The Lanczos resampled one is much better.
    – rm -rf Mod
    Jul 25, 2012 at 19:49
  • I agree the meta logo needs to be tweaked! I did it in haste, simply did a bw conversion of the main site's logo so some details got lost. I'll work on a new one in the next few days.
    – Jin
    Jul 26, 2012 at 15:28
  • @Jin This is like Mode -> Adjustment -> Black and White adjustment in Photoshop, then maybe Bicubic (sharper) for resampling. I managed to make something similar to cormullion's result with that.
    – Szabolcs
    Jul 27, 2012 at 6:49
  • @Szabolcs I plan to manually tweak the colors in Illustrator while in vector format, then port to photoshop.
    – Jin
    Jul 27, 2012 at 14:54
4

In the new design code in headings is not scaled correctly:

This is a h1 heading with code in it

This is a h2 heading with code in it

This is a h3 heading with code in it

4

Should the accepted answer green area also be seven-sided, rather than the rectangle it currently is now?

enter image description here

It seems a bit out of keeping with the rest of the design. Several other launched sites (e.g. Role-Playing Games and Cross Validated) have different shapes for their accepted-answer icon.

For the same reason I'd suggest little cut-off corners on the tags, if that's possible. Maybe CSS doesn't extend to this. I know it does rounded corners but perhaps little 45 degree cutoffs isn't doable.

4
  • Something like i.stack.imgur.com/prRyI.png, for example?
    – rm -rf Mod
    Jul 27, 2012 at 5:36
  • @R.M ooh pretty. I just had in mind a green heptagon to match the logo.
    – Verbeia
    Jul 27, 2012 at 5:39
  • I thought of that, but I felt it might be an overloading of heptagons on the front page. This keeps it polygon related and the triangulation theme intact
    – rm -rf Mod
    Jul 27, 2012 at 6:05
  • What about rotating it by 45 degrees?
    – Verbeia
    Jul 27, 2012 at 6:24
3

Nit picking, but I wonder whether the inbox popup would look better with maroon text on something lighter instead of white on maroon.

enter image description here

3
  • I agree with this. I think the maroon bg is a bit too jarring. I'll make tweaks this evening and the change should go up tomorrow
    – Jin
    Jul 17, 2012 at 20:54
  • 1
    @Jin For some definition of 'tomorrow', eh? :-)
    – Brett Champion
    Jul 19, 2012 at 3:11
  • the fix is on dev. it will be out with our next prod build.
    – Jin
    Jul 19, 2012 at 6:23
3

I've got a small problem with the site. In Firefox, if a Text Zoom of more than 1:1 is used the "tabs" wrap. This could be handled much more gracefully, IMHO.

Mathematica graphics

1
  • I get the same in Chrome
    – Eli Lansey
    Jul 18, 2012 at 14:09
3

Is it intentional that links in code style are blue while links in text style are red, both underlined in red? I would have expected a uniform link style.

Here's a screenshot to illustrate what I mean:

Mathematica graphics

0
1

The color chosen of inline code example is very close to the background, making it a poor choose for highlighting. I suggest choosing a darker shade.

7
  • Personally I do prefer a subtle highlighting for inline code. The fix width font clearly shows that this is a piece of code anyway, so there is no ambiguity. To compare with bold and italic highlighting, I'd prefer it to be closer to italics which don't jump out of the text, but they're immediately noticeable to the reader as he comes across them.
    – Szabolcs
    Jul 18, 2012 at 13:55
  • Well, in a resent answer I mistakenly missed an end marker, which cause a large part of a paragraph to be highlighted, in order to find the position of the error I had to pull the curtains. Although now that the sun is going down, it's somewhat easier to read. I would argue that a highlighting color needs to be somewhat stronger then this even if it's intended to be subtle. I would think that for anyone with even the slightest vision impairment it would simply not stand out at all.
    – jVincent
    Jul 18, 2012 at 14:06
  • In that case probably your screen shows it with less contrast than mine. There were complaints about the contrast of the background image too. It's difficult to get these things right considering the large variety of different screens people have (mine is not very good).
    – Szabolcs
    Jul 18, 2012 at 14:09
  • Have you carried out calibration on your screens with any specific software? Mine are only calibrated using nvidia's built in wizard, which may not be of high standard, but should be consider a fairly broad testcase due to the popularity of their graphics cards. I would argue that in cases where user who chose to up their contrast as many do, and factory or calibrated standards, the highlighting should be set such that it appears correctly to those with factory/calibrated standards, and too high contrast for those who up their contrast.
    – jVincent
    Jul 18, 2012 at 14:41
  • It's not really about my screen, or about who's screen is "right" ( = properly calibrated). If enough people find it's too dim on their screen, then of course the contrast needs to be enhanced (even if it looks fine on some other screens). The reality is that most screens that will be used to view the site are not calibrated, and many are not good quality (including mine). The site should still be usable on them.
    – Szabolcs
    Jul 18, 2012 at 14:46
  • (BTW I'm sure my screen doesn't show colours right. It's so old the backlight is getting dim.)
    – Szabolcs
    Jul 18, 2012 at 14:50
  • My point is that the styling is there for the purpose of highligting content. If the darkness is increased, the situation is one in which the low contrast people still see a highlight, and the high contrast people see it highlighted, (but not quite the subtle shade intended) As it is, low contrast people don't see the highlight, and high contrast people see the subtle shade intended. Ideally it should be made either with optimal range in mind, or with the designed shade on a calibrated screen, I can't see any argument to have the designed shade on a high contrast screen.
    – jVincent
    Jul 18, 2012 at 14:52
-1

Can we go back to the blue titles? More readable than red.

4
  • 1
    no, that won't happen. That is a theme for beta sites, whereas graduated ones get their own distinct theme.
    – rm -rf Mod
    Jul 18, 2012 at 17:46
  • Do you have color-blindness, by any chance?
    – J. M.'s slightly less busy Mod
    Jul 20, 2012 at 1:51
  • I'm not color-blind, I'm saying the red is cheesy. Why is math.stackexchange.com blue?
    – alancalvitti
    Jul 20, 2012 at 4:42
  • 2
    This will be never ending... it won't be hard to find someone who finds blue cheesy and so on. At some point, we gotta leave it to the designer (who has blended the design well with a logo that the community chose)
    – rm -rf Mod
    Jul 20, 2012 at 23:28

You must log in to answer this question.

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