WebValley Studio

WebValley Studio

70+ ошибок в веб‑дизайне, которые убивают сайт и просаживают конверсию

Одни сайты выглядят эстетично, гармонично, завершённо, а другие, даже если они вполне современные, вызывают чувство, что с ними что-то не так. Мы научим, как отличить ТОПовый дизайн от халтуры.

РАССЧИТАТЬ СТОИМОСТЬ

Главная
→
Статьи
→
SEO умерло – развеиваем популярный миф

Оглавление

Готовое руководство по всем ошибкам, которое поможет сделать сайт грамотно и профессионально
Ошибки юзабилити
Ошибки в структуре макета
Ошибки в визуале сайта
Ошибки в типографике сайта
Веб-дизайн в вакууме
Откуда берутся ошибки в дизайне сайтов

Готовое руководство по всем ошибкам, которое поможет сделать сайт грамотно и профессионально

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

Ошибки юзабилити

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

Упоротая навигация

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

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

Пункты меню;
Хлебные крошки;
Поиск по сайту;
Уровни вложенности;
Навигационные кнопки;
Структура страницы.

Отсутствие хлебных крошек

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

Обязательны хлебные крошки для интернет-магазинов с большим каталогом или для сайтов с большим количеством услуг или разделов.

Пример дизайна большого каталога с правильной навигацией в виде хлебных крошек

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

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

Отсутствие поиска

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

А иногда объём и структура сайта такие, что просто нет смысла что-то искать без поиска, например, на маркетплейсах или фотостоках.

Пример поиска на маркетплейсе Ozon

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

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

Выдача поисковой системы при вводе правильного запроса в Pinterest

Выдача поисковой системы при вводе неправильного запроса в Pinterest

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

А вот так работает поиск в сервисе онлайн-кинотеатра Кинопоиск:

Пример ввода запроса в поисковую строку на сервисе Kinopoisk

При вводе запроса с опечаткой сервис всё равно выдал похожий по логике и искомый фильм.

Казалось бы, а при чём тут дизайнер? Как он это должен изобразить? Это точно ко мне? Да! Дизайнер должен не только нарисовать элемент, но и прописать логику его работы.

Перегруженное меню

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

Пример дизайна с перегруженным меню на сайте auto ru

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

Пример дизайна многоуровневого структурированного меню на сайте Agat Group

Или вынести важные пункты в открытое меню, а остальные скрыть в разделе Ещё.

Пример большого меню, где часть разделов вынесены во вкладку Ещё на сайте drom ru

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

Пример большого меню на отдельной странице на сайте компании Металл Профиль

Слишком много уровней вложенности

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

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

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

Если вложенность логичная, то не страшно, что она большая.

Большую роль играет то, на каком движке будет сделан сайт. На примере ниже можно увидеть два разных подхода. У мебельной компании Дятьково каталог имеет более глубокую вложенность, и каждый подраздел вынесен на отдельную страницу (Главная → Каталог → Шкафы → Шкафы-витрины), что выглядит логично и удобно. А у мебельной компании Диван.ру, в похожем разделе, виды шкафов уже оформлены в фильтр на той же странице (Главная → Шкафы и стеллажи), что в целом также удобно.

ошибки начинающих графических дизайнеров

Более глубокий уровень вложенности разделов каталога на сайте Дятьково

Менее глубокий уровень вложенности разделов каталога на сайте Диван ру

Если проектируемый сайт будет размещён, например, на платформе Tilda Publishing, то предпочтительней, чтобы у каждого раздела была своя отдельная страница. У Tilda очень плохо продвигаются карточки товаров, и если не сделать отдельные страницы разделов, подразделов и так далее, то вообще маловероятно, что на каталог будет идти какой-то трафик.

Если сайт на Bitrix Аспро, который изначально создавался под интернет-магазины, можно всё реализовать фильтрами без ущерба для SEO, потому что у Bitrix есть классный инструмент — умные фильтры, которые фактически генерируют динамические страницы. Это происходит автоматически при выборе какого-то набора фильтров.

Дизайнер должен быть подкованным в этом вопросе и понимать, а как этот сайт будет продвигаться, и на какой платформе будет размещён.

Отсутствие кнопок на продающих лендингах

Основная задача продающего лендинга — продать. То есть плавно подвести пользователя к конверсионному действию: купить продукт, услугу, подписаться, связаться. Как пользователь сможет совершить это действие, если вовремя не предложить ему нужную кнопку? Никак.

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

Адовый перебор с конверсионными элементами на сайте

Нужны кнопки или нет, зависит от задачи проекта:

Пример дизайна персональной страницы, где уместно отсутствует конверсионное действие. Сайт Дениса Косьяненко

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

Пример дизайна персональной страницы, где присутствует конверсионное действие. Сайт Eliza Pichulina

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

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

Пример дизайна персональной страницы, где присутствует конверсионное действие. Сайт фотостудии Повод

Кнопка СТА важна, если главная задача — продать. И не всегда нужна, если вы хотите просто познакомить пользователя с персоной или продуктом.

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

Непонятное расположение блоков

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

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

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

Отсутствие меню и логотипа

Пользователи привыкли, что попасть на Главную страницу можно, кликнув на логотип компании. Это веб-стандарт. Наличие пункта в меню «Главная» не так актуально, как раньше. Но важно помнить, кто ваша целевая аудитория. Если она возрастная, то, возможно, этот пункт стоит всё же оставить, так как раньше он был обязателен в меню, и привычен для навигации старшему поколению.

Пункты меню также привычный паттерн для посетителей сайта. Даже если сайт небольшой, пренебрегать навигацией не стоит. Ошибочно думать, что на лендинге можно убрать пункты меню, так как других страниц всё равно нет, и пользователь перемещается путём скролла по одной странице. А что если ему будет нужно быстро вернуться к какой-то информации, которая находится в середине страницы? А если эта страница ещё и слишком длинная, то вдвойне неудобно постоянно скролить.

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

В примере слева в меню отсутствуют навигационные разделы. В примере справа — основные разделы навигации есть

Перегруженные формы

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

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

Разбейте форму на шаги или разделы, чтобы она не выглядела сильно устрашающей:

Сложная форма на сайте Solok Cosmetics разбита на отдельные разделы и на две колонки, за счёт чего не выглядит такой устрашающей. Проект WebValley Studio

Добавьте подсказки к полям, чтобы сориентировать пользователя:

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

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

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

Отсутствие призывов к действию

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

Пример правильного блока призыва в дизайне сайта Lojer

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

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

Игнорирование поведенческих паттернов

Слишком большие формы ввода данных негативно влияют на поведенческий фактор посетителей сайта. Такие формы, скорее, отпугнут, чем привлекут внимание. Человеку может быть лень или некогда заполнять большое количество полей, или он может отвлечься в#nbОбращали внимание, что многие схожие по тематике ресурсы выглядят одинаково? Например, сайты маркетплейсов. Это неспроста. У посетителей сайта формируется определённый поведенческий паттерн, и проектировщики стараются его соблюдать, чтобы пользователю было комфортно находиться на сайте. Это закон Якоба.

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

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

Дизайн интерфейсов маркетплейсов

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

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

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

Отсутствие подсказок, инструкций и всплывающих окон

Не путать с бесячими навязчивыми попапами, которые неожиданно выскакивают при открытии страницы или каждую минуту =))

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

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

Сообщение об успешной отправке данных

