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, thank you for starting the design discussion thread early. I read every suggestion and comment, they were helpful.

For every Stack Exchange site I design, The first thing I do is to come up with a few words that describe what the niche topic is about. The design should capture those words through visual language and invoke the right emotional response. For IT Security, I came up with "protection," "guardian" and "technology." IT Security professionals have been on the front line against malicious cyber acts for a long time. With the recent high profile hacking events, your role is more important than ever.

Logo

There are two commonly used motifs for security: padlock and shield. I feel a shield is a better representation of IT Security. It's not just about locking the door, but also about constantly defending. The shield metaphor is used for a lot of security related sites and software, how can we make our shield be unique and memorable?

Heraldic Shields

I've always been a big fan of the Heraldic designs. I believe a modernized version of the coat of arms treatment is the appropriate approach. It invokes that authoritative and timeless feel.

Logo

Above is the grayscale logo I came up with. I chose the lion because it symbolizes strength and valor. The wings represent swiftness and protection.

The logo is not just used for the website. It's the visual identification this Stack Exchange community. It will be used in other mediums too. For example: social media icons, t-shirt, stickers, flyers, moderator cards etc.

Site Design

IT Security Site Design (click on image above to see the full res version)

Header

Header

Here you can see how the logo is actually implemented on the site. I've added some design elements to it to show the technology aspect. The blue signals(defense) coming out of the emblem intercepting the red signals(attacks) conveys the protection aspect. Also the Tron-ish color scheme and the subtle scan-lines make it more "techie" too.

Color Scheme

Colors

I went with mostly blue shades for the site, with a dark red for accent colors. I feel these colors are fitting for enforcement.

Over all

The content area below the header is fairly clean. I didn't want to over decorate it. After all, people come to the site for its content, I don't think the design should overwhelm it.

I will be posting another screenshot of the individual question page on Friday.

Other Designs

As I mentioned above, the logo will be used for other materials as well. Here are some mockups of how it'd look on a t-shirt and sticker. (note: these are just mockups for now, I may make modifications to them later).

T-shirt

Sticker

Feedback

I'm excited that Security.SE will be graduating soon, so an early congrats from me! Please let me know what you think of the design. I believe it works for the goals I mentioned.

EDIT

(by Iszi)

Jin gave us this preview of the "new" lion, in chat:

enter image description here

Also, he's said: "I'm aiming to launch the site tomorrow afternoon. around 4pm-ish, EST."

http://chat.stackexchange.com/transcript/message/1324190#1324190

  • 4
    This is very nice! I did not think of shield but this is far better than the padlock! I'm totally in! – M'vy Jul 6 '11 at 17:31
  • 4
    Pretty! I suggest that using mixed case for the URL would make it a lot more readable and user friendly (another crucial issue for security): Security.StackExchange.com – nealmcb Jul 6 '11 at 18:18
  • So this is the final logo? – John C Jul 6 '11 at 18:32
  • @JohnC - The logo has been under discussion in the chat room. So far, the only change that has really been proposed and agreed to is for the lion to be "woken up" a bit. As it is, he looks a little tired. – Iszi Jul 6 '11 at 19:26
  • 3
    @Jin your artwork is beautiful. I appreciate you discussing the symbolism of the colors, shapes, and relationships to other motifs. This may be too cliche or it may interfere with the cleanness of your design, but I always pictured some binary ones and zeroes. Maybe you could change to lines into a bit stream? Or maybe a fog of red bits around part of the symbol. – this.josh Jul 6 '11 at 19:51
  • I like the shield as a symbol for confidentiality and integrity. I wish I could think up a symbol for availability. – this.josh Jul 6 '11 at 19:56
  • @this.josh There are a lot of other elements I'd like to use too. 0s and 1s is another common motif. But I feel it's a bit too cliched for a prominent display. However I can certainly include it elsewhere on the site, for example, on the /error/captcha/404 page. – Jin Jul 6 '11 at 19:57
  • 2
    I actually like the fact that the logo doesn't really represent any Security/IT cliches, and still retains a lot of symbolic value. – Iszi Jul 6 '11 at 20:24
  • @Nealmcb - I think I'd like to see a sample of the mixed-case URL version, before putting my vote one way or another on that. But, it is a good point. – Iszi Jul 6 '11 at 20:30
  • What about embedding an invisible watermark in the logo? – this.josh Jul 6 '11 at 20:39
  • 2
    To retain consistency with other sites, could you modify the "Ask Questions" link a little? Make it clear that it is not just another navigational link. Maybe split the navbar, with links on the left, and ask on the right? Other than that, the design is amazing. I love it. – Soumya Jul 11 '11 at 7:51
  • +1 to @Soumya92's suggestion. Alternative to "splitting" the bar, I'd suggest just changing the "Ask Question" link in-place. Either make it bold, change the color, and/or underline it? – Iszi Jul 11 '11 at 14:21
  • @Iszi, or better yet, have lions jump out of it when you hover... – AviD Jul 11 '11 at 20:18
  • 1
    This design is awesome. I came on meta just to say that. – Reid Jul 13 '11 at 15:13

