23

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.

Updated 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

Moodboard

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

Color Scheme

Palette

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.

Logo Concepts

Swag

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.

Home Page Concept

Question Page Concept


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!

  • 1
    Where's the theory aspect of the site in the design? – Dom Mar 22 '16 at 15:08
  • SWAG ideas post over at meta.music.stackexchange.com/q/2416/104 – Doktor Mayhem Mar 23 '16 at 21:01
  • 1
    What's the site icon going to be, is it as the sticker? – Chris Mar 25 '16 at 13:43
  • 2
    Seems a little too jazzy for me. But, to be honest, I don't have any ideas on how to make it... less jazzy but still jazzy with enough of the other stuff, so I'd just leave it... I agree with Dom that there should be a little more of a theory aspect, since theory is universal for all instruments and styles. – General Nuisance Mar 28 '16 at 4:40
  • 1
    @Dom I appreciate the feedback. I can't say my understanding of music theory is exhaustive, but my approach was theory undergirds, informs, and directs your practice. When I use visual elements like instruments, I'm trying to sum up the ideas of practice and theory together. Both come together to play an instrument well. I did work on a few ideas with more theoretical music elements, yet those visual directions became too busy, literal, and "heavy" versus the abstract and loose feeling I was aiming for. – Hynes Mar 28 '16 at 19:58
  • @Hynes theory and practice are intermingled. Whenever you play something you are playing inside some kind of theoretical or composition system. Understanding it in depth takes time, but it's not absent from when you start practicing. Just showing a sample of Roman Numeral analysis without the sheet music should be enough for example something like this. – Dom Mar 28 '16 at 22:08
  • 1
    Well, for however much one person's opinion matters, I LOVE it, now! The yellow looks great, the logo looks great, the piano keys look great - everything is better than I would have thought. Thanks again!! – Todd Wilcox Mar 28 '16 at 22:59
  • It's looking great. And great response to the feedback, much appreciated. – Matthew Read Mar 30 '16 at 19:53
10

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.

  • 2
    Agreed on the 'piano keys'! – Chris Mar 25 '16 at 13:57
7

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: enter image description here enter image description here enter image description here

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.

enter image description here

"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?

enter image description here

  • 6
    To me the chef's hat is the only logo that I would guess right off the bat is about cooking. The little space ship is pretty good for video games but could also be toys or sci-fi or something like that. It's hard to tell that the popcorn is actually popcorn, although I suppose if I figured that out I'd decide eventually that it's movie popcorn. To me the "three bars" logo looks like three piano keys and is very appropriate without being confused with the Music Fans SE, for example. It's at least as good as the Math and ELU logos - both of which I like a lot. – Todd Wilcox Mar 25 '16 at 15:03
  • 4
    Yeah - I actually really like the logo. One of the other sites I moderate is Security, and while we know the logo there is a shield, and we like it, it doesn't necessarily shout "security" to a new visitor, but it still works. This one is actually a lot more obvious I think. – Doktor Mayhem Mar 26 '16 at 1:02
  • 2
    I see an M when I look at the logo, so it works for me. I notice the piano keys on a second glance. – Josiah Mar 26 '16 at 23:51
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.

  • 2
    that's a good point on the iMusic thing - I didn't see it on work machines, phone or iPad, but on my 4k monitors at home it does look like an i :-) – Doktor Mayhem Mar 22 '16 at 20:58
  • Ha - yes, I saw iMusic too! I love it! – Chris Mar 25 '16 at 13:02
  • 1
    Thanks for the feedback. I'll work on clearing up the logo confusion. – Hynes Mar 25 '16 at 13:02
  • It's scary that Apple has made this an issue. Imagine having this problem before the iPhone... – General Nuisance Mar 31 '16 at 0:20
3

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.

2

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.

  • 2
    The standard swag items are t-shirts and stickers. We sometimes also provide a third item. Generally we do this if there's a good idea from the community. The left-hand image in the swag area is a poster (or at least suppose to be 😀). This item though is open for discussion with the community (within reasonable cost limits). – Hynes Mar 22 '16 at 15:29
1

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!

  • (Apologies for now making the iMusic comment 3 times, I wasn't going to post an answer till I looked in more detail!) – Chris Mar 25 '16 at 13:06
  • I'm proposing using a custom, geometric font for most of the site. However custom fonts suffer from poor readability at smaller sizes (>13px), so we need to bring in a different font for those smaller sizes. Typically you don't want to pair different sans-serif fonts together unless they're very distinct. Also serif fonts also suffer from poor readability at smaller sizes. A monospaced font pairs well with the font selected and can be read easily at small sizes. – Hynes Mar 25 '16 at 13:12
  • @Hynes Fair enough. I'm sure I'll get used to it. =) – Chris Mar 25 '16 at 13:13
1

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.

1

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!

You must log in to answer this question.

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