Какие могут быть подсказки в интерфейсе
- Тултипы — всплывающая подсказка. Появляется при подведении курсора к объекту — чаще всего это иконка с каким-то знаком внутри. Помогает пользователю получить подсказку или описание чего-либо.

Пример тултипа — иконка с? внутри, при наведении на который, всплывает подсказка

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

Пример всплывающего уведомления на сайте Social Dance Studio

Пример всплывающего уведомления на сайте Skillbox

Объяснения к функциям и разделам — подсказки, помогающие разобраться с инструментами интерфейса.

Подсказка в Figma, сообщающая пользователю, что нажимая на плюс, он может создать новую страницу в файле

Контекстная помощь — сообщения с информацией или инструкциями при посещении первый раз какого-либо сервиса.

Сообщение о возможностях сервиса при первой загрузке приложения. Instiries сообщает новому пользователю о функциях сервиса.

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

Инструкции к форме регистрации на сайте Solok Cosmetics. Проект WebValley Studio

Подсказки в полях — помогают сориентироваться и быстро заполнить поле информацией.

Пример подсказки в поле на сайте https://web-valley.ru/kontakty

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

И не забудьте добавить иконку закрытия при проектировке подсказки =))

Отсутствие доказательной базы (отзывы, кейсы)

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

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

Блок с кейсами в портфолио на сайте WebValley

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

Пример блока с отзывами на сайте курса El Maximo

Пример блока с отзывами на сайте Skillbox

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

Добавьте ссылку на сайт при оформлении портфолио, распишите подробно этапы работы или результаты от точки, А до точки В при оформлении кейса.

Блок кейса и отзыва на сайте Revive System. Проект WebValley Studio

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

Тупиковый сценарий
Проектируя интерфейс, дизайнер должен позаботиться о том, чтобы пользователь не оказался в ситуации, из которой нет выхода. Особенно это актуально для приложений или сервисов.

Как избежать такой ситуации:
- При проектировании важно составить карту User flow, которая поможет понять, все ли сценарии учтены, и нет ли где-то тупика.

Пример User flow

Интерактивный прототип поможет протестировать путь пользователя и выявить ошибки в сценарии

Правильно спроектированное меню поможет удобно перемещаться от экрана к экрану.

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

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

Структура макета;
Визуал элементов;
Типографика;
Анимация.

Рассмотрим каждый из них детальнее.

Обсудить проект

Ошибки в структуре макета

Если кажется, что дизайн — это творческая работа свободного художника, то это далеко не так. У дизайнера есть задачи и ограничения, куча правил, чтобы работа была выполнена на отлично. Дизайнер, как волшебник, должен угодить сразу всем: с одной стороны, нужно выполнить дизайн, согласно материалам аналитического этапа и ТЗ, при этом, нужно учесть хотелки заказчика. С другой стороны, сайт в итоге должен быть удобным, понятным и приятным для пользователя. И с третьей (о чём часто забывают) — сайт должен соответствовать стандартам вёрстки, чтобы разработчик вам сказал спасибо, а не ругался последними словами, верстая кривой дизайн.

Основные ошибки в структуре макета, которые могут негативно повлиять на итоговый результат:

Сайт не по сетке
Сетка — это инструмент, который помогает структурировать и выравнивать контент на сайте. С сеткой сайт выглядит аккуратно, на нём присутствует визуальный порядок.

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

Подробнее о сетках в веб-дизайне →

Пример дизайн макета, в котором пренебрегли сеткой и выравниванием контента

Пример упорядоченного по сетке макета

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

Нет разделения на смысловые блоки
Если посмотреть на страницу в целом, то можно условно разделить её на смысловые блоки (О нас, Услуги, Этапы, Отзывы, Контакты). Если не поделить всю информацию на группы, то выглядеть она будет как одна большая портянка текста.

Есть несколько способов избавиться от этой ошибки:
- Отделить смысловые группы при помощи отступов.

Сравнение двух вариантов вёрстки страницы, где в одной — недостаточные отступы между блоками, а на другой — отступы разбили контент на отдельные группы

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

Усилить эффект разбивки можно также за счёт чередования цвета фона в блоках.

Пример разбивки контентных блоков при помощи цвета

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

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

Пример верстки со сменой направляющей силовой линии

За счёт смены направляющей, макет стал выглядеть более минималистично и стильно, информация воспринимается легче (вариант справа). Хотя и вариант слева выглядит аккуратно, просто более шаблонно.

Отступы гуляют

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

Если отступы между контентными блоками будут разного размера, то макет может выглядеть неряшливо:

Сравнение дизайн макетов с разными и одинаковыми отступами между блоками

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

Пример слишком маленьких отступов между блоками

Пример слишком больших отступов между блоками

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

Важно соблюдать адекватные размеры отступов между блоками. В единичных случаях можно отступить от правил. Например:

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

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

Пример сравнения отступов между блоками с единым цветом фона.

Закон близости — если объекты расположены рядом, они воспринимаются как единая группа.

Пример Закона близости

Объединяя объекты на экране, мы создаём целостные группы контента, которые пользователь будет воспринимать как единое целое. Соответственно, очень важно при этом соблюдать отступы. Существует правило для внешних и внутренних отступов:

Каждый внутренний отступ должен быть меньше или равен внешнему отступу.

Пример соотношения внешних и внутренних отступов внутри группы

Чем глубже мы погружаемся внутрь группы, тем меньше должен быть отступ. Чем ближе мы к наружным внешним отступам, тем больше должны быть эти отступы.

Схема правильных отступов в дизайне по правилам внешнего и внутреннего

Неправильные отступы между элементами внутри блока

Правильные отступы между элементами внутри блока

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

Внутри карточек также мы видим неудачное выравнивание: заголовок отбился, и как бы очевидная группа «заголовок + текст» — разбилась. На примере справа — более удачное оформление контента. Самая глубокая секция — это заголовок и текст внутри карточки. У них самый маленький отступ (до линии между ними). Далее в этой же карточке присутствует картинка. Она тоже элемент этой группы, но она уже на шаг выше находится, поэтому отступ у неё чуть больше. Вторая отдельная группа — это вторая, аналогичная карточка. Третья отдельная группа — это заголовочная секция. Внутри неё отступ меньше, чем до карточки. Все элементы по итогу образуют одну большую общую группу. У неё уровень — самый высокий, соответственно, отступы сверху и снизу — самые большие.

Какие ещё отступы должны быть подчинены логике: однотипные отступы в единообразных элементах. Например, если отступ от заголовка до подзаголовка 40 рх, то так должно быть на всех страницах, во всех похожих блоках, если нет необходимости намеренно сделать его больше или меньше.

Пример сравнения дизайн макетов с равномерными и неравномерными отступами от заголовков

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

Мало воздуха

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

Пример перегруженного экрана сайта Energo Belarus

Пример выше просто нашпигован, чем только можно. Тут и боковое меню, и списки, и многоуровневое меню, при этом отсутствует разбивка на смысловые блоки.

Даже аккуратный и эстетичный макет легко испортить, если налепить в него кучу элементов, стараясь заполнить всё пространство. Не надо так делать.

Пример сравнения макетов с налепленным дизайном и с эстетичным лёгким визуалом

Визуальная иерархия

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

В этом примере иерархия нарушена — Заголовок H1 на первом экране — 72 рх, а заголовок второго блока Н2 — 90 рх. Это не правильно, должно быть наоборот. Чем выше уровень заголовка, тем больше его размер

Во втором варианте заголовок Н2 меньше по размеру, и это правильный вариант визуальной иерархии

