Каких ошибок стоит избегать в веб-дизайне
Веб-дизайн играет важную роль в разработке качественного сайта или мобильного приложения. Начинающим и не только дизайнерам важно стремиться к созданию как привлекательного, так и удобного в использовании продукта, избегая ошибки.
Рыба — это хорошо, но не всегда
Lorem Ipsum — это текст-рыба, который раньше использовали издатели и дизайнеры, если оригинальный текст был недоступен. Lorem Ipsum используется для упрощения взаимодействия с заказчиком и утверждения дизайна. Текст рыбы и ее смысловое наполнение никогда не меняются.
Мы считаем, что контент также важен, как и расположение графических элементов. Для создания красивого и эффективного дизайна дизайнеру следует не добавлять вслепую рандомный текст, а понимать смысл и идею проекта. Помогает в таких случаях помощь копирайтеров.
Еще один выход: взять близкий по смыслу текст с аналогичного сайта. Это поможет лучше скомпоновать контент по его объему, правильно расставить акценты. Главное не забудьте переписать текст на оригинальный перед публикацией как в портфолио, так и на живом сайте.
Плохо читаемый текст
Считается, что люди в Instagram смотрят картинки и фотографии и не читают посты. Иногда легче запоминается и усваивается визуально представленная информация. Но это не означает, что не нужно уделять тексту никакого внимания. В любом дизайне и на любых носителях текст должен быть читаем.
Проблема плохо читаемого текста также бывает из-за слишком низкой контрастности фона и шрифта, маленьких размеров текста, неудачного цветового решения или расположения текста по отношению к другим элементам интерфейса.
Визуальный шум
Иногда дизайнерам кажется, что если добавить в макет больше элементов, то он будет смотреться презентабельно и экспертно. Но не стоит забывать, что элементы интерфейса, которые не несут информационной нагрузки, загромождают экран и мешают восприятию пользователя
Много не всегда есть хорошо. А если количество элементов интерфейса сократить нельзя, то продумайте более удачное расположение. Поиграйте с текстом и разделителями, сделайте понятную навигацию, оставив на главной странице необходимые блоки. Найдите баланс и гармонию между всеми элементами интерфейса.
Акценты
Часто начинающий дизайнер при отрисовке дизайна по прототипу не вникает в контент проекта. Правильная расстановка акцентов — это эффективный инструмент донесения информации до посетителя. Одних заголовков бывает недостаточно.
При проведении акции цепляющим элементом является сумма призового фонда. На нее и сделан акцент — это анимированная бегущая строка. Сначала посетитель видит заголовок, потом сумму, затем переходит к изучению остальных элементов.
Часто начинающие дизайнеры расставляют акценты на элементах страницы, руководствуясь принципом "красиво", забывая при этом, что ключевые элементы затеряются среди рюшек.
Отсутствие воздуха
Представьте, что вы зашли в маленькую комнату, нагроможденную коробками и предметами мебели. Складывается ощущение, что трудно дышать, так как воздуха практически нет. Голова начинает болеть, сложно сконцентрироваться на деталях и самом важном. Аналогично происходит с пользователем, который попадает на веб-сайт, в котором мало воздуха, или иными словами “пустых областей”.
Как решить эту проблему? Совершенствуйте белое пространство, давайте возможность заголовкам, подписям, параграфам и другим элементам страницы «дышать». Так, взгляд пользователя будет перемещаться в правильном направлении, и ему не будет “тесно” на вашем сайте.
Свободное пространство вокруг главных объектов поставить дополнительный акцент.
Слишком много текста
Есть всего несколько секунд, чтобы заинтересовать посетителя сайта. Прочитать огромные абзацы текста, понять суть и принять решение за это время человек не успеет.
Самое плохое что можно сделать — забить всю страницу текстом без инфографики, картинок и сносок. Как следствие: потерянное внимание пользователя, усталость глаз и “вы точно хотите покинуть этот сайт?”.
Если не получается сократить текст, то разбейте его на смысловые блоки и распределите на странице в логичном порядке и с удобной навигациейдля пользователя.
Несоблюдение общей стилистики
Творчество и креатив — это очень хорошо. Но бывает так, что у заказчика уже есть свой фирменный стиль, от которого ему не хочется отступать. Или же на созвоне вы добились общей стилистики с заказчиком, которую следует соблюдать во всех цифровых продуктах, будь то сайт, или мобильное приложение. Резкое отступление от общего стиля может не только запутать и смутить пользователя, но и не оправдать желания заказчика.
Старайтесь придерживаться общей концепции и стиля во всех элементах интерфейса, так, финальный дизайн будет выглядеть гармонично и закончено.
Устаревший дизайн
Тенденции в веб-дизайне сменяют друг друга каждый месяц. Для дизайнера очень важно изучать последние тренды и все время повышать свою насмотренность. Если этого не делать, то можно легко допустить ошибку, подготовив дизайн, который устарел и больше не актуален для пользователей.
Как повышать насмотренность? Например, в нашей студии каждую неделю мы проводим смотры сайтов и интересных концепций. Часто после смотров мы и черпаем новые идеи для проектов.
Погоня за трендами
Сложно удержаться и пройти мимо очередной статьи в стиле “Топ 10 трендов веб-дизайна 2022 года”. Но модный тренд с мультяшными 3d объектами, едва ли подойдет для сайта строительной компании. Следить за трендами нужно, но фанатичное стремление к ним - это не гарантия успешного дизайна.
Неудачная цветовая гамма
Цвета играют огромную роль в веб-дизайне. Иногда попадая на сайт или открывая мобильное приложение, пользователь вместо красивой картинки получает пестрое изображение с обилием цветов, не сочетающимися друг с другом. Захочется ему что-то купить на этом сайте или продолжить пользоваться приложением? Вероятно, что нет. Он поспешит быстрее закрыть его и найти сайт с гармоничным сочетанием цветов, которое не отвлекает от его запросов.
Проблемы с типографикой
Начинающему и не только дизайнеру легко запутаться в огромном выборе доступных шрифтов. Вместо долгих поисков “того самого” шрифта он выберет парочку проверенных и использовать их на своих проектах. Но бывает, что дизайн сайта кажется незаконченным, есть проблемы с восприятием контента, скорее всего проблема в типографике. Иногда дизайнеру достаточно поменять шрифты, чтобы дизайн заиграл новыми красками и выглядел стильно.
Однако стоит не забывать, что лучше использовать 1-2 шрифта на сайте или одно семейство с различными начертаниями. Нужно также настроить интервалы: кернинг и интерлиньяж, удачно подобрать цвет текста под цветовую гамму сайта.
Плохой адаптив
Разрабатывая дизайн будущего сайта, нужно всегда помнить о его конечных пользователях и типах устройств, на которых будет открываться сайт. Сайт, который будет классно открываться, как в десктопной версии, так и мобильной, однозначно будет приносить больше прибыли заказчику.
Все элементы интерфейса должны адекватно отображаться в адаптивной версии. Мобильные экраны имеют меньшие размеры по сравнению с экранами компьютеров и ноутбуков. Таким образом, мобильный текстовый контент требует от пользователей прокрутки гораздо больше, чем в десктопной версии.
Будьте осторожней и с размером элементов интерфейса. Спроектируйте интерфейс так, чтобы элементы навигации в адаптивной версии было видно хорошо. Не заставляйте посетителя сайта приближать кнопку, чтобы нажать на нее.
Заключение
Не зря говорят, что на ошибках учатся. Важно — уметь их замечать и всегда стремиться к совершенствованию своих навыков. Начинающему дизайнеру может помочь в этом насмотренность и парочка хороших книг:
- Ководство, Артемий Лебедев
- Пользовательский интерфейс Электронный учебник, Илья Бирман
- Сожги свое портфолио! То, чему не учат в дизайнерских школах, Джанда Майкл
- Сложный дизайнер, Женя Артюнов
- Советы бюро Горбунова. Сайт для практикующих и начинающих дизайнеров. Сотни уроков по дизайну, рецензии на книги, а также множество полезного материала: бесплатные шрифты, UI-киты и полезные инструменты для дизайнеров.
- Infogra.ru. Сайт для практикующих и начинающих дизайнеров. Сотни уроков по дизайну, рецензии на книги, а также множество полезного материала: бесплатные шрифты, UI-киты и полезные инструменты для дизайнеров.
- UPROCK. Здесь самые последние и актуальные новости и инсайты из сферы дизайна.
- Musli. Платформа для онлайн дискуссий. Простая, полезная, питательная для ума, как мюсли. Объединяющая дизайнеров рунета для развития творческих возможностей.
- UXPUB. Независимый медиа-проект о продуктовом дизайне и проектировании интерфейсов.