5 основных принципов / Все о дизайне / Pollskill
Надежда Лёвкина · ·
44.6K
Flat дизайн —это ключевое направление в дизайне на ближайшие годы, поэтому предлагаем познакомиться с ним ближе и узнать 5 основополагающих принципов, легших в его основу.
Home
Знакомство с flat дизайном
На русском языке flat design переводится как «плоский дизайн», а стал он абсолютным фаворитом после презентации Apple ОС iOS. Во главу угла встал минималистичный подход к дизайну для юзабилити. Ставка сделана на комфорт пользователя. Это ярко выраженный протест против «сквеформизма» (визуализация объектов, как в реальности). Выбор пал на более упрощенные и при этом простые в эстетическом плане решения. Пользователи, уставшие от реалистичных визуализаций, с восторгом встретили это направление, и все больше web-проектов переходят именно к этому формату.
https://dribbble.com/rikitanone
Хочется отметить, что «плоско» — не значит «скучно». Решения flat дизайна могут быть красивыми, они более утонченные, чистые, избавленные от избыточности чего-либо, трансформируясь в «островок спокойствия». Они, наконец, делают контент понятным. Осталось узнать основные принципы, чтобы применять их на практике.
- Принцип №1: долой ненужные эффекты
«Плоский» дизайн не стремится передавать объемы, поэтому в основе лежит двумерная визуализация.
Это значит, что вы не увидите ни теней, ни рефлексов, ни бликов с текстурами (исключение составляют длинные тени). Только передача контуров, и ничего более.
https://dribbble.com/dylanopet
- Принцип №2: чем проще, тем лучше
Рекомендуется использование односложных фигур в дизайне, как и следить за четкостью контуров, что призвано подчеркнуть легкость и невесомость. Кроме того, такие лаконичные элементы хорошо имитируют сенсор, порождая желание к взаимодействию с объектом (призыв к нажатию, прикосновению). Впрочем, простота элементов не равна простоте дизайна в целом — это относится только к очертаниям. В результате, все, что видит пользователь, ему понятно, и он может с легкостью этим пользоваться.
Принцип №3: типографика и ее важность
Флэт дизайн призывает крайне осторожно работать со шрифтами. То есть их характер обязан дополнять дизайн-схему, не противореча ей. Более того, во флэт дизайне шрифт — это еще и ключевой навигационный элемент.
http://www.tvlcorp.com/
- Принцип №4: цветовые акценты
Не только шрифт, но и цвет —существенная часть в «плоском» дизайне. В подавляющем большинстве палитры базируются на 2-3 цветах, хотя, конечно, есть и исключения. Обычно выбираются сочные и яркие, но при этом чистые цвета. Как было отмечено, нет никаких градиентов и излишних переходов.
https://dribbble.com/fffabs
- Принцип №5: выбор в пользу минимализма
Flat дизайн — это яркий пример такого всемирного тренда, как минимализм. Дизайнеры отказываются от излишних «наворотов», уходят от сложных и неявных подходов к визуализации, что дает свои плоды в виде пользовательской активности.
http://www.flatvsrealism.com/
Плоский или почти плоский? Ищем компромисс!
В завершение хочется отметить, что сегодня имеет место быть синергия между плоским и неплоским дизайном. Речь идет о «почти плоском» дизайне. Это наиболее распространенное применение описанного концепта, когда вместе с простыми и лаконичными элементами и двумерным пространством дизайнеры применяют 1-2 приема для глубины и перспективы.![]()
Также трендом 2017 года стал Semi Flat Design — полуплоский дизайн. Под влиянием Material Design, он стал немного более пространственным. Появляются легкие тени, которые делают дизайн полуплоским. Флэт-дизайн актуален и сегодня, за счет теней он стал глубже и сложнее, но основная концепция не нарушается.
Интересные материалы
Вход через социальные сети:
Регистрация Забыли пароль?
Забыли парольИмя пользователя
Или Электронная почта
Вход Регистрация
Что такое flat design? | Университет СИНЕРГИЯ
Содержание
Flat design — новая тенденция мира дизайна, популярность которой возрастает последние годы пропорционально спросу. Главное отличие от иных направлений — он выступает против визуализации объектов, чтобы они были схожими с реальными предметами.
Что такое флэт-дизайн?
Если проанализировать само происхождение понятия, то flat design переводится, как «плоский дизайн». Он преследует главный принцип — использование минималистического подхода при моделировании юзабилити сайта. Эта концепция ставит во главу угла комфорт, удобство пользователя.
Приемы плоского дизайна
Флэт-стиль, не смотря на свою «стереотипность», не является скучным. Принимаемые дизайнером решения отличаются креативностью, красотой, утонченностью, чистотой. Осматривая макеты, нельзя встретить избыточности красок, форм, наоборот, сайт становится гармоничным и спокойным. Плоский дизайн делает контент понятным для простого пользователя.
Пару лет назад веб-дизайнеры отдавали предпочтения скевоморфному стилю. Иллюстрации создавались с максимальной реалистичностью за счет придания объемов, текстурных отличий, бликования. Flat дизайн имеет особенности, позволяющие отделить направление от скевоморфизма. 7 уникальный приемов помогут разобраться в нетривиальности подхода.
Главная особенность направления состоит в том, что при разработке дизайна сайта используются исключительно двухмерные изображения — графические объекты прорисовываются в одной плоскости. Для создания изображения не применяются различные текстуры, блики, которые могли бы продемонстрировать объем.
Простота очертанийПлоский дизайн не ставит перед собой цели создания реалистичной картинки. Напротив, главная задача этого визуального «жанра» подразумевает использование схематичных изображений. Чем меньше элементов будет присутствовать, тем понятнее будет иллюстрация. Поэтому при флэт-дизайне оставляют только характерные формы, позволяющие идентифицировать предметы.
Цветовые контрастыАкцентировать внимание пользователя без текстур, теней сложно, поэтому flat дизайн делает ставку на усиление цветовых контрастов. Именно различные оттенки и яркие цвета делают возможным разграничение между элементами графики.
Если изображение двухмерное, плоское, имеет незатейливый вид, то перед дизайнерами стоит задача правильного подбора шрифтов, кегля и интервала между строками надписей. Текст становится главным элементом всего проекта.
Ориентация на опытЕсли человек не имеет опыта работы за компьютером, а тем более серфинга в интернете, то простые кнопки Play или, например, значок «Домой» может поставить его в ступор. Поэтому плоский дизайн ориентирован в первую очередь на опытных пользователей.
Удобство для смартфоновТрехмерные изображения отлично смотрятся через персональные компьютеры, а вот на ограниченных экранах смартфон выигрышным будет flat дизайн. Это связано с тем, что изображения, выполненные во флэт-стиле, отлично читаются при разных масштабах. Скеморфизм делает иллюстрации трудно различимыми.
Скорость загрузкиПлоский дизайн — простая двухмерная «маловесная» графика.
Сайты, выполненные на принципах этих проектных решений, работают быстрее. Это положительным образом сказывается на ранжирование страниц в поисковых сетях.
Для чего используется?
В большинстве случаев стиль использовали в контексте разработки внешнего вида интерфейсов. Прогресс цифровых технологий создал предпосылки, которые сформировали новый тренд — большой популярностью стала пользоваться плоская графика.
Однако чем популярнее становился интерфейс, тем больше присматривались к художественному оформлению специалисты при разработке логотипов. Самым ярким примером в этой области является редизайн знаменитой надписи Google, который произошел в 2013 году.
Ну и, конечно же, плоский дизайн нашел применение в иллюстрациях. Оживить оформление сайта будет проще, если разместить на сайте двухмерные картинки. Такие ресурсы более популярны у пользователей, так как они не только быстро загружаются, но и становятся хорошо узнаваемыми.
Что можно достичь за счет перехода к плоскому дизайну?
Флэт-стиль является одним из сильнейших инструментов при создании привлекательного юзабилити сайта.
С помощью него можно достичь следующих целей:
● улучшить читабельность текстовой информации, так как шрифты отлично контрастируют с иллюстрациями;
● поставить контент на первый план, подняв «планку полезности» любого сайта — если будут отсутствовать красочные иллюстрации, то все внимание пользователя будет приковано к изучению информации;
● уменьшить время загрузки сайта — никто не любит ждать, поэтому тяжелая графика становится причиной оттока аудитории;
● улучшить навигацию — четкая иерархия, созданная по определенной схеме, позволяет клиенту отлично ориентироваться на сайте;
● сделать оформление сайта оригинальным — двухмерная графика, созданная дизайнером, закрепляет новые тренды, которые невозможно встретить у конкурентов.
Плоский дизайн — отличная возможность завоевать аудиторию, привлечь внимание потенциальных клиентов. Следуйте ключевым принципам стиля и делать площадку удобной для посетителей.
Подай заявку на обучение
Я даю согласие на обработку персональных данных, согласен на получение информационных рассылок от Университета «Синергия» и соглашаюсь c политикой конфиденциальности.
Руководство для начинающих по плоскому дизайну
(Изображение предоставлено корпорацией Burger King)В прошлом веб-дизайнеры уделяли особое внимание демонстрации своих навыков и портфолио, заполняя сайты яркими иллюстрациями и анимацией, которые якобы поражали посетителей. Затем произошел сдвиг в сторону скевоморфного дизайна, который пытался перенести реальную жизнь на экран с псевдореалистичными текстурами, тенями и характеристиками реальных объектов.
Это уступило место плоскому дизайну, который противостоял всем этим «искусственным» методам дизайна в пользу более упрощенной классической цифровой эстетики. И хотя этот ориентированный на пользователя стиль веб-дизайна существует уже много лет, он по-прежнему актуален и популярен, как никогда, и переживает возрождение в дизайне логотипов. Так что, если вы все еще не знаете, о чем идет речь, возможно, это руководство именно то, что вам нужно…