Соблюдать иерархию в типографике необходимо также внутри блока при оформлении текста. Подзаголовок не должен быть больше заголовка, а заголовок Н2 должен быть больше заголовка Н3.

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

В этом примере также неудачный вариант иерархии, так как заголовок Н2 в левом макете не должен быть меньше, чем Н3 заголовок. В правом — тоже ошибка, так как заголовки Н2 и Н3 одинакового размера

В этом примере правильно оформленная иерархия текста внутри блока.

Готовы создать сайт прямо сейчас. А вы?

Ошибки в визуале сайта

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

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

Борщ из элементов

Слишком много элементов на странице на 1 кв.м. дизайн точно не украсят.

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

Пример дизайна сайта, который собрал целую гору всевозможных ошибок. Тут и плохой контраст, и много разных цветов, 2 равнозначные кнопки, которые путают пользователя, куча контактов на один квадратный метр, дичная обводка и заливка у кнопок. Всё это отпугивает покупателя. Если так выглядит сайт компании, которая делает рекламные вывески, то как же выглядят сами вывески =))

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

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

А нужен ли декор

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

В этом дизайн макете явно перебор с оформлением. Ненужные украшательства, не знаешь, на что смотреть. Тут и лапки — ну, это же ветеринарка, как же без них =)) И элемент лого на фоне, и ещё фото на заднем плане, и подложка под фотографией

А так выглядит аккуратный, эстетичный макет, в котором присутствует только нужная информация

Пустой дизайн и перебор с негативным пространством

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

Пример чрезмерного злоупотребления негативным пространством

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

Пример гармоничного использования негативного пространства в дизайне

Негативное пространство — это не всегда пустой белый фон. Это может быть что-то цветное или какой-то объект:

Если сравнить два скриншота, то видно, что в первом случае — пустой фон выглядит слишком аскетично и не красит макет. Во втором варианте, добавив на задний фон векторный объект, мы добавили дизайну объёма и глубины, при этом экран выглядит всё также минималистично. Негативное пространство по прежнему присутствует, но уже не выглядит так незавершенно.

Перебор с цветом

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

Но это не означает, что нужно разукрасить сайт всеми цветами радуги =))

Плохой пример использования цвета (и те только цвета) на сайте компании ПРО СВЕТ

Есть формула эффективного использования цвета на сайте — 60/30/10. Она означает, что 60% на сайте должен занимать цвет фона, 30% — второстепенный цвет и только 10% — цвет акцентный.

Для акцентного цвета, как правило, используется один цвет. Реже 2 или 3.

Пример с использованием одного акцентного цвета в дизайне — золотого

Ещё пример с использованием одного акцентного цвета — изумрудного

Пример гармоничного сочетания нескольких акцентных цветов на сайте HOWDOG STORE. Проект студентки курса по веб-дизайну PRO Web

Пример плохой работы с цветом. Мешанина из ярких кислотных цветов на шумном фоне сайт точно не красит

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

Пример UI-кита для яркого цветного проекта

Пример использования цвета для идентификации направлений компании

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

Пример гармоничного сочетания сразу нескольких акцентных цветов в одном макете на сайте Habsida

Ошибки с цветом, которые часто допускают дизайнеры:

Неудачный цвет;
Цвет не подходит по контексту;
Недостаточная контрастность;
Грязные цвета;
Слишком много цвета.

Неудачно подобранный цвет

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

1) Достаточно ли универсальный выбранный акцентный цвет?

Расскажем на личном примере. В качестве акцентного цвета для студии веб-дизайна был выбран яркий жёлтый цвет, который отлично смотрелся на чёрном фоне сайта и привлекал к себе внимание.

Пример использования яркого жёлтого цвета на чёрном фоне на сайте WebValley Studio

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

Жёлтые цифры на светлом фоне совершенно не видны

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

Так выглядят фавиконы некоторых сайтов в тёмном интерфейсе. Их совершенно не видно. Аналогичная ситуация может быть и со светлым.

2) Не сливается ли цвет с элементами управления?

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

Неудачный пример с использованием акцентного красного цвета в успешном сообщении

3) Не присутствует ли в макете эффект халяции?

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

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

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

4) Сочетается ли выбранный цвет с другими?

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

Пример гармонично сочетающихся цветов в дизайне сайта

Пример использования цвета для идентификации направлений компании

Не подходящий по контексту цвет

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

Сравнение сайта стоматологической клиники с разным акцентным цветом в дизайне. Макет студентки курса PROWeb, Натальи Грудининой.

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

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

Недостаточный контраст в цвете

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

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

Ситуация: акцентным цветом в проекте был выбран яркий оранжевый цвет, который неплохо смотрелся в кнопках, как на светлом фоне, так и на тёмном.

А потом заказчик потребовал сделать яркий оранжевый блок с формой:

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

В этой ситуации лучшее решение — отказаться от использования акцентного оранжевого цвета, как фонового.

Грязные цвета

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

Чтобы не создавать подобный эффект, соблюдайте контрастность элементов, таких как: фон и текст, картинки и фон, и так далее.

Серый фон сильно тёмный, прям гнетущий, эффект шума — лишний, а голубой — сильно бледный и малоконтрастный. Создаётся эффект, что дизайн грязный.

Как тени и цвет влияют на впечатление от сайта. Грязный гнетущий дизайн слева и чистый воздушный справа.

Дизайн сильно привязан к цвету

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

Посмотрим на пример в монохроме, который классно выглядит и привлекает внимание:

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

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

Пример классного дизайна Dini Ag, где цвет играет в плюс, подчёркивая стилистику и бренд компании

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

А если представить сайт поликлиники с таким интерфейсом. Как думаете, пользователям будет удобно на нём находиться? Будет удобно найти нужную функцию, кнопку, раздел? А бедные дальтоники… Везде должна быть мера и холодная голова.

Или вот ещё пример

Казалось бы дичь дичная и явный перебор. Но! В данном контексте — это крутое решение для сайта стилиста

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

Шумный фон для текста

Текст поверх картинок — дно. Особенно, если его много. Особенно, если он мелкий.

Если на карточке должен быть текст, например, при наведении, то стоит убрать в этот момент изображение, заменив его однотонным фоном. Если есть возможность вынести текст под картинку — это будет лучшим решением

Часто такая ошибка возникает не по вине или неопытности веб-дизайнера, а потому, что дизайн делается без окончательных картинок:

Дизайн сайта на стадии разработки

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

Сайт в реальности

Фотографии оказались слишком шумными, и текст на них не читается. Картинка в макет просто не села.

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

1) Тёмный фильтр VS белый фильтр
Создать фильтр поверх изображения в целом допустимая техника, но важно понимать, как хорошо, а как плохо, и подходит ли этот вариант для тематики проекта.

Например, добавить тёмный фильтр на фон для сайта в сфере промышленности можно, так как фото здесь больше для идентификации ниши.

Пример затемнения фонового изображения на сайте Полар Гидравлика. Проект WebValley Studio

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

На экране в примере и текст потерялся, и букет цветов не видно. В этом случае лучше отказаться от фильтров и переделать композицию

Альтернативная версия размещения элементов. Текст прекрасно читаем, изображение сохранило свою красочность, продукт подан в лучшем виде.

Или заменить изображение на более подходящее:

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

Вот ещё один пример, когда фильтр на фото отрицательно влияет на впечатление:

Голубой цвет воды передаёт атмосферу, привлекает потенциального покупателя, вызывает у него эмоции. Затемнив фон, мы сделали картинку не вкусной и грязной

