34
$\begingroup$

My name is Paweł, I’m a product designer at Stack Exchange. I’m super happy for you, because the process of graduation is about to be concluded! Congratulations to all of you!

New Design

The new design comes with a few perks. It will give you your own unique theme that reflects your topic, culture & community. This will help brand your site as unique, even while you share common elements with other sites that show you are part of a bigger Stack Exchange family.

Design Concept

Pattern

This was one of the toughest site designs to create for me. Why? It was very hard for me to define what Computer Science is and, what is more important, what this site is about. It's not that easy to design something without knowing essence of the topic. It took me long time to understand (better) what Computer Science is and what kind of problems do you all solve on this site.

My first thought was "Let's go with some computer icon and we're good". Well, that was dumb and I don't have to explain why... Then I came up with bulb with 1s and 0s. Because I thought that Computer Science is about 1s and 0s. About TRUE vs FALSE. About Inputs & Outputs. But I was wrong. It was a cliché. Some of you explained me that very well on your chat (thank you for that and for all collaboration!).

So yes, I was trying to better understand Computer Science and, thanks to your Community, I discovered it’s hard to explain. It's not only about PCs and programming; the definition is more abstract. I realized that computer science is mix of other different fields. For some of you it's a mix of math, computers & physics. For some of you it's a mix of hacking, math, statistics and machines learning. So the definition of CS was dependent on whom I asked.

The idea was simple: create something that fits Your Community - the community of extremely intelligent and diverse people. I was very impressed reading some of the questions and answers on your site. Knowledge you have on different fields and aspects is astonishing. Honestly - it was super hard to create a design for this topic, but thanks to your community my task became much easier. Thank you again for that!

So here's what this logo is about:

  • Connection - CS has something in common with many fields. It connects Math with Physics. It connects Machine Learning with real life. CS is used in biomechanics, biology and many other fields.
  • Abstract thinking - I found out that you treat Computer Science in a very abstract way trying to think out-of-the-box. I think this is huge value of your community.
  • Rooted trees - something that one of your users came up with (stolen idea :)).

