47

I'm really excited that Beta sites waiting on site design are finally getting many of the graduation privileges without having to wait for a fully custom design. For simplicity, I'll be referring to the graduated sites without custom site designs as "interim" sites. If someone else has a better term, feel free to recommend it.

Right now, it seems that the design process for these "interim" sites will involve simply removing the "beta" designation from the sites' icons.

Info about this is noted here:

Hey @Catija the "beta" label will be dropped on newly graduated sites. We are not currently slated to give newly graduated sites an interim design because it would have caused delays in getting this thing underway, but I feel it may be a good future adjustment. If you a) think there's widespread confusion about when/whether the "beta" label is being dropped or b) would like to add another voice in support of an interim design, I encourage you to ask a new question. – Ana♦

This is certainly a great first step and, obviously, the sites are getting other benefits than simply removing the "beta" text.

What I would like to propose is that something additional be done to separate these sites from the sites that are still in Beta.

There are a few ideas I've seen floating around:

Change the color of the beta design for all "interim" sites.

This would be simply changing the base colors from blue to green (for example) but leaving the remainder of the layout the same. This is discussed very nicely in an answer by Monica Cellio on this question. I think, of all the possibilities I have seen, that it would be the least demanding on the designers.

Create a single new layout that will be used by all "interim" sites.

This would truly set all of the graduated sites apart from the beta sites but it would require yet another site design from the already-taxed design team. This is a good option but may take longer to implement and may delay the completion of custom site designs.

Create logos only for each "interim" site.

Alternately (or additionally) a small amount of time could be spent creating custom logos for the graduated sites. This was recommended by Grace Note ♦ in this comment.

One idea that I'd like to spin off of this, maybe as a consideration, is instead of (or perhaps on top of) a mini-design, maybe we can look at having logos for the sites. I think that it helps not only distinguish the site from those still in "beta", but also gives the site a sense of uniqueness among the rest of the "no-design-graduates", a sense of individuality. We'd probably have to wrestle a bit though as to whether we want to have basically "preliminary" logos that are subject to change in the final design or not, though. It's tricky, maybe too tricky, but hmm...

This is a great option and would certainly make the sites feel unique and special… but the downside is that it would take some real work on the part of the design team to create the logos. Additionally, it's possible that the interim logo does not end up being the final site logo.

One big downside is the question "when would sites get this logo?" If graduation is supposed to be design-independent, this could clash with that concept unless we stipulate that the logo is delivered after graduation and is not part of the graduation process.

These were the solutions that I've seen around Meta and they all seem to have some level of popularity. I'd love to see what people think about these options and whether there are additional options that haven't been mentioned yet (or that I missed seeing).

Improve this question
4
  • 4
    I like the color idea, because it simultaneously solves the problem of how to call those sites. There'll be Green sites and Yellow sites, the latter ripe enough to be harvested.
    – user259867
    Commented Sep 4, 2015 at 22:09
  • 1
    I personally favor moving toward a single unified interim design as soon as reasonably possible, to make it more obvious that interim sites are a cut above, although if there's an acceptable design change as slight as a few color tweaks, that's a decent start.
    – Nathan Tuggy
    Commented Sep 4, 2015 at 22:09
  • @NormalHuman - and chartreuse, perhaps...
    – Deer Hunter
    Commented Sep 5, 2015 at 4:52
  • Personally I love that Crypto is now of beta, but I would certainly like it a lot if we can replace the light blue banner, I've come to hate it with passion, it just kills off creativity. Something more artistic is really needed.
    – Maarten Bodewes
    Commented Sep 18, 2015 at 17:01

2 Answers 2

Reset to default
30

Just as graduation is now an incremental process, setting queued-up sites apart from their fully-graduated brethren can also be an incremental process.

1. New logo scheme

Even easier than changing the site design is changing just the logo to follow a new pattern. As noted here, the logo shows up in network profiles, browser tabs, the global site lists, notifications, tweeted questions, and probably other places. Changing this seems like it should be really easy and produces a quick visible change. Something like this:

interim logo

I picked green as in "has a green light", but it could be something different. It needs to be visibly distinct from both the blue and black (meta) already in use.

If this is all the team has time to do, so be it -- you could roll this out. If they have time to also do the next one on the list without much delay, maybe you roll them out together.

2. Re-skin the beta site design

As I proposed earlier, take the current beta design and change the blue color, changing nothing else. This is a little harder than just changing the logo because (a) CSS can be a rat's nest and (b) there are a few more colored elements to adjust and test. I think this is still in the realm of "not too time-consuming".

3. Pause and evaluate

This might be good enough. Check in with the affected communities and see how they feel. Can they live with this for a year or two while they wait for their individual designs? Try it for a while and see.

4. Single new interim design

