Music.SE Site Design (With an updated logo and color!)

Question

UPDATE MARCH 28, 2016

Thank you to everyone who took the time to review and provide feedback. Based on your feedback, the following changes are being made to the design:

Logo

A few people mentioned they read the logo as "IMUSIC" instead of MUSIC, so I've dropped the three bars before the wordmark. I'm okay with doing this because…

• …the bars were initially placed there because most Stack Exchange community logos follow a favicon + wordmark format. It doesn't need to follow this format. It's a guideline.
• …dropping the bars allows to shorten the length of the overall logo which was almost double the length of a typical logo.
• …dropping the bars allows us to create bring the community's name directly to the left-edge of the website.
• …and finally, I felt dropping the bars here were okay because we have the 12 bars to the right of the logo. The favicon still matches the logo.

I also wanted to note that I did change the black and white key ordering based on Todd Wilcox's suggestion.

Color

As you can see in the above image, I've also toned down the brightness of the yellow, bringing in more orange. Hopefully this should eliminate some of the green some were seeing.

I will be working on making these changes to the new site design, which should launch hopefully this week. We do have a number of internal projects launching this week however, so at the work it will launch next week.

Thank you again for your help and patience throughout this process. Thank you for being such a great community!

---

Original Post March 22, 2016

My name is Joshua and I'm a product designer at Stack Overflow. First off, congratulations on your community moving out of beta!

Graduation and Your Site Design

Graduation comes with a few perks. One of those perks is community-specific design, reflecting your unique theme, topic, and culture. Many elements will be altered to help make your site unique, while retaining common elements with Stack Exchange communities. These common elements help show you are part of the Stack Exchange network.

---

Design Concept

Two weeks ago I posted a discussion thread to solicit ideas and inspiration from the community. First off, thank you for all your feedback! It was very helpful in pointing me in a general direction I should explore, as well as making sure I avoided the typical clichés surrounding music. Here were a couple statements in particular that really helped…

If you were to look at the tags for specific styles you would find that the questions asked skew towards jazz, classical-music, and blues in that order…

Musicians are life-long learners who are constantly absorbing new information, developing more refined skills, and improving.

Score excerpts are fine; pics of working musicians are fine. The music industry's stock tropes (the ones they use to market the "glitz") should be avoided.

…I think appropriately using accurately-depicted elements of musical notation is at the very least a good starting point for ideas.

Music is not about notations. … Music is an art. Art is about expression of your free soul.

In particular that last statement resonated with me. I really wanted to explore a concept of music that communicated the vibrancy, energy, and passion found in music; yet doing so without being overly literal or cheesy.

Building Blocks

Given that jazz, classical-music, and blues were some of the larger tags utilized, I became really interested in abstract and loose stylings found in mid-20th century jazz.

Color Scheme

For the color scheme, I chose a lively, warm palette. The yellows and purples pair well to create nice color range, utilizing bursts of a muted red to help draw attention when needed.

Logo Concept

This was a tough one. It was here that it was really, really easy to fall back to a musical cliché such as a musical note, sound wave, or even the use of sheet music. All of these didn't feel right. They complicated the mark too much. Drawing inspiration from the idea of showcasing what you use to play with (an instrument), I created a series of abstracted shapes that represent piano keys. These keys are encapsulate a gorgeous wide-display sans-serif typeface that echos early-20th century architecture in its geometric forms.

Swag

Site Design

For the site design, I kept most of visual elements in the footer. Adding them into the header made the top area of the website rather distracting and took away from why people are here: to ask and answer questions.

---

I believe this design captures the unique theme and topic of your community. I'd love to hear your feedback. If there are no major design changes, I hope to launch the site design soon!

Thank you for for making this such a great community!

---

Design Notes:

As a musician and music-lover myself, I found working this site theme challenging, exciting, and inspiring. As with any time I'm designing, I find music is very helpful helping me overcome creative blocks and finding momentum once you've reached a design rhythm. Music helps me take a step back, gather my thoughts, and meditate. I don't normally share this, but given the community's focus I thought it would be interesting to provide a selection of tracks I found inspiring while designing this community's theme.