A couple of days ago I came up with some different logo. But after I saw this proposal I thought to myself "It's perfect". I got rid of my initial concept and used your community proposal (tweaking it slightly). Why? Well, it represents all the ideas I've had in my mind. It's also way simpler than what I was thinking about. But what's most important - it's your proposal, basically you made this design and you came up with the idea (I've just moved few pixels around). And that's what makes it so special in my opinion.

So here it is!

Logo

Color Scheme

Color Scheme

SWAG

Here are some examples of how it can be used elsewhere to strengthen the visual identity.

T-SHIRTS!!!!

Mouse Pads

Stickers

Overall Site Design

Here’s what you were waiting for…

Home

Question

We believe the design and branding work very well for this community. It’s unique and captures the right mood. We’d love to hear your feedback, and if it proposes no major design changes, we’ll launch the new site design very soon.

$\endgroup$
28
  • 6
    $\begingroup$ Very pretty, thank you! \o/ $\endgroup$
    – Raphael Mod
    Commented Jan 20, 2016 at 11:20
  • $\begingroup$ One question: will there be a community-ad-format ... thing or will we have to hack that one for ourselves? That did not go so well before; but we needed a story because we had no branding. Should we come up with a slogan? (If that is at all possible, oh dear.) $\endgroup$
    – Raphael Mod
    Commented Jan 20, 2016 at 11:35
  • $\begingroup$ @Raphael as far as I know this is something that Community usualy come up with. Probably nothing I can help with. But you may want to confirm that with someone else as well. $\endgroup$
    – Paweł Staff
    Commented Jan 20, 2016 at 12:53
  • $\begingroup$ Thanks. Looks great! :) $\endgroup$
    – Kaveh
    Commented Jan 20, 2016 at 19:07
  • 2
    $\begingroup$ ps: just me two cents on the essence of computer science: it is the science of pragmatic/algorithmic approach to problems. It is more of a mindset than a topic and that mindset can be applied to math, physics, economics, biology, linguistics, psychology, neurosciences, ... See also Scott's talk The Future of Computer Science, and Why Every Other Major Sucks By Comparison and answers to Inspirational talk for final year high school pupils. $\endgroup$
    – Kaveh
    Commented Jan 20, 2016 at 19:11
  • $\begingroup$ thx for the work. dont have a big objection, assume that tweaking time is limited, esp given that youve come up with only a single design for approval. but how about this? it would be cool if the abstract patterns spelt out the letters CS. possibly a recurring pattern. $\endgroup$
    – vzn
    Commented Jan 20, 2016 at 19:46
  • $\begingroup$ 1. I like the colors a lot. $\endgroup$
    – Kaveh
    Commented Jan 20, 2016 at 21:10
  • $\begingroup$ 2. I don't like using different fonts for computer and science. I guess the point is to emphasize "science" and it may make sense from outside computer science but for people inside computer science I don't think it does. It just looks strange. $\endgroup$
    – Kaveh
    Commented Jan 20, 2016 at 21:11
  • $\begingroup$ 3. I like the centered titles. But would be good to check how it looks for longer titles (which take over a line). $\endgroup$
    – Kaveh
    Commented Jan 20, 2016 at 21:19
  • $\begingroup$ 5. I would love if the pattern somehow was based on CS tiles but no idea of how to do that. Maybe put C as a half circle and S as two half circles? I don't know. $\endgroup$
    – Kaveh
    Commented Jan 20, 2016 at 21:24
  • 2
    $\begingroup$ i think font issue is very subjective. but i hear what you're sayin and if there will be more criticism regarding the font i will think about changing it / improving.. centered title is less subjective, but i'm gonna give it a try and see how it looks with different titles when coding. about point 5.. the idea is cool, but on the other hand letters "CS" have too obvious shape and those would be easily visible on pattern tile which means that in whole header you gonna see it few times and that might be visually overwhelming in my opinion. $\endgroup$
    – Paweł Staff
    Commented Jan 21, 2016 at 8:58
  • 4
    $\begingroup$ I really like your design. You did an awesome job on a difficult subject. One nitpick: guess what — I suspect tags could use a little more contrast, though I can't really tell the final appearance from the screenshots. $\endgroup$
    – Gilles 'SO- stop being evil' Mod
    Commented Jan 24, 2016 at 12:24
  • 1
    $\begingroup$ Yo I want to buy that tshirt :O $\endgroup$
    – Nicholas Mancuso
    Commented Jan 28, 2016 at 22:30
  • 1
    $\begingroup$ I feel there is something wired about bold: Here is an example to see how bold looks in comments and whether it looks fine or not. My guess is that the font is too thick for the size which makes it difficult for eye to read letters, e.g. look at the letters "e" and "a". $\endgroup$
    – Kaveh
    Commented Feb 4, 2016 at 4:47
  • 1
    $\begingroup$ @Raphael, I posted it here by mistake, it should have been posted on the newer one. I am not sure if it is really a bug or an issue at all or if it is just me. If I see that others also have an issue then I will file it as a bug. (I don't think I use bold much, 6 bold sentences in comments posted over a year is not that much, I just use it when something really needs to be emphasized plus the one above which was a UI experiment. :) $\endgroup$
    – Kaveh
    Commented Feb 5, 2016 at 1:24

5 Answers 5

Reset to default
12
$\begingroup$

Some thoughts.

Forms

I like the background. It's abstract yet aesthetic (I guess 70's wallpapers are back?). I for one can believe to see remnants of a (very complicated) Venn diagram, which I appreciate.

The logo I like for all the reasons stated over at Jukka's proposal. It's clean, it's iconic, it's CS, and it symbolizes many qualities of CS. The gaps add a nice touch.
(There's this part of me that wants the logo to be symmetric, but I know that guy's got problems. ;) )

I appreciate that "science" is lettered more strongly than "computer" very much. Great idea.

The logo font is ... very ordinary. I do not actively dislike, but it also does not add anything to the design.

Colors

I'm not the biggest fan of cyan (I think I'd prefer more blue, less green), but that's a matter of taste. The combination of colors is pleasing.

The color "impression" is very different from SO and programmers.SE, so that is a plus. Among the science sites, only biology.SE comes close and I think there's no confusion between us and them. In other words, recognizability is given -- great!

CSS

The details will have to be checked when it's live (the accepted-green seems a bit bright). That you designers have not yet made tech build a shareable live-preview for you guys is puzzling!

One thing: centered question titles are really awkward.

