20

My name is Paweł, I’m a product designer at Stack Exchange. I’m super happy for you, because the process of graduation is about to be concluded! Congratulations to all of you!

Updated Design — May 30th 2016

Thank you all for your feedback. It's been good lesson for me and I really appreciate it. At Stack Exchange the community is the most important. Decisions we usually make (whether it's design related or some new feature) sometimes are not understandable enough but we're sure they are right. But sometimes we're just wrong. We make mistakes but we're also trying very hard to fix them and avoid those mistakes in future.

Apparently, there were some elements in the design proposal that you, Community, didn't like. This is why we pitch designs before implementing them - we want to know your opinion and we want to make it as good as possible, trying to find sweet spot between what we think stands best for community design and your expectations.

We went through all your comments, most of them were about logo sign and some icons used in layout. We've updated it slightly, hoping this gonna fit much better. We can't make ALL of you happy, because it's simply impossible.

Anyway, let's start with logo because that was the biggest discussion point so far. Here's new logo - we've updated JP symbol (which wasn't obvious for everyone) to the one proposed in other topic — it was the most upvoted proposal so we decided to use it.

New logo

Another issue was about icons. Actually symbols we used in few places. So we updated few of them according to your tips:

  • we've replaced 'Ask Question' icon with origami symbol. We've also thought about other symbols you've proposed, but this particular origami symbol is simple enough to be readable and reconizable at small sizes like the one we have
  • upvote/downvote symbols were replaced with piece of pattern proposed by @broccoli forest.
  • star icon was also replaced by onmyouji pentagram, also proposed by @broccoli forest (thanks!). we were also considering origami shuriken symbol, but we decided it's not obvious enough for what it stands for.
  • increased contrast for tags.

Now things that we decided to keep as they were:

  • color scheme - there was a sugguestion to update it but it was very subjective (colors are usually subjective) and we really liked gentle colors palette we've picked so it stays as it is.
  • blockquote styling - this is something we're trying to keep consistent across whole network so it has to stay as it is.
  • badges - there was a proposal to use some other symbol for badges, however the one you proposed has a lot of tiny details that are hardly visible on small sizes. and we are techincally limited by the size of badge.

Updated Designs

Home view

Home

Question view

Question

Updated SWAG proposals

Notebook

Notebook

Sticker

Sticker

T-shirt

Sticker

Old post / design...

The new design comes with a few perks. It 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.

...

To see rest of the old post, go to revisions history.

  • 4
    I am so sorry, I appreciate your work but honestly the nuance of Japan is far from enough in the current design. – Artificial Hairless Armpit May 25 '16 at 4:49
  • 4
    Thank you for the updates! :-) I like all of them! – snailboat May 30 '16 at 11:26
  • 3
    Is the font that reads "JAPANESE LANGUAGE" definitive? You already left a comment on the answer here, but I think that this old answer is also relevant. I think from discussion here and in chat this is the biggest issue that remains with the design. The current font makes the site look like a very cheesy site for Japan aficionados, even though a third of our users are native speakers (and readers!). – Earthliŋ May 30 '16 at 20:11
  • 2
    I especially like the new logo. It looks neater, simpler, and is very clearly Japanese. – Blavius May 31 '16 at 15:37
  • 1
    Some people have suggested the あ could be moved very slightly up and to the right. What do you think? – snailboat Jun 1 '16 at 2:10
  • @snailplane i think it's centered vertically and horizontally, but will double check that once I export all assets etc. Thanks for reporting. – Paweł Jun 1 '16 at 5:09
  • where can i buy that swag. after i buy my Neptunia Plushies i want to buy some of those notebooks and shirts – Memor-X Jun 1 '16 at 12:27
  • 2
    This looks lovely. Thank you for taking the time to integrate feedback into your final design! – Leslie P. Jun 2 '16 at 13:47
  • Is making the main and meta site similar in background colour intentional? I thought that the main site would be (a deeper) blue – Flaw Nov 25 '16 at 19:04

12 Answers 12

16
This post is outdated as it only contains information with respect to the       
old design draft. It remains here just for referential purposes.

I know G-cam is already mentioning the logo:

enter image description here

But I just want to state more directly that

  • I don't really get the logo -- as in it's taking me minutes of staring at it to decipher that there's a J and P sharing the vertical | and the P's horizontal bit extends well over into the J.
  • It doesn't seem very Japanese stylistically.
15

This post is outdated as it only contains wishlist for the old design draft. It remains here just for referential purpose.

The overall design is wonderful, but my worry is about those accessories: logo, icon, vignette on the left of "Ask question", upvote/downvote buttons etc.

Maybe because I'm not well informed on traditional Japanese design materials, they generally don't give me particularly Japanese impression (the "Ask question" vignette actually resembles the Rising Sun medal, but I have no idea why it is here).

