Дизайн Редакция vc.ru
7 463

Смешение языков, сложная типографика и милые персонажи — 10 трендов японского графического и веб-дизайна

Веб-студия AIC подготовила для vc.ru перевод статьи Мэри Стрибли об основных тенденциях в японском графическом и веб-дизайне. 

В закладки

Взгляните на государственный флаг Японии — яркий цветовой контраст и простая геометрия. Красиво, изящно и очень оригинально на фоне европейских триколоров и крестов, правда? А теперь забудьте про флаг — на нем японский графический минимализм исчерпывается, и начинается хаос.

Культура Японии объединяет несовместимое: цветущие сады и небоскрёбы, боевые искусства и чайные церемонии. В дизайне всё подчиняется той же логике — бесконечное нагромождение несочетаемого.

И так — во всём, от наружной рекламы до графического дизайна. В каждом направлении прослеживаются одни и те же тенденции, которые Мэри Стрибли вынесла в список из 10 пунктов. Мы адаптировали статью для наших читателей и дополнили её примерами из веб-дизайна.

Яркие цвета

Япония изобилует цветом — любовь к пестроте заложена в подкорке каждого жителя. Японцам мало того взрыва красок, что дарят рекламные щиты улицам Токио, поэтому каждое воскресенье они проводят косплей-сборища в районе Харадзюка.

С цветами в наружной рекламе всё просто: макет красят в белый или красный, а на всю ширину вставляют текст. Для изображений места не остаётся. В графическом дизайне таких ограничений нет. Чем больше цвета и выше насыщенность — тем лучше:

Японцам неведомы наши европейские представления о цветовой гармонии, они редко останавливаются на двух-трёх оттенках. Никто не боится конфликта цветов и перегруженной картинки — считается, что чем больше красок в макете, тем больше в нём жизни.

Веб-дизайн тоже пестрит цветом:

go-jimbou.info

Смешение языков

Ещё одна характерная черта японского дизайна — одновременное использование иероглифов и латиницы. Нередко слова на разных языках накладываются друг на друга, чтобы привлечь внимание и заставить читателей изучать макет дольше:

Такая реклама работает в деловых кварталах, где распространено общение на английском. Она выбивается из общей массы, при этом понятна и носителю языка, и иностранцу — взгляд фокусируется на привычных символах и сообщение считывается. Конечно, такой формат головоломки нам, европейцам, непривычен.

В вебе смешение языков тоже считается нормой — зачастую названия разделов и заголовков пишутся латиницей:

Сложная типографика

В японском языке 50 тысяч иероглифов, из них только три тысячи находятся в лексиконе современного японца. На деле их и того меньше — выпускник школы должен знать 1945 иероглифов, а в написании имён и фамилий руководствоваться списком «дзиммэйё-кандзи» — в нём 861 знак.

Этот список составляет основу японской типографики. В текстах могут встречаться и другие символы, но случается это крайне редко.

Японский язык настолько сложный, что проще нарисовать нужные символы от руки, чем каждый раз разрабатывать полноценный шрифт. У дизайнеров нет простора в выборе начертания, зато они почти не слышат фразу «поиграйте со шрифтами» .

Кажется, ограничения в типографике не касаются японского веб-дизайна: 

kahou.com
hokusai.gr.jp

Мазки

Эта черта дизайна обязана традиционной японской каллиграфии — иероглифы выводятся кистью, при этом мазки должны быть грубыми и чёткими. Никаких правок не допускается, нужно корректно изобразить все символы с первого раза. Иначе каллиграфия потеряет всякую поэтичность.

Каллиграфия переносится и на сайты. Вообще в виду того, что иероглифы сами по себе иконографичны, в японском вебе отпадает надобность в иконках. Типографика их заменяет:

Градиенты

Ещё один распространённый приём в японском графическом дизайне — использование градиентов. Дизайнеры активно оживляют ими фон и заголовки. Работает общий цветовой принцип: чем больше красок, тем круче твоя работа.

В отличие от наших дизайнеров, японцы не так рьяно эксплуатируют градиенты в вебе. Разве что это сайт с подходящей иллюстрацией — и без градиента там нельзя было обойтись:

ohzan.com

Цветочные паттерны

Цветы в японской культуре — это настоящий культ. Растения напрямую связаны с идеями и символами. Даже цвета лепестков несут сакральное значение: розовые цветы ассоциируются со здравоохранением, а белые — с честью и защитой. Не случайно парадная форма японских офицеров белого цвета.

Таким образом, цветочные мотивы в графике не только выполняют декоративную функцию, но и несут тайный смысл.

В веб-дизайне найти цветочные темы тоже несложно:

Осевая симметрия

Ещё один распространённый элемент японского дизайна — круг. Он символизирует равновесие и гармонию, поэтому часто применяется в геральдике (вспомните про флаг). Если в круге есть изображение, оно почти всегда подчиняется законам симметрии:

Осевая симметрия часто используется в брендинге и создании логотипов. Круг как таковой может отсутствовать, однако общий баланс сохраняется. Логотип Mitsubishi построен по этому принципу:

Японские дизайнеры всегда следуют закону симметрии, в результате круговые мотивы могут приобретать такую форму:

Даже в веб-дизайне японцы стараются визуально разделять макет на две похожие половинки — как, например, здесь:

riskybrand.com

Милые персонажи

Вспомните японские мультфильмы с очаровательными персонажами — это целая культура, которая называется kawaii. Герои аниме встречаются в рекламе, брендинге и продуктовом дизайне. Например, вот так выглядит упаковка риса одной местной компаний:

