Многим начинающим дизайнерам кажется, что от них требуется создать яркий, запоминающийся и уникальный дизайн. Однако главной задачей является увеличение конверсии с сайта заказчика. Лучше использовать проверенные и даже шаблонные решения, но чтобы они принесли результат. Ошибки дизайнеров способны подорвать доверие пользователя к сайту и негативно сказаться на продвижении.
Типичные ошибки web-дизайнеров
Большинство ошибок носит технический характер, но могут быть моменты, неочевидные на первый взгляд ни для дизайнера, ни для заказчика. Некоторые из рассмотренных ниже ошибок допускают даже опытные дизайнеры.
Ошибка 1: Не прослеживается разделение на блоки
Большинство сайтов, особенно, если это одностраничный лендинг, нужно делить на блоки для простоты восприятия пользователя. Так пользователям проще воспринимать информацию, плюс, верстальщику гораздо проще будет сделать навигацию по странице, если она разделена на такие блоки.
Неопытный дизайнер может сделать разделение страницы на блоки только с помощью заголовков. Это может быть оправдано в случае, если речь идет о странице, на которой мало контента. В остальных случаях рекомендуется продумать разделение между блоками.
Может наблюдаться и обратная ситуация, когда разделение между блоками слишком яркое. Сайт все же должен смотреться единым целым, поэтому делать для каждой секции отдельный фон, использовать множество декоративных элементов тоже не следует.
Ошибка 2: Нет единого стиля для отступов
Неопытные дизайнеры иногда «забивают» на приведение отступов к единому стилю. Страница из-за этого выглядит неаккуратно, плюс, напрямую влияют на восприятие пользователем содержимого ресурса. Если будут слишком маленькие отступы, то контент на сайте будет сливаться и его будет неудобно воспринимать. В случае со слишком большими отступами блоки могут перестать смотреться как единое целое.
Ошибка 3: Нечитаемый текст
Ошибки с нечитаемым текстом допускаются в большинстве случаев, когда текст накладывается поверх какого-то фонового изображения. У посетителя не должно возникать необходимости рассматривать под прищуром текст, особенно, если это заголовок. Даже если сливающийся текст не сильно важен, он все равно должен выделяться на фоновом изображении, чтобы дизайн выглядел гармонично.
Ошибка 4: Намешать много стилей
Даже если в ТЗ написано, что нужно сделать яркий и запоминающийся дизайн-макет, то это не значит, что нужно намешивать несколько стилей. Смесь нескольких стилей на странице затрудняем восприятие информации, а порой выглядит очень непрофессионально и дешево.
Ошибка 5: Непродуманная навигация
Пользователь должен легко получить доступ к любому уголку сайта. Для этого важно продумать меню, которым будет удобно пользоваться со всех страниц ресурса. Ошибку с навигацией можно разделить на несколько категорий:
- Нет совсем никакого меню. Часто подобные ошибки встречаются при создании одностраничных макетов. Если на лендинге много блоков с контентом, то пользователю будет сложно изучать его без меню.
- Меню находится в непривычном для пользователя месте.
- В меню расположено слишком много позиций, которые для большинства пользователей не интересны и только мешают.
- Не предусмотрен поиск по сайту (касается многостраничных ресурсов).
- Блоки с контентом расставлены нелогично с точки зрения пользователя, например, сначала идет блок с оформлением покупки, а только потом описание товара.
Ошибка 6: Необработанные или некачественные фотографии
Не все владельцы бизнеса могут предоставить уникальные и качественные фотографии. В таком случае большинство дизайнеров скачивают бесплатные изображения с фото-стоков. Неправильно подобранные и никак не обработанные стоковые фотографии создают у посетителя чувство дешевизны и несерьезности проекта. Также стоит учитывать, что фотографии должны быть в тему, а не просто для того «чтобы были».
Ошибка 7: Непродуманная цветовая гамма
Когда используется слишком много цветов в макете сайта, он становится слишком ярким и негармоничным. Многих пользователей это будет отвлекать, а кого-то побудит уйти с сайта. Непродуманная цветовая гамма может привести к некорректному отображению контента.
Ошибка 8: Непродуманный макет
Помимо общего расположения блоков важно четко обозначить их размер. Если этого не сделать, то сайт будет плохо смотреться на экранах с разным разрешением. Также блоки на странице могут быть разного размера в ширину, что тоже негативно скажется как на адаптивности, так и на внешнем виде макета.
Важно создать еще и мобильную версию дизайна. Большинство пользователей сейчас смотрят контент через мобильные. Если не создать дизайн для мобильной версии страницы, то будут сложности при верстке мобильного варианта сайта.
Как избежать ошибок
Ошибки дизайнеров, описанные выше, очень легко избежать, если следовать универсальным советам.
Делайте четкое разделение на блоки
Между смысловыми блоками на странице обязательно должны быть отступы, которые больше остальных. Некоторые блоки желательно выделять цветом или фоновым изображением. Дополнительно можно использовать какие-либо декоративные элементы интерфейса, например, линии.
Однако не нужно делать для каждого блока отдельный фон и/или отдельные стили. Хватит того, что будет несколько акцентных блоков, а между остальными будут увеличены отступы.
Задать единые стили отступов
Укажите единый размер отступов между абзацами, изображениями, заголовками, смысловыми блоками и прочими элементами. По ходу всего макета соблюдайте указанные отступы.
Проверяйте текст на читаемость
Текст, особенно расположенный поверх картинок, должен без проблем читаться и при этом не перегораживать что-то важное на картинке. Для этого можно чуть затемнить изображение, добавить тексту тени (уместно только для заголовков) или разместить текст поверх изображения так, чтобы он лучше читался.
Соблюдайте единый стиль
Не нужно мешать разные стили. Определите один и используйте его по ходу всего макета.
Продумывайте навигацию
На всех сайтах, за исключением совсем небольших посадочных страниц, должно быть меню. Располагайте его в привычном месте для большинства пользователей – в шапке сайта. Меню можно скрыть за кнопкой, но пользователь должен понимать, что это именно меню сайта. Если в меню много пунктов, то его можно сделать многоуровневым, скрыв неважные разделы.
Используйте релевантные и качественные фотографии
Фотографии на сайте должны подходить по смыслу к блоку, где они используются. Также их желательно предварительно обработать, чтобы они лучше смотрелись с общей стилистикой макета. Не используйте фото с водяными знаками и фото с поисковой выдачи.
Определитесь с цветовой гаммой
Во всем макете используйте 2-3 основных цвета. Они должны гармонировать между собой и не мешать пользователю изучать контент. Помимо основных 2-3 цветов можно использовать вспомогательные, но очень редко и только если это действительно необходимо.
Продумайте макет
Делайте макет по сетке, чтобы избежать появления блоков разного размера, а также лучше продумать адаптивность элементов под разные разрешения экранов. Для мобильной версии сайта требуется сделать собственный дизайн-макет, где будет показано расположение элементов и их поведение при просмотре со смартфона.
Как построить сотрудничество с заказчиком на выгодных условиях
Чтобы заказчик платил больше за работу и прислушивался к вашему мнению, вам требуется зарекомендовать себя как специалиста. Сделать это не очень сложно, просто следуйте этим советам:
- Продемонстрируйте релевантное портфолио. Даже если работ в портфолио немного, то это не страшно, но они должны быть правило оформлены в виде кейса. Заказчик должен видеть не только красивую картинку, но и то как вы пришли к такому результату и почему.
- Задавайте наводящие вопросы о компании и задаче. Так вы покажете, что заинтересованы в проекте заказчика, а также сможете избежать часть из описанных выше ошибок.
- Не стесняйтесь предлагать свое видение дизайна. Заказчик не всегда может знать, как сделать сайт удобным с точки зрения пользователя, поэтому если вы дадите аргументированную точку зрения, то вас станут выше ценить.
- Заранее обговорите организационные моменты: сроки, оплату, штрафы, возможные форс-мажоры.
- Запросите у клиента список сайтов-конкурентов и/или сайтов, которые ему нравятся в плане дизайна, удобства использования. Так вы сможете лучше понимать друг друга в ходе работы.
Общие советы дизайнерам
Работая дизайнером в digital-сфере важно постоянно совершенствовать свои профессиональные и коммуникационные навыки. В качестве итога статьи вот несколько советов для дизайнеров:
- Смотрите работы более опытных коллег. Это можно делать на площадках для дизайнеров и творческих людей: Behance, Dribble, Pinterest, в тематических группах в соц сетях.
- Не стесняйтесь запрашивать обратную связь от коллег или заказчиков. Так вы сможете быстрее понять, что нужно улучшить.
- Если вы новичок, то попытайтесь скопировать несколько хороших работ с Behance или Dribble (не для портфолио). Так вы сможете лучше понять, как правильно делать дизайн сайтов.
- Оформляйте портфолио в виде кейсов. Например, много хороших кейсов можно посмотреть на Behance. Потенциальному клиенту важнее видеть не просто красивую картинку, а как и почему вы пришли к такому результату.
- Постоянно обучайтесь и следите за трендами.
Ошибки в дизайне часто делаются из-за того, что дизайнер отталкивается не от потребностей клиента или юзабитили, а от визуальной привлекательности сайта. Красота тоже важна, но на первом месте должно быть удобство пользователя и выполнение задач клиента.