Second thing: the number of answers is smaller than the number of votes and views, so alignment looks really weird (esp. the third question in the screenshot).

Fonts

The main text font looks fine to me. I'll have to "use" it for a while to form an opinion about readability.

One thing to keep in mind how it works together with MathJax, which most of our posts use. Apparently, mistakes were made on physics.SE on that front, something we probably don't want to repeat.
I'm not saying that the proposed font does not work well with (the default font of) MathJax -- it's definitely not as bad as the screenshot on meta.physics.SE! -- but it's hard to say much from the given sample. Maybe some consulting with an expert in that area is in order (if it did not happen already). (A quick googling got me this.) Just trying to say that the pairing of fonts is something to be aware of.

I'm torn about the use of a proportional font for tags. I think a serif font would work well or better for our site since "teletype" is associated with code to some extent; on the other hand, it can be a tip of the hat towards our more applied parts. More opinions from the community are needed, imho.

Badge icons

I can not quite tell what they are supposed to be; a circle with a hole is not very specific. The nodes from the logo? Well, okay. I guess they are not something I have strong negative feelings about, and I don't have a better idea right now, but I feel like there may be something better out there, in the vague cloud of ideas.

Okay, one idea: take up the tree metaphor in that gold badges are root nodes, silver badges inner nodes, and bronze badges are leaves.

mockup for badges

I think I drew the lines too long; they should probably be only stubs, hinting at the edges.

Process

Thank you for caring. Thank you for asking. Thank you for listening.

This can not be stressed enough in my estimation. I had daymares about this thread popping up out of nowhere with a horrible cliché thing (before you visited our chat). You made a simple mod very happy. Thank you!

And, of course, thanks for the good work. I hope there will be broad approval in the community so that we/you can move on!

$\endgroup$
10
  • $\begingroup$ PATTERN: yes i wanted to have some venn's diagram metaphor here. Besides I wanted this to be more original than plain color. FONT: not sure, maybe it's matter of taste. I really wanted this to be simple & geometric. Maybe it's wrong path, but I do like it.. We will see.. COLORS: reason why we picked different color than blue is because we see blue color everywhere. Tons of SE sites use blue (not my fault ;)). That's why I picked something blue-ish, but not blue. I think it still looks "technological" but also original. CENTERED TITLE: yes, that's not something usual.. let's see users reaction. $\endgroup$
    – Paweł Staff
    Commented Jan 20, 2016 at 11:40
  • $\begingroup$ @Paweł FONT: Taste is definitely involved. If you have alternatives in mind, may we see them? (Simple and geometric are fine by me, per se.) COLORS: I get it. :) (I wonder why blue is associated with tech? Huh.) $\endgroup$
    – Raphael Mod
    Commented Jan 20, 2016 at 11:43
  • $\begingroup$ @Paweł I added some observations/thoughts. $\endgroup$
    – Raphael Mod
    Commented Jan 20, 2016 at 15:40
  • 7
    $\begingroup$ I simply love your badge icons idea. $\endgroup$
    – Oliphaunt
    Commented Jan 20, 2016 at 16:44
  • $\begingroup$ thanks! i think badges idea is just great! i will see if we can do that (we do have some limitations regarding the size) but i think its gonna be fine:) again, really great idea! $\endgroup$
    – Paweł Staff
    Commented Jan 20, 2016 at 19:26
  • 1
    $\begingroup$ I agree that on the top page the answers# and the votes# are misaligned. This should be fixed. Otherwise the design looks good. $\endgroup$
    – A.Schulz
    Commented Jan 21, 2016 at 12:09
  • $\begingroup$ I have to confess, part of me wants the font to be Computer Modern Sans Serif, but only because of its historical importance, not because it would actually work. It would be appropriate to use a Knuth-designed font, don't you think? $\endgroup$
    – Pseudonym Mod
    Commented Jan 22, 2016 at 0:41
  • $\begingroup$ @Pseudonym Agreed, but I don't think he ever designed a font for screen reading, or did he? Or a sans-serif font made for text, for that matter; those there are were designed for headlines, iirc. (Aside: Latin Modern Sans would be the better choice, now wouldn't it?) $\endgroup$
    – Raphael Mod
    Commented Jan 22, 2016 at 13:24
  • 4
    $\begingroup$ +1 for no centered titles $\endgroup$
    – Ran G.
    Commented Jan 23, 2016 at 0:02
  • 2
    $\begingroup$ I'd also make the question title color darker (i.e., similar to the background of "ask quesiton" button). But I know nothing about design and colors. I can barely choose which shirt fits to the pants. $\endgroup$
    – Ran G.
    Commented Jan 23, 2016 at 0:04
