Пара советов дизайнеру от недизайнера

№1: Изучи основы типографики


Не секрет, что в modern web design типографика стала одним из ключевых понятий, но что же такое типографика?

Ну, в самом простом и грубом объяснении, это принципы оформления текста.

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

Ты, вероятно заметишь — это я и так знаю — я дизайнер, а не ты! И в целом окажешься прав.


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


Вообще, это банальнейший совет, однако, я вижу как многие проекты в вебе (иной раз очень крупные) страдают именно от отсутствия продуманной текстовой составляющей.

Многие думают, что типографика это о дизайне текста в контексте его «красивости».

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

Рассмотрим пример документации к nodejs фреймворку sailsjs:


Уже заметил фатальную проблему сайта?

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

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

Вот вторая ошибка — за счёт мелкого кегля строки кажутся излишне длинными, т.е. человеку придется постоянно бегать глазами по нему. Это очень утомляет — на контент-ориентированных сайтах это неприемлемо (да и в любых коммерческих продуктах, если вы хотите удержать пользователя — не делайте чтение утомляющим)

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

Может быть, с эстетической точки зрения, сайт и выглядит «красиво», но этот дизайн не решает поставленную задачу! (ну, если конечно такая задача ставилась:))


А теперь взгляни, как сделана документация у похожего проекта — feathersjs:


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

Очевидно, размер шрифта по умолчанию довольно крупный, что делает его чтение удобным и лёгким.

Все заголовки контрастируют с текстом, что упрощает навигацию по тексту (вспоминаем про зрительную память)

Возможно, всё это кажется задротством и излишеством, но нет. Лично для меня на данный момент причина по которой я использую feathersjs, а не sails, как раз, и состоит в том, что я физически не могу осилить документацию sails — мне просто через 10 минут чтения хочется спать. 🙂

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

№2: не переусердствуй с художественным оформлением


Безусловно, художественное оформление может быть важной частью восприятия продукта, однако, не стоит слишком усложнять сайты ради этого.

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

Для каких-то Web-Art произведений это всё ОК, но если ты работаешь над коммерческим проектом, то держи пожалуйста в голове одну простую мысль — дизайн сайта не должен продавать себя, он должен продавать продукт клиента.


Сегодня всё вышесказанное скорее относится к сфере landing-page — вот там люди реально отрываются и создают очень сложные и красочные вещи (иногда это шедевры дизайна, иногда наборы иллюстраций).

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

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

во-первых в том, что таких маркетологов тяжело и дорого найти,

во-вторых, дизайн, не являясь главным компонентом, является поддержкой коммерческого предложения.

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


Ну, а на сегодня у меня всё, если есть какие-то мысли или вопросы, добро пожаловать в комментарии!

comments powered by Disqus