Following are my impromptu thoughts:
Reorganized propositions:

Priority matters

  • the icon may be better off using a kana syllable, that both learners and native speakers can easily recognize
  • the logo would look steadier with, for example, more standard typography accompanied by an equivalent Japanese line
  • "Ask question" vignette seems of little contextual association, best be replaced
  • basically, you can ask other native speakers around here about use of various symbols, because sometimes they could look really out of place in Japanese eyes

Other possible enhancements / remarks

  • the fav star could be something like onmyouji pentagram if had to be a star, or put the "Ask question" mark there?
  • could the background of blockquote area be some subtle patterns like the overall background?
  • it could be interesting if the check mark would look like Japanese seals, but the problem is that they are usually red
  • the coin badge looks very nice and witty!
  • UPDATE: @Earthliŋ suggested to me that up/down buttons might be folded origami, is it true? If so, maybe you should tweak them so that they look like folded paper, while doing this may make the design less clean and flat.
  • UPDATE: I have a feeling that yabane pattern would fit up/down buttons.
  • UPDATE: @Earthliŋ also proposed that "Ask question" vignette could be an origami crane.
  • UPDATE: In talking about origami, how about using origami shuriken somewhere?

There is also an old discussion "New Logo for Japanese Language & Usage", though I'm not sure how much can be taken.

  • 2
    The Imperial Seal as suggested by @Earthliŋ in an Answer below as a possibility for the badge design would work quite naturally for the ask question vignette (although as I think about it, I'm not entirely sure why it is a star in the first place...). There are plenty of clan symbols from the muromachi era that could work well too. Just throwing it out there, – G-Cam May 25 '16 at 2:35
14

SUDDENLY REALIZED

original icon

If you take away some lines and round the corner a bit:

icon idea

it perfectly looks like katakana ア and still is superimposed J and P!

Or could be like this, I guess more clearly recognizable as JP.

icon idea 2

(Sorry for unprofessional collaging, I know it.)

13


Please make the tags easier to see. They're too low contrast right now:

 screen shot of tags

As you already know, standard accessibility guidelines call for a higher minimum contrast than you're using in your designs. I don't think there's any good reason to make a site intentionally less accessible.

13

Thank you for the beautiful design. I really like it, especially the color scheme, the subtle pattern and the coin-shaped icons. The subtle pattern makes me feel happy, because it looks like a variation of a Japanese traditional pattern called Shippou Tsunagi (七宝つなぎ) which is a good-luck pattern meaning happiness (everyone-satisfied-and-no-trouble kind of happiness 円満) and harmony (調和).

There is one thing which might not be a good choice for this community— the shape of あ.

A correct shape of あ is something like this.

Image of correct shapes of あ

あ is written this way, and the parts A and B in the image above should exist in a correct shape of あ. The あ in the logo doesn’t have the A part.

The part A or B or both in あ glyph are omitted in many cool or cute Japanese fonts. Those あs are recognizable to people who are familiar with Japanese language, so they are okay to be used in various situations. But, this is Japanese Language Stack Exchange. I think that using a correct shape of あ would be better, or more appropriate than using a variation of あ in this case. A variation is a part of language, so some people might welcome it if it’s cool. However, there are at least two benefits to use a correct あ for the logo.

  1. It will not make beginners confused and helps them be familiar with a correct hiragana shape.
  2. It makes this website look more reliable.

I know that most of high-quality Japanese fonts are very expensive and not available to be used for creating a logo. However, fortunately, there are some free fonts.

I searched and picked 8 free fonts which contain correct-shaped あ. They are licensed under SIL Open Font License, Version 1.1 or IPA Font License Agreement v1.0, so anyone can use those fonts to create a logo, for free.


Image of IPAexGothic Font
Image of IPAexMincho Font

IPAex Gothic / IPAexゴシック
IPAex Mincho / iPAex明朝

IPA Font License Agreement v1.0


Image of Yasashisa Antique Font
Image of Yasashisa Gothic Font

Yasashisa Antique / やさしさアンチック
Yasashisa Gothic / やさしさゴシック
IPA Font License Agreement v1.0


Image of FLOPDESIGN Font

FLOPDESIGN / フロップデザインフォント
IPA Font License Agreement v1.0


Image of Source Han Sans Font

Source Han Sans / 源ノ角ゴシック
(source-han-sans-1.004R / OTF / Japanese folder)
SIL Open Font License, Version 1.1


Image of Gen Jyuu Gothic P Font

Gen Jyuu Gothic / 源柔ゴシック
SIL Open Font License, Version 1.1


Image of GenEi LateMin Font

GenEi LateMin / 源暎ラテミン
SIL Open Font License, Version 1.1


(I wish I could find a cool brush-style Japanese free font, but high-quality brush-style Japanese fonts are all expensive and not allowing users to use it to create a logo.)


If this community would think that using a variation of あ, instead of correct あ, is fine for the logo, I’ll accept the fact and stop thinking about this matter. But if someone would think this is a matter, there are at least 8 Japanese fonts available to create a logo.

I’m really excited about the new great design to be implemented, and just hope it show correct information about Japanese language.

  • 2
    Thank you for reporting this (I need to learn some Japanese now!) and work you did researching fonts! Really appreciate it. I will try to pick something and update logo. I prefer regular shapes rather than brush-like, because general styling of new design is around simple lines and shapes. – Paweł Jun 1 '16 at 5:25
  • +1, it spared me from another post. FWIW the current あ seems to be accessibility kana variant of ヒラギノ角ゴ typeface: designpocket.jp/dl_font_category/detail.aspx?bid=12363 – broccoli forest Jun 1 '16 at 7:32
  • btw, how about Oradano明朝? asahi-net.or.jp/~sd5a-ucd/freefonts/Oradano-Mincho It's not a brush font but looks very retro. – broccoli forest Jun 1 '16 at 7:33
  • The glyph design of Oradano明朝 is interesting, but unfortunately, its あ is not in a correct shape, so the font may not be a good choice for this community’s logo. Personally, I like the retro taste, though. – HiruneDiver Jun 2 '16 at 0:00
12

The way "Japanese Language" is written at the top seems off stylistically to me.

I took it that part of the design is supposed to find inspiration from Japanese calligraphy or something like that, but ...

  1. the A's having the horizontal lines extend past the diagonal lines seems off, because the vertical lines are drawn first and it would be weird to start the horizontal line to the left.
  2. The E's also have the same issue.
  • 2
    I agree to this to an extent as well. If you were to ask me what the typography reminds me of I'd be more prone to say something like native American. Note that I have absolutely no knowledge of Native American culture or lettering. – ssb May 25 '16 at 3:42
  • We'd like to keep this font for logo, including extending lines for A & E — i feel like calling this an "issue" is a little bit too much :). It's just matter of styling and taste. But I'm glad you posted this feedback. – Paweł May 25 '16 at 7:11
  • 6
    @Paweł Unfortunately the community thinks the biggest problem lies in the logo and icon. Conveying "elegance of Japanese writing systems" through Latin letters is a worse idea than you might think. We're not saying your aesthetics is bad, only the design isn't quite on the right way to inspire serious learners and native speakers. We fear lest this site is viewed as another pseudo-Japonism promoter because of its signature symbol. Though we don't have much graduated sites involves non-Latin-alphabet language, it may be good to see how Mi Yodeya handles it. – broccoli forest May 25 '16 at 14:10
  • 5
    When this style of faux-Oriental style English script font was discussed a few years ago, the community of the day was overwhelmingly against it too (19 votes as of counting) – cypher May 26 '16 at 0:05
10

I'm quite pleased with the design and have nothing at all negative to say about it. I'd also like to point out that the font seems different which I think is a welcome change.

Could you please elaborate on the site logo?

enter image description here

I can sort of see a J and a P superimposed but was wondering if the extra lines have meaning beyond just aesthetics.

  • This is aesthetic, and its also inspired by handwritten kanji characters. I like the way that characters can blur together in handwriting, and wanted to digitally recreate this organic effect by making the characters bleed together, as they often do in handwriting. It feels more natural and organic, even though the characters are digitally created. – Paweł May 24 '16 at 13:38
  • 16
    I couldn't figure out what the logo was supposed to be. It doesn't look obviously Japanese to me, and I couldn't tell it was supposed to say "JP" (is that what it says?). – snailboat May 24 '16 at 14:05
  • 8
    I think it's a nice logo aesthetically, but I have to echo the sentiment that just looking at it out of context I'd have no idea at all that it represented Japanese language – ssb May 25 '16 at 1:24
7

Overall, I think the design looks quite nice :-)