10
$\begingroup$

Voting Buttons

Many sites have voting buttons that complement the overall site identity. Some notable examples are Academia, Arquade, and Christianity. I feel site identity would be strengthened by slightly altering the voting buttons (without going overboard) to match the theme of trees and nodes. If you feel it won't be confusing, you can try something like this:

enter image description here

Titles

Titles should not be centered on the page or be bolded. The color should be slightly darkened and desaturated so they match the question. When I first saw the question title it was not immediately obvious that it was associated with the question.

Badges

Decide what they are and make it obvious. Right now they look like the radio buttons:

enter image description here

Continue with the trees/nodes identity as long as it's obvious, or to something else completely. Radio buttons don't particularly communicate "computer science."

Overall

In general the main logo, colors, and design look clean and professional. Good job.

$\endgroup$
3
  • $\begingroup$ I thought about the voting buttons as well. They are nothing I feel strongly about. Your proposal is as good as it gets, I guess; I'd have to see them in context. I'd rather have plain arrows than the site look too "busy". That said, while we're at it: the "favorite" star could be a star. $\endgroup$
    – Raphael Mod
    Commented Jan 28, 2016 at 22:10
  • 1
    $\begingroup$ @Raphael To make the voting buttons less busy the lines could be made thicker. They don't have to look exactly like a graph but rather simply be reminiscent. $\endgroup$
    – intcreator
    Commented Jan 28, 2016 at 22:25
  • 3
    $\begingroup$ i really like that idea of voting icons! let's go with that! $\endgroup$
    – Paweł Staff
    Commented Jan 29, 2016 at 10:07
9
$\begingroup$

I never would have thought I'd say this, but I really like the colour scheme. I never would have chosen it, but it reminded me that blue-green is important in computing history. If you didn't want your 1960s computing equipment to be grey, blue-green was the most popular other colour that you could get it in.

Univac 1232

PDP-1 System 360

Interdata 70

And, of course, let's not forget...

ACM Computing Surveys

$\endgroup$
2
$\begingroup$

Thank you very much for your efforts. I'm so excited the site has reached this phase!

I feel like such a spoil-sport for posting this, but despite working with graphs/trees daily, upon first seeing the logo my association was with chemistry or physics. It looks a bit like an atomic model, like the Atomium building in Belgium, perhaps even like a distillation apparatus. Upon seeing the logo, I just can't get these images out of my head.

Even though I really like the logo, is there any way it can be made more tree-y? Perhaps a concentric circle can be cut out of one or two of the nodes, indicating some information is stored there (e.g. red-black tree). That might make the logo too complicated, though.

That said, I'd be totally fine with the current logo, just sharing my thoughts.

$\endgroup$
4
  • 3
    $\begingroup$ FWIW, I can't see an atomic model. The angles are all wrong. (Maybe I just haven't seen a matching molecule?) $\endgroup$
    – Raphael Mod
    Commented Jan 21, 2016 at 8:11
  • $\begingroup$ You mean something like oliphaunt.nl/cs-logo.png ? (If so, feel free to include that mockup in your answer.) Oh darn, now I see you suggested the cut-out in just one or two of the nodes. Oh well. $\endgroup$
    – Oliphaunt
    Commented Jan 21, 2016 at 22:23
  • $\begingroup$ This actually looks pretty good to me. Of course, which nodes should have the cut-outs is up for debate. $\endgroup$
    – Oliphaunt
    Commented Jan 22, 2016 at 16:51
  • $\begingroup$ @Oliphaunt Thanks! Myself, I don't care much about the cutouts, but they don't disturb me either. Tom's idea to suggest data could be strengthened by using cutouts of different size, but that may be too much. (One thing to think of: do cutouts work in favicon size?) $\endgroup$
    – Raphael Mod
    Commented Jan 23, 2016 at 7:31
1
$\begingroup$

I think enter image description here looks better than enter image description here.

