27

My name is Paweł, I’m a product designer at Stack Exchange. I’m super happy for you, because the process of graduation has begun! This site will be out of beta very soon. Congratulations to all of you!

Graduation and Your Site Design

Pattern

Graduation comes with a few perks. We’ve already begun work on your site's design, which will give you your own unique theme that reflects your topic, culture & community. This will help brand your site as unique, even while you share common elements with other sites that show you are part of a bigger Stack Exchange family.

There’s another big thing - once your site goes up, you will receive a link in the footer of other sites in the network, along with the ability to migrate content to and from other sites – and the notoriety of a public launch that says, “Congratulation, you finally made it!”.

Design Concept

The idea behind this design was simple: create something that fits Your Community. A community of builders, engineers, and fans. A community of people who can go to a garage and build an Iron Man suit. A community of people who can build and program a working computer while on a lunch break. And so on, and so on… There’s a lot of fascinating stories behind your community. And there’s one thing in common — Raspberry Pi. That little green board which opens entire new world for you and other people and release endless source of creativity to build something amazing.

I’ve also been reading tons of questions here recently, and I have to say that you’re a cool community - very friendly, chilled out, happy, and fun. We wanted to emphasize those values.

So yes, many stories are glued together with a Raspberry Pi board. That’s why this board became a symbolic theme for your site design.

Color Scheme

Green - obviously. We’ve also added some red/pink from Raspberry Pi logo to remember the roots, where it all begun.

Color Scheme

Logo & Identity

Process

We didn’t want to reuse the existing Raspberry Pi logo. We did want to include two visuals that best fit this community:

  1. Raspberry which symbolizes community roots and the device which is a foundation for everything you build.
  2. Circuit boards which are the main theme of the site.

Logo

SWAG

Here are some examples of how it can be used elsewhere to strengthen the visual identity.

T-Shirts

Stickers

Mugs

Badges

Overall Site Design

Here’s what you were waiting for…

enter image description here

enter image description here

We believe the design and branding work very well for this community, it’s unique and capture the right mood. We’d love to hear your feedback, and if there are no major design changes, we’ll launch the new site design and graduate the site from Beta soon.

7
  • 2
    Just a note about the green board, while the fast majority are green, they have used other colors. There was a special edition blue and I believe the boards made in China are red.
    – Steve Robillard
    Nov 8, 2015 at 19:16
  • 3
    @SteveRobillard I think the colour green is quite ubiquitous with circuitry as a whole though.
    – Jivings
    Nov 11, 2015 at 9:20
  • 2
    @SteveRobillard Red is/was used by a particular distributor for the Chinese market, but most boards made in China are green, e.g. the (Farnell?) B's were mostly identifiable by black (as opposed to blue) headphone jacks; the +/2's are more heterogenous but pretty much all green.
    – goldilocks Mod
    Nov 13, 2015 at 12:57
  • Love how the Bumper Sticker is on a Tesla!
    – Kachamenus
    Nov 17, 2015 at 4:37
  • Now, the real question is ... can we actually get the swag? :D
    – RPiAwesomeness
    Nov 17, 2015 at 19:08
  • The design of this (and other SE sites) could improve. Do we really NEED a green bar that takes up 1/6 of the screen. There is only room for 2 questions on my screen.
    – Milliways
    Nov 18, 2015 at 5:39
  • @Pawel We are creating an "official" blog for the site, "official" in the sense that the elected mods are accepting responsibility for and helping to organize it, but it will not be hosted by Stack Exchange (since they no longer provide such). It will be referred to as the rpi SE blog. Is it okay for us to use the logo above?
    – goldilocks Mod
    Jan 25, 2016 at 18:11

8 Answers 8

Reset to default
17

Wow, was beginning to think this might never happen. I would like to congratulate the community on reaching this milestone.

I like some of the subtle design cues like the circuit board traces that make up the up/down vote buttons.

Given the recent meta post regarding phased graduation Can we get a tenative timeline and complete list of changes (will election of moderators be included, resetting of privilege levels etc.)?

