Hi all. I'm Jin, and I'll be working 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. However, all sites will share quite a bit of common elements so they feel like they're part of the Stack Exchange family.

First, have a great holiday season, and early congratulations on your upcoming launch out of beta!

I've been working on the design for the Unix and Linux site. I've looked at many Unix/Linux/*nix related sites for visual inspirations. I think a clean and classy design that focuses on readability and clarity would work very well for this site. Of course, this doesn't mean it needs to be boring. I've always loved the designs of computer book covers over the years. I feel a design that resembles some of those well respected books would give the site more liveliness and an authoritative look.

Here are the designs I came up with: (click to see full res versions)

homepage | question view

For the header, I picked a drawing of Little Penguin (Eudyptula minor), the species Tux was based on. I think a combination of hand-drawn illustration and serif logo type works well for the classy and clean theme of the site.

UPDATE

I hope you all had a wonderful holiday break. I have tweaked the design based on your constructive feedback. The header section has been reworked. I have included most of the mascots in the header, thanks to @moberley for providing the links to them. I have read the copyright info on these images, I think we're OK to use them with attribution. All, except for the BSD "Beastie" Demon.

From Wiki:

I prefer that the BSD Daemon be used in the context of BSD software. That is the reason that I carefully control my copyright of the BSD Daemon image to ensure that the image is not used inappropriately. I have agreed to allow the small image to appear on Wikipedia but not the larger ones. It is also why I am not going to put a creative commons copyright on it.

For GNU and Tux, I have picked a more cutesy version of them, found here.

Hexley image is from here. Interesting trivia about Hexley:

Once my platypus was chosen someone suggested that we use "Hexley" as the name of the new mascot since Darwin's assistant was named Hexley. It turns out we were wrong and the person we were referring to was actually Thomas Henry Huxley. Huxley was not Darwin's assistant but was a prominent English biologist in his own right.

Puffy the OpenBSD fish found here

Here are the designs: (click to see the full res versions)

alt text


alt text

I'm still going with the original design goal, which is to have the site clean and clear. The new header gives the site more liveliness and is more inclusive to other OSes, as opposed to just Linux. For navigation, tags, badges and section header font, I used Dejavu Sans Mono, which is more representative of Unix and Linux OSes. I prefer not to use a monospace type for the actual question headers(and definitely not body text) because it would make the site harder to read.

Back to the header, I tried several different sizes of the mascot images, and I've come to the conclusion that a small size works better. It's visible enough to give the site a whimsical feel, while not being distracting. I think it's a good balance.

I kept the darker bar background for the top nav, because with the new site header treatment, I feel a more prominent topnav bar gives a clear separation of the header from the body content. I gave the top bar a faint "scanline" effect, and added "/" before the link text to make it a bit "computery."

Please let me know what you think.

share
    
I love the illustration but is there a reason why it is slightly transparent? It would be nicer if it were entirely opaque I think –  Pekka 웃 Dec 25 '10 at 11:30
    
In general: I like the idea of taking inspirations from that well-known series of books, and it is beautifully executed. If the community agrees with the basic idea, this may be a winner already. –  Pekka 웃 Dec 25 '10 at 11:37
4  
But on to the really important questions: What will the <kbd> tag look like on Unix.SE? –  Pekka 웃 Dec 25 '10 at 11:54
    
@Pekka, what about the kbd tag? I was going to have it was the default Stackoverflow style. Should it look special for the Unix site? –  Jin Dec 27 '10 at 19:38
    
@Jin no, no, just joking. Background –  Pekka 웃 Dec 27 '10 at 19:40
    
I think I preferred the navigation bar from the first draft. I feel the scanline effect makes it a bit too "noisy". –  sepp2k Jan 2 '11 at 22:47
    
Would have been cleaner if you made this a different Question (like you did with programmers.SE). Now it's going to be all mixed up. –  Tshepang Jan 3 '11 at 11:44
    
@Tshepang I didn't start a new post for the 2nd version because it isn't a total revamp like what happened with Programmers.se. –  Jin Jan 3 '11 at 11:53
1  
Would help regardless, because now a lot of the Answers below refer to the older design. –  Tshepang Jan 3 '11 at 11:56
    
I'll put my stamp on the latest rev ;) –  jcolebrand Jan 3 '11 at 17:06
    
When will the new design be released? –  Peter Smit Jan 12 '11 at 10:57
comments disabled on deleted / locked posts

locked by Michael Mrozek Jan 14 '11 at 2:47

16 Answers

Answer updated for 2011-01-02 21:16 design

All right, now that's a nice and original design.

Another mascot that might fit is Minix 3. I don't know if it can be licensed.

I like the /Questions. Though it's a little jarring as the URL it leads to is /questions (unix is somewhat famous for having case sensitive file names). And I think there should be more space between /Ask Question and the others, like on most other SE sites.

There are two minor regressions in my opinion. I preferred the original voting arrows. And I find the color scheme on the front page too contrasted now, with the dark blue titles and the light beige(?) subtitle.

One thing I didn't mention the first time round is that I don't like the code font. For a site where code is often relevant, I'd prefer a straighter font (both in the sense of less curvy and in the sense of more serious-looking), like the one used on the trilogy. (Well, whatever my browser is using on the Trilogy and betas.)

On reflection I think I agree the mascots don't belong on the title. I like Lazer's suggestion of having them near the title, à la Area 51.

share
    
thanks. The header section was definitely inspired by O'Reilly cover, the rest of the design is simply aimed for whitespace, high readability found in most books. However, I'm re-evaluating if I should make the design too close to O'Reilly's look –  Jin Dec 27 '10 at 19:36
    
I couldn't find licensing info for the MINIX 3 raccoon, but here is the raccoon's page on the MINIX 3 Wiki. wiki.minix3.org/en/MinixMascot –  moberley Jan 4 '11 at 14:42
add comment

I do not like the UNIX AND LINUX logo at the top at all.

  • Please do not put all those mascots there. They interfere way too much with the logo. If we must have the mascots, let it be like Area51 logo - we have satellites, they just do not interfere with the Area51 logo text.

  • If I just compare the logos of the two designs for this site, I like the first one way better. Way neat.

share
    
Yeah. Looking at this 2nd draft, I'll take the first one anytime, despite its dull look. –  Tshepang Jan 9 '11 at 2:48
add comment

first draft (outdated)

Maybe I'll get used to it, and it's far better that the sketchy Beta look, but maybe it can be a little more alive/brighter (I never liked those book cover designs; too dull).

share
    
I'm still tweaking the final design. Thanks for the input. –  Jin Dec 27 '10 at 19:37
add comment

first draft (outdated)

I'm not so much of a design person but here I think:

  • The penguin is kinda ugly if you ask me. I would love cartoon style... but that's not too important.
  • We should not take it for granted that everybody is here because of Linux. Linux is very popular and I love it, but the point is to stay open and let's not leave anyone behind (that's what being free is all about, isn't it?).
  • The tags are not eye-catching enough, maybe a little background will help. I would also love it to be in monospaced font [like-this]
  • I agree with Tshebang that the colors look a bit dull. I also don't want reader to have an impression that Unix geeks are boring. If possible please consider the blueish in the lower left corner of this photo. Also, the pinkish for the "Top Questions" part doesn't really fit with other parts...

I hope you are not getting mad at me :) Maybe we can somehow get the mascots of different Unix derivatives (Linux, BSD and maybe OSX?) to gather around?

share
add comment

Looks great.

I agree that an penguin is too Linux biased but I like the general look and idea. How about a random OS mascot in the same kind of style every time someone visits the site? This avoids both the clutter of having them all there and picking a favorite.

A minor note is that most of the O'Reilly books rarely use sans-serif fonts. The two places I see them is in the name O'Reilly and the titles of sections. This is not to say that you need to change anything but you may wait to play with that a bit if you are going for the O'Reilly look and feel. Personally I 'felt' the difference as soon as I saw your design but it took me a second to see what was actually different. Here is a link to compare with http://oreilly.com/catalog/9780596158118/preview#preview

If you are going for a slightly different but kind of similar look and feel you may want to consider @phunehehe 's idea of a mono-space font. Nothing reminds me of *nix more then the command line and nothing reminds me of the command line more then a monospace font.

share
1  
I like the idea of the random mascots. –  phunehehe Jan 1 '11 at 15:29
1  
Also in my answer, I just say that I want the tags to be in monospace. I love monospace fonts, but I don't think that's suitable for all text in a web page. –  phunehehe Jan 1 '11 at 15:31
add comment

Overall it looks really nice, but the multi-mascot logo/title is a bit on the cutesy side for me.

If I were to stumble onto this without knowing about the awesomeness of stackexchange, I would assume the site to be yet another n00b hangout -- it reminds of some of the places my son is browsing...
Trying to get all the mascots together will mean giving up any idea of a color scheme, and you will never be inclusive enough: I use OS X, Debian and cygwin, and I can think of questions in regard to all those that would fit here. Maybe the unifying concept is really $ _:)

share
1  
I weirdly like it, although I think it would look good without any mascots too -- do we really need a graphic in the header? –  Michael Mrozek Jan 3 '11 at 5:37
1  
If leaving out the graphics is an option, I think that might be my favorite as well. But I guess there are things like favicon's, etc. where it would look goofy to not have anything. Maybe some graphification of "*nix"... –  Janus Jan 3 '11 at 5:47
    
I asked some people that don't use SE sites frequently; they said "it looks like the website for an elementary school", so it sounds like your notion was accurate –  Michael Mrozek Jan 5 '11 at 4:32
add comment

First Draft Comments

In general I like the design. I really like the san-serif question text font. In fact, I like just about everything for the the design of the questions themselves. I'm a bit worried about the font used for the code tag--I'm not sure will be be very readable when people post longish code segments or error messages.

Like the others I have some reservations about the blue and pink bars and using the penguin.

I'm also not a huge fan of the serif font used in the title, but I'm not sure why I don't like it.

I can't wait to see this up on the site!

Second Draft Comments

Unfortunately, I think I liked the first draft better. Here are some comments:

  • I like the look of the "/"s used in the navigation bar, but do not like the scanline effect.

  • I think that the distro logos interfere too much with the actual title of the site.

  • I think the monospaced font should only be used for the [tags] under the titles of the questions.

Thanks for all the hard work.

share
add comment

first draft (outdated)

(Sorry it took so long for me to leave feedback; I got wrapped up a bit in Christmas-related activities)

Overall I like the design:

Likes

  • The main page question list, particularly the way accepted answers are indicated
  • The format for tags (I also like tags that are prominent, like in the design, but those would probably look strange with the new design)
  • The format for badges; I like the ~ circle a lot. However, the badge counts next to poster names in the question mockup use the old-style circles; is that intentional?
  • The whole question view in the second picture, particularly the voting box

Dislikes

  • The penguin logo. Possibly Tux would be better like Stefan suggested, or some other choice, but that particular logo doesn't seem at all attractive
  • The solid blue navigation bar. I don't care for that particular shade in the first place, but I'm not sure any color will work well there; the bar is too tall compared to the text inside it, and it makes the links look strange. Combined with the animal logo, the large solid color makes me think of O'Reilly books (which, in my opinion, have fairly unattractive covers). Most of the SE designs I like lack backgrounds on the navigation bar (although Cooking is a rare exception)
share
    
Others have voiced concerns about the logo too. I will tweak it. Regarding using Tux and other OS mascots, are we allowed to use them? for copyright reasons of course... –  Jin Dec 27 '10 at 19:40
1  
@Jin Good question; lots of sites seem to get away with it, but I don't know if they do so legally. Gilles had a good point about avoiding specific logos though, since we support lots of different Unix-like OSes –  Michael Mrozek Dec 28 '10 at 0:14
    
I found out that Tux logo is OK to use, with attribution: isc.tamu.edu/~lewing/linux not sure about the others. I'll tweak a design that has no mascots and see how it works out. I still prefer to stick with a clean and simple design for the Unix site. –  Jin Dec 28 '10 at 0:39
    
@Jin Most of the links in my post on the Image We Should Use question have information about licensing and permissions for some of the mascots. meta.unix.stackexchange.com/questions/122/… –  moberley Dec 29 '10 at 18:04
add comment

Unix & Linux site title font looks amateurish. I prefer the one from the first iteration.

share
    
That's my favorite part of the new design; I hated the first version :) –  Michael Mrozek Jan 3 '11 at 17:02
2  
That's funny. I really hate the font in the title. –  Shawn J. Goff Jan 3 '11 at 23:07
    
@Shawn How can you hate a bold, sans-serif font? There's nothing to it –  Michael Mrozek Jan 4 '11 at 6:34
    
@mic It's ugly when it's so large. –  Tshepang Jan 4 '11 at 8:54
    
It's thin and spindly, not thin enough to be classy, though. It might be improved with tighter tracking. –  Shawn J. Goff Jan 4 '11 at 16:49
add comment

First Draft

That's great! I love the look & feel.

My two nitpicks:

  • The pink is a little off.
  • The shape of the voting arrows doesn't look very good.

Second Draft

  • That font is revolting (as a title font).
  • The orange buttons are a bit strange, but that may just be your native widget set on whatever made the screenshot, in that case, it's fine.
  • I like the arrows like this: a wider angle would be even better (possibly about the same angle as on the beta triangles).
  • I preferred the more professional / less whimsical look, but it seems others disagree - I can deal with that.
share
1  
I actually like the arrows :). They are very different from the old style though –  Michael Mrozek Dec 29 '10 at 17:47
2  
I think I'd like greater-than/less-than symbols turned vertical: <> –  Shawn J. Goff Dec 29 '10 at 19:50
add comment

The new font is excellent! The header/navbar looks great now. I don't think the GNU or Tux are recognizable by themselves, but they look good in the header with the other mascots

share
add comment

Re the update:

Nice work!

As said in the chat, I did like the penguin from the initial sketch, but I can understand the reasons for not using it after all.

The title is bound to draw some flak (Along the lines of "Not serious enough" etc.) but I find it absolutely worth defending.

The only thing I think might need some tweaking is the relationship between the mascots and the title. The choice of elements is 100% perfect but the composition feels a bit noisy if watched from a distance. The mascots are interfering with the title's legibility a bit too much IMO. Maybe - I'm not sure - the mascots need to be a bit larger; otherwise, maybe move the three mascots on the right-hand side just a tiny bit away from their respective letters?

I'm 100% happy with everything else.

share
add comment

first draft (outdated)

Jin, the design is awesome. Thank you.

However, I think a real Tux should be considered here. And I know there might be factions within our community who would feed that Tux should not be our only mascot.

Please see Image We Should Use for Something

share
    
What you mean by real Tux? You mean a photograph? –  Tshepang Dec 27 '10 at 5:57
7  
Count me as against a “real Tux” on the home page. –  Gilles Dec 27 '10 at 12:09
2  
+1 for the link to "Image We Should Use for Something" –  phunehehe Dec 27 '10 at 14:22
    
@Tshepang... I meant a reconizable Tux instead of the O'Reilly pengiun. As Gilles explains in his post. –  NixNinja Dec 28 '10 at 10:22
add comment

Looks good. It needs more color to bring out some visual elements, perhaps something from a familiar terminal: ls -C lists items in color, maybe one of those for tag backgrounds.

The page background is also quite pale, http://area51.stackexchange.com does a nice job of using colors and backgrounds, just as an example.

Not everyone will like this, but I'm just putting it out there.

share
    
Yuck, no. Keep the background very light and neutral (ideally white). I don't want to spend more than a few minutes a day on a site with as little contrast as Area 51. –  Gilles Jan 3 '11 at 22:28
    
I don't mean those same colors, but much, much lighter and pastel variations. –  invert Jan 4 '11 at 14:20
add comment

I turn to like the new design, a lot. There are opinions stating that the title looks amateurish, but I don't have any problem with a child-like design. For me, a small improvement would be to make that title completely child-like (the cute mascots do not really fit with the straight font for "Unix & Linux").

Except for that I'm happy now :)

share
1  
I like the mascots, but I would draw the line at a child-like font. There needs to be some seriousness in the balance as well. –  Gilles Jan 3 '11 at 22:30
add comment

I think that UNIX & Linux should be in a monospace font, like you would find in a terminal. In fact I think the design should be terminalesque. I don't like the serif font at all. But then I never like the Serif font anywhere.

also the word search should be replaced with find

share
    
oh, and did I mention anywhere that I still think we should change our name to kernel panic –  xenoterracide Jan 9 '11 at 15:46
1  
I don't like the association unix = terminal = outdated. –  Gilles Jan 9 '11 at 15:59
1  
@Gilles: I don't like the association "terminal = outdated". –  sepp2k Jan 9 '11 at 18:46
add comment

You must log in to answer this question.

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