Простые советы по веб-дизайну для хороших результатов

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

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

К сожалению, невозможно уместить все необходимые знания в 1500 слов. Вместо этого мы просто дадим несколько советов, которые заставят вас переосмыслить, как вы можете подходить к элементам UX / UI. В идеале этот образ мышления можно применить и к другим областям вашей дизайнерской работы.

Начните с хорошего понимания продукта / сайта

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

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

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

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

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

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

Советы и хитрости, связанные с дизайном:

Теперь давайте посмотрим на некоторые конкретные советы по UI / UX, которые вы можете использовать в своем следующем дизайне:

1 - Контраст!

На сайте так легко испортить контраст. Быстрый способ найти менее опытного дизайнера - это проверить общий контраст. См. Этот пример:

Источник

Видите, насколько светлый текст везде? Зеленые кнопки с белым текстом, светло-серым текстом ?. Сравним его с более контрастным интерфейсом:

Источник

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

Совет здесь - когда вы работаете с текстом, начните с черного на белом или белого на черном. По мере добавления дополнительных элементов и необходимости разделения с помощью визуальной иерархии попробуйте сначала выделить жирным шрифтом или изменить размер шрифта. Только после этого, если это не сработает, смените цвет, но в идеале не более 30-40% разницы (обычно непрозрачность устанавливается на 70%).

2 - Постоянное пустое пространство

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

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

Напротив, вот пример с более или менее одинаковым количеством контента / типов компонентов, но с более согласованным внешним видом:

Источник

Есть разные способы добиться этого, но в большинстве случаев это не работает с простым измерением. Когда смотришь на это, часто возникает ощущение. Это выглядит сбалансированным? Если у вас есть блоки, вы всегда можете измерить что-то вроде 30 пикселей по бокам, 30 пикселей под заголовком, 15 пикселей под субтитрами и т. Д. И это хороший подход! Но с более крупными визуальными элементами, такими как заголовки или изображения, вы можете немного увеличить их, чтобы компенсировать более тяжелый элемент.

3 - Цвет

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

Следующий пример соответствует всем трем рекомендациям - Хороший контраст, баланс и использование цвета:

Источник

Один из простых способов начать с цветов - это следовать некоторым хорошо принятым цветовым схемам с таких сайтов, как https://colorhunt.co/, или черпать вдохновение в Dribbble для их комбинаций. Работа с цветовым кругом полезна для определения комбинаций, но часто от дизайнеров требуется немного дополнительных усилий, чтобы найти лучшие комбинации. Цветовые круги часто не дают идеальных цветов для применения в дизайне.

Пример из цветового круга Adobe:

Источник

Приятный зеленый цвет посередине, но сложно использовать результаты слева / справа.

4. Придерживайтесь стиля на всем сайте

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

Что это значит? Что ж, займемся дизайном кнопки. Мы устанавливаем размер шрифта, шрифт, цвет, фон, интервал и т. Д. И получаем что-то вроде этого:

Теперь, если мы добавим изображение и заголовок, мы сможем добиться чего-то вроде этого, возможно:

Смотрите углы. Все безупречные углы 90 градусов, без закруглений. Это означает, что наш дизайн в основном будет следовать за острыми углами. И это выглядит более последовательным, если на изображении тоже есть эти идеальные углы. Точно так же, как если бы мы добавили вводы, все они тоже имели бы эти более острые углы. Добавим еще один элемент:

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

Вот тот же дизайн сверху, но с закругленными углами:

Это то же самое, но сейчас кажется совсем другим.

5 - Дизайн с компонентами

Компоненты присутствуют во всех современных инструментах дизайна, таких как Figma и Adobe XD. Они существуют по очень хорошей причине - разработчики реализуют сайты таким образом, чтобы их можно было использовать повторно в максимально возможной степени.

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

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

Источник

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

Пример от DevriX

В итоге:

Чтобы добиться хороших результатов, вам необходимо хорошо понимать основы дизайна, такие как цвет, контраст, белое пространство, баланс, визуальная иерархия, порядок и многое другое. Когда вы разрабатываете с учетом этого и сосредотачиваетесь на удобстве использования, последовательности и стиле, и даже если это не «ВАУ!» дизайн, он будет прочным во всех отношениях и хорошо работать, что часто дает лучшие результаты для бренда в долгосрочной перспективе.