6

On the Judaism SE site, we're getting somewhat close to graduation. Talk about our design post-graduation has recently come up where community members were asked to provide some design ideas that Jin could incorporate into the final site.

I think it would be much easier to provide great design ideas if we could get an official list of elements that could be modified. However, as far as I can tell, there is no such list available to date.

So what are these mysterious changes that could be made?

4
  • 1
    Everything? Beyond the general layout of where buttons and fields are, and so on.
    – user154510
    Sep 23, 2011 at 20:51
  • We're not necessarily that close to graduation. Sep 23, 2011 at 20:55
  • @IsaacMoses close is hard to define (i.e. purposely vague). But we're definitely not far... edited though to reflect
    – yydl
    Sep 23, 2011 at 20:57
  • 4
    It doesn't really matter whether any given site is close to graduation; this list should be applicable to all current and future beta sites.
    – Pops
    Sep 23, 2011 at 21:07

2 Answers 2

8

It may be easier to list what elements cannot be changed:

Majority of the site layout is fixed. The right hand side bar needs to have a minimum of 220px width, for in-house Ads. Since we design from 1024px resolution as the lowest common denominator, the left column is roughly about 730px-750px, taking margin/padding into consideration.

The whole content area background needs to be one solid background color, or background texture. Our html isn't set up for making the sidebar a separate bgcolor.

The only flexibility in layout is the header area, this includes the site logo and main navigation menu.

Everything else can be changed as far as visual treatment goes:

  • Typography, websafe or font-face(as long as the webfont is free to use)
  • Site logo
  • Favicon
  • Apple touch icon
  • Badge
  • Tags
  • All Icons
  • Pagination
  • Blockquote
  • <Code>
  • System message
  • 404/captcha/error images
  • Site background color/texture
  • Content area background color/texture
  • Question listing divider
  • New user greeting box
  • Ask Question help box
  • Question owner background
  • Accepted answer visual(on question listing pages)
  • Chatroom box(sidebar)
  • <kbd>
  • modal boxes(image upload, link)
  • search box
  • top utility bar

That's all I can think of now, I'm sure there are more. Basically if an element has a CSS class call, it can be styled(as long as it doesn't break the layout).

The Meta site will also receive a new theme too. The Meta theme typically is a desaturated version of the main site.

Upon graduation, we also update the designs elsewhere too, that are related to your site:

  • Chatroom theme
  • Twitter account avatar/page color scheme
  • Email newsletter template
  • Email newsletter sign up Ad banner
  • In-house Ad design(no more Sketchy)

and further down the road:

  • Moderator cards
  • Generic site cards
  • Swag for top users (T-shirts, stickers etc)

Hope this helps. I recommend browsing existing graduated SE2.0 sites, see what all can be done.

7

Short answer: you can ask for anything you want, as long as it doesn't interfere with functionality.

Each graduating site gets its own unique design theme created by Stack Exchange's professional in-house design team (currently Jin), working with other designers as needed.

So far, every site's theme has included

  • a custom logo and favicon
  • custom decorative graphics (or intentional lack thereof)
  • a consistent color scheme

Most sites have also received

  • unique fonts consistent with the site theme
  • decorative boxes and borders consistent with the site theme
  • themed badge shapes/sizes/colors (color referring to background color, not bronze/silver/gold)
  • themed tag shapes/sizes/colors
  • unique upvote/downvote/favorite button images

Some sites have other changes that have to do with their topics. Photography's top bar is organized differently to make room for a "featured photo." Unix and Linux has slashes prepended to the text of its header buttons to give the feel that those link to "subdirectories" of the site. And Apple's <kbd> markup looks like an Apple keyboard's key.

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