12
  • I'm not sure on the timeline of the design launch (probably within a week or so? It doesn't look like there's a lot of changes requested here), but as far as I know, the plan is this: graduation next week (no privilege changes, no design, purely back-end site state upgrade), elections will be scheduled shortly after that, and privilege changes will happen once the design goes up. Sorry, I don't have any specific dates - that's largely up to the community team and designers.
    – Adam Lear StaffMod
    Nov 8, 2015 at 23:21
  • @AnnaLear thanks for the details. If I had one complaint about graduation it would be the opacity of the process, despite the recent meta posts regarding graduation etc.
    – Steve Robillard
    Nov 9, 2015 at 2:23
  • 2
    We hit a snag when we did the first wave of design-independent graduations - lots of bugs and missing features with the first method we tried. So we developed a new method that is much cleaner (the backend state upgrade Anna mentioned), but wanted to run it on that first wave and confirm it did run smoother. The point of the new process was indeed to be a lot more visible about the process. To give some notes though - while we plan to graduate this or next week, elections may be some weeks away as we're backlogged a bit from the first wave.
    – Grace Note StaffMod
    Nov 9, 2015 at 14:02
  • 3
    What's this talk about privilege changes? You know how hard it is to get your answers to two upvotes these days. It seems that nobody cares to vote anymore. For the record: not talking about my answers since it's a general trend.
    – Ghanima Mod
    Nov 10, 2015 at 21:33
  • @Ghanima the current reputation/privilege values are reduced for beta sites. These values reset to the higher threshold for graduated sites (after elections). If you have an stackexchange account check the privilege/reputation values there compared to here.
    – Steve Robillard
    Nov 10, 2015 at 21:41
  • Steve, I know. Just saying that people joining these days and not being around since '11 will really have a hard time. This is not SF&F; there's little to none voting around here.
    – Ghanima Mod
    Nov 10, 2015 at 22:02
  • @Ghanima We may see an uptick in voting and participation as we leave beta. People may feel it makes a difference and won't be wasted effort. However, we may have users that we will never regain due to the extended beta period. Finding and measuring participation may be something that SO should look at going forward. I think the new guidelines are an attempt to do that.
    – Steve Robillard
    Nov 11, 2015 at 20:34
  • 3
    @Ghanima From looking around at other betas and S.E. generally this is definitely a problem we are particularly plagued with. I'm certain this question easily set a record for the site in terms of upvotes in the first 6 hours -- disconcerting since if that wasn't from S.E. staff, it implies there are very active regular members who are happy to see the site graduate yet can't be bothered upvoting anything on the site??? We have a stingy culture, lol, if points are what you are after this is the wrong place. The election turn out will be interesting.
    – goldilocks Mod
    Nov 12, 2015 at 1:14
  • I never thought this would happen, this is great!
    – Patrick Cook
    Nov 12, 2015 at 4:12
  • @PatrickCook imagine how those of us who have been around since the beginning feel like.
    – Steve Robillard
    Nov 12, 2015 at 5:06
  • @goldilocks, I am certainly not around for the points and again I am not talking about my answers. Just look at your own current answers. If they've got four upvotes that's quite much these days. Anyways I am not complaining ;) let us look forward to graduation.
    – Ghanima Mod
    Nov 12, 2015 at 8:23
  • @Ghanima That was a universal "you", not you. And I didn't mean I thought there was any positive spin that could be put on this, more that you're right, but I don't believe there's anything that can be done about it. To be cynical contra Steve ("We may see an uptick in voting and participation as we leave beta"), if some of our regulars loose privileges because of it, will that evoke a positive response? I'm not positive that does happen (loosing privileges) but if it does you will be one to notice. Anyway: chat.stackexchange.com/transcript/message/25350483#25350483
    – goldilocks Mod
    Nov 12, 2015 at 12:23
4

This is awesome news! Congratulations everyone :)

I can't fault the design Paweł, I think it's impeccable, and your reasoning behind it is excellent. I can't wait to see it in action!

3

Hooray!

I'm really impressed. Like, 5 stars. I like the slight cartoon cloud/molecular asymmetry to the logo shape. The only thing I'd tweak would be to make the title pop a bit:

enter image description here

A little crudely done with bucket fill which left the anti-aliased edges using the prior white. I did check it with a color blindness simulator, just in case. Note I am a loud dresser and occasionally get accused of color blindness myself, so those tests are always thought provoking ;)

My other thought was cyan -- who doesn't love cyan? But that is more fizz than pop.

Anyway, I've set this post as "Community Wiki" so people can up or down vote the idea without hurting my good reputation.

