Ускоренный курс по основам дизайна для людей, не являющихся дизайнерами
Разработчики часто оказываются в роли дизайнеров, несмотря на то, что дизайн не входит в их должностные обязанности. Хотя это не идеальная ситуация, мы часто оказываемся в такой реальности. Хоть это и забавно, термин «разработанный программистом» часто является точным. Очень легко обнаружить проекты, созданные программистами или разработчиками, которые плохо понимают основы дизайна. Давайте избавимся от этого термина и пройдем краткий курс по основам дизайна. В этом посте я поделюсь восемью основами дизайна и несколькими передовыми практиками, которые помогут вам создавать более привлекательные интерфейсы. Важно помнить одну важную вещь: дизайн субъективен, и, в конечном счете, при создании дизайна руководствуйтесь своим здравым смыслом.
Восемь основ
1.) Линии
Линии являются строительными блоками дизайна. Они создают формы и придают форму различным компонентам. Линии могут быть разной длины и толщины, а использование линий может передавать разные сообщения. Большинство линий делятся на два типа: неявная линия (элементы или прямоугольники рядом друг с другом) и буквальная линия. Линии отлично подходят для разделения информации и создания акцента на определенных областях.
Вот пример буквальной строки, создающей акцент:
Вот тот же дизайн с добавленной дополнительной линией и измененной толщиной линии:
Обратите внимание, что теперь дизайн кажется неправильным, потому что линия больше не создает акцента, а вместо этого группирует информацию.
Вот пример подразумеваемой строки, разделяющей информацию. Различные цвета создают эффект блокировки цвета, разделяя информацию.
2.) Формы
Логичным шагом вперед от простой линии была бы форма. Формы могут передавать эмоции и вызывать разные чувства в зависимости от их выравнивания и размера. Они, как правило, делятся на две категории: геометрические или плавные. Геометрические формы однородны и математически совершенны. Эти формы, как правило, передают силу и организованность. Текучие формы — это естественные формы, которые, как правило, имеют множество кривых и математически говоря неправильны. Плавные формы кажутся более расслабленными и успокаивающими. Забавный факт: самые распространенные формы в веб-дизайне — это квадрат и прямоугольник.
Вот пример того, как геометрические фигуры передают чувство организации и структуры:
Вот тот же дизайн, но я удалил некоторые прямоугольники, содержащие товары. Это нарушило организацию сетки и сделало дизайн запутанным, несмотря на то, что это не нарушает никаких других основ дизайна.
Вот пример смешивания плавных и геометрических форм в одном дизайне. Не существует жесткого правила, согласно которому вы не можете комбинировать оба варианта, но будьте осторожны, чтобы не создать визуально загроможденный макет.
3.) Цвет
Теперь, когда у нас есть линии и формы, давайте поговорим о цвете. Цвета передают разные сообщения и значения. Теория цвета — это целая школа мысли, и она может усложниться, как только мы начнем говорить о дополнительных цветах, третичных цветах, оттенках, насыщенности, легкости и т. д. Мой совет для этого раздела — использовать готовую цветовую палитру и понимать эмоции, которые вы хотите передать. вызвать у ваших пользователей. Вы можете бесплатно использовать онлайн-генераторы или посмотреть цветовые палитры на других сайтах, которые вам нравятся. Цвет — одна из самых простых основ дизайна, в которой легко ошибиться; тем не менее, это имеет огромное значение, если все сделано правильно.
Вот пример ужасного выбора цвета:
Вот тот же дизайн с цветами, которые хорошо сочетаются друг с другом:
4.) Контраст
Контраст тесно связан с цветом, поэтому имеет смысл поговорить об этом далее. Контраст — это очень простая основа для понимания; если вы не делаете преднамеренный выбор дизайна, вы хотите обеспечить достаточную визуальную разницу между элементами, чтобы пользователи знали, куда вы хотите, чтобы они смотрели. Контраст лучше всего объясняется картинками.
Вот пример целевой страницы с хорошим контрастом. Пользователю очевидно, где находится CTA и что вы хотите, чтобы пользователь сделал.
Вот пример плохого контраста. Все имеет похожий цвет; пользователям трудно понять, что они должны делать.
5.) Белое пространство
Белое пространство — это пустое или отрицательное пространство вокруг различных элементов на вашей странице. Белое пространство может служить нескольким целям. Он может фокусировать внимание пользователя, разделять элементы или передавать чувства. Небольшое замечание: белое пространство не всегда должно быть белым. Это просто пространство, свободное от элементов. Давайте посмотрим несколько примеров.
Здесь пустое пространство используется для разделения элементов. Пробел отделяет заголовок от текста абзаца и фона.
Вот тот же текст, но с удаленным пробелом. Пустое пространство жизненно важно для форматирования информации.
Теперь давайте посмотрим, как белое пространство может передавать чувства. В этом примере веб-сайт BBC имеет гораздо более компактный дизайн, подчеркивающий получение большего количества информации на экране. Это создает ощущение спешки и тесноты.
В этом примере на странице курорта используется пустое пространство, чтобы передать ощущение легкости и безмятежности.
6.) Типография
Подобно цвету, типографика — это отдельная школа мысли. При выборе типов шрифтов для вашего дизайна важно учитывать другие принципы дизайна пользовательского интерфейса, такие как пустое пространство, цвет, контрастность, иерархия и выравнивание. Мы поговорим об иерархии и выравнивании позже в этом посте. Вы хотите, чтобы ваши шрифты хорошо сочетались друг с другом. Слишком большие или слишком похожие шрифты могут плохо смотреться в паре. При выборе пары шрифтов очень важно учитывать чувство, которое вы пытаетесь передать; одни шрифты вызывают чувство ностальгии, другие — элегантность. Независимо от того, какие шрифты вы выберете, не забудьте выбрать разборчивые шрифты и просматривать пары шрифтов на экранах разных размеров. Не все шрифты выглядят хорошо при увеличении.
Вот пример плохой типографики. Три разных шрифта появляются на небольшом пространстве, не создавая согласованности. Шрифт заголовка плохо читается. Шрифт абзаца пишется заглавными буквами и может считаться акцидентным шрифтом или шрифтом заголовков. Ни один из этих шрифтов не работает вместе, и все они вызывают разные эмоции.
Вот тот же абзац, но с более удобным для чтения и более связным шрифтом.
7.) Масштаб и визуальная иерархия
Хотя их можно рассматривать как отдельные принципы дизайна, масштаб и визуальная иерархия хорошо работают вместе. Масштаб — это простой принцип дизайна. Элементы одного типа должны быть одинакового размера. Например, если вы создаете сетку, большинство элементов в сетке должны быть одинакового размера и занимать одинаковое количество места. Хорошо иметь элементы, которые не соответствуют этому правилу, но слишком много элементов неправильного размера выглядят странно. Давайте посмотрим на пример.
Вот дизайн, в котором мы сохранили «сетку», но изменили размер элементов. Это визуально сбивает с толку и создает неприятный дизайн.
Визуальная иерархия связана с масштабом. Именно за счет использования масштаба создается визуальная иерархия. Вы можете привлечь внимание пользователя, если важные элементы будут разных размеров или цветов. Если в ваших проектах нет иерархии, они часто могут выглядеть плоскими или неконтрастными. Иерархия лучше всего объясняется через визуальные эффекты.
Вот пример правильной визуальной иерархии. Большая фотография и шрифт облегчают глазу понимание, где искать в первую очередь. Различия в форме помогают разделить информацию.
Вот та же картина, но визуальная иерархия удалена. Такой дизайн затрудняет глазу выбор места для приземления. Это не ужасный дизайн, просто его сложнее понять.
8.) Выравнивание
Последний принцип дизайна — выравнивание. Тут особо нечего сказать, честно. Выравнивание — очень визуальный принцип, и идея заключается в том, что положение всех ваших элементов должно иметь смысл по отношению друг к другу. Вот и все. Пример времени!
Вот пример плохого выравнивания. Элементы висят без связи друг с другом.
Вот пример хорошего выравнивания. Все имеет смысл только по отношению друг к другу.
Теперь, когда вы понимаете восемь основных принципов дизайна пользовательского интерфейса, давайте поговорим о нескольких передовых методах и о том, как все сочетается друг с другом.
Лучшие практики
1.) Знай своего пользователя. Это говорит само за себя, но у вас должно быть хорошее представление об основной демографической группе вашего продукта или услуги. Создание пользовательских историй или картирование пути клиента может помочь понять, что может понадобиться пользователям и кем они могут быть. Знание своего пользователя позволяет вам выбрать правильные эмоции для вашего дизайна. Основы дизайна, связанные с этой областью, — это цвет, типографика и форма.
2.) Действия. В идеале мы хотим, чтобы пользователи взаимодействовали с дизайном определенным образом или в определенной последовательности. Если мы хотим, чтобы это произошло, мы должны упростить пользователям понимание того, что мы от них хотим. Это может включать «призыв к действию» другого цвета, кнопки для планирования звонков, которые больше других кнопок и т. д. Основы дизайна, которые связаны с этой областью, — это цвет, контраст и визуальная иерархия.
3.) Используйте ссылки. В целом это облегчит вам жизнь. Если вы разработчик, но не дизайнер, вам может быть сложно придумывать новые и свежие идеи. Использование ссылок или примеров может очень помочь в создании новых дизайнов. Такие веб-сайты, как behance или dribbble, — отличные места для поиска вдохновения для ваших проектов.
4.) Будьте проще. Часто меньше значит больше. Ваш дизайн должен рассказывать историю. Что такое продукт? Как работает продукт? Как ваш дизайн может помочь пользователю решить его проблему? Вот и все, больше ничего. Простую конструкцию легко поддерживать и обновлять.
5.) Протестируйте и подтвердите. Очень скучная передовая практика, но полезная. Посмотрев какое-то время на дизайн, мы часто не замечаем его ошибок или недостатков. Потратьте некоторое время, наблюдая за тем, как другие люди взаимодействуют с вашим дизайном, чтобы найти ошибки и посмотреть, достигают ли люди желаемого результата.
Плавник
Было много информации, которую нужно было усвоить, но, надеюсь, теперь вы можете создавать более привлекательные дизайны. Ни один фундамент дизайна не является более важным, чем другой, и все они работают вместе для создания цельного дизайна. Если вы будете следовать основам и передовым методам, у вас будет великолепный дизайн в кратчайшие сроки. Вы можете найти меня в Твиттере @thatDevTaylor.
Подпишитесь на нашу Бесплатную еженедельную рассылку новостей. Свежий контент от разработчиков со всего мира, свежий и прямо с поля! Не забудьте подписаться на нашу публикацию The Dev Project.
