5 основных принципов / Все о дизайне / Pollskill

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

Home

Знакомство с flat дизайном

На русском языке flat design переводится как «плоский дизайн», а стал он абсолютным фаворитом после презентации Apple ОС iOS. Во главу угла встал минималистичный подход к дизайну для юзабилити. Ставка сделана на комфорт пользователя. Это ярко выраженный протест против «сквеформизма» (визуализация объектов, как в реальности). Выбор пал на более упрощенные и при этом простые в эстетическом плане решения. Пользователи, уставшие от реалистичных визуализаций, с восторгом встретили это направление, и все больше web-проектов переходят именно к этому формату.

https://dribbble.com/rikitanone

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

• Принцип №1: долой ненужные эффекты

«Плоский» дизайн не стремится передавать объемы, поэтому в основе лежит двумерная визуализация. Это значит, что вы не увидите ни теней, ни рефлексов, ни бликов с текстурами (исключение составляют длинные тени). Только передача контуров, и ничего более.

https://dribbble.com/dylanopet

• Принцип №2: чем проще, тем лучше

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

• Принцип №3: типографика и ее важность

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

http://www.tvlcorp.com/

• Принцип №4: цветовые акценты

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

https://dribbble.com/fffabs

• Принцип №5: выбор в пользу минимализма

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

http://www.flatvsrealism.com/

Плоский или почти плоский? Ищем компромисс!

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

Также трендом 2017 года стал Semi Flat Design — полуплоский дизайн. Под влиянием Material Design, он стал немного более пространственным. Появляются легкие тени, которые делают дизайн полуплоским. Флэт-дизайн актуален и сегодня, за счет теней он стал глубже и сложнее, но основная концепция не нарушается.

https://www.behance.net/gallery/45942097/Resourse-UIUX-Tool-for-Web-Services

Стиль flat — понятие, особенности, основные проблемы и примеры стиля

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

Что такое плоский дизайн

Плоский дизайн или flat дизайн

стал популярным направлением в 2010-х годах, когда Microsoft выпустила новую систему в минималистичном стиле, в противовес скевоморфизму Apple — дизайну, в котором преобладают реалистичные эффекты.

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

Главные принципы плоского дизайна

Принцип 1. Ничего лишнего

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

В основе лежат простые формы с двумерными изображениями.

Контуры форм четкие и лаконичные. Акцент делается на простоте интерфейса, контенте, как текстовом, так и графическом. Благодаря таким приемам дизайн становится легким и невесомым.

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

Принцип 2. Двумерная графика

Упрощение коснулось не только форм и кнопок, но и графики. Стиль плоского дизайна — двумерные иллюстрации,

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

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

Фотографии и другие картинки также применяют в плоском дизайне и оформляют их как отдельную область на сайте. Например:

Особенность таких изображений — также отсутствие каких-то лишних выделяющихся элементов, оформление в едином стиле.

Принцип 3. Читаемая типографика

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

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

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

Принцип 4. Цветовые акценты

Еще одна особенность flat дизайна — используемая цветовая схема. Преимущественно это белый фон, один главный цвет для элементов (часто приглушенный) и различные цветовые акценты. Очень хорошо эту схему видно на примере:

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

Обычно палитра включает в себя 2-3 цвета, также используются нескольких цветовых акцентов для мелких элементов — иконок, деталей в иллюстрациях. Однако,

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

Принцип 5. Белое пространство

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

Дизайнер располагает элементы с учетом пробелов и воздуха между ними, как в этом примере:

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

Необходимо тщательно следить за использованием пространства на сайте и не переусердствовать.

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

Юзабилити для плоского дизайна

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

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

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

Проблемы flat дизайна

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

1. Интерактивность элементов

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

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

Решение: показывать пользователю активные элементы. Это можно сделать с помощью изменения состояния при наведении мышкой, увеличении мелких деталей при клике, использовании легко узнаваемых иконок (например, лупу — для поиска). Также лучше отказаться от кнопок, которые оформлены с помощью обводки (контур — текст).

2. Индивидуальность

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

Решение: использовать яркие цвета, нестандартную композицию, уникальные иллюстрации и текстовый контент. Так совпадения с другими веб-страницами сведутся к минимуму и ресурс будет уникальным по сравнению с конкурирующими сайтами.

3. Шрифты

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

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

4. Навигация

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

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

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

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

Кому подойдет плоский дизайн

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

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

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

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

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

5 примеров плоского дизайна для вдохновения

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

1. Уникальные иллюстрации

Дизайнеры сами становятся иллюстраторами и создают целые произведения для главных экранов.

2. Цветовые решения

Другие любят работать с цветом и выбирают яркие и сочные оттенки для создания атмосферы на сайте.

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

3. Функциональность

Еще один подход — отойти от иллюстраций и создать минималистичный дизайн, делая упор на цвет и формы:

4. Фотографии

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

5. Структура

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

Студия дизайна IDBI использует в своих работах как принципы плоского дизайна, так и другие стили. Мы следим за тенденциями в веб-разработке и работаем как с классическими интерфейсами, так и применяя различные подходы других дизайн-систем. Больше о наших проектах можно узнать в разделе «Портфолио».

Что такое flat дизайн: 5 основных принципов

Пример HTML-страницы

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

Знакомство с flat дизайном

