39
\$\begingroup\$

UPDATE

While I was converting the site to the new framework, I also decided to refresh the design and layout (as several people complained about the logo, the look a bit old now and the fonts used). I'm aiming for a cleaner and more modern look.

I would like you too choose between 2 versions of the logo (I'm also introducing an icon next to the logo like all the other Q/A design):

Version A

We replace the LED look with a modern font easy to read.

image A

Version B

We keep the "LED" look of the logo. Image B

Whether you want to keep the current design or want to see the new one in place, raise your voice!

Once I will have your opinion, the "new" version will be live within a few days.


These tweaks go along with recent updates that were made to Stack Overflow:

  • We are moving the site's CSS to a newly refactored LESS system, so that it's easier for us to fix SE network CSS bugs globally and launch new features in the future.
  • We are updating the graphics to SVG for retina support.
  • We've fixed a LOT of obscure bugs that arose when new features were not thoroughly tested across the entire network.
  • Visually it should "feel" the same as the old site with slight layout and design adjustments.

But more importantly, it will give you access to the new profile!

This update should retro-actively fix most of the old design bugs. Once it goes live, we’ll update this post and if you see any new bugs, or old ones not yet fixed, please post an answer here to let us know!

\$\endgroup\$
  • 3
    \$\begingroup\$ Finally we'll have access to the new profile. Thanks! It takes a few days to get used to it, but when you do, you miss the sites that don't have it. \$\endgroup\$ – Ricardo Sep 17 '15 at 11:56
  • 6
    \$\begingroup\$ I hate to be that guy, but do you have a rough timeline for roll-out? \$\endgroup\$ – W5VO Sep 17 '15 at 20:48
  • 6
    \$\begingroup\$ @W5VO Next week! :) \$\endgroup\$ – Stéphane Sep 18 '15 at 7:17
  • 4
    \$\begingroup\$ Excellent! I was afraid you'd say 6 to 8 weeks. \$\endgroup\$ – Ricardo Sep 18 '15 at 12:59
  • \$\begingroup\$ Aw yessss, that new profile is so beautiful! \$\endgroup\$ – Funkyguy Sep 22 '15 at 21:29
  • 1
    \$\begingroup\$ Will it get rid of Times New Roman or are we still supposed to be writing novels rather than source code? \$\endgroup\$ – Lundin Sep 23 '15 at 9:31
  • 2
    \$\begingroup\$ @StéphaneMartin No, I was rather giving a not too subtle hint that the font for the site is horrible. Where for example Stack Overflow looks modern, clean and readable, this site looks like my first MS Word adventures in the early 90s. Simply changing from Times New Roman to Calibri will probably do wonders. \$\endgroup\$ – Lundin Sep 23 '15 at 9:39
  • 5
    \$\begingroup\$ @Lundin Ha ok. The site will now use Stack Overflow's font stack :) \$\endgroup\$ – Stéphane Sep 23 '15 at 9:40
  • 1
    \$\begingroup\$ Did this go live already? \$\endgroup\$ – Funkyguy Sep 28 '15 at 20:10
  • 2
    \$\begingroup\$ @Funkyguy - I don't think so. All still look the same. I'm afraid we still have 6 to 8 weeks to go. But hardware changes are always more complicated than software ones :D \$\endgroup\$ – Ricardo Sep 29 '15 at 11:59
  • 6
    \$\begingroup\$ We'll probably miss the ICs on the breadboard go... \$\endgroup\$ – Ricardo Sep 30 '15 at 14:08
  • 1
    \$\begingroup\$ ... but the new fonts and overall design look great! \$\endgroup\$ – Ricardo Sep 30 '15 at 14:08
  • 2
    \$\begingroup\$ I'd like to keep the breadboard and ICs...the new design looks a little plain as is. But we definitely need a new font that doesn't vertically scramble numbers! \$\endgroup\$ – Null Sep 30 '15 at 14:48
  • 4
    \$\begingroup\$ Until this question, I never even noticed the number issue. \$\endgroup\$ – Matt Young Sep 30 '15 at 17:22
  • 2
    \$\begingroup\$ the links in the top right are supposed to look like resistor symbols, right? \$\endgroup\$ – endolith Oct 1 '15 at 14:23
