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!

  • 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 '12 at 20:25
  • Should suggestions get the same treatment as outright CSS bugs? – Brett Champion Jul 17 '12 at 20:49
  • @BrettChampion if you have suggestions, feel free to post as an answer here. – Jin Jul 17 '12 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 '12 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 Jul 17 '12 at 22:43
  • Looks great Jin! I still much prefer The Real Logo but that's not your fault! – Mr.Wizard Jul 17 '12 at 23:01
  • Congratulations to us! – J. M. will be back soon Jul 18 '12 at 0:28
  • 1
    You found a place to use the Penrose (aperiodic) tiles :) – Isaac Jul 22 '12 at 17:45

10 Answers 10

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 … :)

  • 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 '12 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

  • on my machine, they're different fonts as well - Helvetica on top, then Verdana below... :) – cormullion Jul 19 '12 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 '12 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 '12 at 22:19
  • This is also visible in the drop down box from one's username showing recent upvote reputation events – Verbeia Jul 26 '12 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

  • 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 Jul 25 '12 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 '12 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 '12 at 6:49
  • @Szabolcs I plan to manually tweak the colors in Illustrator while in vector format, then port to photoshop. – Jin Jul 27 '12 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.

  • Something like i.stack.imgur.com/prRyI.png, for example? – rm -rf Jul 27 '12 at 5:36
  • @R.M ooh pretty. I just had in mind a green heptagon to match the logo. – Verbeia Jul 27 '12 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 Jul 27 '12 at 6:05
  • What about rotating it by 45 degrees? – Verbeia Jul 27 '12 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

  • 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 '12 at 20:54
  • 1
    @Jin For some definition of 'tomorrow', eh? :-) – Brett Champion Jul 19 '12 at 3:11
  • the fix is on dev. it will be out with our next prod build. – Jin Jul 19 '12 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

  • I get the same in Chrome – Eli Lansey Jul 18 '12 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

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.

  • 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 '12 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 '12 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 '12 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 '12 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 '12 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 '12 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 '12 at 14:52
-1

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

  • 1
    no, that won't happen. That is a theme for beta sites, whereas graduated ones get their own distinct theme. – rm -rf Jul 18 '12 at 17:46
  • Do you have color-blindness, by any chance? – J. M. will be back soon Jul 20 '12 at 1:51
  • I'm not color-blind, I'm saying the red is cheesy. Why is math.stackexchange.com blue? – alancalvitti Jul 20 '12 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 Jul 20 '12 at 23:28

You must log in to answer this question.

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