На русском языке flat design переводится как «плоский дизайн», а стал он абсолютным фаворитом после презентации Apple ОС iOS. Во главу угла встал минималистичный подход к дизайну для юзабилити. Ставка сделана на комфорт пользователя. Это ярко выраженный протест против «сквеформизма» (визуализация объектов, как в реальности). Выбор пал на более упрощенные и при этом простые в эстетическом плане решения. Пользователи, уставшие от реалистичных визуализаций, с восторгом встретили это направление, и все больше web-проектов переходят именно к этому формату.

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

Принцип №1: долой ненужные эффекты

«Плоский» дизайн не стремится передавать объемы, поэтому в основе лежит двумерная визуализация. Это значит, что вы не увидите ни теней, ни рефлексов, ни бликов с текстурами (исключение составляют длинные тени). Только передача контуров, и ничего более.

https://dribbble.com/dylanopet

Принцип №2: чем проще, тем лучше

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

Принцип №3: типографика и ее важность

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

http://www.tvlcorp.com/

Принцип №4: цветовые акценты

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

https://dribbble.com/fffabs

Принцип №5: выбор в пользу минимализма

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

Плоский или почти плоский? Ищем компромисс!

В завершение хочется отметить, что сегодня имеет место быть синергия между плоским и неплоским дизайном. Речь идет о «почти плоском» дизайне. Это наиболее распространенное применение описанного концепта, когда вместе с простыми и лаконичными элементами и двумерным пространством дизайнеры применяют 1-2 приема для глубины и перспективы. Также трендом 2017 года стал Semi Flat Design — полуплоский дизайн. Под влиянием Material Design, он стал немного более пространственным. Появляются легкие тени, которые делают дизайн полуплоским. Флэт-дизайн актуален и сегодня, за счет теней он стал глубже и сложнее, но основная концепция не нарушается.

  

Ссылка на источник

Flat дизайн

с чего начать? Пять основных принципов Flat дизайна — PowerBranding.ru

Новости → Дизайн → «Плоский дизайн»: с чего начать? Пять основных принципов Flat дизайна

После недавней презентации новой операционной системы iOS от компании Apple все только и говорят о Flat дизайне. «Плоский дизайн» (русскоязычное название flat дизайна) окончательно становится ключевым направлением в дизайне на последующие 3-5 лет.

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

Что же такое «плоский» дизайн, как его использовать на практике, о чем не стоит забывать?

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

Что такое «плоский» дизайн

Плоский дизайн (англ. flat design) — минималистичный подход к дизайну объектов, который подчеркивает удобство использования, он в большей степени ориентирован на конечного пользователя.

Плоский дизайн начал развиваться в противовес концепции скевоформизма и выступал против методов «реальной» визуализации объектов в пользу более упрощенных и эстетически простых решений.

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

Пример — мобильное приложение «Блокнот», в котором записи можно вести на пролинованных страницах с фактурой бумаги.

Пример скевоформизма:

Компания Microsoft была одной из первых, кто применил концепцию «плоского» дизайна в своих продуктах. Теперь же все больше веб-сайтов и IT компаний переходят к данному направлению дизайна, чтобы удивить пользователя, который постепенно устает от реалистичных визуализаций App приложений.

«Плоский» дизайн не означает «скучный»

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

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

Первый принцип flat дизайна: Отсутствие лишних эффектов

«Плоский» дизайн получил такое название, так использует двумерную визуализацию объектов. В нем отсутствуют элементы, направленные на придание глубины и объемности: такие как тени, рефлексы, градиенты, текстуры, блики.

Элементы плоского дизайна передают только контуры реального объекта.

Второй принцип flat дизайна: Простота элементов

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

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

Третий принцип flat дизайна: аккуратная работа с шрифтами

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

Простота элементов не означает, что нельзя использовать сложные шрифты. Просто все должно быть выдержано в стиле минимализма.

Четвертый принцип flat дизайна: акцент на цвет

Цвет также как и шрифт является значимой частью плоского дизайна. Большинство цветовых палитр плоского дизайна основаны на 2-3 основных цветах, но встречаются и более разнообразные по цвету примеры.

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

Пятый принцип flat дизайна: минимализм

Плоский дизайн — успешное развитие глобального тренда «минимализм». В плоском дизайне следует избегать излишних «наворотов», сложных подходов к визуализации элементов.

Почти плоский дизайн

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

Источники: http://www.creativebloq.com/ и http://designmodo.com

Твитнуть Please enable JavaScript to view the comments powered by Disqus. comments powered by

история, преимущества и применение на практике

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

Известный художник Эдгар Дега однажды сказал: «Искусство — это не то, что вы видите, но то, что вы даете увидеть другим». Это касается и графического дизайна, который также можно определить как искусство, решающее конкретную задачу.  Графический дизайн способен изменять настроение и сообщение через малейшие изменения форм и оттенков, букв и интервалов. Тенденции в этой сфере, которые стали неотъемлемой частью повседневной жизни, поскольку они влияют на процесс принятия решений и решения проблем представления современного продукта, а также формируют вкусы пользователей.

Определение флэт дизайна

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

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

История флэт дизайна

