Japanese Language New Site Design

Question

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.

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

Question view

Updated SWAG proposals

Notebook

Sticker

T-shirt

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.

Answer 1

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:

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.

Answer 2

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.

Answer 3

SUDDENLY REALIZED

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

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

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

(Sorry for unprofessional collaging, I know it.)

Answer 4

status-completed

---

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

　

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.

• Color contrast checker: http://webaim.org/resources/contrastchecker/?fcolor=a3a6b4&bcolor=ffffff

• Related discussion on Puzzling.SE: https://puzzling.meta.stackexchange.com/a/4726/14295

Answer 5

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.

あ 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.

---

IPAex Gothic / IPAexゴシック
IPAex Mincho / iPAex明朝
IPA Font License Agreement v1.0

---

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

---

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

---

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

---

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

---

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.

Answer 6

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.

Answer 7

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?

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

Answer 8

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.

Answer 9

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.

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.

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.

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.

Answer 10

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

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

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

Answer 11

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.

Answer 12

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.