А что с белым фильтром? Просто забудьте про него, пожалуйста =))

Привет из 2010-го =))

2) Подложка
Так любимые непрофессиональными дизайнерами плашки под текст. Чаще всего это дичь. Если есть возможность избежать плашек, то так и нужно сделать. К тому же, разработчик вам не скажет спасибо, если вы дополнительно нагрузите интерфейс лишними элементами.

Дизайн сайта компании АвтоБетон. Плашка в этом примере и картинку перекрыла, и текст на ней нечитабельный из-за прозрачности

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

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

Но в некоторых случаях плашка поверх фотофона может неплохо выглядеть и быть уместной:

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

Крутое решение — плашка, как часть фона следующего блока:

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

Текст накладывается на важные части изображения.

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

Плохой пример расположения светлого заголовка на слишком шумном фоне из-за фактуры шубы. К тому же шуба — товар, а его просто закрыли.

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

Фото должно быть отформатировано так, чтобы освободить место под текст. Либо надо подвинуть текст так, чтобы он не перекрывал фото:

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

Устаревший дизайн

Сайт — как машина времени, открываешь, и ты снова в 2010 =))

Сайт требует постоянного обновления и оптимизации. Это не тот случай, когда сделал и забыл. Вы же не покупаете телефон на 15 лет, а, скорее всего, будете его обновлять каждые 2−3 года, может чаще, потому что хочется получить более новую, оптимизированную и современную модель. Так и с сайтом. Если сайт спроектирован достаточно давно, то стоит подумать о его редизайне.

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

Но самый треш, когда сайт не старый, а дизайн — морально устаревший:

Получше, чем предыдущий динозаврик, но для сайта сделанного пару лет назад, такой дизайн непростителен

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

Слепое следование трендам

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

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

Сайт-портфолио веб-дизайнера. Пример со смещением текста, который уже просто повсюду — выглядит не всегда хорошо. Этим трендом надо уметь пользоватся, чтобы дизайн не выглядел неряшливо и перегружено. К тому же, это классный визуал, но что с разметкой? Семантические заголовки потеряны, так как текст верстается кусками. Это аукнется при продвижении сайта.

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

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

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

В 2024 году цвет года Pantone — «Peach Fuzz» или по-русски «персиковый пушок». Цвет достаточно универсальный и может быть отличным вариантом для многих направлений.

Пример трендового портфолио на сайте MW.S

Цвет обладает умеренной контрастностью, что позволяет UX/UI-дизайнерам использовать его как базовый или акцентный в своих проектах.

«Peach Fuzz» вызывает такие ассоциации, как:

радость;
счастье;
экологичность;
свет;
тепло;
фрукты;
объятия;
любовь;
натуральность;
экологичность.

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

А если вспомнить прошлый год?

Цвет года Pantone 2024 «Peach Fuzz»

Героем года 2023 стал карминово-красный — «Viva Magenta». Он далёк от универсальности, яркий, насыщенный. Такой цвет надо использовать с осторожностью, в небольших количествах, для выделения важных элементов интерфейса.

Тренды — хорошо, но фокус должен быть на задачах бизнеса. Если они совпадают — супер. Если нет — оцените ситуацию трезво.

Цвет года Pantone 2023 « Viva Magenta»

Всратый логотип в премиальном дизайне

Частая боль веб-студий — дизайн сайта запилили, а лого трогать не стали. Заказчику всё ок =)) Но по итогу выглядит так себе. Всратый логотип сильно портит премиальный дизайн сайта. Если логотип такой же убогий и устаревший, как и сайт-динозавр, требующий редизайна, то его стоит также переделать.

Реальный пример из практики WebValley Studio — редизайн сайта компании по производству пластиковых ампул.

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

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

Макет для вёрстки выглядел так:

Макет сайта на стадии разработки

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

Дизайн сайта ПластХимПак. Проект WebValley Studio

Стрёмные иконки контактов и кривая вёрстка программистов заказчика завершили картину. Получился аккуратный современный сайт с убогим всратым меню =))

Ещё одна ситуация, тоже из практики. Логотип уже не такой стоково-дичный, но у заказчика осталась только устаревшая версия PNG, которая выглядит замыленно и портит страницы с новеньким дизайном. Не миритесь с такой ситуацией. Предложите заказчику обновить лого без редизайна, чтобы он выглядел чётко и не портил общее впечатление. Мы так и сделали:

Логотип компании Полар Гидравлика. Переотрисовка в векторе

Иконки из разных наборов

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

Пример использования иконок в интерфейсе

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

Пример использования иконок в интерфейсе сайта

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

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

Если нет возможности самостоятельно отрисовать иконки (сжатые сроки, маленький бюджет, отсутствие навыков в отрисовке векторных объектов), то постарайтесь найти единый пак иконок или хотя бы похожие.

Признаки однообразности иконок:

линии одной толщины:

Сравнение иконок по толщине линий

одинаковый радиус углов:

Сравнение иконок по радиусу углов

одинаковые цвета:

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

одинаковые стили— с заливкой или без:

Плохой пример иконок с разной стилистикой

одинаковые элементы оформления:

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

2. Иконки должны быть в векторном формате (SVG). Так они останутся чёткими в любом разрешении при любом размере.

В верхнем ряду иконки пиксельные, так как выгружены в формате PNG, внизу — иконки в векторе, они будут чёткие в любом размере

3. Иконки должны быть простыми и понятными. Так пользователю будет проще взаимодействовать с интерфейсом

Пример привычных иконок в интерфейсе

4. Иконки должны быть одинакового размера. Необходимо добавить картинку во фрейм определённого размера. Размер должен подчиняться системе сетки, заложенной в проект:

Пример правильного и некорректного формата иконок

Стили кнопок

Сколько стилей кнопок необходимо проекту — зависит от его масштабов. Но нужно адекватно подойти к вопросу. Если мы работаем над дизайн-системой Ozon, то большое количество кнопок необходимо: для основного и второстепенного действия, для разных направлений, для разных разрешений и так далее.

Кнопки дизайн-системы компании Ozon

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

Пример вариантов кнопок в небольшой дизайн-системе.

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

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

Стоковые бессмысленные картинки

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

Фото типа пожатых рук, девушек у телефона и довольных бизнесменов испортят даже самый красивый и минималистичный дизайн:

Пример дизайна с использованием стокового фото

Так же неуместно выглядят фото, не отражающие специфику продукта:

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

А эти коллажи из 2000-х =)) Ощущение, что видишь баннер 1000 мелочей на стене соседнего здания…

Пример плохого оформления изображения на сайте

И «любимые» плашки тут завершают картину и создают комбо для отрицательного впечатления от сайта.

Изображения из разных наборов

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

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

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

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

Стоковая фотография в галерее выглядит инородно

Иллюстрации для сайта детского лагеря Гарсар. Проект WebValley Studio

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

Каталог товаров на сайте Диван ру. Все фото в одном стиле

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

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

Некачественные картинки

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

Если изображение надо вырезать, то это нужно сделать качественно. Плохо вырезанные фото выглядят инородно и неряшливо.

Фото на экране плохого качества, портит впечатление о сайте

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

Пример плохо вырезанного фото

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

Фото выглядит инородно. Холодный тон сайта — серый, синий, и тёплое фото мужчины летного цветотипа.

Пример, как не следует размещать фото в пространстве, если у него есть обрезанные границы.

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

Растянутые или отражённые картинки выглядят несуразно:

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

Растянутые лица выглядят плохо

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