Очевидно, что флэт дизайн не появился из воздуха. Его истоком обычно считают швейцарский стиль. Швейцарский стиль, также известный под названием International Typographic Style или более коротко — международный стиль, — это направление, которое зародилось в 1920-х годах, но было встречено очень критично, а затем получило яркое перерождение в графическом дизайне в Швейцарии 1940-50-х годов, ставшим прочной основой графического дизайна середины 20-го века во всем мире. Основоположниками этого творческого движения были Йозеф Мюллер-Брокманн и Армин Хофманн.

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

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

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

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

Первый шаг к повышению популярности плоского UI в цифровых продуктах был сделан Microsoft, это движение началось в начале 2000-х годов и широко развилось в продуктах 2010 года, в частности, в разработке мобильных интерфейсов для Windows Phone 7. Основные особенности плоского дизайна, такие как интуитивные простые формы, жирная четкая типография, яркие контрастные цвета, длинные тени, отсутствие сложных деталей и текстур, хорошо прижились. Следующий скачок популярности флэт дизайна произошел в 2013 году, когда Apple выпустила iOS 7 на основе принципов плоской графики в качестве основы для удобных интуитивно понятных интерфейсов. Можно также сказать, что некоторые ключевые принципы плоского дизайна нашли свое выражение в Material Design от Google.

Так основными особенностями плоского дизайна стали:

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

Преимущества плоского дизайна

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

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

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

Флэт дизайн — применение на практике

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

Проектирование пользовательского интерфейса

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

Дизайн пользовательского интерфейса

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

Тематические иллюстрации

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

Печатные иллюстрации

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

Брэндинг

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

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

 
Источник

5 основных принципов Flat дизайна

Flat дизайн (плоский дизайн) – один из основных трендов сегодня, как в сфере веб-дизайна, так и технологиях создания пользовательских интерфейсов. Из недавних примеров наиболее заметными будут: решительный шаг компании Microsoft в этом направлении, с ее Windows 8 и новый дизайн Google, с явной демонстрацией желания углубиться в минимализм.

Вот примеры элементов, определяющих стиль плоского дизайна.

Жизнь после Web 2.0

Мы уходим от реалий дизайна web 2.0 в виде закруглённых форм элементов со всевозможными эффектами — 3D, тени, блики и отражения, градиенты, тиснения. Словом всего, что создает глубину и объем. Большие, яркие элементы управления, глянец, применение текстур и прочие подобные способы проявления оригинальности уступают дорогу простому, двумерному представлению визуальных объектов.

Float Design

Типографика в основе стиля

Заметьте, что это основа построения «плоского» сайта. Простота элементов Flat дизайна, как и сами принципы минимализма усиливают значимость типографики. Текстовым контентом возможно в принципе заменить часть тяжелой графики / изображений, а зачастую типография становится основным элементом дизайна. Раз стиль флэт минималистичен, то и характер шрифтов нужно согласовывать с общей схемой, стилем и композицией. Например, верхний регистр часто используют для элементов навигации или надписей.

Coderwall

Цветовая палитра плоского дизайна

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

Minimal Monkey

Свободное пространство, большие элементы

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

Beard Design

Плоский дизайн иконок, кнопок, иллюстраций

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

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

Примеры шаблонов сайтов с плоским дизайном Flat UI

Примеры сайтов в стиле Flat-дизайна

Identity

83 Design Collective

Frunatic

The Umbrella Group

 Slcl Foundation

My Felt

Behzad

Atlant

Simple as Milk

Weranda Family

Kitchen Sink Studios

Coffee Surfing

Sunny7

Krivaja Homes

Spring Summer

RIT Rochester Institute of Technology

Snow Bird

LEDbow

Flat дизайн – новый тренд в веб-дизайне. Айкон

Flat Design (он же «плоский дизайн») – это дизайн веб-объектов, выполненный в простом минималистичном стиле. Концепция плоского дизайна состоит в отказе от скевоформизма – выборе эстетически простых изящных решений вместо визуализации объектов в трехмерном изображении с помощью теней, текстур и градиентов. В последние несколько лет интерфейсы многих популярных программ и веб-сайтов изменились, отказавшись от «реалистичных» изображений в пользу плоскости. В частности, таким образом в 2013 году изменила разработку дизайна компания Apple при выпуске операционной системы iOS 7, а Microsoft сделала выбор в пользу плоскости еще в 2010-м, использовав плоский интерфейс Metro для программы Windows Phone 7.

   

Причины появления Flat дизайна

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

Основные принципы Flat дизайна

• При разработке дизайна используются только визуально плоские (двухмерные) объекты без эффектов объема или глубины;
  
• Шрифты должны быть простыми и соответствовать общему стилю дизайна;
  
• Используются односложные простые фигуры с четкими очертаниями;
  
• Применяются яркие цвета без лишних оттенков. Цветовая палитра, как правило, ограничена двумя-четырьмя основными цветами, особенно это касается дизайна логотипа;
  
• Плоский дизайн концептуально соответствует тренду на минимализм, исключая любые неоправданные усложнения.

 

Разработка Flat дизайна

Дизайн интерфейса в стиле flat должен позволять пользователю на визуальном уровне понимать происходящее. Простота элементов, цветовые акценты, минимализм и органичные шрифты – вот движущая сила Flat дизайна. Главной же проблемой здесь является трудность в распознавании интерактивных символов. Поэтому задача разработчика – сделать все элементы активными либо же визуально выделить таковые. Опытные веб-дизайнеры не стремятся во всех работах полностью переходить на концепцию Flat. Довольно популярным в настоящее время является использование так называемого «почти плоского» дизайна, сочетающего в себе плоские элементы с объемными, позволяющими выделить и подчеркнуть мельчайшие детали. Все эти тонкости хорошо знакомы нашим специалистам, так что вы можете заказать у нас разработку дизайна логотипа или сайта в стиле flat.

