Стиль flat: 5 основных принципов / Все о дизайне / Pollskill

Тогда не теряйте время, напишите нам прямо сейчас!

2. Выразительная типографика в плоском дизайне

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

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

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

Полезная информация по этому вопросу в статье: Разработка дизайна сайта и использование шрифтов (типографика в дизайне)

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

3. Flat Design с фокусом на адаптивность

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

• Дизайн становится «плоским» и легко адаптируется
• Плоский дизайн позволяет интегрировать функционал в сущность объекта
• Он дает возможность фокусироваться на первостепенных вещах, скрывая все вторичное

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

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

Познакомьтесь с нашей новой публикацией, чтобы лучше понять, как это может помочь вашему сайту и бизнесу: Адаптивный дизайн сайта (responsive web design) – основа успешного проекта

4. Разработка web сайта в стиле Flat помогает улучшить пользовательский опыт

Всплеск популярности Flat  дизайна это 2012 год, но и сегодня он применяется в таких крупных компаниях, как: Amazon, Apple, IBM, Microsoft. Плоский дизайн, в сочетании со стилем минимализма становится сильным эстетическим инструментом и дает возможность находить интересные дизайнерские решения. Что же из себя представляет Flat дизайн и как его применять в практике, о чем стоит помнить? Вот его основные принципы:

• Он создает ощущение современного, дорогого продукта. >
• Flat дизайн — это отличительная черта простого пользовательского интерфейса.
• Он всегда легко адаптируется под любые мобильные устройства.

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

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

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

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

Пять базовых принципов флэт дизайна.

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

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

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

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

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

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

Вам нужна разработка web сайта с современным дизайном и вы выбираете исполнителя?

Тогда не теряйте время, напишите нам прямо сейчас!

Разработка web сайтов в стиле Flat

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

Flat дизайн (русскоязычное название «Плоский дизайн»), после презентации компанией Apple своей новой версии операционной системы iOS, окончательно утвердил себя в звании самого популярного дизайнерского направления на последующие пару-тройку лет, для всех видов платформ. И теперь, без всяких сомнений, каждый, кто хочет поддерживать актуальность собственных продуктов и держать их в тренде, должен придерживаться данного направления.

Полезная информация по теме современный веб-дизайн:

• Выбор цвета для дизайна сайта. ПРИМЕРЫ: 50 великолепных цветовых схем
• 10 базовых принципов эффективного дизайна веб-сайта
• 7 тенденций веб-дизайна: создание интерактивного сайта

Задача любого коммерческого сайта не просто привлечь внимание и произвести впечатление — главное ПРОДАТЬ! Поэтому наша команда разработает профессиональный дизайн, чтобы доступно донести торговое предложение и вызывать желание купить ваш продукт.  Если вам нужен современный адаптивный сайт, который будет легко открываться на мобильных устройствах, в этом случае мы рекомендуем использовать плоский дизайн. 

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

18.09.2022

← Поделиться с друзьями !

Что такое flat design? | Университет СИНЕРГИЯ

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

Содержание

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

Что такое флэт-дизайн?

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

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

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

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

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

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

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

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

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

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

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

Для чего используется?

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

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

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

Что можно достичь за счет перехода к плоскому дизайну?

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

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

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

Flat design и его секреты — WAYUP Обучение на vc.

Стиль Flat design характеризуется двухмерностью, он предусматривает упрощение элементов, схематичность и их визуальную плоскость.

147 просмотров

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

Стиль Flat design характеризуется двухмерностью, он предусматривает упрощение элементов, схематичность и их визуальную плоскость. Здесь акцент делается на цветовой палитре.

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

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

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

Почему flat design популярен?

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

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

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

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

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

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

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

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

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

Как определить, подходит ли плоский дизайн для конкретного проекта? Вот несколько “показаний” к стилю flat:

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

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

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

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

Как flat-design влияет на пользовательский опыт

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

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

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

Вот пара подсказок, как сделать пользовательский опыт при флэт-дизайне успешным:

• Разграничивай кликабельный и стандартный текст. Они должны быть очевидно разными. Чтобы не выбиваться из общего вида, можно применять один шрифт, но разную жирность. И если ссылки жирные, то жирный шрифт не должен применяться в обычных блоках, чтоб не запутать посетителя. Он ведь не должен проверять каждое слово, верно?
• Приближай к реальности. Ты не можешь сделать объемную кнопку с тенями, но по крайней мере нарисуй ее непрозрачной.
• Используй узнаваемость. В ссылках, кнопках, значках применяй узнаваемые иконки и символы, которые уже привычно для пользователя выполняют определенные функции.
• Традиционные макеты. В продолжение темы об узнаваемости. Если посетитель видит стандартный шаблон сайта, то нестандартный визуал воспринимается легче. Пользователь и так знает, что его ждет в том или ином месте, его не сбить с толку плоскими элементами.
• Не забывай про воздух. Его обычно больше, чем в стандартных объемных стилях, потому что при той же раскладке уходят тени. И это смотрится хорошо. Не сокращай пространство, оно помогает легко распознать цели и задачи элементов.
• Играй с контрастом. В плоском дизайне полутона могут все испортить. Детали должны быть четкими, они всегда хорошо видны и не теряются на фоне. Контраст – это один из главных инструментов в плоском стиле. Ведь это чуть ли не единственный способ визуально разграничить объекты, когда нет ни теней, ни текстур.
• Обращай внимание на шрифты. Это всегда важная задача, но в случае с плоским дизайном она первостепенна. Без отвлекающих деталей написание текста будет особенно привлекать внимание.

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

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

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