As an alternative for the generic Fail condition, I propose:

enter image description here

  • That's one of my favorites. Where did you get it? – this.josh Jul 6 '11 at 19:51
  • @this.josh google.com/… – Scott Pack Jul 6 '11 at 20:58
  • Of course! I must be having a bad neuron/synapse day. – this.josh Jul 6 '11 at 22:16

Since everybody is posting fail pics, here is my favorite

lock

  • lol, fantastic.. I didn't even see it at first. – Jeff Atwood Jul 12 '11 at 18:22

I'm a real big fan of using this security camera for some sort of "error" or "fail" page.

enter image description here

It would be really cool if we could somehow incorporate XKCD's Turing Test comic into the CAPTCHA page:

enter image description here

http://xkcd.com/329/

Some more great security fails, thanks to Google. It seems the "partial fence/gate" thing is fairly popular:

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

  • I'm a big fan of xkcd, but I'm not sure if we can use the image for copyrights reasons... – Jin Jul 6 '11 at 20:05
  • 1
    some better xkcd bits on captcha: xkcd.com/233, xkcd.com/632, and especially beautiful xkcd.com/810... – AviD Jul 6 '11 at 20:43

404 -

I'm thinking an empty luggage carousel enter image description here

captcha -

a Matrix style screen

enter image description here

Are you sure you aren't just another Agent?

Error page images -

Security Fail stuff like:

enter image description here

  • 1
    I'm not sure how an empty luggage carousel says "IT Security" or even "Security" at all. – Iszi Jul 6 '11 at 19:05
  • 1
    Maybe it was stolen... – Rory Alsop Jul 6 '11 at 19:59
  • 1
    @Iszi, the header on this answer is 404, so I'm assuming it's for the page-not-found page. Which would make the luggage carousel, relevant. – John C Jul 6 '11 at 20:13
  • And @JohnC has hit my intent correctly:-) – Rory Alsop Jul 6 '11 at 20:15
  • @JohnC @RoryAlsop - Ah, but the point of having our own design is to make things relevant to IT Security. – Iszi Jul 6 '11 at 20:21
  • @Iszi - relevant to Security – Rory Alsop Jul 6 '11 at 22:30
  • @RoryAlsop - Hardly. – Iszi Jul 6 '11 at 22:47
  • @Rory, what @Iszi means is, he wants to emphasize that any "airport security" has very little to do with real security ;) – AviD Jul 11 '11 at 20:19
  • @AviD - Haha. That, too. But also, that I don't see how a luggage carousel has anything to do with any type of security at all. – Iszi Jul 11 '11 at 20:21

More "fail" type of error page:

http://thedailywtf.com/Articles/Security_by_Oblivity.aspx

enter image description here

Another concept for a 404 message.

--

Redacted Nothing to see here. Move along, move along.

My favorite 404 page of all time is one I ran across at the Colorado School of Mines years ago. They now use a boring one, but their old one is now memorialized at http://bcn.boulder.co.us/~neal/humor/marvin-the-server-404.html

@Jin - thinking through the wider cost-effective things we can do: definitely worthwhile sorting business cards if you have time.

I am often at events where either business cards or flyers with the logo, my name, the URL and a brief quote would go down really well.

Can you get in touch if this is do-able? Cheers.

  • we're already planning on printing out cards for moderators and users. for example Apple.se Gamedev.se I'll be posting the card mockup for this site soon. – Jin Sep 4 '11 at 0:42
  • @Jin - you are indeed a star. – Rory Alsop Sep 4 '11 at 23:05

You must log in to answer this question.

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