Читайте далее: Зачем вам SEO-продвижение, когда есть SEO-талисманы!

Что такое плоский дизайн? | Фонд дизайна взаимодействия (IxDF)

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

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

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

Автор / Правообладатель: crassuscz. Условия авторского права и лицензия: CC BY 3.0

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

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

Краткая история плоского дизайна

Плоский дизайн не совсем новый и был вдохновлен тремя существующими формами искусства: швейцарским (или международным типографским стилем), баухаусом и модернизмом. Из трех, вероятно, именно швейцарский стиль оказал наибольшее влияние на плоский дизайн. Плоский дизайн в реальном мире стал популярен в 1950-х и 1960-х годах, но в цифровом мире наверстать упущенное будет гораздо медленнее.

Хороший пример раннего цифрового плоского дизайна можно найти в злополучном MP3-плеере Microsoft Zune, выпущенном еще в 2006 году. Интерфейс был чистым и простым, с использованием строчной типографии с крупным шрифтом, силуэтом стилизованный дизайн логотипа и простые монохромные шрифты.

Zune, возможно, больше не с нами, но стиль пользовательского интерфейса продолжился сначала в Windows Phone, а затем и в очень высмеиваемой (хотя и не из-за ее плоского дизайна) операционной системе Windows 8.

Автор / Правообладатель: Bkwparadox. Условия авторского права и лицензия: CC BY-SA 3.0

Zune, возможно, никогда не покорил воображение рынка MP3-плееров, но его наследие живет в плоском дизайне.

В 2013 году Apple присоединилась к партии плоского дизайна, выпустив iOS7, сознательно отказавшись от предыдущих скевоморфных дизайнов.

Джони Айв (руководитель отдела дизайна Apple) сказал; «Когда мы сели в ноябре прошлого года (работать над iOS 7), мы поняли, что люди уже привыкли к прикосновению к стеклу, им не нужны физические кнопки, они понимают преимущества», — говорит Айв.«Так что была невероятная свобода в том, что не нужно было так буквально ссылаться на физический мир. Мы пытались создать менее конкретную среду. У него не было дизайна ».

Разве плоский дизайн не скучен?

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

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

Автор / Правообладатель: alexlasek. Условия авторских прав и лицензия: CC BY 3.0

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

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

Что означает плоский дизайн для UI-дизайнеров?

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

Что входит в плоский дизайн?

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

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

Это должно объединить визуально согласованный и функциональный дизайн пользовательского интерфейса.

Автор / Правообладатель: dtafalonso. Условия авторского права и лицензия: CC BY 3.0

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

The Take Away

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

Ссылки

Прочтите мнение Джони Айва о плоском дизайне в Cult of Mac здесь — http://www.cultofmac.com/246312/jony-ive-explains-why-he-decided-to-gut-skeuomorphism-out- оф-ios /

Интересное исследование плоского дизайна и скевоморфизма можно найти здесь — http://intuio.at/en/blog/the-truth-about-skeuomorphism-vs-flat-design/

Hero Изображение: Автор / Правообладатель: Pixel Fantasy.Условия авторских прав и лицензия: CC BY-NC-ND 2.0

Плоский дизайн и полуплоский дизайн: что это такое и как использовать

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

Автор felipe_charria

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

Что такое плоский дизайн?

–

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

Взгляните на несколько снимков экрана из серии «Марио из бумаги», чтобы увидеть, как плоский дизайн напрямую контрастирует с трехмерным дизайном. Через Nintendo.

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

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

Автор: astuaris

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

История плоского дизайна

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

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

• Высокая контрастность
• Минимализм
• Использование цвета и контраста для создания глубины
• Эффективное использование площади
• Использование символов вместо точного воспроизведения для передачи идей

Стиль Баухаус не замысловат и не детализирован. Он утилитарный, как и плоский дизайн. Via Bauhaus Dessau. Модернизм берет на себя правила искусства и отбрасывает все, что не соответствует видению художника.Via Osnat Fine Art.

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

Скевоморфный дизайн помогает людям, выросшим в аналоговом мире, ориентироваться в цифровом мире. Когда вам нужно выбросить файл на вашем компьютере, вы просто перетаскиваете его на значок корзины для мусора — это скевоморфный дизайн, выполняющий то, для чего он был создан. Когда вы хотите позвонить, вы нажимаете значок на своем телефоне, который выглядит как старомодная телефонная трубка. Но к 2010-м годам большинство из нас использовали компьютеры более 20 лет. Некоторые из нас никогда не знали мира без вездесущих компьютеров и доступа в Интернет, и независимо от того, к какой из этих категорий вы принадлежите, вам, вероятно, больше не нужен скевоморфный дизайн, чтобы научить вас пользоваться приложениями.Войдите в плоский дизайн!

Плоский дизайн в эпоху цифровых технологий

Плоский внешний вид Windows 8 был создан, чтобы облегчить перенос ОС на планшеты. Через Microsoft.

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