Натали Авелла, автор книги Graphic Japan, отмечает: «Японцы часто стараются разрядить обстановку за счёт популярных и смешных персонажей. Это позволяет брендам строить непринуждённую коммуникацию и развивать близкие отношения с клиентом».

Миленькие рисованные персонажи, конечно же, встречаются в вебе — как на этом сайте, выигравшем на конкурсе Awwwards.

gakuten.jp

Переизбыток информации

Большая часть японского дизайна перегружена текстом, особенно это касается веба — в нём нет места минимализму. Почему? Ответ снова дают культурные особенности: японцы не умеют выделять главное и каждую историю сопровождают мельчайшими подробностями.

Сайт для японцев — это электронный продавец, представитель компании. Он должен рассказать о товаре всё, не упуская ни одной детали. Отсюда такие громоздкие веб-страницы:

Типичный японский сайт — с виду полный хаос с убитым юзабилити. Однако именно так жители Страны восходящего солнца привыкли воспринимать информацию. Им нормально.  

Ещё пример — плакат для японской выставки. Текст вписан в общую геометрию и симметрию рисунка. Давайте пофантазируем, сколько бы европейских заказчиков ответили «да, отлично, я беру это!».

Коллаж

В этом тренде дизайна объединены все остальные. Элементы макета накладываются друг на друга — так дизайнер создает динамику в картинке:

На сайтах этот приём используют дозированно — видимо, чтобы окончательно не перегрузить пользователя. Главным способом привлечь внимание считается анимация в сочетании с насыщенной заливкой. Здесь всё как у нас:

riskybrand.com

Выделить в японском дизайне основные визуальные особенности непросто. Японцы иначе смотрят на мир и по-другому трактуют дизайн как таковой. Главное, чему можно у них научиться, — не бояться экспериментов.

#Интерфейсы #Дизайн #веб_дизайн

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
Статьи по теме
Как цветовое решение сайтов и приложений влияет на конверсию
Тренды в дизайне email-рассылок в 2017 году
«Мемфис» в веб-дизайне: как «яркий» тренд из 80-х возвращается в 2016 году
{ "author_name": "Редакция vc.ru", "author_type": "self", "tags": ["\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0434\u0438\u0437\u0430\u0439\u043d","\u0432\u0435\u0431_\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 12, "likes": 19, "favorites": 27, "is_advertisement": false, "subsite_label": "design", "id": 22519, "is_wide": false, "is_ugc": true, "date": "Wed, 15 Mar 2017 15:43:22 +0300" }
{ "id": 22519, "author_id": 2, "diff_limit": 1000, "urls": {"diff":"\/comments\/22519\/get","add":"\/comments\/22519\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/22519"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114 }

12 комментариев 12 комм.

Популярные

По порядку

Написать комментарий...
7

"....именно так жители поднебесной привыкли..." - разве "поднебесная" это не Китай?

Ответить
0

Во-во! Японцы жители восходящего солнца тогда уж )

Ответить
5

Я потек с их постеров.

Ответить
5

"в районе Харадзюка." - в районе Харадзюку.

Могли бы и проверить при переводе.

Ах да, перевод, точно!

"Веб-студия AIC подготовила для vc.ru перевод статьи Мэри Стрибли об основных тенденциях в японском графическом и веб-дизайне." - перевод! А теперь смотрим дальше.

1) "This use of color is rooted very heavily in Japanese culture in general. Take a look at the streets of Harajuku, or the vibrancy of Shibuya. It makes sense that this love for all hues would translate to graphic design."

2) "Япония изобилует цветом — любовь к пестроте заложена в подкорке каждого жителя. Японцам мало того взрыва красок, что дарят рекламные щиты улицам Токио, поэтому каждое воскресенье они проводят косплей-сборища в районе Харадзюка."

Ребят, вы не подумайте лишнего: статья крутая, то что преподнесли русскоговорящим читателям очень круто, но это же перевод, пе-ре-вод, а не отсебятина. Взять например "косплей-сборище" (как-то вульгарно, но да ладно) - ну нет в оригинале ни слова о косплее. Допустим это своевольный перевод (в собственной интерпретации, ага), но если и так, то это по сути фактическая ошибка, так как Харадзюку представляет собой мекку моды для японцев. Там не только косплееры, но и представители различных фэшн-направлений.

Чувствую себя пареньком с дизайна, но я с лингвистики, вот у меня и бомбит.

Без обид ещё раз, статья крутая, 'переводчикам' огромный респект.

Ответить
3

Сплошной пайн эпл эпл пен

Ответить
2

Хм, а мне очень понравились работы из этой статьи. И даже плакат для японской выставки мне понравился - я бы обязательно подошёл ближе, чтобы понять что это. Принял такую работу,как заказчик.

Ответить
1

этим "трендам" уже лет 20. любую книжку 2000-2015 года про дизайн плакатов, упаковки, иллюстрации открываешь — и так все тоже самое. приводить в пример работы, сделанные 3-4 года назад — прекрасный ход. и когда это палитра цмик стала "яркими цветами"?

Ответить
0

Мозг чуть не взорвали...

Ответить
0

2014-2015 год постеры. За 2 года ни чего не изменилось или просто баян?

Ответить
0

А у нас много текста отпугивает и самая лучшая реклама, та которая умещается в 2-3 слова. Just Do It..

Ответить
0

Исправьте, пожалуйста, японцы не жители Поднебесной, они - жители страны восходящего солнца. В Поднебесной китайцы живут, у которых впрочем японцы и позаимствовали свои первые иероглифы :)

Ответить
0

Разное мышление. У нас ржака от их рекламы, для них норм. Это же очевидно

Ответить

Комментарий удален

0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Нейронная сеть научилась читать стихи
голосом Пастернака и смотреть в окно на осень
Подписаться на push-уведомления