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

Что же произошло?

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

Перегрузка информацией

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

Золотая простота

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

Контент — это главное

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

Техническая грамотность

После того, как использование смартфонов и планшетов довольно быстро ворвалось в жизнь многих пользователей, мы стали реже думать об очевидности элементов управления. Если раньше мы боялись, что пользователь может не заметить кнопку, если она не выскочит поверх экрана, сегодня мы более склонны изучать более утонченные виды взаимодействия. Windows 8 и Chrome для Android сегодня даже поддерживают жестовые команды, которые появляются на экране без визуальных индикаторов.

Влияние технологий

Большинство программного обеспечения ограничено платформой, на которой оно запущено. Размеры экрана и плотность пикселей — ограничивающие факторы оборудования. Минималистичный интерфейс требует очень ограниченной палитры дизайна. Это означает, что каждый элемент должен «петь». Масштаб текста и насыщенность шрифта по большей части определяют как эстетику, так и удобство использования плоского дизайна.
Если ваши целевые устройства не могут работать с таким уровнем деталей, вам не повезло. Так как на мобильных устройствах продолжают увеличиваться размеры экранов и плотность пикселей, появляется возможность более точно отображать тонкий и мелкий шрифт. Конечно, поддержка @font-face также существенно усилила привлекательность ориентированного на текст минималистичного дизайна.

Отзывчивый дизайн

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

Практические рекомендации

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

Прежде чем вы начнете

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

Процесс

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

• Создавая минималистичный интерфейс, я обычно ищу вдохновение в тех временах, когда компьютеров еще не было и дизайнеры создавали больше, имея меньше. Это отличная возможность снова вспомнить о таких великих людях в дизайне как Джозеф Мюллер-Брокман и Вим Кроуэл. Я также просматриваю картины таких художников-минималистов, как Элсворт Келли, архитекторов как Мис ван дер Рое и промышленных дизайнеров как Дитер Рамс.

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

• Полезно параллельно сравнивать версии. Когда я на протяжении 20 минут двигаю строку текста вверх и вниз на 5 пикселей, я сохраняю две версии и сравниваю их; оптимальный вариант находится довольно быстро.

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

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

Сетка

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

• Сетка создает нечто большее, чем просто визуальный порядок. Её можно использовать для определения расположения контента и функциональных групп. Чтобы сгруппировать набор объектов не всегда нужно использовать линии и рамки. Простое выравнивание и размещение рядом могут помочь пользователю понять структуру интерфейса.

• Попытайтесь разбить сетку при помощи элементов с определенным значением, чтобы действительно привлечь внимание пользователя. Без лишних трюков с 3D основные принципы макета, такие как масштаб и размещение, становятся оптимальными элементами для создания визуальной иерархии.

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

Цвет

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

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

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

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

Текст

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

• Шрифт без засечек всегда выглядит чище, чем с засечками, хотя тот и читается лучше.

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

• Не бойтесь сочетать шрифты с сильно отличающимся размером и насыщенностью для создания визуальной структуры. Пробуйте комбинировать огромные шрифты с очень тонкими буквами в заголовках и мелкие шрифты со средними буквами в теле текста.

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

Взаимодействие

В плоском интерфейсе довольно сложно показать, что элемент активен. Вот несколько моих способов:

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

• Также помогает традиционное расположение. Если вы решили использовать стрелку возврата, поместите её в верхнем левом углу, где пользователи привыкли её видеть.

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

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

Закругляемся

Я не верю в сложные и быстрые правила в дизайне. Видеть дизайнеров, потративших много сил на создание невероятно чистых и простых пользовательских интерфейсов, действительно великолепно. Неужели плоский дизайн обязательно значит полный отказ от градиента или теней? Конечно же, нет. Фактически, некоторые из наиболее интригующих работ, которые я видел, балансировали между плоскостью и объёмом, разумно представляя контент, при этом сохраняя интуитивность взаимодействия.
В этом очень взаимосвязанном, богатом информацией и напичканном функциями цифровом мире, в котором мы живем, повсеместное возрождение минималистичного дизайна стало свежим веянием. Оно ни в коем случае не является правильным решением на все случаи (ни один стиль не является таковым), но если использовать его с умом и должным образом, он помогает создать удобный и комфортный опыт цифрового взаимодействия.

Оригинал: http://www.smashingmagazine.com/2013/09/03/flat-and-thin-are-in/

Сергей Попков
Owner/Partner в AIC

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

Чем круче навернешь эффектов, тем лучше поработал. А то, что ссылка «Оформить заказ» затерялась в этом месиве. Не страшно! Это, кстати, до сих пор встречается. Спрос на скевоморфизм, у нас в России, по-прежнему высок. Но мы потихоньку двигаемся.

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

С другой стороны, это и повзрослевший пользователь, которому не надо объяснять, что эта кнопка должна быть похожа на кнопку. Ведь без малого ей 20 лет! За это время многие поняли, куда нужно кликать. Пора ехать дальше.

Это постепенная миграция дизайнеров на более легкие платформы для разработки шаблонов, такие как Sketch, InDesign. Я думаю, в будущем Photoshop останется узкопрофильным софтом, для каких-то особенных задач. Дизайнеры будут больше проектировать и применять готовые GUI-пресеты. Такие кейсы мы видим уже сейчас. К примеру, проектировщики и технологи, которые применяют Bootstrap.

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

Поэтому будьте бдительны к трендам!

Не упустите момент, когда плоский дизайн оставит вас с плоским рублем.

Анна Белозерова
Арт-директор в MST Digital Agency

Никогда не ассоциировала дизайн с искусством в прямом смысле. Но слова о Мис ван дер Роэ среди потока совершенно сторонних задач сегодня выудили из памяти интересные воспоминания и аналогии.
 

Вспомнилась история искусств последних курсов и отличная лекция руководителя музея современного искусства. Она рассказывала об эволюции форм, стилей и направлений в мировом искусстве. Рассказывала о том, как точно стиль Рококо соответствовал меланхоличной пышности и сладости жизни, необходимостью «пересчитывать» складочки, прорисовывать мельчайшие жемчуга, чтобы правдиво отобразить ту эпоху. Одним словом, стиль «Чересчур» в эпоху, похожую на ванильный торт. Это отражение мышления, ритма и основ той жизни. Ровно так, как, например, практически любое из направлений современного искусства отражает наш ход мысли: поиск новых образов, материалов и подач — перфомансы, цифровое искусство и прочие находки.
 

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

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

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