39
\$\begingroup\$

This is a suggestion for a different icon instead of that zap with a circle around it you are currently proposing. A real electrical engineering symbol would be better.

I suggest a transistor:

Added

The above was a quick hack using my Eagle symbol for a NPN transistor with a circle slapped around it. The lines can be fattened up and moved around a bit to make the icon scale better to smaller resolutions. I'm assuming SE can handle that. If not, I can give it a shot with Eagle. However, in the end it needs to be a real valid transistor symbol, not some "artist's conception" of one.

Added 2

I made a transistor graphic designed to scale well to small sizes. This was done with my slide making program so there numbers for where everything is placed, and it is relatively easy to tweak.

Here is a high res version, as large as this site shows images in answers:

Here is the same image scaled to about the size of the zap icon in the question:

That looks like it would work well. Again, everything is parametric, so I can tweak this if there is consensus to make it a little fatter, parts larger or smaller, etc.

\$\endgroup\$
  • 1
    \$\begingroup\$ Diode might reduce better. \$\endgroup\$ – Scott Seidman Sep 30 '15 at 16:05
  • 5
    \$\begingroup\$ Definitely. The present icon looks half like a schematic symbol but it is not a standard one. Transistor is perfect. \$\endgroup\$ – Houston Fortney Sep 30 '15 at 17:29
  • 10
    \$\begingroup\$ I strongly agree. The transistor is great. Another symbol could work, too, as long as it's a real symbol :) \$\endgroup\$ – bitsmack Sep 30 '15 at 18:32
  • 4
    \$\begingroup\$ I strongly support this. A real schematic symbol would be best, and Olin's suggestion is a good one. \$\endgroup\$ – Adam Haun Sep 30 '15 at 20:08
  • 1
    \$\begingroup\$ I agree that a transistor might not reduce very well, but I'm not a graphic designer, maybe there are some tricks. +1 for a real symbol though \$\endgroup\$ – Funkyguy Sep 30 '15 at 20:50
  • \$\begingroup\$ Something like this maybe? \$\endgroup\$ – Tom Carpenter Oct 2 '15 at 4:02
  • 1
    \$\begingroup\$ @Olin, I've converted your NPN icon to an SVG File for you. \$\endgroup\$ – Tom Carpenter Oct 2 '15 at 14:16
  • \$\begingroup\$ @Tom: Um, OK, though not sure why you'd do that. If the SE folks want to use my symbol, I figure they can easily convert to whatever format they actually want it in. \$\endgroup\$ – Olin Lathrop Oct 2 '15 at 14:18
  • 3
    \$\begingroup\$ It took all of 5 minutes to do (I was playing with the MOSFET one anyway), and the theory was if you make it easy for them, they are more likely to not go with the funky zigzag icon... \$\endgroup\$ – Tom Carpenter Oct 2 '15 at 17:32
  • \$\begingroup\$ I think the "zap logo" is more modern and good looking. If it's going to be a real engineering icon, I prefer a combination of electronic parts icons, not just a transistor. \$\endgroup\$ – David Refoua Oct 4 '15 at 22:21
  • 7
    \$\begingroup\$ @DRS: The zap makes us look stupid because its not a real symbol, but some non-electronics guy's idea of a electronic symbol. If we had more space, then more parts or a schematic could work, but it was tough enough to get just the single transistor to look good shrunk down the size it will be displayed. There isn't enough resolution for any more detail. \$\endgroup\$ – Olin Lathrop Oct 5 '15 at 10:46
  • \$\begingroup\$ @OlinLathrop Well then, I think it's best if the members come up and agree with a symbol. Transistors are fine, but in my opinion everyone should agree to that. \$\endgroup\$ – David Refoua Oct 6 '15 at 22:15
  • \$\begingroup\$ @DRS: Everyone will never agree, which is why we do such things by votes. \$\endgroup\$ – Olin Lathrop Oct 6 '15 at 22:50
35
\$\begingroup\$

I like Version A - We replace the LED look with a modern font easy to read.

\$\endgroup\$
32
\$\begingroup\$