Плоский дизайн — это минималистичный подход к дизайну, который подчеркивает удобство использования. Он отличается чистым открытым пространством, четкими краями, яркими цветами и двумерными иллюстрациями.
Microsoft была одной из первых, кто применил этот стиль дизайна к своему интерфейсу, что некоторые восприняли как негативную реакцию против популярного скевоморфного дизайна, который Apple запустила в своем интерфейсе iOS. Вместо того, чтобы преобразовывать реальный объект, такой как календарь, в крошечную реалистичную иллюстрацию, сторонники плоского дизайна идентифицируют приложения с помощью простых изображений, похожих на значки.
Вместо того, чтобы привносить аспекты реальной жизни в интерфейс, это иллюстрирует четкое разделение между технологиями и тактильными объектами.
Минималистичность не означает скучность
В плоском дизайне декоративные элементы рассматриваются как ненужный беспорядок. Если аспект не служит функциональной цели, он отвлекает пользователя.
Это причина минималистичного характера плоского дизайна.
Однако отсутствие яркого дизайна не означает, что этот стиль скучен. Яркие, контрастные цвета выделяют иллюстрации и кнопки на фоне, легко привлекают внимание и направляют взгляд пользователя. Цель минималистичных изображений также способствует функциональному характеру плоского дизайна.
У плоского дизайна определенно есть шанс — не зашло ли это слишком далеко? (Изображение предоставлено Тобиасом ван Шнайдером)Легко заметить разницу между скевоморфным и плоским дизайном. Обратите внимание, насколько большие однотонные блоки больше привлекают внимание, а значение значков можно быстро понять.
На приведенных выше значках показаны лишь некоторые из значков, которые будут использоваться в 2021 году, включая прошлогодний неоднозначный ребрендинг значков Google.
Плоский дизайн возвращается к основам дизайна как функционального инструмента. Веб-сайт разработан и оценивается по тому, насколько хорошо он работает, а не по тому, как он выглядит.
Эта необработанная функциональность заставляет сайт сосредоточиться на пользовательском опыте, поэтому веб-сайты, которые успешно используют этот стиль дизайна, скорее всего, получат положительные отзывы как удобные для пользователя.
Чтобы спроектировать эффективную плоскую площадку, все элементы дизайна должны быть сосредоточены на этой идее простоты. Сплошные, яркие цвета придают аспектам акцент, необходимый для их выделения, вместо иллюстративных деталей; типографика без засечек служит чистым и четким дополнением к иллюстрациям; текст лаконичен и по делу; Элементы пользовательского интерфейса, такие как кнопки и ссылки, четкие и заметные.![]()
Все должно быть разработано с одной и той же целью для создания цельного визуального и функционального веб-дизайна. Ниже приведены несколько замечательных примеров плоского дизайна…
Цвета и значки помогают прояснить смысл с минимальным текстомЭтот дизайн приложения для планирования поездки (открывается в новой вкладке) от индонезийского дизайнера пользовательского интерфейса Бади чрезвычайно легко забронировать рейс на основе пакетов и бюджетов. Все четко и понятно, а дизайн в основном опирается на цвета и значки, чтобы придать смысл. Копия краткая, а аспект пользовательского интерфейса поиска идеального полета очевиден.
Веб-сайт Burger King соответствует своему недавнему ребрендингу (Изображение предоставлено Burger King) Burger King провел ребрендинг в начале 2021 года и получил широкое признание, а его новый логотип представляет собой мастер-класс плоского дизайна. Его веб-сайт (открывается в новой вкладке) был переработан, чтобы соответствовать ему, и использует простые иллюстрации и значки, чтобы направлять пользователей по сайту.
Приложение также использует аналогичный упрощенный подход.
Дизайн пользовательского интерфейса этого погодного приложения (открывается в новой вкладке) показывает, что плоский дизайн может быть успешным даже без использования ярких цветов. Четкая иконография и крупный шрифт привлекают внимание к наиболее важным аспектам погоды, а это именно то, что ищет пользователь.
Изучая плоский дизайн в своей работе, обязательно проектируйте каждый аспект с минималистичной и ориентированной на пользователя перспективой, чтобы обеспечить унифицированный интерфейс. Как только вы успешно это сделаете, ваши пользователи оценят функциональный характер вашего веб-сайта.
Статьи по теме:
- Новый логотип Nissan присоединяется к вечеринке в области плоского дизайна
- Где найти вдохновение для создания логотипов
- Лучшее платное и бесплатное программное обеспечение для создания логотипов
Спасибо, что прочитали 5 статей в этом месяце* Присоединяйтесь сейчас, чтобы получить неограниченный доступ
Наслаждайтесь первым месяцем всего за 1 фунт стерлингов / 1 доллар США / 1 евро
У вас уже есть учетная запись? Войдите здесь
*Читайте 5 бесплатных статей в месяц без подписки
Присоединяйтесь и получите неограниченный доступ
Попробуйте первый месяц всего за 1 фунт стерлингов / 1 доллар США / 1 евро
У вас уже есть аккаунт? Войдите здесь
Подпишитесь ниже, чтобы получать последние новости от Creative Bloq, а также эксклюзивные специальные предложения прямо на ваш почтовый ящик!
Свяжитесь со мной, чтобы сообщить о новостях и предложениях от других брендов Future.
Получайте от нас электронные письма от имени наших надежных партнеров или спонсоров.Том Мэй — отмеченный наградами журналист и редактор, специализирующийся на дизайне, фотографии и технологиях. Автор бестселлера Amazon #1 Great TED Talks: Creativity , опубликованного издательством Pavilion Books, Том ранее был редактором журнала Professional Photography, помощником редактора Creative Bloq и заместителем редактора сетевого журнала. Сегодня он является постоянным автором Creative Bloq и дочерних сайтов Digital Camera World, T3.com и Tech Radar. Он также пишет для Creative Boom и работает над проектами по контент-маркетингу.
Что такое плоский дизайн? Происхождение, использование и примеры
Плоский дизайн — отличный способ повысить конверсию, скорость загрузки и многое другое. Узнайте, что такое плоский дизайн и как его эффективно использовать.
Если вы только начали свой бизнес в области веб-дизайна или уже много лет работаете дизайнером, вы, вероятно, замечали, насколько лицо Интернета меняется год от года.
Некоторые тенденции веб-дизайна довольно незаметны, например, переход от использования однотонных фонов к градиентам. Другие, однако, сигнализируют о серьезных изменениях в том, как мы разрабатываем веб-сайты.
Один из самых узнаваемых примеров этого произошел в начале 2010-х годов, когда веб-сайты перешли от скевоморфизма (когда объекты проектируются так, чтобы они напоминали свои аналоги из реального мира) к плоскому дизайну и материальному дизайну, вдохновленному плоским дизайном.
Плоский дизайн, в частности, доказал свою полезность не только в веб-дизайне, но и в графическом дизайне. Это очень эффективный способ разработки привлекательных интерфейсов и брендинга, который, как следствие, приводит к более высокому уровню вовлеченности и конверсии.
Давайте начнем с понимания того, что такое плоский дизайн.
Содержание
- Что такое плоский дизайн?
- История плоского дизайна
- швейцарский стиль
- Microsoft и плоский дизайн
- Плоский дизайн 2.
0 - Преимущества плоского дизайна
- Критика плоского дизайна
- Когда следует использовать плоский дизайн?
- Как улучшить плоский дизайн
- Комплект плоского пользовательского интерфейса
- 5 вдохновляющих примеров плоского дизайна
Что такое плоский дизайн?
Плоский дизайн — это современный стиль дизайна пользовательского интерфейса, известный следующими чертами:
- Современная и цифровая эстетика
- Минималистский стиль
- Большое пустое пространство
- Симметричные макеты на основе сетки 2D0 6 элементов
- Яркие, высококонтрастные цвета
- Жирный, читаемый шрифт
- Символические иконки
- Простота (без градиентов, текстур, абстрактных форм)
Благодаря своей ориентации на чистоту и порядок, плоский дизайн создает очень функциональные веб-сайты, где путь пользователя четко изложен, а интерфейс практически не отвлекает и не раздражает.![]()
История плоского дизайна
Плоский дизайн был создан как прямой ответ на эпоху реализма скевоморфизма.
Вот пример с веб-сайта Apple в 2010 году с его переизбытком скевоморфных изображений и значков:
Источник: AppleОчевидно, нужно было что-то сделать для создания более привлекательного, интуитивно понятного и удобного интерфейса. Сайт Apple в 2020 году — прекрасный пример того, как это сделать:
. Источник: Apple. Обратите внимание, что навигация устройства вверху похожа на ту, что была десятью годами ранее. Но реализм ушел и заменен плоскими символами.
Плоский дизайн не только более привлекателен, но и более компактен.
Швейцарский стиль
Несмотря на то, что скевоморфный дизайн сжег потребителей, плоский дизайн был создан не просто так, чтобы быть полной противоположностью своему предшественнику. На самом деле он был вдохновлен швейцарским стилем.
Швейцарский стиль, также известный как международный типографский стиль, был типом графического дизайна, который стал популярным в середине двадцатого века.
Он был известен:
- Минимализм
- Макеты на основе сетки
- Асимметричные макеты
- Разборчивость
- Широкое использование типографики без засечек
- Рассказывание историй с помощью сочетания фотографии и текста
- Функционализм
Книга образцов шрифта 1950-х годов для Neue 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 в Твиттере, является отличным примером:
Источник: Killed by GoogleКомпания Google недавно изменила дизайн всех логотипов для своего набора продуктов. Вместо того, чтобы позволить им иметь уникальный дизайн (и при этом соответствовать бренду), теперь они используют одну и ту же цветовую палитру и геометрические формы.
Это форма минимализма, доведенная до крайности, и это никуда не годится.
Вы уже жертвуете многими мелкими деталями изображения или значка, когда сглаживаете их. Если вы не найдете уникального способа различать графику, имеющую разное значение и предназначение, вы создадите огромные проблемы для своих посетителей.
Первоначальный плоский дизайн может быть достаточно сложным для понимания без визуальных подсказок, которые посетители должны знать, когда нужно действовать. Последнее, чего вы хотите, — это усугубить когнитивную перегрузку, потому что все выглядит одинаково.
Когда следует использовать плоский дизайн?
Как мы уже видели, плоский дизайн привлекает всеобщее внимание. Но дело не только в том, на каком веб-сайте его использовать. Вы можете использовать плоский дизайн при создании следующего:
- Наборы значков
- Пользовательская типография
- Элементы мобильной навигации (например, в меню гамбургера или липкие батончики)
- Interactions
- Иллюстрации
- Mascots
- Animated Doplograst Цифровая реклама
Вы также можете использовать принципы плоского дизайна на этапах разработки стратегии и реализации своих проектов. В частности, плоский дизайн полезен при создании макетов веб-сайтов, а также руководств по стилю веб-дизайна.
Как улучшить плоский дизайн
Во-первых, убедитесь, что вы используете плоский дизайн 2.0 вместо плоского дизайна. Хотя совершенно плоский интерфейс может подойти некоторым вашим посетителям, общее удобство использования сайта улучшится, если вы добавите некоторую глубину и контекст в области страницы, с которыми посетители должны взаимодействовать.
Следует также помнить, что плоский дизайн не означает скучный или безжизненный . Вы по-прежнему можете использовать анимацию — большую или маленькую — для обеспечения обратной связи, развлечения посетителей во время загрузки или просто для придания дополнительной индивидуальности и жизни опыту.
Будьте осторожны с выбором цвета . Хотя смелые цвета являются частью формулы плоского дизайна, они могут не иметь смысла для стиля вашего бренда. Вместо этого убедитесь, что вы выбрали цветовую палитру с сильным контрастом. Это все, что вам действительно нужно, чтобы некоторые элементы вашего пользовательского интерфейса выделялись больше, чем другие.
Плоский дизайн подходит не только для иллюстрированных веб-сайтов или логотипов . Обычно, когда мы видим примеры плоского дизайна в действии, мы смотрим на иконки, иллюстрации и другие элементы графического дизайна. Однако плоский дизайн и фотография не исключают друг друга. Вы можете использовать оба на веб-сайте, если вы придерживаетесь одного типа изображений (например, иллюстраций или фотографий).
Комплект плоского пользовательского интерфейса
Наборы пользовательского интерфейса могут быть ценным инструментом дизайна при работе с плоским дизайном, и у Envato есть несколько отличных примеров для вдохновения, например, этот от DeoThemes:
Комплект плоского пользовательского интерфейса от DeoThemesПолучить плоский комплект пользовательского интерфейса
5 вдохновляющих примеров плоского дизайна
В Интернете слишком много примеров плоского дизайна. Итак, что я хотел бы сделать ниже, так это показать вам пять особенно ярких примеров компаний, которые использовали сильные стороны плоского дизайна для своих веб-сайтов и брендинга:
Tripadvisor
Источник: Tripadvisor На таком веб-сайте, как Tripadvisor, всегда существует риск того, что огромное количество доступного контента перегрузит дизайн.
Тем не менее, беглый взгляд на домашнюю страницу показывает, насколько эффективен плоский дизайн для направления посетителей через сложный массив контента.
Помимо логотипа, единственной частью верхней части страницы, которая имеет какой-либо цвет, является главное изображение. И именно резкий контраст между красочным изображением (ярким, но не подавляющим) и минималистичным дизайном сайта позволяет посетителям сосредоточиться на основном действии.
Нетфликс
Источник: NetflixВеб-сайт Netflix — отличный пример использования плоских иконок.
Во-первых, кнопки «Играть» и «Подробнее» сопровождаются значками. Это не просто небольшое внимание к деталям, эти визуальные подсказки предназначены для ускорения процесса поиска того, что можно посмотреть.
Не будем игнорировать и цвета CTA-кнопки Play. Абсолютно белая кнопка на фоне остальной темной темы выделяется как божий день. Это касается кнопки рядом с рекомендуемым выбором (вверху), а также кнопки, которая появляется при наведении курсора (например, Abstract: The Art of Design на скриншоте выше).
Энн Кляйн
Источник: Анна КляйнСайт электронной коммерции для Анны Кляйн отлично справляется с использованием сетки, пустого пространства и симметрии для создания удобного для навигации магазина.
Также многое можно сказать о чистых дизайнерских решениях — от элегантной типографики до полностью белого фона — которые действительно позволяют красочным изображениям выделяться.
Творческие мечты
Источник: Creative DreamsЕсли вы хотите увидеть пример использования плоского дизайна в анимации, посетите веб-сайт Creative Dreams.
Скриншот, который мы видим выше, является достаточным доказательством того, насколько успешно эта студия использовала плоский дизайн. Единственная вспышка желтого цвета для карандаша. Внимание к деталям в анимационном дуэте. Крупные, читаемые шрифты. Здесь есть чему удивиться.
Посетите Квебек
Источник: Квебек Сити Это фрагмент главной страницы туристического веб-сайта города Квебек.
Все на этом сайте кричит о плоском дизайне 2.0.
У вас яркие контрастные цвета, но они не слишком яркие.
Кнопки существуют на том же 2D-слое, что и все остальное, но имеют визуальные подсказки (например, значок на снимке экрана или анимированные стрелки в других частях сайта), которые сообщают посетителям, что на них можно нажать.
И хотя каждая часть страницы живет в строгой и предсказуемой сетке, красивое сочетание изображений и текста рассказывает захватывающую историю.
Улучшите свой сайт с помощью плоского дизайна
Плоский дизайн уходит своими корнями в стиль дизайна почти 70-летней давности, но в эпоху цифровых технологий он доказал свою подлинную живучесть.
Это потому, что плоский дизайн фокусируется на действительно хороших дизайнерских решениях, которые приносят пользу нашим пользователям:
- Чистые открытые пространства для лучшей видимости
- Яркие цветные маркеры для четкого пути к конверсии
- Упрощенные шрифты, сбалансированные с красивыми фотографиями для более эффективного и увлекательное повествование
- Двумерные интерфейсы, которые обеспечивают беспрепятственное путешествие по вашему контенту
- И так далее и дальше
Если ваша цель — повысить вовлеченность и коэффициент конверсии на вашем веб-сайте, универсальный плоский дизайн — это отличный выбор.
