ui дизайн

Создание великолепного UI-дизайна: обучение и примеры

  • Дизайн

  • 1 мин чтение

Итак, давайте по порядку. Это руководство – не для всех. А для кого же?

  • Для разработчиков, которые хотят научиться при необходимости проектировать собственные привлекательные пользовательские интерфейсы.
  • Для UX-дизайнеров, которые хотят, чтобы их портфолио выглядело лучше, чем презентация в PowerPoint. Или для UX-дизайнеров, которые уверены, что они могут продать потрясающий UX-продукт в составе симпатичного UI-пакета.

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

И это нормально. Покритиковали – и хорошо. Закрывайте вкладку, проходите мимо.

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

Эта статья – не теория. Эта статья – чистейшая практика. Мы расскажем о том, как научились на собственном опыте, а затем – на вдумчивой, неспешной практике.

Правила

Вот они:

  1. Свет падает с неба
  2. Сначала – черное и белое
  3. Больше чистого пространства
  4. Научитесь накладывать текст поверх изображений
  5. Увеличивайте и уменьшайте текст
  6. Используйте только хорошие шрифты
  7. Воруйте как художник

Правило 1: Свет падает с неба

Тени – это бесценные подсказки человеческому мозгу о том, на какие элементы пользовательского интерфейса мы смотрим. Это, пожалуй, самое важное и неочевидное, что нужно знать о UI-дизайне: свет падает с неба.

Свет падает с неба так часто и последовательно, что снизу он выглядит странно. Когда свет падает с неба, он освещает верхние поверхности предметов и отбрасывает тени под ними. Верх предметов всегда светлее, низ – темнее.

Так и не подумаешь, что у людей нижние веки темнее. А вот если посветить им в лицо фонарем, направив луч снизу – у вас получится выходец с того света. Ровно так же происходит с UI-дизайном.

Точно так же, как у нас затемнены нижние границы черт лица, тени присутствуют и на нижних границах тонны элементов UI. Экраны плоские, но мы ведь приложили массу искусства и мастерства, чтобы так много элементов можно было увидеть в 3-D формате.

кнопка ui

Или, например, кнопки. Даже в случае «плоской» кнопки можно предусмотреть кучу деталей в отношении света:

  1. У ненажатой кнопки затемнена нижняя граница. Солнышка там не светит, сынок.
  2. Ненажатая кнопка немного светлее сверху, чем снизу. Это потому, что светом имитируется слегка изогнутая поверхность. Как вы наклоняете зеркало, чтобы увидеть в нем солнце, которое находится у вас за спиной – так и наклонные поверхности немноооожечко сильнее отражают свет от солнца по направлению к вам.
  3. Ненажатая кнопка отбрасывает легкую тень – возможно, ее легче разглядеть в увеличенном масштабе.
  4. Нажатая кнопка, пусть она и темнее снизу, чем сверху, в целом темнее – это потому, что она находится на плоскости экрана, и солнцу не так легко на нее попасть. Кто-то может поспорить, что все нажатые кнопки, которые встречаются нам в реальности, тоже темнее, потому что наши руки блокируют направление света.

Это был просто пример с кнопкой – и целых 4 легких световых эффекта. Вот вам и урок. Теперь просто применяйте его ко всему.

ui дизайн

А вот, например, парочка настроек для iOS — «Не беспокоить» и «Уведомления». Ничего особенного, да? Но давайте посмотрим, как много световых эффектов в них спрятано.

    Верхняя кромка вкладки панели управления отбрасывает небольшую тень
  • Ползунок «ВКЛ» немного углублен
  • Ползунок «ВКЛ» углублен, и его нижняя грань отражает больше света
  • Иконки слегка выдаются. Видите яркую границу по верху? Она представляет собой поверхность, перпендикулярную источнику света, а потому на нее падает много света, а потому она отражает много света вам в глаза.
  • Разделительная черта затемнена в местах, где она отклоняется от угла падения солнечного света, и наоборот

ui-дизайн

Элементы, которые обычно принято углублять:

  • Поля ввода текста
  • Нажатые кнопки
  • Ползунки
  • Переключатели (невыбранные)
  • Кнопки-флажки

Элементы, которые обычно выдаются над поверхностью:

  1. Кнопки (ненажатые)
  2. Копки-слайдеры
  3. Кнопки выпадающего списка
  4. Карты
  5. Часть кнопки выбранного переключателя
  6. Всплывающие уведомления

Теперь вы в курсе, и все эти элементы будут сами попадаться вам на глаза, куда бы вы ни посмотрели.

Погоди, а как же плоский дизайн?

Уже на протяжении 5 лет не сдается тренд «плоского дизайна», который представляет из себя… ну, плоский дизайн. Это визуальный стиль, в котором элементам не хватает имитированного углубления или выступания над поверхностью. Это просто линии и фигуры со сплошной заливкой.

ui-дизайн

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

flat дизайн

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

плоский дизайн

Правило 2: Сначала – черное и белое

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

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

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

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

ui дизайн цвета

Это надежный и простой способ сохранить приложения «понятными» и «простыми». Слишком много цветов в слишком многих местах – это действительно простой способ испортить понятность/простоту. Ч/Б заставляет вас в первую очередь сосредоточиться на таких вещах, как расстояние, размеры и раскладка. А это главная задача понятного и простого дизайна.

ui дизайн

Бывают случаи, когда выбор Ч/Б не приносит такой пользы. Дизайн с конкретной спецификой – «спортивный», «эффектный», «мультяшный» и т.д. – должен разрабатывать дизайнер, умеющий очень хорошо использовать цвета. Но большинство приложений не несут в себе особой специфики, кроме простоты и понятности. А те, что несут, по общему признанию, гораздо сложнее разрабатывать.

ui дизайн

Шаг 2: Как добавить цвета

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

ui дизайн пример

Можно этот шаг немного усовершенствовать. Градации серого + два цвета, или градации серого + несколько цветов одного оттенка.

палитра ui дизайн

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

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

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

Правило 3: Больше чистого пространства

Чтобы по UI-дизайну было видно, что над ним действительно работали, добавьте в него больше свободы.

В Правиле 2 мы говорили, что Ч/Б заставляет дизайнеров задуматься о расстоянии и раскладке элементов, прежде чем думать о цветах, и как это хорошо. Итак, пришло время поговорить о расстоянии и раскладке элементов.

Правило 4: Научитесь накладывать текст поверх изображений

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

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

Способ 1: Разместить текст прямо на изображении

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

ui дизайн

С этим способом есть куча проблем и подводных камней:

  1. Изображение должно быть темным и не должно иметь контрастных границ
  2. Текст должен быть белый – слабо отыскать не белый текст, но простой и понятный? Серьезно. Хотя бы один попробуйте найти.
  3. Тестируйте результат на всех экранах/размерах окон, чтобы убедиться, что текст удобочитаемый

Все получилось? Отлично. А теперь вообще не притрагивайтесь к тому, что получилось, иначе вам несдобровать. Не припомню, чтобы я когда-либо накладывал текст непосредственно поверх изображения в ходе работы над серьезным проектом, так что этот способ – скорее нечто вроде контрольного метода. Тем не менее, можно получить действительно крутой эффект – но будьте аккуратнее.

ui-дизайн

Способ 2: Изображение целиком на задний план

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

ui дизайн

Если вы перейдете в DevTools и удалите наложение, то увидите, что исходное изображение было слишком ярким и контрастным, чтобы можно было разобрать текст. Но темное наложение решает проблему! Этот способ прекрасно подходит для миниатюр или небольших изображений.

ui дизайн

И хотя наложение черным – самое простое и универсальное, безусловно, можно найти и цветное.

Способ 3: Текст в рамке

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

ui дизайн

Способ 4: Размытое изображение

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

ui дизайн

Правило 5: Увеличивайте и уменьшайте текст

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

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

  • Размер (больше или меньше)
  • Цвет (выше или ниже контрастность; яркие цвета притягивают взгляд)
  • Жирность шрифта (потолще или потоньше)
  • Регистр (нижний, ВЕРХНИЙ и Заглавные Буквы)
  • Курсив
  • Интервал между символами (или — внимание, модное словечко — трекинг!)
  • Границы (технически не являются свойством текста, но могут использоваться для привлечения внимания, потому включены в список)

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

  • Подчеркивание. Сегодня так обозначаются ссылки, и ни к чему пытаться придать подчеркиванию иные функции, если хотите знать мое мнение
  • Заливка текста. Нечасто встречается, но на сайте 37signals так некоторое время оформляли ссылки, а на сайте IDEO есть анимированная заливка при наведении курсора.
  • Зачеркивание. Прочь, мастер настройки CSS из 90-х!

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

Способы оформления текста можно разделить на две группы:

  • Стили, повышающие видимость текста. Большой размер, жирное начертание, регистр и т.д.
  • Стили, понижающие видимость текста. Маленький размер, меньше контрастности, меньше границы и т.д.

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

material дизайн

Масштабный текст здесь представлен в заголовке “Material Design”. Буквы большие; они высокой контрастности; они очень жирные.

material дизайн

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

А теперь самое главное.

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

ui дизайн

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

Что же нам остается делать?

  • Цвет текста
  • Цвет фона
  • Тени
  • Подчеркивание
  • Небольшая анимация – подъем, опускание и т.д.

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

Правило 6: Используйте только хорошие шрифты

Некоторые шрифты лучше, чем другие. Используйте их.

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

Порядок не имеет значения:

1. Work Sans

Иногда нужно разработать что-то, что требует современного, простого шрифта, плюс мааааленькую капельку веселья. Work Sans идеально вписывается в бюджет. Он слегка причудливый; определенно недооценен. Вы больше нигде (это не навсегда, конечно) не встретите такой совет, потому что Work Sans только месяц-два назад обзавелся курсивом. Внимание: его нет на Google Fonts (пока). Подробнее об этом расскажу ниже. Широкие буквы означают, что хорошо смотреться он будет даже в очень небольшом размере – отличное свойство для шрифтов, используемых в мобильных приложениях.

2. Roboto

Невероятный, простой, универсальный шрифт. Хотя этот шрифт по умолчанию используется на Android, он все еще недооценен (и доступен бесплатно!) на iPhone и в веб-приложениях. Красивый, работает где угодно, и его можно сделать жирнее некуда.

3. Montserrat

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

Правило 7: Воруй как художник

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

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

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

1. Dribbble

    Сайт по типу «покажи и расскажи для дизайнеров», зарегистрироваться можно только по приглашению. Установил недостижимую планку как сайт для онлайн UI-дизайна высочайшего качества. Здесь можно найти чудесные примеры чего угодно.

ui дизайн

2. Flat UI Pinboard

Не имею ни малейшего представления, кто такой " warmarc", но его пинборд телефонного интерфейса оказался для меня до жути полезен в поисках разрозненных примеров красивого UI-дизайна.

flat ui

3. Pttrns

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

ui дизайн

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

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

Заключение

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

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

Читайте следующую статью

Заголовок статьи

Прототип сайта: создание прототипа с примерами и инструментами

  • Веб-разработка

  • 1 мин чтение

Еще статьи в этой категории

Дизайн

Тренды UX и UI дизайна в 2019

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

Дизайн

Дизайн мышление: технология, методы и инструменты

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