Не стоит отражать картинки с текстом, иначе он выдаст вашу манипуляцию =))

Позиционирование кадра

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

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

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

Если фото с продуктом на весь экран, нужно позаботиться о том, чтобы текст не перекрыл важные части. Скорее всего, в кадре продукт нужно разместить сбоку, а не по центру.

Пример правильного и не правильного расположения товара относительно заголовка

Если фото должно выходить за пределы грид-контейнера, следите, чтобы не обрезались важные детали:

Если забыть про grid-контейнер (обозначен синим цветом), можно получить нежелательный эффект при позиционировании фото. На небольших экранах получится так, как показано на примере слева.

Любители обводки

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

Сравнение кнопок с уместной и неуместной обводкой

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

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

Пример 1 — кнопка в меню с заливкой и без обводки

Пример 2 — кнопка в меню с обводкой и заливкой

На скриншотах выше два примера. В первом варианте в меню есть кнопка — с заливкой и без обводки. Во втором варианте дизайнер намеренно добавил обводку к кнопке меню, имеющей заливку. Почему в этом случае второй вариант выглядит лучше, чем первый, хотя нарушены правила использования заливки и обводки вместе? Потому что в данном случае у проекта строгий UI-кит. Крутить разные варианты и подбирать альтернативные варианты нельзя. А те цвета, которые имеет в доступе дизайнер, не подходят для того, чтобы кнопка выглядела хорошо только с заливкой. В данном случае можно заметить, что кнопка с одним и тем же конверсионным действием присутствует как в обложке, так и в меню. То есть у человека на экране будет сразу две кнопки с одним и тем же призывом. Убрать одну из кнопок — недопустимо, исходя из аналитики. Что нужно делать в этом случае? Покрасить две кнопки в яркий синий цвет будет неверно, так как эти кнопки будут дублировать друг друга и запутают пользователя: куда нажать, какую из них выбрать? Поэтому главной кнопкой выступает та, что находится на обложке. И дополнительной, второстепенной, менее акцентной кнопкой — та, что находится в меню. Их нельзя делать одинаковыми. Кнопку в меню решено сделать дополнительной (по дизайну — это светлый белый цвет). Но, так как фон меню тоже достаточно светлый, белая кнопка на этом фоне выглядит бледно. Кнопка только с заливкой как будто бы немного растекается и не совсем заметна. Поэтому, дизайнер специально применил и заливку, и обводку, но подобрал цвет заливки достаточно приглушённый относительно цвета обводки, чтобы кнопка выглядела аккуратно, не резко. В данном случае, симбиоз заливки и обводки, сделал кнопку более заметной, аккуратной, и обозначил её границы более чётко.

Узкие цветные блоки для заголовков

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

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

Пример группы в блоке на сайте

Если выделение цветом необходимо, то нужно отделить всю группу:

Пример, когда дизайнер выделил заголовки в отдельные блоки, нарушив структуру страницы

Картинки стык в стык с отступом между ними

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

Цветом залит весь смысловой блок, а не только заголовочная секция

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

Пример, как правильно стыковать полноэкранные изображения

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

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

Вот так не стоит стыковать блоки на сайте

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

Стилистика гуляет

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

Пример сайта в стиле гранж

Пример сайта в стиле минимализм

Опытный дизайнер может смешивать стили, даже такие противоположные, как минимализм и гранж:

Пример смешения стилей минимализм и гранж

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

Дизайн сайта не соответствует фирменному стилю

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

Нежелательные или неожиданные визуальные эффекты

Покажем на примере Альфа Банка. У компании фирменный стиль с ярко красным цветом. Одним из решений дизайнера при разработке блока FAQ (часто задаваемые вопросы), было выделить важные части текста фирменным цветом. Блок-аккордеон подразумевал навигационный элемент в виде стрелки вниз, нажимая на которую, раскрывалась информация по вопросу. Пока всё звучит адекватно, нормальное классическое решение =))

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

Индекс доверия инвесторов к Альфа‑банку ↓

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

Часто эта проблема возникает из-за того, что дизайн создаётся в отрыве от реального текста. Веб‑дизайнеру дали рыба-текст, он сделал красивый визуал, оторванный от контекста. Такие нежелательные визуальные эффекты — не редкость. Поэтому важно, чтобы на этапе дизайна уже был готовый текст и картинки.

Пример редизайна бренда Ozon. Уместный и неуместный визуал в рамках фирменного стиля компании

Грязные тени

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

Но не каждая тень украсит интерфейс. При неправильном её использовании можно всё испортить.

Когда применять тень, а когда стоит от неё отказаться
- Тень впишется в дизайн, если оттенок элемента и фона совпадают. При помощи тени можно добавить элементу дополнительный контраст:

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

Элемент с тенью более выглядит более выражено

Если фон и элемент цветные, скорее всего, тень не потребуется, и только всё испортит:

Цветная тень выглядит гармоничнее, чем чёрная

При разном цвете фона и объекта тень не требуется

Как правильно настроить тень
- Для тени не стоит использовать чистый черный цвет #000000. Такая тень будет слишком тяжёлой и грязной:

Пример, как правильно настроить тень

Не стоит оставлять стандартную тень, предложенную Figma. Она выглядит так:

Настройки тени по умолчанию в Figma

Если немного покрутить настройки и добавить смещение по Y, плюс увеличить Blur, то тень станет более аккуратной и мягкой. Стоит помнить, что для разных по величине или контрасту объектов могут потребоваться разные настройки. В идеале создать для проекта сразу несколько вариантов теней:

Набор теней в дизайн-системе

Не используйте слишком большую прозрачность. По умолчанию она 25% и стоит настроить её в меньшую сторону или оставить такой:

Пример сравнения теней с разной яркостью

Не стоит делать тень слишком большой, так как можно получить эффект грязного фона:

Большая тень создает эффект грязи за кнопками

Скругления в углах

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

Радиус углов всех элементов должен быть одинаковый. Если элемент имеет скругленную форму, то и другие элементы внутри него должны иметь такую же форму:

Правильное соотношение углов у элементов одной группы

Если элемент имеет меньший размер, то и угол также должен пропорционально уменьшаться.

У небольших элементов можно уменьшить размер угла в 2 раза:

Правильное скругление углов у элементов одной группы

Если нужно уменьшить скругление у карточки при адаптации, можно воспользоваться формулой:

Простая формула успешного скругления
A — B = C

Где A — радиус скругления внешней (большей) фигуры, B — расстояние между внутренней (меньшей) и внешней (большей) фигурой, и C — радиус скругления внутренней (меньшей) фигуры.

Убогая кнопка

Не все кнопки в интерфейсе выглядят гармонично и стильно.
Есть правила оформления кнопки, которые помогут сделать её круто.

Как правило, у хорошей кнопки должна быть либо заливка, либо обводка:

В правильной кнопке размер шрифта в диапазоне 14−18 рх. Зависит от шрифта, так как разные шрифты могут иметь разную величину. Также текст в кнопке может быть написан капсом, в этом случае не стоит делать слишком большой размер шрифта:

Пример правильной кнопки

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

Пример правильного оформления текста внутри кнопки

Скруглять углы надо правильно. У кнопки есть 3 хороших варианта оформления углов:

без скругления;
полное скругление;
скругление 2−5 рх.

Пример правильного оформления размера кнопки

Отступы внутри кнопки по бокам должны быть в 2 раза больше, чем сверху и снизу.

Пример правильного оформления скругления углов кнопки

