Стиль флэт дизайн: Что такое flat design или плоский дизайн / Skillbox Media

Что такое flat design его особенности. Флэт-дизайн: прошлое, настоящее и будущее

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

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

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

В настоящее время этот термин широко используется как противоположность «богатому дизайну» из-за гармоничной простоты, взятой за основу этого подхода. Наиболее заметной особенностью, которая дала название этому направлению, является применение плоских (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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Брэндинг

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

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

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

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

Популяризации плоского стиля в дизайне способствовал выпуск операционной системы Windows 8 от Microsoft в стиле Metro, а также iOS 7, в котором компания Apple также выбирает плоский стиль. Именно после этого и наступает настоящая эра плоского дизайна. Вскоре на Flat -design переходят и крупные поисковые сервисы и приложения — Google , Youtube , появляется множество сайтов, использующих принципы плоского стиля в своем дизайне. В последние годы дизайн в стиле flat является лидером в мировых тенденциях дизайна сайтов .

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

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

5 принципов плоского дизайна сайтов

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

1 — Использование двухмерных объектов

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

2 — Иконки и простые объекты

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

3 — Простые шрифты в стиль дизайна

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

4 — Игра цвета

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

5 — Минимализм

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

От автора: приветствую вас, друзья! Сегодня мы поговорим о том, что такое flat design, или плоский дизайн сайтов. Термин этот уже давно покорил сердца веб-дизайнеров и уверенно держится в тренде до сих пор. Крупнейшие компании (Google, YouTube, Microsoft, Apple Inc. и т. д.) используют его для оформления своих сайтов и приложений. Вы все еще не в секте сторонников плоского дизайна сайта? Тогда мы идем к вам!

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

Все начиналось со скевоморфизма

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

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

Вскоре псевдовыпуклые иконки перестали привлекать большинство пользователей и веб-разработчиков, что положило начало эре flat дизайна сайтов. Мир пришел к выводу, что все декоративные элементы нужно убрать, а оставить лишь то, с чем удобно взаимодействовать конечному пользователю.

«Лучший дизайн — это как можно меньше дизайна»

Как в воду смотрел Дитер Рамс — известный промышленный дизайнер, выступающий против навязчивого дизайна, анимационных эффектов и т. п. В июне 2013-го года Apple Inc. представила революционную iOS 7, которая получила все атрибуты в стиле flat веб-дизайна. Однако, плоскость далеко не сразу «победила» реализм и объем.

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

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

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

К преимуществам использования этого стиля можно отнести:

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

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

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

Есть у flat веб-дизайна и недостатки:

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

отсутствие трёхмерности и теней иногда не позволяет понять, кликабельный элемент или нет;

отсутствие конкретных закрепленных правил.

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

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

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

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

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

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

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

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

Таким образом, за прошедшие годы сайты с плоским дизайном стали стандартом, принятым абсолютно всеми. Посмотрите на большинство современных сайтов — они плоские «до мозга костей».

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

1. Сайт http://dunked.com.

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

2. Интерфейс Microsoft.

Microsoft — это одна из компаний, которая сделала flat style таким популярным. Может, помните плеер Zune — конкурента iPod, который Microsoft выпустила в середине 2000-х? Так вот, дизайн этого продукта резко отличался от большинства приложений того времени, во многом благодаря крупной типографике, плоским иконкам, большим и ярким формам.

Этот интерфейс, который назвали Metro, позже перекочевал на персональные компьютеры (ОС Windows 8), интерфейс Xbox 360 и другие программные продукты Mircosoft.

3. Сайт http://www.vox.com.

Ну что, вдохновились? Долой псевдореалистичную 3D эстетику!

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

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

Сегодня мы разберемся, что такое flat-дизайн, как он возники что вам нужно, чтобы создать чистый, яркий и отзывчивый дизайн.

Вы можете найти хорошие примеры flat-дизайна на сайте http://market.envato.com/ . Там есть множество макетов, иконок и шаблонов, которые дадут вам четкое понимание о том, как выглядит современный дизайн.

1. Что такой flat-дизайн?

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

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

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

2. Немного истории

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

Flat-дизайн, в том облике, в котором он мы видим его сейчас, стал набирать популярность после того, как Microsoft стала выпускать продукцию в так называемом metro-стиле. Metro — UI-дизайн от Microsoft, поражающий своей стильностью и простотой.

В 2010 году Microsoft выпустила Windows Phone 7, который использовал flat-дизайн с острыми краями и простой графикой, унаследованной у одного из ранних продуктов Microsoft (Zune) . Позже, вдохновленная успехом, Microsoft выпустила операционную систему Windows 8, основанную на том же самом плоском стиле Metro .

В конце концов, flat-дизайн достиг своего пика популярности в 2013 году, когда Apple выпустила iOS 7, демонстрирующий принципиально новый дизайн с полностью измененными элементами пользовательского интерфейса, включая иконки и шрифты. Фирма Apple создала наглядные принципы UI- и -иконочного дизайна .

Вскоре после этого, Google тоже начал использовать стиль flat в своих приложениях и веб-страницах, назвав его Material Design . У Google даже есть целый раздел, посвященный этому стилю, включающий описание целей веб-дизайна, его принципов и указания по созданию различных объектов дизайна: иконок, макетов и так далее.

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

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

Microsoft’s Metro design

Apple iOS 7 design

Google’s Material Design

3. Помните о чистоте

Flat-дизайн, по-видимому, назван “плоским” из-за отсутствия трехмерных элементов и реалистичных эффектов, таких как: градиенты, текстуры, блики, полутона, тени. Запомните, стиль флэт — это двухмерный (плоский) способ изображения объектов.

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

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

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

4. Доводите до совершенства

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

Спрограммой Adobe Photoshop здесь все ясно: она работает с растровой графикой, которая основана на пикселях.

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

Когда-то Adobe Illustrator не был особо удобной программой для создания идеальной до пикселя графики. Хорошая новость в том, что последние версии Иллюстратора стали отличным инструментом для создания хорошей графики.

Должна сказать, что векторная графика в основном подразумевает работу с простыми, плоскими формами, чистыми цветами и сетками.Adobe Illustrator очень гибок в настройках и позволяет тебе адаптировать сетку к своим нуждам, выравнивать объекты и использовать различные типы снэппинга. Благодаря этому процесс создания совершенного дизайна, который будет чисто и стильно смотреться на любом дисплее, стал более легким. Если ты хочешь научиться создавать идеальную графику, то тебе стоит ознакомиться со статьей: How to create pixel-perfect artwork using Adobe Illustrator .

5. Цвет

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

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

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

Некоторые из них подходят для всех видов дизайна и иллюстраций, а не только для flat-дизайна. К примеру, Adobe Color CC , больше известный, как Кулер. Сегодня есть доступ к нему, как через веб-сайт, так и непосредственно через продукты Adobe. Кулер — очень гибкий инструмент, который позволяет тебе или создать свою собственную цветовую палитру, или выбрать из пользовательские палитры из библиотеки.

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

Есть еще несколько аналогичных сервисов с заказными палитрами, которые могут быть полезны. Однако, есть один инструмент, созданный специально для флэт-дизайна.FlatUIColors.com by Designmodo — сервис с набором “плоских” цветов, очень удобно для работы. Этот сайт стал очень популярным среди дизайнеров, ищущих хорошие цветовые решения для совершенного дизайна. Попробуйте!

И еще вы можете найти большее разнообразие цветов и палитр в Google’s Material Design guide .

6. Длинные тени

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

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

Этот эффект делает объект более трехмерным, но одновременно оставляя его в контексте flat-дизайна.

7. Работа со шрифтами

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

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

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

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

8. Плюсы и минусы Flat-дизайна

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

Плюсы

Популярность

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

Простота

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

Яркость

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

Недостатки

У флэта есть еще множество достоинств, но никакой дизайн не идеален, и мы не можем идеализировать его. Здесь некоторые недостатки flat-дизайна, которые мы обязаны упомянуть:

Неотзывчивость

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

Проблемы с типографией

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

Слабые визуалы

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

9. Будущие тренды flat-дизайна

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

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

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

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

Выводы

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

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

В конце концов, что еще следует упомянуть о flat-дизайне?

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

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

Флэт дизайн сайтов: преимущества и недостатки стиля

Флэт дизайн сайтов: преимущества и недостатки стиля — WebTune

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

• Преимущества плоского дизайна
• Главные недостатки
• Кому подходит?
• Юзабилити сайтов в дизайне флэт

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

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

Чем меньше – тем лучше: преимущества плоского дизайна

Сейчас примеры такого дизайна можно увидеть на каждом шагу – его использует IBM, Apple, Amazon и множество других крупных или менее крупных игроков. В чем же секрет такого успеха?

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

• курс на упрощение – этот стиль не приветствует лишних деталей: используется геометрия, четкие линии, лаконичные формы и понятные структуры. Несмотря на это получается классный и современный дизайн, который помогает пользователю быстро сориентироваться и совершить целевое действие;
• правильная типографика – поскольку сайты в стиле flat не заостряют внимание на визуальной составляющей, приходится удерживать внимание текстом. Здесь очень важно использовать заметные шрифты, которые легко читаются. Имеет значение расположение текста на сайте, а также качество контента;
• цвета – в основном используются чистые оттенки, которые помогают воссоздать свежий, аккуратный и красивый дизайн. Цветовое разнообразие, как правило, ограничивается 2-3 цветами, которые используются для того, чтобы сделать акценты и визуально улучшить отдельные элементы. Но некоторые виртуозы используют весь спектр, реализуя успешные проекты;
• много свободного пространства – отличительная характеристика стиля, которой профессиональные дизайнеры воспроизводят ощущение легкости. Здесь важно не переусердствовать, чтобы преимущество не стало недостатком.

Стиль флэт и его главные недостатки

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

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

Кому подходит Flat дизайн сайтов?

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

• простой сайт – эта концепция плохо сочетается с многостраничными ресурсами. Если вы решили разработать небольшую онлайн-площадку (не больше 10 страниц), тогда такой дизайн поможет вам реализовать успешный проект;
• слабая интерактивность – сложное приложение с нестандартным интерактивом и flat дизайн – плохое сочетание. Если для вас важно направлять действия пользователей, тогда откажитесь от простоты;
• постоянная аудитория – плоский дизайн пользуется успехом на ресурсах с большим количеством постоянных пользователей. Они на интуитивном уровне задействуют необходимые для их целей инструменты;
• современные пользователи – такая группа людей быстро адаптируется к нововведениям и поощряет современный подход.

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

Сайты Flat Design и юзабилити

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

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

Интересные статьи в категории

Дизайн

Все статьи

Заполните форму и получите консультацию по вашему проекту!

Заказать консультацию

Основные тенденции дизайна. Flat или Material. Адаптивный или отзывчивый дизайн?

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

Flat design (плоский дизайн) — современный стиль графического дизайна и пользовательского интерфейса. Он не приемлет выпуклостей, бликов, текстур и других атрибутов реализма, но задает тон разным элементам сайта. Flat design давно покорил сердца дизайнеров и уверенно находится в моде и сегодня. Google, YouTube, Microsoft, Apple используют его для оформления приложений и сайтов. «Флэт дизайн» противопоставляется скевоморфизму и насыщенному дизайну. Однако не стоит недооценивать этот стиль и считать его слишком простым или бескомпромиссным! За время своего существования он впитал в себя некоторые особенности скевофорфизма, обзавелся тенями и градиентами. Так же у Flat design есть важное преимущество — файлы изображений имеют небольшой размер и не увеличивают время загрузки страницы.

Для современного плоского дизайна характерны несколько компонентов:

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

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

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

• Типографика в основе стиля. Во Flat design главное — удобство восприятия. Здесь приоритет за шрифтами без засечек с постоянной шириной.

• Минималистичный подход. Во «Флэте» все внимание должно быть приковано к контенту.

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

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

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

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

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

Адаптивный и отзывчивый дизайн

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

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

• Responsive Design (отзывчивый дизайн) — подход, когда сайт создается с определенными значениями свойств, к примеру, с гибкой сеткой макета. Это позволяет одному сайту открываться на широком спектре устройств.

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

Преимущества Adaptive Design:

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

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

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

Преимущества Responsive Design:

• одинаковый вид в разных браузерах и платформах;

• наличие одного URL, что выгодно для сео-оптимизации;

• разработчики обслуживают только одну версию, что экономит время и деньги;

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

Подведем итоги

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

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

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

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

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

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

Присоединяйтесь к TNW в Валенсии!

Сердце технологий приближается к сердцу Средиземноморья

Подробнее

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

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

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

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

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

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

Далее: Откуда взялся плоский дизайн?

Откуда изначально взялся плоский дизайн?

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

Швейцарский стиль дизайна

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

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

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

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

Минималистский дизайн

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

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

Вероятно, одним из самых популярных произведений искусства эпохи минимализма является картина Ива Кляйна «Голубая эпоха » (см. ниже).

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

Next: Эпохи плоского дизайна Microsoft и Apple

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

История повторяется, и то же самое относится и к современной тенденции плоского дизайна. Как мы видели выше, плоский дизайн восходит к 19 веку.20-х годов и повлияли на нашу текущую адаптацию плоского дизайна.

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

Microsoft и Metro Design

Microsoft начала заниматься плоским дизайном до того, как нынешняя эстетика дизайна «Metro» была названа Metro. Пытаясь конкурировать с чрезвычайно популярным iPod от Apple, Microsoft выпустила медиаплеер Zune в конце 2006 года.0003

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

Дизайн операционной системы Zune на устройствах Zune кардинально отличался от большинства других программных продуктов Microsoft того времени (а именно Windows). Когда Microsoft выпустила Windows Phone 7 в октябре 2010 года, она взяла то, что узнала из дизайна Zune, и применила его к внешнему виду Windows Phone 7: большие, яркие, сетчатые формы, простые шрифты без засечек. типографика и плоские значки доминировали в стиле Windows Phone 7.

Этот дизайн вскоре будет называться «Метро» его создателем, Microsoft.

Дизайн стал настолько популярным, что Microsoft сохранила стиль дизайна Metro и представила его в своей операционной системе Windows 8, сохранив строгую сетку блоков контента, резкие края, яркие цвета, шрифт без засечек и фоновые изображения. Этот же стиль дизайна до сих пор используется Microsoft почти во всем своем программном обеспечении и устройствах, таких как Xbox 360 и на ее текущем веб-сайте (хотя технически название Metro больше не используется).

Apple потрясает скевоморфизмом

Пока Microsoft работала над своим плоским дизайном, у Apple было что-то еще в рукаве. Apple начала намекать на отказ от использования скевоморфизма, а затем полностью отказалась от усовершенствованного скевоморфизма в пользу более плоского дизайна с выпуском iOS 7 летом 2013 года.

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

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

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

Адаптивный дизайн

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

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

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

Next: Будущее плоского дизайна

Будущее плоского дизайна

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

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

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

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

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

Поделиться

• Поделиться
• Твитнуть
• Поделиться
• Приколоть

Дизайн • Дизайн веб-сайта Кэрри Казинс • 28 мая 2013 г. • 6 минут ПРОЧИТАТЬ

Плоский дизайн — сообщество дизайнеров просто не может перестать говорить об этом.

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

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

Итак, давайте посмотрим, что делает что-то плоским. Есть пять довольно отличных характеристик . Вот взгляд на каждый, а также введение в «почти» плоский дизайн.

Нет добавленных эффектов

Простые элементы

Сосредоточьтесь на типографике

Сосредоточьтесь на цвете

Минималистский подход

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

Подробнее о плоском дизайне

Без добавления эффектов

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

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

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

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

Простые элементы

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

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

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

Нужна помощь в начале работы? Designmodo предлагает различные наборы пользовательского интерфейса с использованием плоских стилей — от Square UI Free и Flat UI Free, простого набора пользовательского интерфейса PSD/HTML с основными компонентами, до Square UI и Flat UI Pro, полного пакета пользовательского интерфейса PSD/HTML для веб-сайта и дизайн-проекты приложений.

Сосредоточьтесь на типографике

Из-за простой природы элемента в плоском дизайне типографика чрезвычайно важна.

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

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

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

Сосредоточьтесь на цвете

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

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

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

Минималистский подход

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

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

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

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

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

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

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

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

Подробнее о плоском дизайне

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

• Плоский дизайн: можно ли извлечь выгоду из тренда?
• Плоский веб-дизайн: красивые примеры веб-сайтов
• Красивые примеры дизайна плоских иконок
• Как заставить это работать: плоский дизайн и цветовые тренды

История шаблонов плоского дизайна в мобильных устройствах | Dropsource

Гостевой пост Ника Бабича

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

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

Определение плоского дизайна

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

Происхождение плоского дизайна

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

Простые формы, строгие шрифты и четкая визуальная иерархия гармонично сочетаются друг с другом, чтобы соответствовать содержанию. Изображение: Йоост Шмидт, «Plakat Zur Bauhaus — Ausstellung in Weimar 1923», 1923

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

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

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

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

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

Как упомянул Джони Айв в одном из интервью вскоре после выпуска iOS 7: « Мы поняли, что людям уже стало комфортно прикасаться к стеклу, им не нужны физические кнопки, они поняли преимущества. Так что это была невероятная свобода в том, чтобы не ссылаться на физический мир так буквально. Мы пытались создать среду, которая была бы менее конкретной ».

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

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

Давайте посмотрим, как плоский дизайн улучшает взаимодействие с пользователем:

Меньше декоративных элементов

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

Больше внимания содержанию

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

Повышенная скорость отклика

Плоский дизайн упрощает поддержку дизайна на устройствах различных размеров. Гораздо проще масштабировать 2D-объекты и адаптировать их к разным размерам экрана, чем высокореалистичные 3D-объекты с градиентами и сложными тенями.

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

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

Рассмотрим разницу между скевоморфным (слева) и плоским дизайном (справа).

Легче создавать прототипы приложений

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

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

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

Значки

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

Четкие плоские значки. Изображение: Ramotion

Иллюстрации

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

Простота иллюстрации облегчает понимание сообщения. Изображение: Гани Прадита

Что требуется для создания хорошего плоского дизайна

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

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

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

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

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

Дизайн Metro в Windows 8. Отличить интерактивные элементы в этом интерфейсе непросто.

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

Стиль Material Design — отличный пример полуплоского дизайна — он использует легкие тени, блики и слои для создания глубины в пользовательском интерфейсе. Изображение: Вадим Громов

Избегайте низкого контраста

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

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

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

Ограничьте количество шрифтов в вашем приложении

Минималистский стиль дизайна не очень хорошо смотрится при использовании большого количества разных шрифтов. Выбор одной гарнитуры с достаточным весом, позволяющим варьировать тип, необходимый для достижения целей визуального дизайна, — это способ справиться с этим ограничением. В идеале в вашем приложении должен быть только один шрифт, и этот шрифт должен быть выбран в соответствии с рекомендациями платформы (San-Francisco для iOS, Roboto для Android). Если вам нужно выделить какую-то информацию, используйте другой размер или толщину шрифта, но не другую гарнитуру.

Визуальное определение приоритета важных объектов

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

Кнопка с надписью «Информация об автомобиле» является самым заметным объектом в этом пользовательском интерфейсе. Изображение: Ramotion

Четко обозначьте интерактивные элементы

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

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

Используйте анимацию для описания пространственных отношений

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

Движение позволяет нам улучшить взаимодействие, облегчая пользователю понимание интерфейса. Кредиты: Аниш Чандран

Протестируйте свой дизайн

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

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

 

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