In terms of an Icon which is a real electrical/electronics symbol, maybe something like this would work - a nice MOSFET symbol. This seems to be the most popular of the three ideas I had

MOSFET Icon

SVG Version

Just for the fun of it, the MOSFET icon also works as a favicon if needed, though I think the current one should be kept, I like the current IC favicon! (Test Page)


I should note these are logos that I have just drawn up myself, feel free to use them if you want - consider them to be public domain. :)


These were the other two that I had thought of, but I think the MOSFET one is the better one.

Thyristor Icon     Diode Icon

SVG Version        SVG Version

\$\endgroup\$
  • 5
    \$\begingroup\$ These are better than the original zigzag icon, but is there a reason for them to be tilted to the side? In a good schematic, they would be vertically aligned (Rules and guidelines for drawing good schematics). \$\endgroup\$ – Ricardo Oct 2 '15 at 11:22
  • 2
    \$\begingroup\$ Personally I like them tilted from a style point of view even though of course you wouldn't put them schematic that way. I take it these were a few you drew Tom? It might be worth a note that you're OK with SE using them and they're your work etc. \$\endgroup\$ – PeterJ Oct 2 '15 at 11:43
  • \$\begingroup\$ Yep, these are ones I drew up quickly. @Ricardo The tilt was to try and fit in with the style of the zigzag one, but could easily be removed (the top two are tilted by 30* and the bottom one by 20*). \$\endgroup\$ – Tom Carpenter Oct 2 '15 at 13:53
  • \$\begingroup\$ Ok, got it! While I still prefer the right-angle versions, this gives folks more options to choose from, along the lines of having a real schematic symbol. Good work! \$\endgroup\$ – Ricardo Oct 2 '15 at 14:10
  • 1
    \$\begingroup\$ I don't like the tilt, but they'd be good icons without the tilt. Personally, I'm not a fan of the diode since we already have diodes for the vote buttons, but I like the MOSFET. I prefer Olin's BJT but a MOSFET would be a good icon, too. \$\endgroup\$ – Null Oct 2 '15 at 15:03
  • 3
    \$\begingroup\$ @Null I think certainly the MOSFET looks better without a tilt. \$\endgroup\$ – Tom Carpenter Oct 2 '15 at 15:08
  • 2
    \$\begingroup\$ Yeah, that looks cool now. Good work! \$\endgroup\$ – Null Oct 2 '15 at 15:12
  • 4
    \$\begingroup\$ That FET is perfect now that it isn't tilted \$\endgroup\$ – Funkyguy Oct 2 '15 at 17:31
  • 5
    \$\begingroup\$ The straight MOSFET has my vote! But not wanting the icon tilted make us (more) nerds? I wonder what normal people think of us :D \$\endgroup\$ – Ricardo Oct 2 '15 at 18:20
  • 1
    \$\begingroup\$ +1 for the MOSFET. \$\endgroup\$ – Greg d'Eon Oct 3 '15 at 21:03
  • 2
    \$\begingroup\$ The Diode ones are more cool. Remember, the more simpler a design is, the better it will look. \$\endgroup\$ – David Refoua Oct 4 '15 at 22:22
  • \$\begingroup\$ I very much like the idea of using a MOSFET for the logo. However, I follow Horowitz and Hill (Art of Electronics), I don't like MOSFET symbols which carry so little information that I can't tell whether it is P-Channel or N-Channel. \$\endgroup\$ – gbulmer Oct 5 '15 at 16:17
  • \$\begingroup\$ @gbulmer It's actually the digital symbol for an enhancement N-Channel symbol, its clear that it's a MOSFET it is without being too busy. You can add an arrow to make it one or the other - or even merge the gate to make a FET symbol. I worry it would start looking too busy and not scale well to small screens. \$\endgroup\$ – Tom Carpenter Oct 5 '15 at 17:07
  • \$\begingroup\$ @TomCarpenter - As you say, one could add an arrow and make it N or P-Channel, hence that one isn't "actually ... an enhancement N-Channel symbol". I quite like The Art of Electronics v3 MOSFET symbols with the asymmetric gate, I think partly because it looks less like a near-relative of a BJT. Still, your MOSFET is much better than a symbol which means nothing, or looks like a lightening strike or hazard warning, or a BJT, or a diode. IMHO massive quantities of cheap MOSFETs are what revolutionised the world, and the logo could celebrate that :-) \$\endgroup\$ – gbulmer Oct 5 '15 at 17:24
  • \$\begingroup\$ I like the MOSFET better than the BJT also. \$\endgroup\$ – tcrosley Oct 6 '15 at 7:31