Если в кнопке есть иконка, то расстояния справа и слева не должны быть одинаковыми

Пример правильного оформления отступов внутри кнопки

Несогласованность оформления страниц

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

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

Пример правильного оформления отступов внутри кнопки с иконкой

Непонятный первый экран

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

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

Пример оформления проекта YS Project в одной стилистике. Проект WebValley Studio

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

Оффер на сайте компании по утилизации отходов

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

Пример сайта-визитки ветеринарной клиники Кот Матроскин

Пример персонального сайта-визитки

А если это визитка специалиста, но цель — продемонстрировать портфолио, то важно сделать акцент на работах.

Пример визитки-портфолио C-Render

Готовы создать сайт прямо сейчас. А вы?

Ошибки в типографике сайта

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

Правильная работа с текстом — уже 50% успеха вашего дизайна.

Сравнение двух вариантов оформления типографики на сайте

Нечитабельный текст

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

Подобрать интересный шрифт,
Добавить цвет или анимацию появления;
Использовать нестандартные начертания или позиционирование;
Выделить капсом или курсивом.

Важно не переборщить с украшательством!

Перебор с креативностью

Когда хочется красивый, рукописный, но наборный текст — читать его будет невозможно. Если для проекта дизайнер выбрал какой-то необычный шрифт, важно помнить, что использовать его стоит только для оформления заголовков, подписей или какой-то небольшой информации. Большие объёмы текста с таким шрифтом читать будет не удобно. Поэтому нужно подобрать шрифту подходящую пару — универсальный и легко читаемый шрифт, который можно будет использовать там, где требуется разместить большое количество текста.

Пример неподходящего шрифта, который сложно читается в контентных блоках

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

Забудьте про обводку текста! Это прям фу!

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

за счёт разной жирности начертания:

Контраст за счёт подбора шрифтов

за счёт цвета:

Контраст за счёт разной жирности начертания

за счёт размера:

Контраст за счёт цвета

Контраст за счёт размера

Недостаточная жирность или, наоборот, слишком жирный текст

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

Если заголовок будет слишком жирным, то он перевесит на себя всё внимание, будет выглядеть несуразно.

Пример оформления текста на сайте. Слева у основного текста жирность Extra Light — читать его не удобно. Справа — Regular. Такой текст читать удобней.

Не стоит чрезмерно выделять жирным заголовки, в идеале они должны быть того же начертания, что и основной текст или немного толще

Слишком мелкий текст

Не существует железного правила, какого размера должен быть текст в интерфейсе, во-первых, потому что у разных шрифтов могут быть разные размеры при одних и тех же настройках:

Во-вторых, это зависит от стилистики и настроения проекта или от потребностей пользователей (например, версия для слабовидящих).

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

Для заголовков средний размер шрифта: 32−56 рх.
Для наборного текста: 14−20 рх.

Сравнение размера двух разных шрифтов при одинаковых настройках

Тем не менее, есть правила, которые не стоит нарушать дизайнеру, если он хочет сохранить читабельность текста:

1) Не стоит использовать размер текста меньше 14 рх, а лучше 16 рх в десктопе и 14 рх в мобильной версии. Допустим размер 12 рх для мелкой информации в мобилке, типа пользовательского соглашения в форме или какой-то не акцентной подписи. Основной шрифт такого размера будет сложно прочесть.

Пример оформления текста в проекте

2) Не стоит использовать маленький размер шрифта для заголовков. Заголовок должен быть достаточно контрастен основному тексту:

Пример сравнения читабельности текста в мобильной версии при разных размерах шрифта

Борщ из шрифтов, стилей и начертаний

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

Даже если проект небольшой, стоит позаботиться о создании стилей для оформления текста, чтобы исключить их большое количество:

Пример, как мелкий размер заголовков ухудшает визуальное впечатление

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

Стили типографики для небольшого проекта

Хреново подобранный шрифт

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

Система размеров и цветов для типографики проекта в Figma

Как правильно подобрать шрифт для своего проекта мы обучаем на курсе PRO Web.

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

Не настроены межстрочные расстояния, трекинг, кёрнинг

Интерлиньяж#nbsp;— это расстояние между базовыми линиями строк. Оптимальный размер обычно равен или чуть больше высоты строки.

Подбор шрифтов для разных ниш в рамках курса PROWeb студентки Алины Шуваевой

Чтобы правильно настроить межстрочное расстояние, нужно ориентироваться на параметры текста.

На значение могут влиять:

размер текста — чем больше размер шрифта, тем меньше должен быть интерлиньяж:

Правильный и неправильный интерлиньяж

длина строки — чем шире текст, тем больше интерлиньяж:

В примере показано, как при увеличении размера текста с 16 рх до 40 рх необходимо корректировать интерлиньяж

выбор шрифта — у разных шрифтов могут быть разные размеры при схожих параметрах, соответственно, и межстрочка им требуется разная:

В примере показано, что если текст в узком контейнере выглядит хорошо при размере 16 рх и интерлиньяже 145%, то если контейнер станет шире, оставляя те же параметры, текст стал менее читабельным, визуально слипся. При увеличении интерлиньяжа до 160% читабельность текста восстановилась.

Важно: нельзя оставлять интерлиньяж в формате auto — именно так он изначально настроен в Figma.

В примере два разных шрифта: Roboto и Futura PT. При одном и том же размере текста интерлиньяж Futura нужен меньше, так как сам текст визуально маленький по сравнению с Roboto.

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

В примере слева интерлиньяж не настроен, текст выглядит кучно.

Рекомендуемые соотношения для правильного интерлиньяжа

Трекинг и кёрнинг — ещё один параметр для тонкой настройки шрифта.

Трекинг — равномерное изменение расстояния между буквами (межбуквенных пробелов).

Кёрнинг — изменение расстояния между буквами и другими символами в тексте для удобочитаемости.

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

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

Слишком длинная или слишком короткая длина строки

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

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

Длина строки напрямую зависит от размера текста — чем меньше размер текста, тем короче должна быть строка.

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

Особенно важно соблюдать это правило тогда, когда на сайте предполагается большое количество текста, например, раздел со статьями:

Узкую колонку читать гораздо удобнее, чем растянутую на всю ширину страницы

Много текста в узких колонках

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

Пример плохого оформления текста на сайте — дедушкина кладовка. Много текста набито в узкие колонки. Кто бы это читал =))

Напротив, если текста мало — не стоит размазывать его в широкую колонку:

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

Выключка по центру, по ширине, по правому краю

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

Неправильное выравнивание текста на сайте

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

Примеры, когда текст, выровненный по центру выглядит отлично. Его не должно быть больше 3−4 строк.

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

Почему так? Ведь в книгах часто текст выравнивается именно по ширине, и читать книгу с таким выравниванием вполне удобно. Дело в том, что при выравнивании по ширине в книге или газете текст заполняет полный объём пространства, и нет пустот или дополнительных элементов рядом:

Так выглядит текст, выровненный по ширине, в книге

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

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

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

Но для реального бизнеса это решение не подходит.

Злоупотребление жаргоном и сложным языком

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

Пример очень сложно написанного текста на сайте юриста

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

Пишите простым понятным языком, который был бы удобен для вашей ЦА.

Обсудить проект

Веб-дизайн в вакууме

Веб-дизайнеры с крутыми эффектными промо-проектами на Awwwards и Behance часто сыпятся на обычных коммерческих проектах. Дизайн ради дизайна и дизайн, работающий на цели бизнеса — разные вещи. Создавая корпоративный сайт для компании, такой дизайнер быстро сталкивается с суровой действительностью:

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

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