В прошлом общая эстетика Apple была скевоморфной, и это побудило Microsoft пойти в другом направлении, начав с интерфейсов Windows Media Player и Zune в начале 2000-х годов.К тому времени, когда в 2012 году была представлена ​​Windows 8 с полностью плоским интерфейсом, Microsoft зарекомендовала себя лидером этой тенденции.

Это был лишь вопрос времени, когда другие бренды последовали их примеру и обновили свой старый скевоморфный дизайн, например, поляризационный ребрендинг Instagram. В конце концов, даже Apple запрыгнула на поезд с плоским дизайном в 2013 году с iOS 7, а к середине 2010-х годов плоский дизайн был повсюду.

Скеоморфный дизайн отвечает на вопросы: «Что это такое и как им пользоваться?» через Shopify

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

Плоский дизайн превращается в полуплоский

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

Полуплоский дизайн с легкими штриховками и бликами для придания немного трехмерного вида. Автор iGreg.

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

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

Когда использовать плоский дизайн

— Эта инфографика объясняет продукт на простых примерах, использующих полуплоский дизайн.Автор LittleFox.

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

Страницы с практическими рекомендациями и руководства по приложениям — отличное место для плоского дизайна. Автор 9zArt.

• Инфографика, цель которой — выделить сложную тему в легко усваиваемые примеры
• Руководства и страницы с инструкциями на веб-сайтах, которые помогают пользователю выполнить пошаговые инструкции
• Реклама, в которой зритель не искал материал и определенно не хочет делать дополнительную умственную работу, чтобы понять его
• Дизайн логотипа и брендинг, где бизнес-концепция может быть незнакомой и должна немедленно передать ее атмосферу
• Значки приложений и другие рисунки, которые слишком малы, чтобы их можно было слишком детализировать
• Мобильные игровые интерфейсы, в которых пользователи, как правило, являются обычными игроками, ищущими отвлечение, а не чрезмерно сложным моделированием
• Для интерфейсов, где пользователю нужно сразу знать, что делать дальше.Если у вас плотный многостраничный веб-сайт с множеством функций, плоский дизайн может не для вас. Но если вы стремитесь стать «Uber [укажите отрасль, которую вы хотите изменить здесь]», квартира — это ваш путь.

Хотя это обычные подозрения, когда дело доходит до плоского дизайна, этот стиль сам по себе имеет характер, и ничто не мешает вам воспользоваться им по чисто эстетическим причинам!

Когда не использовать плоский дизайн

— Подумайте, сколько бы мы потеряли этого персонажа, если бы он был выполнен в плоском стиле.Здесь глубина в деталях. Дизайн персонажей Як!

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

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

Получите правильную плоскую конструкцию, выполнив следующие действия

—

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

Не путайте плоский со скучным

Даже с небольшим количеством элементов, с которыми нужно работать, минималистский дизайн все равно может быть красивым. Автор Typelab D.

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

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

Цвет, контекст и контраст — твои друзья

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

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

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

Цвет, контекст и контраст направляют зрителя через дизайн. Автор Fenixo.

Оживите свой плоский дизайн с помощью анимации

Мария Дзядюлия,

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

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

Выберите удобный шрифт

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

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

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

Квартира там, где она находится по адресу

–

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

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

Руководство по плоскому дизайну для новичков

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

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

Что такое плоский дизайн?

Windows 8 была в авангарде тенденции плоского дизайна

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

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

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

Минимализм не значит скучный

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

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

Плоский дизайн упрощен

Плоский дизайн определенно имеет момент — не зашло ли оно слишком далеко? (Изображение предоставлено Тобиасом ван Шнайдером)

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

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

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

Что можно узнать из плоского дизайна

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

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

Как создать плоский дизайн

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

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

Примеры плоского дизайна: Tripfinder

Цвета и значки помогают понять смысл с минимальным количеством копий

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

Примеры плоского дизайна: веб-сайт Burger King

Веб-сайт Burger King соответствует недавнему ребрендингу (Изображение предоставлено Burger King)

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

Примеры плоского дизайна: приложение «Погода»

Плоский дизайн не зависит от ярких цветов

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

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

Статьи по теме:

Происхождение, проблемы и почему плоский 2.0 Лучше для пользователей

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

Трехмерные эффекты, скевоморфизм и реализм

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

Трехмерные эффекты

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

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

С первых дней создания графических пользовательских интерфейсов на экранах применялись псевдотрёхмерные эффекты (тени, градиенты, блики), чтобы помочь пользователям с первого взгляда понять доступные действия. Однако эффект псевдо-3D в этих ранних графических интерфейсах имел тенденцию быть агрессивным, преувеличенным и визуально отвлекающим.

В этом диалоговом окне Windows 95 для создания трехмерных эффектов использовались тяжелые тени и блики.Обратите внимание на то, как кнопки выглядят приподнятыми, а поля ввода — утопленными. Также ясно, какая из трех вкладок находится над двумя другими. Однако тяжелые тени могут легко сделать интерфейс визуально непривлекательным.

Скевоморфизм

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

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

Реализм

Реализм — это стиль дизайна, имитирующий физические предметы или текстуры по эстетическим соображениям.

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

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

Истоки плоского дизайна