Note: All links are to Bandcamp pages unless otherwise noted.

1. Luke Howard Trio — "Atlases" from The Electric Night Descends
2. Paul Desmond — "Bossa Antigua" (YouTube) from Bossa Antigua
3. Hackney Colliery Band — "Pygmy Goats" from self-titled debut
4. Dele Sosimi — "Where We Want Be" from You No Fit Touch Am
5. We Lost The Sea — "Challenger Part 1 - Flight" from Departure Songs
6. B.Visible — "BCN" from Okulus Drift
7. Angus MacRae — "Falling" from Awake EP
8. Max Richter — "Dream 13 (Minus Even)" (YouTube) from From Sleep
9. Daniel Hope — "Drowning by Numbers: Trysting Fields" (YouTube) from Spheres
10. Michael Jackson — "Human Nature" (YouTube) from Thriller

Thanks again for making this such a great community!

Answer 1

First off, I'm sure this was a lot of work and reaching for inspiration and ideas. Most, if not all, of us here at Music.SE understand and work through the creative process ourselves quite often, so I'm sure I speak for everyone when I say,

Thank you so much!

What's good:

• Not cliche - very fresh
• Not too busy or too boring
• The visual excitement in the footer is genius!
• It captures the feelings of welcoming, musical expression, artistry, and the more intellectual side of music
• THE LITTLE NOTES FOR BADGES! I'm doing a little happy dance inside my head at that. Well done!

What I feel could be tweaked:

• The white/black keys/bars (marimba/xylophone/etc.) are really cool. Maybe they are not meant to actually evoke a piano layout, but based on the use of white and black, I think "piano" when I see them, and then I instantly notice that the white/black pattern is kind of random and not much like how piano keys are laid out. The pattern to the left of the word "Music" in the logo is fine, in fact I really like it as a section of the keyboard, since it's not cliche while still being accurate. The bars to the right of the word "Music" would be much more effective, IMHO, if it went:

w w b w b w w b w b w b

That's one fewer bar, which also takes the number from 13 down to 12 and makes the bars spell out a full octave (and would remove any issues for superstitious people). It's a B to A# octave which is not the pattern one would normally see while at the same time being recognizable and interesting for people who know the piano keyboard. The w w b pattern on the swag/logo is perfect. I love it.

• I like the colors a lot - except for the yellow. I think a yellow is a good match for the other colors. To me the current yellow looks green and sickly. I'm fully aware that everyone's monitors and eyes and ambient lighting are different, so it's just one opinion. I have the impression of the broad categories of colors, yellows are hard to find that are good-looking in a wide range of situations. In this design, a yellow is the dominant color, which is nice in the sense of it being a warm color. This particular yellow kind of hurts my eyes - it's maybe a bit challenging for a color that is the first color we see and the color that occupies the most screen area (aside from white). At the same time, I don't really have a great idea for how I would change it. I would suggest something more tan, but that might not go with the color scheme. The dominant color could be switched to the blue, but that takes away the warmth of the site. Perhaps merely adding a touch of red or reducing green and desaturating the overall color a bit would help, but then we are dealing with yet another shade of yellow that might look worse some or many people. Maybe using the yellow in a smaller area just around the logo itself would make it matter less how it looks on different monitors.

Edit:

I checked out the design on an iPad Air 2, and while the yellow looks a little better on there (work display is a Dell), it still could be better, IMHO. In the good column, I hadn't mentally processed the votes/answers/accepted/views part before now, and I like it. Clean and clear. The footer is even more awesome on the iPad (not sure why). What if instead of the yellow background at the top it's just a very desaturated copy of the footer? Ah, or the color used for the piano and the body of the saxophone in the footer is a much more pleasing color to my eyes for the header.

Answer 2

The Logo

I love the design in general - my main concern is that, just from the logo, you wouldn't make any association with music.

