Что такое flat design его особенности. Флэт-дизайн: прошлое, настоящее и будущее
Революция «плоского дизайна» продолжает набирать обороты с момента, как он был представлен на платформе Windows Phone в 2010 году. Не сложно понять почему: интерфейс с таким дизайном кажется более интуитивным, хорошо подходит для адаптивных элементов, современных фреймворков и при грамотном исполнении привлекательно выглядит.
Flat design начал существовать в противовес повсеместному скевоморфичному стилю, но с тех пор стал гораздо большим, чем просто «Вариантом Б».
Изначально flat был исключительно двумерным с тотальной ориентацией на минимализм. В современном flat 2.о используются тени, градиент и другие элементы, которые делают его «почти плоским».
5 характерных компонентов современного плоского дизайна:
1. Длинные тени
Длинные тени добавляют изображениям глубину и объем без необходимости жертвовать минималистичными деталями иконки, которые делают интерфейс привлекательным.
2. Динамичные цвета
Дополнить редкие визуальные эффекты просто с помощью энергичных цветов, особенно светлых оттенков.
Разный цветовой фон в контрасте с базовым цветом элементов делают страницу с «плиточным» меню более живой.
На сайте Flat UI Colors собраны самые эффективные цветовые паттерны для flat.
3. Простая типографика
Выбор шрифта в flat обусловлен одним критерием: удобочитаемостью. Обычно используются шрифты без засечек с постоянной шириной штриха.
4. Прозрачная кнопка
Один из трендовых элементов в современном веб-дизайне. Причина в том, что она не привлекает лишнего внимания, но четко распознается, как кнопка.
5. Минимализм
Flat и минимализм идут рука об руку, используя одни и те же принципы: простота и ориентированность на контент.
Может казаться, что использование плоского дизайна - универсальный выход, но минимализм сложен в исполнении: чем меньше рабочих элементов, тем большего внимания они к себе требуют.
Каким бы превосходным решением не казался плоский дизайн, нет гарантий, что он применим именно для вашего сайта. Ознакомьтесь с его основными достоинствами, чтобы понять, стоит ли планировать глобальный редизайн.
Преимущества:
используется в адаптивном интерфейсе;
упрощает для пользователя восприятие навигации;
четкая структура и схематичный визуальный ряд подчеркивают внутреннюю логику страницы;
быстрая загрузка страниц, за счет простоты графики;
привычная типографика повышает читабельность.
Плоский дизайн – это простота и минимализм, которые, с другой стороны, создают трудность в передаче визуально сложных сообщений. Поэтому, прежде чем кидаться с головой в упрощение интерфейса, стоит тщательно продумать схему взаимодействия между сайтом и пользователем.
На базе Web design book of trends.
Flat дизайн (плоский дизайн) – один из основных трендов сегодня, как в сфере веб-дизайна, так и технологиях создания пользовательских интерфейсов. Из недавних примеров наиболее заметными будут: решительный шаг компании Microsoft в этом направлении, с ее Windows 8 и новый дизайн Google, с явной демонстрацией желания углубиться в минимализм.
Вот примеры элементов, определяющих .
Жизнь после Web 2.0
В виде закруглённых форм элементов со всевозможными эффектами — 3D, тени, блики и отражения, градиенты, тиснения. Словом всего, что создает глубину и объем. Большие, яркие элементы управления, глянец, применение текстур и прочие подобные способы проявления уступают дорогу простому, двумерному представлению визуальных объектов.
Float Design
Типографика в основе стиля
Заметьте, что это основа построения «плоского» сайта. Простота элементов Flat дизайна, как и сами принципы минимализма усиливают значимость типографики. Текстовым контентом возможно в принципе заменить некоторую часть тяжелой графики или изображений. Сегодня уже на многих сайтах типографика стала дизайна. Естественно, раз дизайн в стиле флэт зачастую минималистичен, то и характер шрифтов нужно согласовывать с общей схемой, стилем и композицией. Так, например часто используется верхний регистр для элементов или заголовков.
Coderwall
Читайте также: 12 основных цветов и примеры их восприятия пользователями
Цветовая палитра плоского дизайна
Flat дизайн также движется в сторону расширения цветового разнообразия . Веб-дизайнеры все больше используют палитру цветов для реализации, пожалуй, основного принципа дизайна: сайт должен отличаться от себе подобных.
Minimal Monkey
Свободное пространство, большие элементы
От начала до конца имеет минималистичную основу, а значит, перенимает и его основные принципы: крупные блоки контента, большие элементы, свободное пространство, отсутствие излишней суеты и вычурности.
Beard Design
Плоский дизайн иконок, кнопок, иллюстраций
Кнопки, иконки, значки и иллюстрации также принимают двумерный вид. Они должны соответствовать заданному стилю на всех страницах сайта, передавать настроение самого сайта и быть легки для понимания любому пользователю.
Подбор цвета для иконок, как и самих иконок – непростая задача. Можно использовать чистые цвета. Стремясь украсить дизайн, нужно подумать и о том, как сделать сайт удобным в пользовании. С одной стороны важно не нарушить стиль, а с другой – необходимо сделать иконки заметными. В иллюстрациях стремимся к минимализму, избегая столь популярных прежде 3D эффектов.
Читайте также: 20+ вдохновляющих сайтов с плоскими иллюстрациями в дизайне
Примеры шаблонов сайтов с плоским дизайном Flat UI
Примеры сайтов в стиле Flat-дизайна
Identity
83 Design Collective
Frunatic
The Umbrella Group
Slcl Foundation
My Felt
Behzad
Atlant
Simple as Milk
Weranda Family
Плоский дизайн (Flat design) - сравнительно новый тренд, о котором не перестает говорить все дизайн сообщество.
Кому-то он нравится, кто-то абсолютно не может к нему привыкнуть и даже ненавидит.
Хороший дизайн в первую очередь должен решать бизнес задачу клиента, какими средствами это будет достигнуто вопрос вторичный. Если дизайнер выбрал как стиль или инструмент - «плоский дизайн» - да будет так! Но не стоит забывать что такая стилистика подходит далеко не для всех проектов.
Так давайте же проанализируем, о чем нужно не забывать если вы решили поддаться модной тенденции и поработать в стилистике «плоского дизайна».
Основными принципами плоского дизайна являются:
1. Отсутствие эффектов
2. простые элементы
3. Акцент на типографике
4. Акцент на цвете
5. Минималистский подход
6. "Почти" плоский дизайн
Теперь давайте рассмотрим каждый из принципов плоского дизайна более подробно:
Отсутствие эффектов
В плоском дизайне чаще всего не используются такие эффекты как: тень, скосы, тиснение, градиенты или другие приемы, которые добавляют глубину и объем. Никаких 3D эффектов и передачи материальности в отличие от стилистического оппонента «Скеморфизма». Каждый элемент должен оставаться четким, будь то иконка, навигационная панель или рамка, кнопка и тд.
Плоская стилистика имеет ярко выраженный внешний вид без дополнительных возможностей и элементов. Она опирается на четкое чувство композиционной иерархии и размещения элементов. Данная структура помогает легче воспринимать дизайн и быть интуитивно понятной для каждого пользователя.
Простые элементы
Плоский дизайн часто использует простые элементы пользовательского интерфейса, такие как кнопки и иконки и тд. Дизайнеры при создании этих элементов интерфейса придерживаются простых фигур (прямоугольник, круг, квадрат и т.д.) - это позволяет каждой форме быть самостоятельной.
Но не следует путать простые элементы с простым дизайном, плоская дизайн концепция может быть столь же сложной, как любой стилистически иной вид дизайн концепции.
Акцент на типографике
Так как плоский дизайн строится на элементах простой формы без объема, типографика является чрезвычайно важным элементом в плоской композиции.
Характер шрифта должен соответствовать общей схеме и композиции - слишком сложный шрифт может выглядеть странно и вычурно на чересчур упрощенной дизайн модели. Предпочтительно использовать простой шрифт без засечек, жирного или полужирного начертания. Текст должен гармонировать с простыми формами.
Шрифт должен быть вспомогательным инструментом, помогать пользователям взаимодействовать с нашим интерфейсом. Надписи на кнопках и других элементах не должны быть замысловатыми.
Акцент на цвете
Цвет немаловажная часть дизайна. Палитра плоского дизайна, часто намного ярче и красочнее, чем для других дизайн стилей. По сравнению с обычным дизайном, который фокусируется на 2-3 цветах, плоский дизайн может включать 6 или даже 8 цветовых оттенков.
Flat дизайн -это ключевое направление в дизайне на ближайшие годы, поэтому предлагаем познакомиться с ним ближе и узнать 5 основополагающих принципов, легших в его основу.
Знакомство с flat дизайном
На русском языке flat design переводится как «плоский дизайн», а стал он абсолютным фаворитом после презентации Apple ОС iOS. Во главу угла встал минималистичный подход к дизайну для юзабилити. Ставка сделана на комфорт пользователя. Это ярко выраженный протест против «сквеформизма» (визуализация объектов, как в реальности). Выбор пал на более упрощенные и при этом простые в эстетическом плане решения. Пользователи, уставшие от реалистичных визуализаций, с восторгом встретили это направление, и все больше web-проектов переходят именно к этому формату.
Хочется отметить, что «плоско» - не значит «скучно». Решения flat дизайна могут быть красивыми, они более утонченные, чистые, избавленные от избыточности чего-либо, трансформируясь в «островок спокойствия». Они, наконец, делают контент понятным. Осталось узнать основные принципы, чтобы применять их на практике.
Принцип №1: долой ненужные эффекты«Плоский» дизайн не стремится передавать объемы, поэтому в основе лежит двумерная визуализация. Это значит, что вы не увидите ни теней, ни рефлексов, ни бликов с текстурами (исключение составляют длинные тени). Только передача контуров, и ничего более.
Рекомендуется использование односложных фигур в дизайне, как и следить за четкостью контуров, что призвано подчеркнуть легкость и невесомость. Кроме того, такие лаконичные элементы хорошо имитируют сенсор, порождая желание к взаимодействию с объектом (призыв к нажатию, прикосновению). Впрочем, простота элементов не равна простоте дизайна в целом - это относится только к очертаниям. В результате, все, что видит пользователь, ему понятно, и он может с легкостью этим пользоваться.
Флэт дизайн призывает крайне осторожно работать со шрифтами. То есть их характер обязан дополнять дизайн-схему, не противореча ей. Более того, во флэт дизайне шрифт - это еще и ключевой навигационный элемент.
Не только шрифт, но и цвет -существенная часть в «плоском» дизайне. В подавляющем большинстве палитры базируются на 2-3 цветах, хотя, конечно, есть и исключения. Обычно выбираются сочные и яркие, но при этом чистые цвета. Как было отмечено, нет никаких градиентов и излишних переходов.
Flat дизайн - это яркий пример такого всемирного тренда, как минимализм. Дизайнеры отказываются от излишних «наворотов», уходят от сложных и неявных подходов к визуализации, что дает свои плоды в виде пользовательской активности.
Плоский или почти плоский? Ищем компромисс!
В завершение хочется отметить, что сегодня имеет место быть синергия между плоским и неплоским дизайном. Речь идет о «почти плоском» дизайне. Это наиболее распространенное применение описанного концепта, когда вместе с простыми и лаконичными элементами и двумерным пространством дизайнеры применяют 1-2 приема для глубины и перспективы.
Также трендом 2017 года стал Semi Flat Design - полуплоский дизайн. Под влиянием Material Design, он стал немного более пространственным. Появляются легкие тени, которые делают дизайн полуплоским. Флэт-дизайн актуален и сегодня, за счет теней он стал глубже и сложнее, но основная концепция не нарушается.
Не знаем, заметили вы или нет, но в последнее время (особенно в последний год) в веб-дизайне по всему миру начала прослеживаться чёткая тенденция к упрощению, жесткому минимализму и визуальному облегчению того, с чем мы как пользователи взаимодействуем каждый день. Проще говоря, дизайн стал «плоским»: в отличии от выпуклых иконок времен бурного роста социальных сетей и web 2.0, сейчас нас всё чаще встречают простенькие иконки новых сервисов. Всё это получило своё название – flat design. Не квартирный, а плоский.
Своей вчерашней презентацией новой мобильной ОС, iOS 7, компания Apple окончательно подтвердила стремительный рост популярности этого направления, традиционно обрадовав часть своих фанатов, но и встретив значительное недовольство среди опытных пользователей и дизайнеров. В чём же дело? В чём польза этого плоского дизайна и действительно ли он нужен миру? Мы решили обратится к экспертам из Украины и зарубежья.
Мы попросили их ответить на три главных вопроса:
- почему мир начал двигаться к flat design в вебе и мобайле и что он из себя представляет;
- что это даст Apple и iOS 7;
- как это повлияет на дизайнеров - с одной стороны, и на пользователей - с другой.
Денис Судилковский, Киев
Interaction Design специалист, продюсер Prodesign.in.ua
«Эффект маятника» в предсказании будущего проявляется в том, что если в каком-то вопросе существуют две крайности - человечество будет кидаться из одной стороны в другую. Без сомнения, это справедливо и для дизайна интерактивных систем. Плоский и неинтересно-примитивный веб в своё время изменился на объёмные вебдванольные кнопочки. Визуализации интерфейсов достигли своего апогея реалистичности и маятник летит в обратную сторону - flat&simple.
Что получит от этого Apple? Сохранит своё место в тренде и сотни тысяч комментариев, что их iOS становится очень похожей на Android.
Дизайнерам придётся эволюционировать (и не шутить на тему, когда же flat-дизайн придёт в машиностроение и подарит нам плоские автомобили:). Когда нет декораций - вся работа состоит в создании настроения контентом для конкретного сценария с пользователем. Эта профессия будет иметь всё больше общего с Режиссёром, нежели с Художником. Пользователи, напротив - получают новый опыт и новые впечатления. Лично я 4 года был адептом iPhone, но этой весной сменил телефон на Android по единственной причине - надоела однообразная идеальность яблочного интерфейса.
Daniel Bruce, Stockholm
Senior Digital Creative, danielbruce.se
Для начала, я хотел бы отметить, что я не люблю термин «плоский дизайн». Большинство графического дизайна на протяжении столетий были «плоскими». Я также считаю, что это ограничивает вашу возможность сделать выдающимся дизайн, когда выбор стоит между flat и чем-то ещё. Дизайн может быть чем-то значительно большим, нежели это. Весёлым, ярким, темным, позитивным, минималистичным - его можно назвать как угодно. Но сегодня я редко слышу, чтобы кто-то считал дизайн не только плоским или склероморфным. Это немного грустно.
Почему веб и мобайл медленно идут к плоскому дизайну? Я вижу это так - это просто тренд. Я никогда не видел статей про преимущества плоского дизайна в пользовательских интерфейсах и до сих пор не убедился в этом. Простой и ясный дизайн - да, но это не то же самое что и «flat». Посмотрите, например, на Google. Они не делают полностью плоские дизайны, они - и я разделяю этот момент - до сих пор видят потребность в некоторой глубине и вариациях.
Я был очень удивлён, когда Microsoft выбрали для себя это направление несколько лет назад, презентовав известный Metro стиль. Фактически, они использовали графический дизайн для больших знаков, на которые люди смотрят с определённых расстояний и никогда не взаимодействуют с маленькими экранами со значительным количеством элементов. Это выглядит красиво, но имеют ли они хорошее юзабилити?
То, что я увидел вчера вечером от Apple, было лишь плохой копией нескольких интересных дизайнов, которые появляются на сайтах наподобие Dribbble i Behance на протяжении последнего года. Я не увидел ничего нового - кроме того, что это далеко не тот же «старый Apple» Стива Джобса. Компания показала, что она не на передовой дизайна мобильных интерфейсов. Конечно, мы увидим и фанатов, которые будут наследовать все эти белоснежные дизайны и креативные градиенты следующие несколько месяцев, но я не думаю что этот аспект будет настолько влиятелен, как недавние прекращения Google. Но с другой стороны, как бы там не было, Apple всегда выступала законодателем мод и вдохновением для многих людей, включая меня.
Что касается обычных пользователей, то им нравятся яркие цвета.
Иван Клименко, Киев
дизайнер мобильных интерфейсов, 5tak.com
В значительной степени я отношусь к этой ситуации с увлечением плоскими стилями немного по-философски. Не впервые дизайнеры увлекаются минимализмом и искуственными материалами. Всё проходит.
Эпоха Баухауса 20-30-х годов принесла огромный вклад в дизайн, но всё-таки тональная герметичность и искуственность не выдержала желания и внутреннего позыва людей существовать в окружении более натуральных вещей.
Потом в 60-х все начали восхищаться пластиком.
Мебель, посуда и даже одежда - всё из пластика. Казалось, что это новая надежда человечества, но снова нет - люди очень быстро вернулись к природным формам или к копиям натуральных материалов.
Жесткий контраст форм и минималистичная графика всегда выражали накопление внутренних конфликтов внутри общества. Дизайн - всего лишь зеркало, которое показывает наш внутренний мир. Слишком много всего вокруг. Жизнь очень ускоряется, и у нас просто не остаётся времени подумать и рассмотреть что-нибудь. У нас часто нет времени просто жить.
Минималистичность и все эти электронные железяки - всего-лишь шаг на дороге к чему-то более природному и человеческому. Большему чем просто ещё один компьютер. Мне даже жаль, что Apple, которая умела смотреть глубоко, больше не существует.
Олеся Гричина, Киев
UI designer at Componentix, twitter: elendiel
Думаю, что на дизайнеров очень повлияло большое количество гаджетов с разными размерами экрана и разрешающей способностью - для всего этого разнообразия легче создавать дизайн без текстур, сложных теней, которые правильно учитывают освещённость и т.п. Больше стали думать в направлении «как бы удобнее для пользователя сделать», а не «как бы красиво нарисовать». Контент - это главное, и в нашей работе важно подать его наилучшим образом.
Мне кажется, что за внешними изменениями (flat UI, иконки) особенно и не заметили серьёзных изменений в удобстве работы, и того, как ругаются на эту тему. Когда проверят в работе - начнётся «ооо, как удобно, и почему раньше так не сделали». На дизайнеров, надеюсь, это повлияет таким образом, что они больше внимания будут уделять удобству интерфейса, а не текстурам и теням. В конце концов заказчикам можно будет пояснять, что это в тренде:)
На пользователей flat design, думаю, особенно не повлияет - если им удобно будет создавать и потреблять контент, довольных будет много. Но иконки на домашнем экране всё же кислотные:)
Павел Грозян, Киев
Product Designer at MacPaw, grozyan
«Apple! А-ха-ха, прекрати! - Кричат дизайнеры. - Ура, стало проще. - скандируют пользователи". Понимаю обе точки зрения. Сегодня, после презентации с WWDC2013, многие из моих коллег встали и сказали «да ну её, эту профессию! Кто угодно теперь такую дурость нарисовать сможет. А эти иконки за $30?!». И на первый взгляд, они правы. Но если копнуть глубже, понимаешь, что есть тысячи предметов, которые долгое время отличались один от другого только сценарием использования, потом формой, потом цветом, и только потом - художественными деталями. Я помню времена, когда все эти ребята в LinkedIn профилях которых сегодня написано UX, UI Designer, нервно копировали эффект белой тени у букв. Как у Apple. Потом светлые и легкие сайты. Как у Apple. Потом насыщенные текстурами и реализмом интерфейсы. Как у Apple. Вся их работа заключалась в копировании, поскольку не было оригинальной, единой и удобной для всех концепции развития. Именно эту задачу сегодня решает flat design. Хотя мне кажется неправильным называть его именно так. Хорошо, что не Microsoft его придумала, и он формировался в течении десяти лет до цифровой эры, в сфере publishing.
Flat - он не для кликов, он для нажатий, тапов, taps. Плоским его не назовёшь - отсутствие «толстых» текстур и теней у кнопок делает его, скорее, упрощённым, и без визуальной агрессии. И без градиентов к кнопкам не обойтись. Я поддерживаю эту тенденцию. Если это не будет мешать качеству опыта использования, но с ним всем будет легче жить. В первую очередь пользователю. Во-вторую - творцу: будет проще в технической реализации, удобнее для нажатия (подчеркиванию ссылок - привет), и мультиплатформенно - объединяя веб, мобайл и декстоп в один единый опыт. Без сомнения, для Apple это смелый шаг. И только они могут на него решится. Их история имеет десятки подтверждений, потому им это скорее удастся, нежели наоборот.