Выпуск языка дизайна Microsoft Metro и Windows 8 в 2011 году оказал особое влияние на популяризацию плоского дизайна. В проектной документации Microsoft ее новый стиль именуется «подлинно цифровым» — фраза, которая точно отражает привлекательность плоского дизайна для многих дизайнеров.В отличие от скевоморфного дизайна, плоский дизайн рассматривался как способ исследовать цифровую среду без попытки воспроизвести внешний вид физического мира.

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

Домашняя страница Apple в 2007 году (через WayBack Machine). Панель навигации оформлена в виде глянцевых трехмерных вкладок. Домашняя страница Apple в 2012 году (через WayBack Machine). Метафора вкладок исчезла, но панель навигации по-прежнему выглядит глянцевой и округлой (пример реализма, а не скевоморфизма). В новый инструмент поиска добавлены тени, чтобы он казался пустым (более элегантный визуальный эффект, чем появление полей ввода Windows 17 годами ранее, но концептуально та же идея). Значки, видимые в правом нижнем углу, настолько глянцевые, что почти мешают зрителю понять, что это такое.Эти кнопки кажутся скорее светящимися, чем приподнятыми. Домашняя страница Apple в 2015 году. Вся панель навигации, включая логотип, полностью плоская, без заметных теней, текстур или бликов. Здесь нет трехмерных, реалистичных или скевоморфных эффектов. Единственный способ узнать, что параметры навигации можно нажимать, — это условно: ярко окрашенная полоса в верхней части веб-страницы, как правило, является панелью навигации (за исключением случаев, когда это реклама, но эта слишком тонкая, чтобы стать жертвой баннера. слепота).

Проблемы удобства использования плоского дизайна

С момента появления плоского дизайна в 2011 году Nielsen Norman Group открыто критиковала присущие ему проблемы с удобством использования. Наше основное возражение против плоского дизайна состоит в том, что он приносит в жертву потребностям пользователей в угоду модной эстетике.

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

Когда мы спросили 22-летнюю канадку, откуда она знает, на что можно нажимать на веб-сайтах, она дала следующий ответ:

«Когда он выделен синим цветом и подчеркнут, это то, как вы понимаете изначально.Вы видите это даже в Word и прочем. Но на самом деле, особенно когда он подчеркнут, это помогает. Или, если это кнопка, на ней не обязательно должно быть написано «Нажмите здесь», но если на ней написано «Купить сейчас» или «Купить» или «Добавить в корзину» ».

Эта цитата прекрасно иллюстрирует типы подсказок, которые люди используют для определения кликабельности:

• Традиционные внешне согласованные указатели (например, синий, подчеркнутый текст или выпуклые кнопки)
• Что-то напоминающее традиционное обозначение (например, подчеркнутый текст любого цвета или текст в рамке)
• Контекстные подсказки (например, активный текст или размещение вверху страницы)

На главной странице Trader Joe’s отображаются различные индикаторы кликабельности.(1) Синий подчеркнутый текст Просмотреть все является традиционным обозначением. (2) Плоский красный фон на ссылке Find напоминает кнопку, даже без трехмерных или реалистичных визуальных эффектов. (3) Черные ссылки на главной панели навигации сообщают о своей кликабельности только своим расположением и текстом. (Обратите внимание, что в основном плоская страница имеет один элемент скевоморфизма — деревянную полку под каруселью представленных продуктов.)

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

Плоский дизайн для откорма

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

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

Плоские элементы дизайна с длинными тенями, как видно из портфолио этого дизайнера, стали популярными примерно в 2013 году. Длинные тени — один из примеров того, как Flat 2.0 пошла не так, как надо: 3D-эффекты носят чисто эстетический характер и не добавляют никакой значимой информации для пользователей. К счастью, их популярность снизилась, но значки с длинными тенями все еще используются в некоторых плоских интерфейсах.

Язык дизайна Google Material — это один из примеров плоской версии 2.0 с правильными приоритетами: он использует последовательные метафоры и принципы, заимствованные из физики, чтобы помочь пользователям разобраться в интерфейсах и интерпретировать визуальные иерархии в содержании.

Приложение Evernote для Android — хороший пример возможных преимуществ Flat 2.0. Несмотря на то, что пользовательский интерфейс в основном плоский, приложение предоставляет несколько тонких теней на панели навигации и плавающую кнопку + (добавить новый). Он также использует метафору карты для отображения содержимого в виде плоских многослойных панелей в трехмерном пространстве.

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

Ранние псевдо-3D графические интерфейсы и скевоморфизм в стиле Стива-Джобса часто приводили к появлению тяжелых и неуклюжих интерфейсов. Отказ от этих излишеств способствует удобству использования . Но удаление визуальных различий для создания полностью плоских дизайнов без указателей может быть столь же плохой крайностью. Flat 2.0 предоставляет возможность для компромисса. — визуальная простота без ущерба для обозначений.

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

Взгляд на плоский дизайн и почему он важен

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

Разумеется, плоский дизайн легко отвергнуть как еще одну мимолетную эстетическую тенденцию.

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

Что такое плоский дизайн?

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

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

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

Плоский дизайн как ответ на проблемы скеуморфизма

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

Что такое скевоморфизм?

Если вы не знакомы с этим термином, скевоморфизм — это практика включения внешнего вида объекта, созданного из другого материала, в дизайн: то, что когда-то было функциональностью, становится украшением.Ссылка призвана вызвать чувство знакомства при знакомстве с новой концепцией / инструментом / приложением в Интернете. Этот принцип подражания окружает нас повсюду; пластиковый стул, повторяющий форму своего деревянного оригинала, — хороший пример того, как он проявляет себя в реальном мире.

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

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

Проблемы со скевоморфизмом

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

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

Решение, найденное в плоском дизайне

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

Пример № 1:

Пример № 2:

Возьмите приведенные выше примеры веб-сайта LayerVault: пример № 1, старый дизайн, показывает очень подробную и сложную иллюстрацию в скевоморфном стиле, который, как упоминалось ранее , выглядит неправильно в сочетании с ровным чистым внешним видом остальной части сайта.Сравните его с плоским иллюстративным стилем нового дизайна, примером №2, и нет никаких сомнений в том, какой из них более привлекательный и функциональный. Исходная иллюстрация отвлекает, но не информативна, тогда как измененная иллюстрация направляет взгляд на важную информацию, не затмевая ее.

Плоский дизайн гармонизирует и развивает цели скевоморфизма и минимализма

Элементы, которые выводят плоский дизайн за пределы преходящей тенденции в долговременную и всеобъемлющую стратегию, двояки:

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

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

Плоский дизайн — идеальный стиль для отличного UX

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

Плоский дизайн бесконечно адаптируется

Пример № 1:

Пример № 2:

Чтобы увидеть, насколько просто и красиво эти приложения могут быть интегрированы друг с другом, взгляните на дизайн Windows Phone, в примерах №1 и №2 выше. Компания выбрала роль ключевого игрока в уходе от внешнего вида, который был тесно связан с Apple, и ее решение окупается в великолепном интерфейсе; Яркие цветные блоки используются как для обозначения разделов, так и вся типографика и изображения выглядят элегантно и интегрированно.

Заключение

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

Изображение лингвини любезно предоставлено Shutterstock.

Плоский дизайн. История, преимущества и практика. | by tubik

Известный художник Эдгар Дега однажды сказал: «Искусство — это не то, что вы видите, а то, что вы заставляете видеть других». С точки зрения графического дизайна, который также можно определить как искусство, решающее конкретную задачу, этот поток идет еще дальше: то, что вы заставляете других видеть, часто говорит им, что делать, на что обращать внимание и помогает решить некоторые проблемы. Графический дизайн способен изменить настроение и послание посредством малейших изменений форм и оттенков, букв и интервалов.Тенденции в этой сфере, которая стала неотъемлемой частью повседневной жизни, представляют собой важный объект рассмотрения, поскольку они влияют на принятие решений и потенциал решения проблем современных продуктов, а также формируют вкусы пользователей. Сегодня мы сосредоточим внимание на одном из самых популярных направлений современного графического дизайна — плоском дизайне.

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

Toonie Alarm

Очевидно, плоский дизайн возник не на пустом месте. Его корни обычно уходят корнями в швейцарский стиль, прямого предка которого историки сферы дизайна считают. Швейцарский стиль, также известный как Международный типографский стиль или сокращенно Международный стиль, — это направление, которое появилось и получило дозу критики в 1920-х годах, а затем получило яркое выражение в графическом дизайне в Швейцарии 1940–50-х годов, став прочной основой графического дизайна. середины 20 века по всему миру.Лидерами этого творческого движения были Йозеф Мюллер-Брокманн, представитель Цюрихской школы искусств и ремесел, и Армин Хофманн из Базельской школы дизайна. Согласно порталу Design Is History, краткое описание ключевых особенностей этого стиля таково: «… стиль отдавал предпочтение простоте, разборчивости и объективности. Среди множества достижений этих двух школ было использование шрифтов без засечек, сеток и асимметричных макетов. Также подчеркивалось сочетание типографики и фотографии как средства визуальной коммуникации.Основные влиятельные работы были разработаны в виде плакатов, которые рассматривались как наиболее эффективное средство коммуникации ».

Йозеп Мюллер-Брокманн, Автоклуб Швейцарии Плакат, 1955 г. Йозеф Мюллер-Брокманн, Плакат ратуши Цюриха, 1955 г. Армин Хоффман, плакат 1959 г. к балету «Жизель»

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

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

Первый шаг к повышению популярности плоского пользовательского интерфейса в цифровых продуктах был сделан Microsoft, представив новый плоский и минималистский стиль своих продуктов: это движение началось в начале 2000-х годов и было широко распространено в продуктах 2010 года, в частности, в дизайне мобильных интерфейсов для мобильных устройств. Windows Phone 7.Основные черты плоского дизайна, такие как интуитивно понятные простые формы, жирная четкая типографика, яркие контрастные цвета, длинные тени, отсутствие сложных деталей и текстур, нашли свое дальнейшее развитие в 2013 году, когда Apple выпустила iOS 7, основанную на принципах плоской графики как основа для удобных интуитивно понятных интерфейсов. Можно также сказать, что некоторые ключевые принципы плоского дизайна нашли свое выражение в Материальном дизайне для Google, но с некоторыми отклонениями, такими как падающие тени и т. Д.

GIF для приложения Погода

Основные и выдающиеся особенности плоского дизайна включают:

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

Меню ресторана анимация

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

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

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

Singify App Tutorial

Разнообразие направлений дизайна, доступных и развивающихся в наши дни, использует плоский дизайн как гибкий и художественный подход, позволяющий в большей или меньшей степени успешно занять свое место во всех из них. Давайте рассмотрим сферы применения его принципов на множестве примеров от дизайнеров Tubik Studio.