$\endgroup$
16
  • $\begingroup$ I also prefer right skewed, but in your version this looks like discontinuity - which is not good for logo. $\endgroup$
    – Evil
    Commented Jan 21, 2016 at 4:32
  • $\begingroup$ @EvilJS, I just copied this from Pawel's post and mirrored the logo just for comparision. $\endgroup$
    – Kaveh
    Commented Jan 21, 2016 at 4:34
  • 3
    $\begingroup$ In isolation, I don't care either way. With the site name, the left-skewed version feels like an initial whereas the right-skewed version ... does not. Maybe different vertical alignment can fix the feeling of wrongness. So, at this point, my vote is for keeping Paweł's version. $\endgroup$
    – Raphael Mod
    Commented Jan 21, 2016 at 8:14
  • $\begingroup$ I also thought I preferred the right-skewed version of the logo and in isolation I believe I still do. But I do agree that this feels wrong presented like this, together with the site name. $\endgroup$
    – Oliphaunt
    Commented Jan 21, 2016 at 22:15
  • 1
    $\begingroup$ @Raphael, I don't see how it looks like an initial but in any case that can be fixed by a little bit more space between the logo and the text. $\endgroup$
    – Kaveh
    Commented Jan 22, 2016 at 2:31
  • 1
    $\begingroup$ I thought I liked the left skewed version, but now I've been staring at these for 5 minutes and I don't know what I think anymore. Thanks. ;P $\endgroup$
    – Luke Mathieson
    Commented Jan 22, 2016 at 3:06
  • $\begingroup$ @Luke, you are welcome. ;p $\endgroup$
    – Kaveh
    Commented Jan 22, 2016 at 4:07
  • 3
    $\begingroup$ Huh. Why remove the version that shows the logo in context? That's the use case for the logo, shown on every page! You may want to show both, but definitely show your proposal with the title text! $\endgroup$
    – Raphael Mod
    Commented Jan 22, 2016 at 13:22
  • 1
    $\begingroup$ @Raphael, the issue you brought up (assuming it is the case, which I don't see) can be solved by spacing. It is also possible to move the logo to the other side, etc. The point is to compare the logo version themselves first. If more people agree that disagree then we can look into it more carefully in various contexts and how to combine it with "Computer Science". $\endgroup$
    – Kaveh
    Commented Jan 22, 2016 at 17:40
  • $\begingroup$ I feel the original layout fits better with the text, but maybe seeing both (as Raphael suggest) will change my mind. $\endgroup$
    – Ran G.
    Commented Jan 23, 2016 at 0:01
  • $\begingroup$ @Kaveh Well, some feedback in context was negative, then you removed the context. I don't appreciate the move. Anyway, your prerogative. $\endgroup$
    – Raphael Mod
    Commented Jan 23, 2016 at 7:32
  • 1
    $\begingroup$ @Raphael, neither I do yours. I explained why I did what I did. You expressed your opinion a couple of times, give it a rest. Also undelete my comment you deleted. You should not use your mod position or powers to advance your opinions. $\endgroup$
    – Kaveh
    Commented Jan 23, 2016 at 13:30
  • 1
    $\begingroup$ @Kaveh No comment of yours was deleted on this answer. One comment of yours was deleted on the question, because it was subsumed by your answer. In the future, other comments may be deleted — comments are meant to be temporary. To suggest modifications to the proposed design, please post an answer or edit your existing answer. Please do not throw empty accusations around. Be nice. $\endgroup$
    – Gilles 'SO- stop being evil' Mod
    Commented Jan 24, 2016 at 12:15
  • 2
    $\begingroup$ @Gilles, it is clear which comment I was referring to. It is not an empty accusation. This is meta not the main site. I am pretty sure he would not delete my comment if he didn't disagreed with it. If it is not clear that on meta this should not happen then I will open a discussion to clarify a guideline on when mod powers should be used and when they should not be used. $\endgroup$
    – Kaveh
    Commented Jan 24, 2016 at 16:13
  • 1
    $\begingroup$ @Gilles, it is also not good if a mod uses his powers to edit comments after they have been replied to to improve his position. It seems to me that he also edited his comment above after I replied. I think these are really bad uses of mod powers and diminish trust. $\endgroup$
    – Kaveh
    Commented Jan 24, 2016 at 16:22

You must log in to answer this question.

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