Что еще нужно?

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

Материал подготовлен командой образовательной платформы WAYUP

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

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

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

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

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

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

Минималистичность не означает скучность

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Спасибо, что прочитали 5 статей в этом месяце* Присоединяйтесь сейчас, чтобы получить неограниченный доступ

Наслаждайтесь первым месяцем всего за 1 фунт стерлингов / 1 доллар США / 1 евро

У вас уже есть учетная запись? Войдите здесь

*Читайте 5 бесплатных статей в месяц без подписки

Присоединяйтесь и получите неограниченный доступ

Попробуйте первый месяц всего за 1 фунт стерлингов / 1 доллар США / 1 евро

У вас уже есть аккаунт? Войдите здесь

Том Мэй — отмеченный наградами журналист и редактор, специализирующийся на дизайне, фотографии и технологиях. Автор бестселлера Amazon #1 Great TED Talks: Creativity , опубликованного издательством Pavilion Books, Том ранее был редактором журнала Professional Photography, помощником редактора Creative Bloq и заместителем редактора сетевого журнала. Сегодня он является постоянным автором Creative Bloq и дочерних сайтов Digital Camera World, T3.com и Tech Radar. Он также пишет для Creative Boom и работает над проектами по контент-маркетингу.

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

Логотипы, веб-сайты и многое другое…

Логотипы, веб-сайты, обложки книг и многое другое…

Получить дизайн

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Не путайте плоскость со скучностью

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

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

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

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

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

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

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

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

Выберите удобный для плоского шрифта

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

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

Плоский там, где он есть

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

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

Язык дизайна IBM — плоский стиль

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

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

Комплект плоского стиля (.ai)

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

Два квадрата и два круга для глаз.

Два круга и один квадрат, чтобы сделать сердце.

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

Построение на базе 2x Grid, базовая сетка для плоского стиля была установлена ​​​​на 8 пикселей, а не 4 пикселя для сетка в стиле линии. Этот метод гарантирует, что ваш минимальный размер формы и интервал составляет не менее 8 пикселей, а также поможет убедиться, что ваши иллюстрации не становитесь слишком многолюдными и занятыми.

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

Убедитесь, что точка привязки четко приземляется на пересекающиеся линии сетки.

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

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

Используйте четко расположенные фигуры с интервалом не менее 8 пикселей.

Не используйте случайно расположенные фигуры с расстоянием между ними менее 8 пикселей.

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

Пожалуйста, используйте стандартные углы — предпочтительнее 15°, 30°, 45°, 60°, 75° и 90°. С использованием эти стандартные углы помогут вашим иллюстрациям выглядеть последовательными. Несмотря на то что вы можете использовать любой угол, мы рекомендуем придерживаться предложенных стандартных углов здесь.

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

По возможности используйте четкие и правильные кривые.

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

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

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

Вложенные линии этой кривой должны оставаться на одинаковом расстоянии друг от друга с увеличением радиуса.

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

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

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

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

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

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

Автор: Кейт Моран

• Кейт Моран

на 2015-09-27 27 сентября 2015 г.

Темы:

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

• Визуальный дизайн Визуальный дизайн,
• Веб-юзабилити

Поделиться этой статьей:

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

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

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

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

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

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

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

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

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

Реализм

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

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

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

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

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

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

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

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

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

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

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

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

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

На главной странице Trader Joe’s отображаются различные индикаторы кликабельности. (1) Синий подчеркнутый текст

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

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

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

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

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

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

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

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

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

• Поделиться: 

Что такое плоский дизайн? Происхождение, использование и примеры

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

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

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

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

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

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

Содержание

• Что такое плоский дизайн?
• История плоского дизайна
• швейцарский стиль
• Microsoft и плоский дизайн
• Плоский дизайн 2.0
• Преимущества плоского дизайна
• Критика плоского дизайна
• Когда следует использовать плоский дизайн?
• Как улучшить плоский дизайн
• Комплект плоского пользовательского интерфейса
• 5 вдохновляющих примеров плоского дизайна

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

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

• Современная и цифровая эстетика0056
• Минималистский стиль
• Большое пустое пространство
• Симметричные макеты на основе сетки
• 2D-элементы
• Яркие, высококонтрастные цвета
• Жирный, читаемый типографика
• Символические формы, без абстракции
)

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

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

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

Вот пример с веб-сайта Apple в 2010 году с его переизбытком скевоморфных изображений и значков:

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

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

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

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

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

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