The best SE logos mean you have a reasonable guess at the sites content on their own. For example:

The logos are used to represent the site in a standalone way - e.g. in the Hot Network Questions. With a generic question ("Amplification Issues") and this logo - I'm not sure you'd be able to deduce that this was a music related question.

"Music" as a topic has so many distinguishing symbols - I know a lot of thought has gone in to avoid something cliched, but I'm not sure if we haven't gone too far the other way, and got something where there's no natural correlation between the logo and 'music'.

What do other people think?

Answer 3

This looks really good. The design elements are great, and keeping note symbols confined to the badge icons is pretty clever.

My main concern would be that it looks like it says IMUSIC. I'd suggest moving the first "black" key to be the middle of the three. This would help the logo look more balanced too, IMO. Other possibilities would be using one of the other keys that is less similar to the 'I', putting the black one first, or increasing the spacing between the icon/logo and the name text.

Small note on the t-shirt suggestion — I'd keep the yellow circle around the logo so that the dark key can stay dark; it looks a bit odd when yellow.

Answer 4

I like the building blocks a lot – quite jazzy indeed, but why not; it's definitely a nice contrast to other sites, both on StackExchange and elsewhere, in its liveliness. That's also really great about the logo.

I'd find it a bit of a pity though, if it ended there – the actual content part of the example view frankly looks an awful lot like the current standard beta theme, and that, in its clinical-clean whiteness^†, can't seem to fit the new design elements. I would somewhat prefer it if this would also be trimmed to be a bit more organic/quirky, in a subtle way.

---

^†_{Why people consider #XFFFFFF an appropriate background color for...anything, is a mystery me – but oh well... that's a different topic.}

Answer 5

The layout works really well on a range of devices I have tried it on - I like the minimised/understated nature of the footer graphics (even though you have missed off my favourite instrument :-) - this was one of the reasons various folks said to avoid a genre so no-one would feel left out...)

Actually, while I am sort of joking, having the piano and sax so prominent is very "Jazz"y...

I like the yellow and purple, and the layout is nice. The stylised keys are easily recognisable.

You have taken on board the up and down vote icons suggested - they work for me.

In fact my only niggle with it at all is the left hand picture in the Swag section - if that is a notepad or sticker it just seems very fussy. It overshadows the logo/URL. Can the image be made more muted?

update from chat

That third swag item is a tricky one - I have been trying to go through what could be useful to the widest possible group, because while capos, tuners etc may be nice to have items, they will only suit certain groups.

Stickers are easy, and probably usable by all. A notepad may be useful, but even there, there would be a split between blank, lined, traditional notation, tablature etc.

A pen could be useful - for me, sharpies are essential to sign autographs after gigs. And for those who don't perform publicly, a pen is still going to be handy anywhere - and as long as the logo is prominent, could be a useful conversation starter.

Answer 6

I LOVE the colours and design, it's not what I was expecting in the slightest, and really impressed. Take that, cliches!

Two comments:

1. Why are we now called iMusic? =)

2. Why the fixed-width font for tags? Does it work better on the live site? Looks kinda out of place to me in the screenshots - like it would suit a programming site!

Answer 7

I really like the keys abstraction as part of the logo, but on a full size screen, the work Music becomes very hard for me to look at. I'm not sure if it's the width, or the contrast of the upright letters with the irregular keys, but something about it makes my eyes go wonky.

Answer 8

I really like it.

I actually love the way the 'notes' are not exactly how a piano keyboard is laid out. It makes you think, and prevents the header from being too 'piano specific'. To avoid it looking a 'bit wrong', maybe you could go even further towards some of the more abstract forms in your 'building blocks' (like in the orange one)?

In the footer, I wonder if you could incorporate some of the shapes into the form of more than one instrument, kind of like how a crossword or scrabble works incorporates letters into more than one word? Also, I wonder if there could be a nod or two to some more modern music technology - sequencers, samplers, synths? It all looks a little bit 'school orchestra' at the moment.

But it's good!