7
  • It's meta upvotes/downvotes don't impact rep.
    – Taryn
    Nov 6, 2015 at 21:18
  • 4
    O_O Okay, in that case so no one even thinks my feelings will be hurt.
    – goldilocks Mod
    Nov 6, 2015 at 21:23
  • 1
    I like the white :) Also please don't ever say "make it pop"! ;)
    – Jivings
    Nov 10, 2015 at 10:36
  • thank you @Jivings ! :)
    – Paweł
    Nov 10, 2015 at 21:32
  • 1
    I was irreverently baiting with the "make it pop" :P But I am dead serious about canary. And that I still will still love it even if no one else sees the lemony light here.
    – goldilocks Mod
    Nov 10, 2015 at 21:40
  • We have our first "Make it Pop!" now we just need a can you "make the logo bigger" and we will have the whole lemony set - lol.
    – Steve Robillard
    Nov 11, 2015 at 20:30
  • @SteveRobillard Actually I was thinking a classic flaming torch animated gif, to symbolize human ingenuity and the historical fruits of our technology.
    – goldilocks Mod
    Nov 12, 2015 at 0:46
2

Why not make the page background not just plain white, but add a image or different colour - example

enter image description here Likely would be lest defined

However for behind the text it could be just white or another colour, as on https://askubuntu.com/ etc

Oh and sorry for not mentioning that your design is brilliant! :)

2
  • I think it would look good if we had this with red details on the background, and plain white behind the text.
    – angussidney
    Nov 14, 2015 at 9:57
  • If you do I will just block it, as I do to most such designs. They just make the text harder to read, particularly for those wof us with poor eyesight.
    – Milliways
    Nov 18, 2015 at 5:40
1

:/

Since canary (or is it lemon?) has received a mixed reaction, I've giving cyan a chance here too.

enter image description here

Fizz can be good.

Anyone interested in tangerine or mauve, leave a comment. :D

2
  • 3
    I am not sure that has enough contrast for users with vision impairments or to meet accessibility guidelines
    – Steve Robillard
    Nov 7, 2015 at 20:42
  • @SteveRobillard Well then -- yellow it is! Actually this one passes a color blindness test too (for whatever that is worth, I don't know anyone color blind enough to ask). The contrast in terms of RGB levels is I think pretty high.
    – goldilocks Mod
    Nov 9, 2015 at 12:43
1

I know it pretty much works for contrast etc, but would it be possible to consider other colors (or designs) for the header buttons and the background instead of just white? Example: perhaps switches or something to make the buttons more 'interesting':
enter image description here

Probably with a better font etc though, and possibly with the blue background used on many Pi compatible boards (from Adafruit, Arduino, generic etc)

3
  • How could you lay text over this white background?
    – Steve Robillard
    Nov 11, 2015 at 20:27
  • I really like the push buttons and blue dialogs. I think I agree w/ Steve though about putting text over a busy background, even if it is subtle.
    – goldilocks Mod
    Nov 12, 2015 at 0:50
  • OK :) moved to another post so it can be down-voted appropriately. Simple designs are nice anyway....
    – Wilf
    Nov 12, 2015 at 18:44
1

Awesome! I am so excited!

Maybe could the Raspberry Pi text be in #d80303, or some other shade of red? I think it would match the logo. Sorry, I don't have Adobe PS or anything so I can't show it.

Also, maybe we could have a newsletter like the Electrical Engineering Site? I could help with that, maybe make a fancy html/CSS email template. They also have custom buttons, that would also be cool. Maybe some more circuits? Different Pi models for every button?

1
  • The newsletters are automatic, we don't need to make them ourselves.
    – angussidney
    Nov 17, 2015 at 6:14
0

One thing I unfortunately don't like about the logo design is how it looks in small size — e.g. as can be seen after clicking the "StackExchange" menu bar. As I see it, the details become lost, and the whole thing looks like some kind of amorphous dirty blob. (Specifically, not really reminescent of a raspberry, or anything.) This is really the only one thing I don't like (I do like the idea in itself), yet I believe it's an important thing — given especially that this small logo would appear on other network sites, and in network menus too; this way, to a significant degree it contributes to the "public image" of the site.

Could you please consider tweaking it so that it would look nice and appealing in this small size too?

Alternatively (or additionally?), maybe adding some kind of a stem/leaves on top could help?

You must log in to answer this question.

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