• Минимализм
• Mayouts на основе сетки
• Асимметричные макеты
• Legility
• Широко распространенное использование SANS-Serif Typograph Haas Grotesk (или Helvetica, как мы ее знаем сегодня) является примером швейцарского стиля:
  . Источник: Design Is History

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

  Microsoft и плоский дизайн

  Компания Microsoft, получившая признание за внедрение плоского дизайна в современную цифровую эпоху.

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

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

  • Веб-сайты
  • Приложения
  • Программные интерфейсы
  • Иллюстрации
  • Реклама
  • Логотипы
  • И многое другое

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

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

  По данным Nielsen Norman Group, это самая большая проблема с плоским дизайном: 

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

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

  • Приподнятые кнопки
  • Подчеркнутые и цветные гиперссылки
  • Текст с действиями рядом со значками или кнопками

  Первоначально Material Design был создан для решения этой проблемы. Но даже это не было идеальным решением и требовало собственного исправления.

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

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

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

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

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

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

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

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

Этот рисунок, опубликованный Killed by Google в Твиттере, является отличным примером:

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

Это форма минимализма, доведенная до крайности, и это никуда не годится.

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

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

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

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

• Icon sets
• Custom typography
• Mobile navigation elements (like in hamburger menus or sticky bars)
• UI interactions
• Illustrations
• Mascots
• Animated explainer videos
• Logos
• Infographics
• Social media graphics
• Цифровая реклама

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

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

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

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

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

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

Flat UI Kit

UI Kits может быть ценным инструментом дизайна при работе с плоским дизайном, и у Envato есть несколько отличных примеров для вдохновения, например, этот от DeoThemes:

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

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

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

Tripadvisor

Источник: Tripadvisor

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

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

Нетфликс

Источник: Netflix

Веб-сайт Netflix — отличный пример использования плоских иконок.

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

Не будем игнорировать и цвета CTA-кнопки Play. Абсолютно белая кнопка на фоне остальной темной темы выделяется как божий день. Это касается кнопки рядом с рекомендуемым выбором (вверху), а также кнопки, которая появляется при наведении курсора (например, Аннотация: Искусство дизайна на скриншоте выше).

Энн Кляйн

Источник: Анна Кляйн

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

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

Творческие мечты

Источник: Creative Dreams

Если вы хотите увидеть пример использования плоского дизайна в анимации, посетите веб-сайт Creative Dreams.

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

Посетите Квебек

Источник: Квебек Сити

Это фрагмент главной страницы туристического веб-сайта города Квебек. Все на этом сайте кричит о плоском дизайне 2.0.

У вас яркие контрастные цвета, но они не слишком яркие.

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

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

Улучшите свой сайт с помощью плоского дизайна

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

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

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

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

Поделиться на facebook

Поделиться на Twitter

Поделиться на linkedin

Поделиться на WhatsApp

Поделиться на электронной почте

Ищете свежий контент?

Получайте статьи и идеи из нашего еженедельного информационного бюллетеня.

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

Сергей Давыдов

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

Вам также может понравиться

Комментарии

Запустите свой облачный веб-сайт

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

Брендинг Иллюстрация Процессы и инструменты Пользовательский интерфейс/UX

Статья о разнообразии творческого исполнения плоского дизайна.

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

by Marina Yalanska

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

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

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

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

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

 

Josep Müller-Brockmann, Auto Club of Switzerland Poster, 1955

 

Joseph Müller-Brockmann,  Zürich Town Hall Poster, 1955

 

Armin Hoffman, 1959 афиша к балету «Жизель»

 

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

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

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

К основным и выдающимся чертам плоской конструкции относятся:

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

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

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

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

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

Актуальные практики: области применения графического плоского дизайна

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

User Experience Wireframing

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

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

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

 

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

Обновление по нажатию

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

Pull Down animation

Tab bar interactions

 

UI navigation elements and icons

The set of flat icons

Flat icons applied in Veggie App

Дизайн плоских значков и вкладок для приложения Blog

Плоские значки, применяемые в приложении Saily

Элементы дизайна Flat UI для Passfold

Иллюстрации интерфейса UI

CAFE COPON APP

APP

APP

APP

.

Timeline App

 

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

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

Free Colorful Wallpapers

Free Space Wallpapers

Underwater Explorer

Halloween Haunted Castle

Rio Olympics

Californication Bus

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

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

Сказки об обложке книги джазового возраста

Pikachu Poster

Muscles Magazine

СВОЙСТВА СВОЙСТВА

СВОЙСТВА СВОЙСТВА

СВОЙСТВА СВОЙСТВА

СВОЙСТВА ПАСИКАЛА 9000 2

2 СВОЙСТВА ПЛАСКИЙ СВОЙСТВА

2

9000 2 .

Фирменный дизайн

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

Mogo Mogo Mascot для Saily App

Logo Latemport для Passfold

Logo Design для Andre

LOGO для Andre

LOGO для AndRE

.