Каких ошибок стоит избегать в веб-дизайне

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

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

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

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

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

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

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

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

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

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

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

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

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

Как решить эту проблему? Совершенствуйте белое пространство, давайте возможность заголовкам, подписям, параграфам и другим элементам страницы «дышать». Так, взгляд пользователя будет перемещаться в правильном направлении, и ему не будет “тесно” на вашем сайте.

Свободное пространство вокруг главных объектов поставить дополнительный акцент.

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

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

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

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

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

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

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

Сложно удержаться и пройти мимо очередной статьи в стиле “Топ 10 трендов веб-дизайна 2022 года”. Но модный тренд с мультяшными 3d объектами, едва ли подойдет для сайта строительной компании. Следить за трендами нужно, но фанатичное стремление к ним - это не гарантия успешного дизайна.

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

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

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

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

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

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

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

• Ководство, Артемий Лебедев
• Пользовательский интерфейс Электронный учебник, Илья Бирман
• Сожги свое портфолио! То, чему не учат в дизайнерских школах, Джанда Майкл
• Сложный дизайнер, Женя Артюнов

Полезные ресурсы:

• Советы бюро Горбунова. Сайт для практикующих и начинающих дизайнеров. Сотни уроков по дизайну, рецензии на книги, а также множество полезного материала: бесплатные шрифты, UI-киты и полезные инструменты для дизайнеров.
• Infogra.ru. Сайт для практикующих и начинающих дизайнеров. Сотни уроков по дизайну, рецензии на книги, а также множество полезного материала: бесплатные шрифты, UI-киты и полезные инструменты для дизайнеров.
• UPROCK. Здесь самые последние и актуальные новости и инсайты из сферы дизайна.
• Musli. Платформа для онлайн дискуссий. Простая, полезная, питательная для ума, как мюсли. Объединяющая дизайнеров рунета для развития творческих возможностей.
• UXPUB. Независимый медиа-проект о продуктовом дизайне и проектировании интерфейсов.

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

#design #webdesign #adaptive_design #дизайн #веб_дизайн #ошибки