I'd like to see a different icon/logo for the site. Have you considered ento's suggestion, something based on the hiragana character あ? That would be instantly recognizable as Japanese, even to students who are just starting to learn the language.

6

I appreciate your earnest consideration and hard work to improve the design, which has made the look and feel much nicer and apposite. But I have to say that many people, including me, feel the logotype (the text next to the icon) is the last serious problem in this design.

enter image description here

If you allow me to explain how I feel about it in my own word, it's like: I have nothing really to say about the aesthetic feature of the font, and I actually admire the perfection of the artistic work, such as subtlety of the curves in "S" or the flavorful shape of "E". I'd happily say it'd be a great job — if only the text said "BAMBOO BIKE" or "ORGANIC CAFE", or perhaps "BROCCOLI FOREST". But when I'm told it represents "JAPANESE LANGUAGE", I cannot help but think "Really?", much more when it's seemingly intended to "convey the linear elegance of Japanese writing systems".

Suppose I were a Japanese designer who were assigned to an upcoming English-learning forum website, and I thought, English is a language widely spoken in the world, so much universal as numbers, thus I should make it look as digital and geometric as possible, yes, let's use a dot matrix font or a 7-segment font for the title logo! And you must be frowned; "universal" atmosphere in Latin letters is usually expressed by fonts like Helvetica or Univers, and you could hardly be more geometric than these kind of typefaces. Why? But my fonts are far more strikingly impressive than them! — It's just because I'm not really familiar with Latin letters. That's why I think the logo text is only for who doesn't know Japanese language at all, rather than who has tried to seriously learn aught of its real aspect.

