Простые советы по веб-дизайну, для создания хорошего сайта
Содержание
Есть бесконечное количество способов создать хороший сайт. А значит, есть также бесконечное множество способов всё испортить. Есть два основных способа избежать попадания во вторую категорию - изучить основы дизайна и применять их соответствующим образом.
Все дизайнеры выбирают разные пути обучения и часто находятся на разных этапах своего пути. И, к сожалению, невозможно уместить все необходимые знания в одной статье, поэтому мы просто дадим вам несколько советов, которые помогут вам переосмыслить свой подход к элементам UX / UI. В идеале этот образ мышления можно применить и к другим областям вашей дизайнерской работы.
Начните с хорошего понимания продукта / сайта
Очень сложно заниматься дизайном, когда вы не до конца понимаете содержание / веб-сайт. Нет никакой необходимости изучать медицину, чтобы создать медицинский сайт, однако вы должны понимать, как пользователь будет искать доступ к информации, которая ему потребовалась.
Если вы хотите разработать приложение для создания музыки, сначала вам следует взять несколько уже существующих, поиграть с ними, чтобы почувствовать их, прочитать о теории, лежащей в основе этого, и о том, как работают определенные элементы.
В идеале вы должны сотрудничать со своим клиентом, который также должен быть весьма заинтересован в проекте и стараться помочь вам реализовать лучший UX для своих пользователей.
Однако если у вас нет фундаментального понимания того, о чём сайт и какие проблемы он решает, вы можете нанести ущерб пользовательскому опыту, но, в тоже время вы можете последовать существующим решениям, просто перекраивая их (что иногда работает).
Для работы с сайтом вы должны иметь его карту перед собой, чтобы правильно разработать навигацию и принимать верные решения о том, какие элементы лучше всего подходят для ваших целевых страниц. Например, если вы делаете дизайн сайта «шоколадной фабрики», вы можете визуально представить процесс создания шоколада или сделать информационный дамп. Всё зависит от задач, поставленных перед сайтом
Советы и хитрости дизайна
Теперь я дам вам несколько советов по UI / UX, которые вы сможете использовать на практике:
1 Контраст!
Быстрый способ определить менее опытного дизайнера - это проверить общий контраст. Смотрите этот пример:
Видите, какой везде светлый текст? Зелёные кнопки с белым текстом, или светло-серым текстом? Давайте сравним это с более контрастным интерфейсом:
Большая часть шрифта чёрная (или почти черная), а менее важная информация немного светлее. Зелёный цвет темнее, что позволяет отображать белый поверх заливки.
Совет - когда вы работаете с текстом, начните с чёрного на белом или с белым на чёрном. По мере того, как вы добавляете больше элементов, и вам нужно разделить их с помощью визуальной иерархии, попробуйте сначала сделать выделение жирным шрифтом или изменить его размер. Только после того, как вы поймёте, что этого не достаточно, меняйте цвет, но в идеале разница не должна превышать 30-40% (обычно непрозрачность устанавливается на 70%).
2 Интервалы между элементами сайта
Другой распространенной ошибкой является несогласованный интервал между элементами. На самом деле, это настолько распространено, что большинство дизайнеров продолжают допускать её даже после многих лет работы, и это вполне понятно – многие перемещают блоки сайта с помощью мыши. Легко немного промахнуться и сдвинуться на пиксель или два в сторону. Или быть может вы, ещё недостаточно хорошо натренировали свой глазомер, чтобы сразу заметить эту разницу.
В следующем примере посмотрите, как разные компоненты имеют разные отступы до соседнего элемента. Некоторые скучены, другие сильно разрознены. Визуально страница сайта выглядит не очень связанной.
Напротив, вот пример с более или менее одинаковым количеством контента / типов компонентов, но с более согласованными отступами:
Есть разные способы добиться этого, но в большинстве случаев простое визуальное измерение не работает. Работайте с CSS файлами, в которых, вы всегда можете установить правила для отображения элементов - что-то вроде 30 пикселей по бокам, 30 пикселей под заголовком, 15 пикселей под субтитрами и т. д.
Надо понимать, что в эпоху адаптивных сайтов, когда блоки (элементы) его постоянно перестраиваются под различную ширину экранов – веб-дизайн должен быть гибким и настраиваемым.
3 Цвет
Цвет, это ещё одна основополагающая составляющая хорошего дизайна. Цвета должны хорошо сочетаться. Один из простых способов сделать хороший веб-дизайн - придерживаться одного основного цвета, а остальные оставить монохромными.
Следующий пример соответствует всем трём рекомендациям - Хороший контраст, сбалансированные интервалы между элементами и правильное использование цвета:
Один из простых способов начать правильную работу с цветами - это следовать некоторым широко принятым цветовым схемам, которые указаны на сайте Color Hunt, или черпать вдохновение в Dribbble для комбинаций.
Работа с цветовым кругом Adobe Color полезна для определения комбинаций, но часто от дизайнеров требуются дополнительные усилия, чтобы найти лучшие комбинации. Цветовые круги часто не дают идеальных цветов для использования в дизайне.
Пример из цветового круга Adobe Color:
Приятный зеленый цвет посередине, но сложно использовать результаты, которые мы видим слева и справа.
4 Придерживайтесь стиля на всём сайте
Создание своего стиля для веб-сайта - одна из основных задач дизайнера. Понятие «красивый» очень сложно определить, тем более что люди часто по-разному относятся к тому, что хорошо, а что нет. Вместо того, чтобы думать об этом, сосредоточьтесь на последовательности и придерживайтесь определённого стиля.
Что это значит? Что ж, займемся дизайном кнопки. Мы задаём нужный шрифт, его размер, цвет, фон, интервал и т. д. И получаем что-то вроде этого:
Теперь, если мы добавим изображение и заголовок, мы возможно сможем добиться чего-то вроде этого:
Смотрите углы. Все углы безупречны - 90 градусов, без закруглений. Это означает, что наш дизайн в основном будет следовать за такими же углами. Потому что более последовательным выглядит то, что например, на изображении, тоже имеются эти идеальные 90 градусные углы.
Добавим ещё один элемент:
Мы добавили сетку прямоугольников в верхний правый и нижний левый углы. Это могли быть круги, но для сохранения резкости мы сделали их квадратами. Такое же мышление должно поддерживаться на всем сайте.
Если вы начнете менять элементы, вы можете начать терять ощущение стиля, что, в свою очередь, приведет к непоследовательному дизайну и ослабит бренд.
Вот тот же дизайн что и сверху, но с закругленными углами у изображения:
Это то же самое, но сейчас выглядит совсем иначе.
5 Дизайн с элементами
Элементы дизайна присутствуют во всех современных инструментах дизайна, например таких как Figma и Adobe XD. Они существуют по очень простой причине - разработчики реализуют сайты таким образом, чтобы их элементы можно было использовать повторно в максимально возможной степени.
Если вы создадите элемент, подобный приведенному выше, вам нужно будет просто «скопировать-вставить» его на другую страницу, и он будет просто работать. Нет необходимости кодировать его снова, с какими то отличиями.
Если вы делаете целевую страницу (landing page) на своём сайте, возможно, вы сможете просто повторно использовать один и тот же элемент, взятый с главной страницы. Это экономит время и поддерживает согласованность дизайна. Хотя в некоторых случаях целевая страница (landing page) должна иметь оригинальный дизайн. Об этом читайте здесь.
Представьте, что вы делаете заголовок раздела и вам таких разделов нужно иметь восемь, что бы вы предпочли - создавать каждый раз заголовок заново для каждого раздела, или копировать и вставлять предыдущий (заменив естественно слова)? В идеале, вы хотели бы использовать его повторно.
Но что, если вам хочется заголовок изменить с выравнивания по центру на выравнивание по левому краю? Или хочется поменять размер, может цвет? Совет - старайтесь и НЕ делать этого. Постарайтесь следовать единому стилю. У вас должен быть только один стиль заголовка, а не пять или десять.
Example by DevriX
Вывод
Чтобы добиться хороших результатов, вам необходимо хорошо понимать основы дизайна, такие как цвет, контраст, пустое пространство, визуальная иерархия и многое другое.
Когда вы будете разрабатывать сайт с учётом этих правил и сосредоточитесь на удобстве использования, последовательности и стиле, то даже если вы не получите "ВАУ!" дизайн, вы получите сайт надёжный во всех отношениях, который будет хорошо работать, что в долгосрочной перспективе даст лучшие результаты для бренда.
Творческий интеллект «Веб-сайт.рус» в сочетании с техническими знаниями помогает развивать бизнес в Интернете.
Свяжитесь с нами сегодня по телефону 8-904-572-40-43, или используйте WhatsApp, чтобы узнать, как мы сможем реализовать ваш проект!
Если вам нужно больше информации для принятия решения воспользуйтесь следующими ссылками:
