Светлана Шаповалова, коммерческий автор и переводчик, специально для «Нетологии» адаптировала статью Ника Бабича — разработчика и фаната UI/UX, в которой он рассказал о лучших приемах минималистичного дизайна.

Мобильный рынок растет, а с ним и потребность в минимализме. Использовать минималистический дизайн в приложениях и на сайтах выгодно: уменьшается время загрузки, улучшается адаптивность. Красивые минималистичные приложения в сочетании с продуманным юзабилити впечатляют внешне и удобны в использовании. Простое, ничем не перегруженное приложение — мощная форма коммуникации.



Выражать больше, изображая меньше

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

Убрать все лишнее


Каждый элемент дизайна несет практический смысл

В минималистичном дизайне не разгуляешься. Любой из элементов на странице находится на ней не просто так. Всё имеет свою цель. Дизайн буквально обнажен — остаются лишь совершенно необходимые компоненты. Как говорил Антуан де Сент-Экзюпери: «Совершенство достигнуто не тогда, когда нечего добавить, а когда нечего отнять».


Идея четко выражена, а экран полностью лишен ненужного шума

Совет: будьте строги, решая, что убрать, а что оставить.

  • Забудьте о стоковых фотографиях. Они не несут никакого смысла. Изображение нужно лишь тогда, когда без него не ясна идея.
  • Избавьтесь от лишних слов и выстройте коммуникацию максимально сжато. Текста — минимум, ровно столько, чтобы разъяснить идею. В тоже время информации должно быть достаточно, чтобы не возникало недопониманий — это обесценивает пользовательский опыт.

Один экран — одна точка фокусировки


Шлифуйте ваше сообщение

Чем меньше элементов на экране, тем сильнее они воздействуют на пользователя. Центральная идея философии минимализма в том, что дизайн строится вокруг контента: контент — король, визуальное оформление — почитающая его свита.

Когда выделяешь послание, важно не просто убрать лишнее, а и выделить содержание. Таким образом, минималистичный дизайн ясно и недвусмысленно выдвигает на первый план контент и CTA-кнопки.


Иерархия делает контент понятнее

Совет: начните с голого контента и возведите вокруг него понятный пользователю интерфейс.

Упростить цветовую схему


Ограничьте количество используемых цветов

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


В iOS-приложении Clear для визуализации приоритетных задач используется градация.

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


Всплывающий цветной кружок привлекает внимание пользователя к нужной части экрана.

Не скупиться на пробелы


Больше воздуха — меньше беспорядка

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


iOS-приложение Medium хорошо смотрится благодаря использованию легкой типографики, белого пространства и оттенков серого: от светлого до насыщенно-угольного.

Совет: чем больше расстояние, тем сильнее нагнетается внимание. Чтобы выделить тот или иной элемент, просто увеличьте пустое пространство вокруг него. Главное убедитесь, что пробелы логичны и глаза легко движутся по контенту.


iOS-приложение Sky использует пробелы, чтобы создать иерархию и сделать контент удобнее для восприятия.

Итак


Минималистичный дизайн — не самоцель, а способ сделать дизайн лучше.

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

Комментарии (9)


  1. Loki3000
    10.05.2017 14:02
    +6

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


    1. hdfan2
      10.05.2017 14:32

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

      Кнопка с 9 точками, не? Или речь о чём-то другом?


      1. Loki3000
        10.05.2017 16:52

        Даже не знаю… Зашел сейчас туда, перешел по ссылочке «другие сервисы»: пытаюсь найти «webmaster» — нету, ищу «search console» — тоже нет. Но я точно помню что такой сервис был! Топаем на страницу поиска — опа, есть такой сервис! Собственно, о чем я и говорил.


        1. questor
          10.05.2017 22:37

          Верно. При этом логично было хотя бы используемые сервисы внести туда, но нет, с этим тоже непросто… ((


        1. hdfan2
          11.05.2017 06:13

          А, вот о чём речь. Да, по умолчанию ссылок на эти сервисы нет. Но если зайти на эту консоль и нажать ту же кнопку с 9 точками, то там будет кнопка для добавления Webmaster tools в окошко с сервисами.


          1. domanitsky
            11.05.2017 13:29

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


    1. hosembafer
      10.05.2017 20:16

      То, что у гугла этот момент устроили убого, ничего не говорит о самом минимализме. И при минимализме можно было поставить нормальные фильтры для сервисов и добавить скажем тот-же недостающий webmaster. Не могу понять какая связь между минимализмом и вашим примером. И кстати в списке сервисов есть аккорд/таб с названием For business, а там уже Search Console.


  1. DenimTornado
    10.05.2017 22:12

    Только разошёлся… и конец. Неожиданно.


  1. vintage
    14.05.2017 10:53

    Я не понял, иллюстрации — это примеры как делать не надо?