enter image description here

Let's look at the brand logo of a Japanese whisky. What do you get from the alphabet letters? It gives me impressions of stability, tradition, establishment, authenticity, and a hint of 19th-century flavor... so does the brush kanji. They look so different, but have similar connotations. I don't dare teaching fish swimming, but I think we can say that between the idea and its crystallized image there are a lot of entanglement with context, convention, expectation etc. you should consider during drawing a design. It's not that as if you add sugar and everything suddenly becomes delicious. If you think the example above too far-fetched, you can have more standard one.

enter image description here

I have no idea how European people perceive, but I can guarantee that the two lines of Japanese and English are parallel in nuances within each writing system. Now, if you tweak the shape making the bottom line look more like the top, does it look neater with Japanese? Probably no, it'd end up in a fairly standard Japanese and somewhat exotic Latin letters deviates from standard. It's a common trap you're likely to fall into, that the harder you try to make it look "Japanese", the less the reader who knows both Alphabet and Japanese deems it "Japanese". Of course the most skillful designers would think out how to imitate body and soul of another writing system enough to convince most people, but generally it's a very, very hard task. Although we do place great hope on your designers to achieve the ideal, it doesn't seem to me very successful at the current state. I rather think it's expedient that use a font represents, say, "elegance" in ordinary context of Alphabet, then put some Japanese decorations on it.

5

Early Christmas! Great news, the site looks really nice.

One question, though (if I may): what was the idea behind the badge-design?

badge

How about a design reminiscent of the kiku no gomon (Imperial Seal / national emblem), which appears for example on Japanese passports. Maybe like this

badges

  • 4
    I think the proposed badge design that Pawel came up with is the "mon" (文) coin used in the Tokugawa Era. I also would prefer the Imperial Seal but question the visibility of the small grooves around the perimeter when scaled down. The detail might be too fine... – G-Cam May 24 '16 at 12:38
  • 3
    @G-Cam is right - this is inspired by the "mon" coin. Chose it because it has a unique shape and can be viewed at small sizes. – Paweł May 24 '16 at 13:37
5

I'd suggest that the logo might be better as a stylized version of the character 和, which represents Japan and the idea of 'Japan-ness' in a much clearer way.

1

I don't like the color scheme. I can't phrase it well because I'm not a designer, but it feels more "heavy" and "pressuring" than what we have now. The colors are darker and all of them are "strange" (e.g. not the bright blues\reds\greens that you usually see in basic looking websites), which makes me feel uncomfortable. The round font on your pictures also looks unpleasant compared to what we have now (Arial?) to me, but maybe that's a browser thing and not a part of the design.

Unless there is a way for a user to revert back to the standard design, this change will most likely make me visit the site less often.

  • 1
    I found the colour scheme really subtle, in that I did not really even notice a change from what we have now. When the post starts with a selection of five dark colours, I expected the design to not have so much white and light grey. – oals May 24 '16 at 18:10
  • Starting feedback with "I don't like" seems kinda like very subjective opinion :). I really appreciate this feedback and everyone's else but we're probably not able to make everyone happy (even if we'd like to). We're still considering other feedback and making some subtle changes but I can tell you already that it is very unlikely we will change colors and font. – Paweł May 25 '16 at 7:05
  • 3
    @Paweł Personally I really like the color scheme, so you have at least one fan there. – ssb May 25 '16 at 10:03
  • Well, today I learned that there IS a userscript to force the default style: meta.stackexchange.com/a/275804 So I've got nothing to complain about now. Have fun with the new design guys, I think it's cool that most people seem to like it. – kuchitsu May 25 '16 at 18:28
  • 2
    I'm glad you'll be sticking around :-) I personally like the color scheme overall, although it has some low contrast elements (which SE is really fond of lately), which are poor for accessibility. In particular, the tags are hard to see. – snailboat May 25 '16 at 23:01
  • 2
    @Pawel One concern is all the gray colors in your screenshot make it hard to tell if this is the meta site or the main site. Many other sites have vivid colors on the main site and grayscale on meta to tell them apart easy. You have a nice blue pattern at the top of your post, but I don't see it used anywhere (aside from button colors)? – Troyen Jun 3 '16 at 21:01

You must log in to answer this question.

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