19
\$\begingroup\$

A or B doesn't matter to me, but I don't like that zigzag icon.

\$\endgroup\$
  • 3
    \$\begingroup\$ Yes, the zig-zag icon doesn't look like anything, i.e. we don't know what electrical schematic components look like, which seems like a 'bad message'. Also it does look a bit like something being hit by lightening, or dangerous. Which also seems like a 'bad message'; it is not 'jokey' enough for that to seem friendly or welcoming. \$\endgroup\$ – gbulmer Oct 3 '15 at 10:59
18
\$\begingroup\$

Whatever else you do, please please give us a font where the digits aren't all scrambled vertically!

For reference, here is what they currently look like: 0123456789. Yucc!

In case the font gets changed, here's a screen shot showing what it looked like in IE on 30 Sep 2015 (again, yucc):

\$\endgroup\$
  • 5
    \$\begingroup\$ I can tell you that they will be totally fine :) \$\endgroup\$ – Stéphane Sep 30 '15 at 14:37
  • \$\begingroup\$ @StéphaneMartin Thank you! Finally! I've been avoiding it by enclosing numbers in \$ for LaTeX formatting. \$\endgroup\$ – Null Sep 30 '15 at 14:50
  • 6
    \$\begingroup\$ I thought that was intentional, to make them look like a sine wave enveloped by a step with a slow rise time. \$\endgroup\$ – Scott Seidman Sep 30 '15 at 16:05
  • 1
    \$\begingroup\$ 1234567890 done \$\endgroup\$ – Passerby Oct 6 '15 at 10:30
10
\$\begingroup\$

A few things that should be considered in a new font:

  • make 1lI all look distinct
  • make O0o hard to mix up

I like Olins suggestion, though I would prefer a mosfet symbol. This makes it more recognizable for people that have at least a bit background, but harder for people that have none at all. With the "zap" symbol I would be afraid people ask anything about stuff that electricity can flow through...

I did like the fact that the questions etc. links are DIP packages, although these are a bit antiquated. Maybe we can find something similar that reflects current state of the art technology? Something that is simple but looks like TQFN? Or something entirely different that screams "bleeding edge electronic component"? The logo on http://stackexchange.com/sites#traffic already looks much more modern, maybe something along those lines?

\$\endgroup\$
  • \$\begingroup\$ This makes it more recognizable for people that have at least a bit background, but harder for people that have none at all. Please explain your logic. \$\endgroup\$ – Matt Young Sep 30 '15 at 20:14
  • 1
    \$\begingroup\$ @MattYoung: Prior research. If you did it, then you have seen that symbol. If you didn't, then you need to do it before you post it here. \$\endgroup\$ – PlasmaHH Sep 30 '15 at 20:15
  • 2
    \$\begingroup\$ clearly differentiating electrical engineering from "electronics" ("how do I change the channel on my TV?") is a very good thing \$\endgroup\$ – endolith Oct 1 '15 at 14:18
6
\$\begingroup\$

The vast majority of the site is text.

I believe their is research which indicates that serif faces are easier to read for bulk text than sans serif faces.

Sans Serif is good for titles and labels.

So the two examples both work for me, but don't actually illustrate enough of the new look to make a decision.

EDIT: The example doesn't show the 'All Questions' view which includes a line of text from the question. I don't think that is improved on the other stack exchange sites by making it sans serif. However, I'm not going to be as sad about that as much as my sadness if you change to sans serif for body text in questions and answers.

There are people for whom 'looking tidy' is more important than easy to read or use. There are also people who equate 'modern' with better, and 'modern' with sans serif. I am not one of them.

IMHO you have a horrific job, 'everyone is an expert'.

I don't like the sans serif font for body text on e.g. the Arduino stackexchange. I do like the question titles in sans serif.