Немасштабируемый макет

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

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

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

Вот так выглядит красивый прототип с рыбой-текстом

А вот так всрато он стал выглядеть с итоговым текстом

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

Плохая оптимизация

Недостаточная оптимизация сайта может плохо отразиться на конверсии. Про что стоит вспомнить дизайнеру, оптимизируя сайт:

Скорость загрузки страниц;
Атрибут альт;
Вес файлов;
Правильная разметка.

Долгая загрузка

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

Дизайнер должен предусмотреть все эти моменты, учесть их при разработке. Если сайт на Tilda или основная ЦА преимущественно пользуется смартфонами, если конечный пользователь в России, а не в Корее со сверхскоростным интернетом, не стоит городить на сайте супер вау-эффекты.

В практике нашей студии был отличный пример как не надо делать:

Заказчик пришёл с запросом создать супер космический сайт с кучей анимаций и вау-решений. При этом сайт должен жить на Tilda. Мы предупредили сразу, что так не получится, и разработали более или менее нормальный вариант для этой платформы. Но заказчик не из простых, дизайн не принял и настаивал на своём. К тому времени сроки поджимали, им нужно было успеть к конкретной дате выставки.

Окей =)) Мы в турбо-режиме разработали супер классный макет с кучей анимаций, плавных переходов, нестандартных слайдеров. Заказчик был в восторге. Но что в итоге? Сайт сверстали, дата выставки на носу, а сайт жутко виснет, как мы и предсказывали. Пришлось экстренно спасать ситуацию, убирать почти все эти вау решения, значительно упрощая макет. Заказчику урок — лучше довериться специалисту и адекватно расценивать свои хотелки и возможности.

Атрибут альт

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

Для альтернативного текста в России используется кириллица.

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

Вес файлов

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

Перед загрузкой файлов их необходимо сжать, например, с помощью сервиса Tiny PNG.

По этой же причине загружать видео-ролик на сайт также не стоит, лучше воспользоваться файловым хранилищем типа Dropbox, залить видео на YouTube или Vimeo, в идеале — на хостинг, а на сайт подтянуть его ссылкой.

Кривой адаптив

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

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

Из примера выше видно, что если просто уменьшить всё в макете, и оставить, как есть, сайт станет слишком мелким, информация нечитабельной

О чём ещё важно помнить, работая с адаптивами:

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

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

Пример адаптации карточки

О порядке расположения элементов. Нельзя бездумно распихать всё, как захотелось. Существуют правила — в каком порядке переносить объекты в адаптивах:

Порядок переноса контента при адаптиве макета

Так же, как мы привыкли читать: слева направо, сверху вниз, так и стоит переносить контент. Почему? Потому что так пишется код.

Если дизайнер работает на Tilda, этим правилом можно пренебречь и расставить всё, как хочется. Но лучше сразу привыкать всё делать правильно!

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

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

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

О правильном расчёте высоты экрана: когда дизайнер задумал блок с обложкой на весь экран, но забыл про блок с меню. Плюс у пользователя в браузере будет ещё «шапка» — строка со вкладками, адресная строка, настройки, закладки, элементы управления. По итогу сайт начинается не от верхнего края экрана компьютера, а пикселей на 90 ниже. И обложка уже не помещается на весь экран, приходится скроллить. В целом это может не быть проблемой, если только шапка сайта не в 3 этажа. Но иногда проблема становится критичной. Например, если под скролл ушёл оффер — самая важная часть первого экрана:

Вот так выглядит сайт в реальной жизни

А вот та часть, что не поместилась в экран — оффер и кнопка

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

Высота макета спроектирована с учетом меню и проставлен комментарий об этом.

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

Недостаточное тестирование на разных устройствах

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

Сделали только тёмное приложение, и пользователи днём, под прямыми солнечными лучами, вообще ничего не видят на экране. Знакомо?

При проектировании интерфейса важно учитывать все параметры ЦА, в том числе, кто и когда будет пользоваться ресурсом. Если на аналитике было выявлено, что требуется альтернативная версия — стоит её разработать.

Обратная ситуация — внутренний сервис для нужд компании. Например, приложение для отслеживания различных метрик. Пользоваться им будут только члены компании и их партнёры в рабочее время, используя компьютеры компании: ноутбук и стационарный компьютер. В данном случае достаточно разработать лишь десктопную версию. Исключив мобильный адаптив сервиса можно сэкономить время разработчика и бюджет заказчика.
Недоработки дизайнера
Частая проблема при проектировании сайтов, особенно у новичков, забыть про технические страницы. Макеты разработали, адаптив нарисовали — готово. На самом деле это только половина работы. Вторая половина:
- дизайн всплывающих окон;
- дизайн состояний элементов;
- дизайн ошибок;
- страница ошибки — 404;
- страница Спасибо;
- фавикон сайта;
- бейджи для страниц;
- UI-kit проекта;
- техническое задание на вёрстку или подробные комментарии в макете.
Всё это понадобится разработчику для вёрстки проекта. Особенно, если сайт верстается кодом.

Дизайн не подготовлен для разработчиков

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

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

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

Состояния элементов

У всех элементов на сайте есть различные состояния — у кнопок их минимум 5: дефолтное, состояние наведения, активное, неактивное, фокусировка и так далее. Помимо этого, кнопки могут быть разного размера, цвета, назначения: основная, второстепенная, для ошибок, для успеха, прочие. Это только кнопки! По такому же принципу строится логика всех остальных элементов. Чтобы предоставить разработчику всю информацию по элементам проекта, дизайнер должен оформить UI-kit или дизайн-систему:

Пример небольшого UI-кита проекта

Пример кусочка дизайн-системы проекта

Анимация в проекте

Если дизайнер задумал анимацию, он должен подробно о ней рассказать разработчику.

Неправильно: пункт в меню подчёркивается при наведении.
Правильно: пункт меню подчёркивается при наведении на область такую-то со скоростью такой-то. Элемент выезжает оттуда и по длине такой-то. Расстояние линии от пункта меню такое-то, цвет и толщина линии такие-то.
Иначе вы рискуете получить не то, что хотели.

Как ещё можно продемонстрировать анимацию: можно отрисовать все элементы или шаги, и анимировать макет. Есть много сервисов, например Adobe After Effects, ProtoPie, да и сама Figma прекрасно справится с этой функцией.

Навигация в проекте

Для навигации в проекте дизайнер может предоставить программисту карту User flow:

Навигация в проекте в виде карты User flow

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

Откуда берутся ошибки в дизайне сайтов

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

Дизайнер сразу сел рисовать

Без аналитики, без погружения в задачу, не понимая полезное действие. Да, хочется =)) Нет, нельзя!

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

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

Рыба-текст незаменимая вещь в работе с макетом, но только на этапе проектирования! Чтобы понять примерно, как будет выглядеть раздел, какой объём текста необходимо заложить в ТЗ на копирайтинг, мы часто прибегаем к помощи фейкового временного текста. Но дизайнить с таким текстом плохая идея. В 90% случаев ожидание и реальность в итоге не совпадут (из нашей личной практики). Дизайнер рисует красивый макет, где всё на своём месте и подчинено определенной логике, а потом в готовый макет заказчик вставляет свой контент, и он рушит всю красоту и логику. Обидно.

Пример, когда реальный текст от заказчика вообще не подошел в концепт.

Пришлось полностью переделывать концепцию блока

