26

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

14
  • 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
    Commented Jul 6, 2011 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
    Commented Jul 6, 2011 at 18:18
  • So this is the final logo?
    – John C
    Commented Jul 6, 2011 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
    Commented Jul 6, 2011 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
    Commented Jul 6, 2011 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
    Commented Jul 6, 2011 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
    Commented Jul 6, 2011 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
    Commented Jul 6, 2011 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
    Commented Jul 6, 2011 at 20:30
  • What about embedding an invisible watermark in the logo?
    – this.josh
    Commented Jul 6, 2011 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.
    – user2796
    Commented Jul 11, 2011 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
    Commented Jul 11, 2011 at 14:21
  • @Iszi, or better yet, have lions jump out of it when you hover...
    – AviD Mod
    Commented Jul 11, 2011 at 20:18
  • 1
    This design is awesome. I came on meta just to say that.
    – Reid
    Commented Jul 13, 2011 at 15:13

8 Answers 8

Reset to default
17

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

enter image description here

4
  • 1
    That's one of my favorites. Where did you get it?
    – this.josh
    Commented Jul 6, 2011 at 19:51
  • @this.josh google.com/…
    – Scott Pack
    Commented Jul 6, 2011 at 20:58
  • Of course! I must be having a bad neuron/synapse day.
    – this.josh
    Commented Jul 6, 2011 at 22:16
  • I stared at this for about a minute before I noticed the cross bar. Then I laughed loudly for another minute. :D
    – Wildcard
    Commented Oct 11, 2018 at 4:45
16

Since everybody is posting fail pics, here is my favorite

lock

1
  • 2
    lol, fantastic.. I didn't even see it at first.
    – Jeff Atwood
    Commented Jul 12, 2011 at 18:22
10

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

3
  • I'm a big fan of xkcd, but I'm not sure if we can use the image for copyrights reasons...
    – Jin
    Commented Jul 6, 2011 at 20:05
  • 1
    some better xkcd bits on captcha: xkcd.com/233, xkcd.com/632, and especially beautiful xkcd.com/810...
    – AviD Mod
    Commented Jul 6, 2011 at 20:43
  • @Jin, xkcd are all creative commons.
    – Wildcard
    Commented Oct 11, 2018 at 4:46
7

Another concept for a 404 message.

--

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

5

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

9
  • 1
    I'm not sure how an empty luggage carousel says "IT Security" or even "Security" at all.
    – Iszi
    Commented Jul 6, 2011 at 19:05
  • 1
    Maybe it was stolen...
    – Rory Alsop Mod
    Commented Jul 6, 2011 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
    Commented Jul 6, 2011 at 20:13
  • And @JohnC has hit my intent correctly:-)
    – Rory Alsop Mod
    Commented Jul 6, 2011 at 20:15
  • @JohnC @RoryAlsop - Ah, but the point of having our own design is to make things relevant to IT Security.
    – Iszi
    Commented Jul 6, 2011 at 20:21
  • @Iszi - relevant to Security
    – Rory Alsop Mod
    Commented Jul 6, 2011 at 22:30
  • @RoryAlsop - Hardly.
    – Iszi
    Commented Jul 6, 2011 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 Mod
    Commented Jul 11, 2011 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
    Commented Jul 11, 2011 at 20:21
5

More "fail" type of error page:

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

enter image description here

4

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

3

@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.

2
  • 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
    Commented Sep 4, 2011 at 0:42
  • @Jin - you are indeed a star.
    – Rory Alsop Mod
    Commented Sep 4, 2011 at 23:05

You must log in to answer this question.

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