Взаимодействие с пользователем Каркасное изображение

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

Дизайн пользовательского интерфейса

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

Концепции взаимодействия пользовательского интерфейса

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

Потяните для обновления Портрет или пейзаж взаимодействие GIF для вытягивания вниз Взаимодействие с панелью вкладок

Элементы навигации и значки пользовательского интерфейса

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

Набор плоских значков Плоских значков, примененных в Veggie App Дизайн плоских значков и вкладок для Приложение для блога Плоские значки, примененные в Saily App Плоские элементы дизайна пользовательского интерфейса для PassFold

Иллюстрации интерфейса пользовательского интерфейса

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

Cafe Coupon App Weather App Moneywise App Иллюстрация для SwiftyBeaver Timeline App Healthy Stickers иллюстраций

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

Бесплатные красочные обои Обои для рабочего стола Free Space Star Wars Rogue One Подводный исследователь Хэллоуин Замок с привидениями Рио 2016 Californication Bus Сан-Франциско Painted Ladies

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

Tales of the Jazz Age Обложка книги Плакат Пикачу Muscles Magazine Плакат Suicide Squad Spring Girl Поздравительная открытка

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

Талисман логотипа для приложения Saily Буквенный знак логотипа для PassFold Дизайн логотипа для Andre Логотип для Design4Users Надписи логотипа и талисман Toonie Alarm

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

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

Руководство по плоскому дизайну для новичков

Лучшие практики для плоского дизайна

10 лучших советов по созданию плоского дизайна графики

Плоский дизайн и цвета

Принципы плоского дизайна

03

История плоского дизайна: как эффективность и минимализм превратили цифровой мир в плоский

Взгляд на плоский дизайн и почему он важен

Истинная история плоского дизайна

Дизайн — это история: швейцарский дизайн

Швейцарский графический дизайн

Плюсы, минусы и будущее плоского дизайна

Плюсы, минусы и будущее плоского дизайна

Ваш браузер не поддерживается и может не работать в лучшую сторону.

Что такое плоский дизайн?

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

Это не 3D. Название стиля связано с его двумерными качествами, включая плоские формы и отсутствие деталей, создающих глубину и объем, таких как тени, блики и текстуры.

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

Популярность плоского дизайна резко возрастает

Плоский дизайн действительно начал становиться узнаваемым стилем в 2012 и 2013 годах. Это были годы этой тенденции. стал очень заметным (и его легче было эмулировать) благодаря выпуску Windows 8 и iOS 7.

Windows 8.1. Используется с разрешения Microsoft.

iOS 7 (слева) и iOS 6 (справа)

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

Сотрудники UXPin, пишущие для Fast Co. Design, отмечают, что «золотая середина в эволюции плоского дизайна находится где-то между исходной тенденцией и скевоморфными идеалами, от которых отказались.

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

Плюсы

Совместимость с адаптивным дизайном

С тех пор, как Microsoft и Apple присоединились к плоскому дизайну, этот стиль был быстро принят как новый подход к пользовательскому опыту. Он был и продолжает оставаться популярным в веб-дизайне и мобильном дизайне — и не зря.

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

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

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

Как сказал Райан Аллен из дизайнерского агентства Dapper Gentlemen в своей статье под названием Flat 2.0: «Плоский дизайн можно создать с возможностью динамического масштабирования до размера, соответствующего содержанию, гораздо проще, чем дизайн с идеальным пикселем».

Гибкий каркас

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

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

Например, этот дизайн брошюры на основе сетки от Bureau of Betterment включает квадраты и прямоугольники разного размера для выделения различных элементов дизайна, таких как типографика и значки. Блоки однородного цвета и простые иллюстрации добавляют к плоскому эффекту.

Bureau of Betterment

Этот веб-сайт, с другой стороны, использует сетки различными способами, от меню до фотографий сотрудников и до списка услуг:

Teamgeek

Чистая, удобочитаемая типографика

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

Radium Labs

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

True Digital

Минусы

Сниженное удобство использования

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

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

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

Майк Кус

Отсутствие самобытности

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

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

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

Марко Ла Мантиа и Симоне Липполис

Луис Ваз

Чрезмерное внимание уделяется модной эстетике

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

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

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

Александр Лотоцкий

Эрик Мальмскельд

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

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

Olivier Zattoni

The future

Квартира 2.0

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

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

Результатом этих изменений в чисто плоском подходе к дизайну стал стиль, который часто называют «Flat 2».0 »или« почти плоский »дизайн.

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

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

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

Quotes Magazine

Материальный дизайн

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

Принципы материального дизайна через Google

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

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

Violetta для Tubik Studio

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

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

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

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

Таким образом, хотя крупные бренды, такие как Microsoft, Apple и Google, безусловно, имеют влияние, когда дело доходит до популяризации стилей дизайна, именно дизайнеры берут тенденции и бегут с ними, чтобы создать что-то новое. вещь.»

Присоединяйтесь к обсуждению

« Когда вы рассматриваете дух плоского дизайна (визуальная простота) и скевоморфизм (визуальное знакомство), вы обнаруживаете, что обе концепции, безусловно, могут сосуществовать. Сложная часть, как, безусловно, покажут текущие годы и будущее, — это найти идеальный баланс между ними ».

No related posts.