Поэтому на этапе дизайна стоит работать с реальным контентом. Ну и оставлять рыбу в готовом дизайне (так часто делают дизайнеры в работах для портфолио) — недопустимо. Тем более, что сейчас вообще нет проблем с тем, где и как взять фейковое описание. ИИ вам в помощь =))

Тексты и картинки — потом. В итоге, текст и картинки в макет просто не садятся.
Боль дизайнеров — отсутствие контента. Чтобы не затягивать сроки, приходится работать с временным контентом (текст, картинки…). На выходе получается шляпа. Красивый макет заказчик превращает в убогий.

Блок Новости в дизайне, и как в реальности в него сел текст

Ошибки закрались после дизайнера

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

Пример, как после сдачи проекта заказчик переделал форму в подвале

Дизайнит заказчик руками дизайнера
Отдельный вид ошибки, которую желательно предотвратить любыми способами. К хорошему итогу такой подход в дизайне маловероятно приведёт. Есть заказчики, которые мнят себя дизайнерами, хотят всё контролировать, знают, как лучше. Но это вредит в первую очередь заказчику. Вмешиваясь в работу дизайнера, он получает на выходе не тот продукт, который будет работать, а тот, который ему приснился. Хорошему дизайнеру не бывает пофиг на дальнейшую судьбу проекта. Поэтому важно ещё на берегу:
- Позаботиться о границах каждой стороны на стадии заключения договора. Прописать количество итераций правок, роль заказчика в процессе, количество лиц, принимающих решение, чтобы потом дизайн не правила какая-то соседка Люся, которая знает, как лучше. Или ещё покруче вариант: пусть решит аудитория, что больше нравится. Не специалист, который понимает связь, причины и последствия, а толпа домохозяек на диване =)) Так не работает, не та чистота эксперимента. Надо запускать сайт и наблюдать за поведением аудитории, собирать достаточно статистики и делать достоверные выводы, а не просто спрашивать у знакомых.
- Не надо давать доступы в программу, где разрабатывается дизайн. Есть категория заказчиков, которые «в теме», и сами не прочь потыкать кнопки и покрутить варианты. Только кто потом будет приводить макет в порядок, ровнять отступы, сетку, композицию — уж точно не заказчик.
- Работать над коммуникацией. Дизайнер должен уметь слушать, понимать задачу, аргументировать свои решения, подкреплять их фактами, чтобы у заказчика не оставалось сомнений, что специалист прав. Заказчику, со своей стороны, стоит больше прислушиваться к дизайнеру. Всё-таки веб-дизайн и разработка сайтов — это интеллектуальный технологичный продукт. Это не то, где можно ориентироваться на категории нравится / не нравится. В вебе всё работает немного по-другому. Даже если заказчик считает, что хорошо знает свою аудиторию, что ей ближе, что точно зайдёт, а что нет — не надо сравнивать офлайн и онлайн аудиторию. В вебе работают другие поведенческие паттерны, другие критерии для принятия решения, это иные люди, с отличающимися интересами, привычками, мировоззрением. Поэтому для наилучших результатов нужно больше доверия к дизайнеру со стороны заказчика.

Недостаток знаний и опыта у дизайнера

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

Как избежать ошибок дизайнеру
- Изучать основы и правила дизайна, знакомиться с инструментами и новыми функциями.
- Не бояться пробовать новое, браться за сложные задачи.
- Найти единомышленников или более опытных товарищей, которым можно делегировать задачу или спросить совета при необходимости.
Как избежать ошибок заказчику
- Выбирать проверенную команду или специалиста.
- Предоставить подробное ТЗ или максимально точно описать задачу.
- Определить, что важнее, конечный результат или бюджет. Часто, пытаясь сэкономить, заказчик по итогу переплачивает за переделки, дополнительные функции, а иногда и за новый продукт.
- Довериться специалисту и не мешать его работе.
Ошибаться — это нормально, важно извлекать уроки из сделанных ошибок и использовать их для своего роста и развития.

Автор статьи

Мария Дрокина

UX/UI-дизайнер

21.08.2024

Доверьте разработку сайта профессионалам!

Оставьте заявку с кратким рассказом о проекте или заполните бриф.

Обсудить проект

Понравилась статья?

Поделись материалом с другими в социальных сетях — сохрани статью себе для быстрого доступа, поддержи нашу студию!

Подпишись, чтобы быть в курсе!

Подпишись на наш новостной дайджест, чтобы первым получать анонсы новых статей, материалов или мероприятий. Без спама, только по факту =). Наши соцсети в конце сайта.

Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности.

Смотрите также

Дизайн

Вёрстка макетов дизайна для сайта

Качественная верстка не просто переносит в браузер то, что нарисовал дизайнер, она также формирует основу успеха поискового продвижения вашего будущего сайта.

Дизайн

Вёрстка макетов дизайна для сайта

Дизайн

Вёрстка макетов дизайна для сайта

70+ ошибок в веб‑дизайне, которые убивают сайт и просаживают конверсию

Готовое руководство по всем ошибкам, которое поможет сделать сайт грамотно и профессионально

Ошибки юзабилити

Упоротая навигация

Отсутствие хлебных крошек

Отсутствие поиска

Перегруженное меню

Слишком много уровней вложенности

Отсутствие кнопок на продающих лендингах

Непонятное расположение блоков

Отсутствие меню и логотипа

Перегруженные формы

Отсутствие призывов к действию

Игнорирование поведенческих паттернов

Отсутствие подсказок, инструкций и всплывающих окон

Какие могут быть подсказки в интерфейсе

Тупиковый сценарий

Ошибки в структуре макета

Сайт не по сетке

Нет разделения на смысловые блоки

Отступы гуляют

Мало воздуха

Визуальная иерархия

Ошибки в визуале сайта

Борщ из элементов

А нужен ли декор

Пустой дизайн и перебор с негативным пространством

Перебор с цветом

Неудачно подобранный цвет

Не подходящий по контексту цвет

Недостаточный контраст в цвете

Грязные цвета

Дизайн сильно привязан к цвету

Шумный фон для текста

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

Текст накладывается на важные части изображения.

Устаревший дизайн

Слепое следование трендам

Всратый логотип в премиальном дизайне

Иконки из разных наборов

Стили кнопок

Стоковые бессмысленные картинки

Изображения из разных наборов

Некачественные картинки

Позиционирование кадра

Любители обводки

Узкие цветные блоки для заголовков

Картинки стык в стык с отступом между ними

Стилистика гуляет

Дизайн сайта не соответствует фирменному стилю

Нежелательные или неожиданные визуальные эффекты

Грязные тени

Когда применять тень, а когда стоит от неё отказаться

Как правильно настроить тень

Скругления в углах

Убогая кнопка

Несогласованность оформления страниц

Непонятный первый экран

Ошибки в типографике сайта

Нечитабельный текст

Перебор с креативностью

Низкий контраст

Недостаточная жирность или, наоборот, слишком жирный текст

Слишком мелкий текст

Борщ из шрифтов, стилей и начертаний

Хреново подобранный шрифт

Не настроены межстрочные расстояния, трекинг, кёрнинг

Слишком длинная или слишком короткая длина строки

Много текста в узких колонках

Выключка по центру, по ширине, по правому краю

Злоупотребление жаргоном и сложным языком

Веб-дизайн в вакууме

Немасштабируемый макет

Плохая оптимизация

Долгая загрузка

Атрибут альт

Вес файлов

Кривой адаптив

Недостаточное тестирование на разных устройствах

Не учтён контекст использования