If not, explore making a single new interim design. Pro: sites get something new that can accompany other graduation-ish changes. Cons: more work for the design team, and sites will go through two design changes in the end. I like the idea of having a "staging design", so to speak, but we'd need to gather more input from the affected users and weigh this against other design priorities. (Is it fair to tell the next site in line "sorry you had to wait another 6-8 months, but we were busy making this instead"? Maybe; I don't know.)

What about rolling out individualized logos in advance of the full site design? I think it sounds cool, but I don't think it fits the design process. On Worldbuilding, the most-recent design among sites I follow, the logo and the rest of the design were done together and are kind of joined at the hip -- it wouldn't have made sense to do just the logo. Our designer said more about this on meta and in this interview.

Improve this answer
7
  • 3
    I take it that the choice of the letters "WB" is a bit of a hint to SE? :-) On a more serious note, I like the color change, although I think that "Pause and Evaluate" is probably one of the most important steps here. Communities have to be on-board with this.
    – HDE 226868
    Commented Sep 4, 2015 at 22:54
  • 5
    Not a designer, but I don't think it's desirable for a logo and the rest of design to be developed separately. E.g., Academia's logo reflects the color palette of the entire site, the logo of Network Engineering matches their voting arrows and navigation font, etc.
    – user259867
    Commented Sep 4, 2015 at 22:57
  • @NormalHuman It could be an interim logo, though, right? It would eventually be changed to something that goes along with the design.
    – HDE 226868
    Commented Sep 4, 2015 at 22:59
  • 2
    A logo is also identity, so changing it from the generic theme to something interim to something differently final might be disruptive. As for the letters I chose, hey, I just picked a handy logo, you know? :-)
    – Monica Cellio
    Commented Sep 4, 2015 at 23:06
  • 1
    just place a small pic of one of those graduation hats above the word beta
    – CRABOLO
    Commented Sep 4, 2015 at 23:31
  • 2
    Thanks for answering, Monica! I'm glad to have your voice in here. I like your mock-up of the green logo... though the letters seem to be a pale blue (I'm guessing that's merely a remnant from the blue version?).
    – Catija
    Commented Sep 5, 2015 at 0:07
  • @Catija yeah, that's a leftover 1px border around the letters that I couldn't de-blue with the low-end tools I had on hand. That wouldn't be there in the real icon.
    – Monica Cellio
    Commented Sep 6, 2015 at 2:06
2

I have just played a bit arount with firefox stylish and developed a little intermediate design.

Unlike you said it is not big or compley, only 57 lines as of now.

.container {
    box-shadow: #EBF5F3 0 120px 0 inset;
    background-color: #fafafa;
}
#hlogo a {
    color: #3D7782;
}
#content {
    box-shadow: 0 0 2px #b7dbd4;
}
.nav li.youarehere a {
    color: #0d940b;
}
.nav a:hover {
    color: #1c8b46;
}
.post-tag, .geo-tag, .container .chosen-choices .search-choice, .container .chosen-container-multi .chosen-choices li.search-choice {
    color: #415947;
    background-color: #deffe6;
    border-color: #a0c8ac;
    border-radius: 2px;
}
.post-tag:hover {
    color: #415947;
    background-color: #c5ffd3;
    border-color: #a0c8ac;
}
input[type="submit"], input[type="button"], button, .button, a.button, a.button:visited, .btn, .hero-box.double-panel .panel.white .btn {
    color: #FFF;
    background-color: #117cf9;
    border-color: #0564d2;
    box-shadow: inset 0 1px 0 #74b3fc;
}
input[type="submit"]:hover, input[type="button"]:hover, button:hover, .button:hover, a.button:hover, a.button:visited:hover, .btn:hover, input[type="submit"]:focus, input[type="button"]:focus, button:focus, .button:focus, a.button:focus, a.button:visited:focus, .btn:focus {
    color: #fff;
    background-color: #0564d2;
    border-color: #044ca0;
    box-shadow: inset 0 1px 0 #4397fa;
}
#tabs a.youarehere, .tabs a.youarehere {
    font-weight: 700;
    color: #14ee7e;
    border-bottom-color: #5df3a6;
}
#tabs a.youarehere:hover, .tabs a.youarehere:hover {
    color: #0daf5c;
    border-bottom-color: #0fc066;
}
.site-footer {
    background-color: #e1f4e9;
    color: #84958c;
}
.page-numbers.current, .page-numbers:hover {
    color: #FFF;
    background-color: #5daaf3;
    border-color: transparent;
}

Applying it to any beta site gives this result:

yes, I have removed some questions and the HNQ-bar, otherwise you wouldn't have seen the footer.

What did I change?

  1. I used a color-info website to turn all greyish-blue colors in greyish-green colors. (Green implies acceptance)
  2. I used a blue tone (also same color level) for important things like buttons: CLICK ME

Well, I have probably forgotten some things of the page but the majority of elements are in a new style now.

Please give me your opinions on this design and maybe suggest some improvements. Hopefully the SE-design/dev team will look at them.

Improve this answer

You must log in to answer this question.

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