San serif titles, serif body text looks pretty good.

For an example, look at Horowitz and Hill's "The Art of Electronics"

I like reading that book. It is easy to read and easy to navigate. When you look closely, you'll see that it is set with two different faces, and the subtle difference helps to structure the text, while not being too 'shouty'.

An argument for sans serif because answers might contain code seems weak.
There is the code markup, which is easy to find and use. So IMHO, that is a non issue.

The logo
This should be simple and bold, but preferably look like something 'meaningful'.

So not a zig-zag thing, which looks like an attempt to be 'cool' but without working the idea through to illustrate meaning. It looks more like a component being hit by lightening, or a warning symbol. Neither of which seems positive or welcoming.

It could be a real schematic symbol or illustration of electronics. I would not recommend a photograph of electronics as being not abstract enough, too 'busy', and may end up being too specific.

I suspect most new arrivals are not electrical engineers, so a 'Fritzing'-like illustration might be more welcoming and friendly than an electrical schematic symbol. So something as simple as colour coded resistor and LED 'Fritzing' illustration might work.

On the other hand, a simple schematic illustrating power and a load, might encourage people to illustrate their questions, and give us the important information :)

I would probably not use a BJT.

IMHO a lot of the ubiquity of electronics is driven by humanities ability to make lots of MOSFETs very cheaply. Hence that seems relevant. IMHO, other keys are SMD and PCBs. I think PCBs have been 'done to death' on other sites already though.

Edit:
If you use a MOSFET, please consider using a useful, or 'proper' symbol; like Horowitz and Hill "The Art of Electronics", I don't like MOSFETs which carry so little information that I can't tell whether it is P-Channel or N-Channel. However, IMHO that is a small detail.

Please try to avoid creating a taller logo and buttons than the current one. I like to have the maximum useful information in a window without needing to scroll. I quite like your new design with logo and button on the same 'line', as long as I don't have to scroll right to get at the important 'Questions' button.

Vertically Scrambled numbers ("testing, testing 1234567890")
I believe the typographic intent for having numbers have different height is to aid readability. There is lots of evidence that ALL UPPER CASE, or single height, is much harder to read than Mixed case, or even all lower case. AFAIK, this is wired into human visual systems, our eyes look at outlines, where UPPER CASE has very little information to help recognise the word, where as lower case often has more, with ascenders above the average height and descenders below the line.

Also, the slight dip below the base line of the digits was intended to enhance the character so that it gives the impression that it is sitting on the common baseline.

I don't have a problem with digits having slightly different heights and descenders if it makes sequences of digits easier to read. Used tastefully, it can help parse numbers into visual groups, reducing the chances of reading errors. As a contrast, credit cards resort to extra spaces to improve the readability of single height digits in the card numbers.

However, IMHO the font used here seems to have gone a bit too far down with its descenders. Pulled back about 50% might look less jarring. I suppose if people really object, they can use the 'code' or math markup to write numbers, though I would prefer the normal body text font to do a less intrusive job. IMHO good typography should be 'invisible', and other visual clues communicate the 'brand'.

\$\endgroup\$
  • 1
    \$\begingroup\$ I completely agree with you, specially about the logo. Simplicity is Beauty. One thing I'd like to add is to keep the IC and LED style looking for other design parts of the website, like the Reply and Submit Buttons. \$\endgroup\$ – David Refoua Oct 4 '15 at 22:25
3
\$\begingroup\$

I like Version B - We keep the "LED" look of the logo.

\$\endgroup\$
-9
\$\begingroup\$

I really like both versions, logo included, they're beautiful. As for the latter it's a matter of personal tastes, of course and everyone has a clue. (If the picture in it were to change, I'd prefer the diode symbol, which to me symbolizes a typical semiconductor.)

However if this forum is about electrical engineering I find the lightning bolt quite appropriate, i.e. to both electrical and electronics worlds. But then the URL dosen't match. I see two options:

  • change the site domain name electronics.stackexchange.com to match electrical engineering – well, ok, forget about it...
  • set the title to «electrical and electronics engineering»

Just my 2¢.

\$\endgroup\$

You must log in to answer this question.

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