Design for Webmasters site

Question

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

For the design of Pro Webmasters site, here are some of my ideas:

I've been thinking what visual elements represent "Webmasters." It's pretty tough! From all the web master related sites I've visited, they all seem rather archaic in design and very busy. The approach I'm going for is ease of reading, something airy and clean. I think a lot people here are familiar with Stackoverflow trilogy sites as well as the sketchy theme currently used on Beta sites. I'm also taking some design elements from the new Web Application site as well.

As for the logo, I haven't seen a lot of suggestions for it. So here's my stab at it in the mockup. The browser "Refresh" button has been around since the beginning of the web. I'm using it as the core of the logo. Webmaster is a science. A lot of server optimizing, SEO etc. So I thought an Atom metaphor would be appropriate. The 3 protons' colors came from the Google logo. I'm sure a lot of tools you use are related to Google in some ways.

Style wise, you'll see a lot of similarities in the body section from the Stackoverflow site. The header layout came from the Web Apps site.

Here are the mockups. (click on images to see full resolution versions).

Home

Question

I'd love to hear your feedbacks on the design.

Answer 1

For the most part I like it. We're ultimately here for the content, not the design, so the design should accentuate the content, not supersede it. And I think that you understand that. That said, I do have some constructive advice to offer:

I would agree with DisgruntledGoat about not liking the top bar being white. I'd also add that the pattern background for the header and footer seems a little dated and it makes the footer text hard to read because there isn't enough contrast. Personally, I wouldn't mind seeing either a subtle gradient or just a solid color there.

As far as the rest of the design goes, it's a little too plain. I'd love to see some detail touches to make it pop: rounded corners, 1px shaded edges, subtle shading and gradients. This would be a great place to progressively enhance the site with CSS3. However, the key with all of these enhancements is subtlety.

It would also be nice to see the "Ask a Question" tab highlighted more as a call to action.

The current use of shadows seems off, most especially for the tab bar (wrong direction for shading) and the add buttons in the sidebar (too strong of a shadow). I'm also not sure why those elements have shadows, but nothing else does. I would add more depth (but consistent depth) throughout the design.

The alignment of the tab bar doesn't seem to correspond to anything below it.

The range of oranges in the color palette seems like it's one or two colors too many. When looking at the logo, the featured questions indicator, and the add buttons, to me at least, it appears like 4 or 5 different oranges.

I think I like the logo, but it doesn't immediately identify itself as being website-related to me. A more appropriate metaphor might be a globe rather than the refresh button. You could still mix in the atom with a globe and even use the same colors. The logo could probably be bigger as well. There is an alignment issue with its current size and position. If the logo could be centered in the middle of the header (but still on the left side), made a little bigger, and the tabs were pushed to the right to accommodate it, I think it would look much better.

Answer 2

I've been thinking what visual elements represent "Webmasters." It's pretty tough!

I agree! I was thinking about it a few days ago and couldn't think of a single image that represents Webmasters well (then again, I'm not the most creative person in the world - that's why I'm a programmer and not a designer ;)

First thoughts: it's a nice design but it doesn't "wow" me. The cooking and web apps designs (and Area 51) have a little spark in them that makes you say "cool" when you see them.

I like the idea behind the logo. Perhaps the reload arrow could be made a little bolder since it almost gets lost behind the atoms.

I don't like the top bar being white, it doesn't look quite right IMO. Perhaps stretch the light blue background to the top like on Web Apps, or use a darker blue for it like on the current beta design.

I love everything below the header. I mean it's pretty much the standard Stack Overflow design with better colours, but it works :)

Finally, what is the situation with the name/domain? We seem to have WebmasterAnswers.com as the top name, although several people have complained it's a little too boring. 404response.com and Response200.com are also popular.

Answer 3

This is a particularly hard site to design for because "webmaster" doesn't really describe a single demographic: for some sites, it's the web developer or a web designer; for other sites, it's the office IT tech; or it could be a "website content specialist"; and yet for other sites, it's just the blog owner, or there could be no single person with that title at all. And for all these different types of website operators their role as "webmaster" means different things.

That's why you have people here asking about interface/design-related questions, whereas others ask about domain registration and hosting, and yet others ask about HTML/CSS. It's a bit of a mess really because every group thinks the other group's interpretation of "webmaster" is incorrect and that their question belongs on ui.stackexchange, SO, or SF.

Traditionally, I would say that the icon of an "<HTML>" tag would be a good symbol for webmasters, but I'm pretty sure that these days many webmasters don't know a lick of HTML because that's not part of their job description. The second thing that comes to mind is a globe, which is alluded to in the IE icon, the Firefox Icon, as well as in many OSes. But this is more representational of the internet than the web.

Aside from that, I can only think of the spider web, or a spider itself. The connection is obvious for the spider web, and a spider is the master of its own web or of web making. As alternate imagery, you could use some geometric designs/patterns to portray the interconnected nature of the web. Here's a pic of what I mean:

As for your mockups, I think they look pretty good, but the geometric pattern in the masthead area seems a little awkward to me. It doesn't look terrible or anything; it's just a personal dislike that probably isn't shared by others. Aside from that, the tags look a bit flat/plain, but I'm sure you're already working on that. In any case, it's a good start. I look forward to seeing the final unveiling.

Answer 4

The Design

I REALLY like the design you've put together. It totally achieves the goal of simplicity and readability. I love the background texture in the darker areas too.

Regarding the logo

Ever since the first time I heard the term "webmaster" I have always imagined a sort of "wizard of oz" type person. Behind the curtain at a console with lots of levers and buttons. That might be too visually-crazy of an idea, but I like the thought that the logo could incorporate the notion of a person in some way.

What if we used a visual of a person at a computer screen, but you're looking at them from behind so all you see is their silhouette in front of the screen?

Here's a very gross-looking mock up of this idea.

P.S. The "person" in this mock up looks overweight (non-intentionally). I think that's kind of funny.

Answer 5

I do not like the red dot on the upper-left corner of the logo. It is close to the place where ther SO-sites typically indicate new notifications. I would therefore prefer if the red dot could be at least colored in a "passive color", something light, fading with the background or being elimated completely somehow.