Flat-design или плоский дизайн сайта
Flat-design (плоский дизайн) – это популярный стиль в дизайне сайтов и интерфейсов, а также операционных систем, отличительной чертой которого является простота, утонченность и минимализм. Плоский дизайн стал набирать популярность в 2010 году как противоположность скевоморфизму.
Скевоморфизм — физический орнамент или элемент дизайна, который скопирован с формы другого объекта, но изготовлен из других материалов или иными методами. Примеры включают в себя керамику, украшенную имитацией заклёпок для схожести с аналогичными горшками, сделанными из металла, или компьютерный календарь, который имитирует внешний вид скрепления страниц бумажного настольного календаря (определение из Wikipedia).
Популяризации плоского стиля в дизайне способствовал выпуск операционной системы Windows 8 от Microsoft в стиле Metro, а также iOS 7, в котором компания Apple также выбирает плоский стиль. Именно после этого и наступает настоящая эра плоского дизайна.
| Классический логотип Google | Логотип Google плоский | Классический логотип YouTube | Плоский логотип YouTube |
Преимущества плоского дизайна
- Практичность – использование плоского дизайна позволяет минимизировать количество стилей, скриптов и анимации, что позволяет сайту быстрее загружаться.
-
Простота в адаптации – плоский дизайн достаточно просто адаптировать под различные разрешения экранов.
- Удобство использования – благодаря упрощенному стилю пользователям легче воспринимать информацию на сайте.
- Красота – внешняя непредвзятость и простые конструкции позволяют сделать акцент на дизайне, который действительно цепляет.
5 принципов плоского дизайна сайтов
Флэт дизайн совсем не скучный, как может показаться на первый взгляд. Благодаря своей чистоте и утонченности решения дизайна могут быть стильными и красивыми, без лишнего шума, что позволяет сконцентрироваться на вашем товаре либо услуге.
1 – Использование двухмерных объектов
В плоском дизайне исключается использование элементов, придающих глубину и объемность объекту: тени, градиенты, блики, текстуры, рефлексы, анимация. При изображении объекта отображаются лишь его контуры.
2 – Иконки и простые объекты
Использование плоских иконок и односложных фигур с четкими контурами и одного цвета позволяет максимально упростить дизайн и сделать его более легким.
Элементы управления становятся интуитивно понятными пользователю и стимулируют к взаимодействию.
3 – Простые шрифты в стиль дизайна
Большое внимание уделяется в плоском дизайне типографике и шрифтам. Здесь не используется курсив, шрифт гармонично вписывается в дизайн сайтов не только в контенте, но и в навигации. Даже в типах шрифта для сайта приветствуется стиль минимализма.
4 – Игра цвета
Flat дизайн содержит нескольких основных цветов, которые исключают использование плавных переходов и градиентов, но могут быть яркими и контрастными по отношению друг к другу.
5 – Минимализм
Плоский дизайн предполагает применение визуализации элементов, использование всей ширины экрана и в то же время минимализацию информации.
Почти плоский дизайн
Существует такое понятие, как почти плоский дизайн. Это одна из концепций плоского дизайна, которая заключается в использовании простых элементов и двухмерного пространства.
Примеры плоского дизайна
На просторах интернета, в том числе и в белорусском сегменте, можно встретить много примеров разработок сайтов с плоским дизайном в разных тематикам, в том числе новостные ресурсы, порталы и даже интернет-магазины:
Вернуться назад
Становление flat 2.0 — следущий шаг «плоского» дизайна / Хабр
Flat design начал существовать в противовес повсеместному скевоморфичному стилю, но с тех пор стал гораздо большим, чем просто «Вариантом Б».
Изначально flat был исключительно двумерным с тотальной ориентацией на минимализм. В современном flat 2.о используются тени, градиент и другие элементы, которые делают его «почти плоским».
5 характерных компонентов современного плоского дизайна:
1. Длинные тени
Длинные тени добавляют изображениям глубину и объем без необходимости жертвовать минималистичными деталями иконки, которые делают интерфейс привлекательным.
2. Динамичные цвета
Дополнить редкие визуальные эффекты просто с помощью энергичных цветов, особенно светлых оттенков.
Разный цветовой фон в контрасте с базовым цветом элементов делают страницу с «плиточным» меню более живой.
На сайте Flat UI Colors собраны самые эффективные цветовые паттерны для flat.
3. Простая типографика
Выбор шрифта в flat обусловлен одним критерием: удобочитаемостью.
Обычно используются шрифты без засечек с постоянной шириной штриха.
4. Прозрачная кнопка
Один из трендовых элементов в современном веб-дизайне. Причина в том, что она не привлекает лишнего внимания, но четко распознается, как кнопка.
5. Минимализм
Flat и минимализм идут рука об руку, используя одни и те же принципы: простота и ориентированность на контент.
Может казаться, что использование плоского дизайна — универсальный выход, но минимализм сложен в исполнении: чем меньше рабочих элементов, тем большего внимания они к себе требуют.
Каким бы превосходным решением не казался плоский дизайн, нет гарантий, что он применим именно для вашего сайта. Ознакомьтесь с его основными достоинствами, чтобы понять, стоит ли планировать глобальный редизайн.
Преимущества:
• используется в адаптивном интерфейсе;
• упрощает для пользователя восприятие навигации;
• четкая структура и схематичный визуальный ряд подчеркивают внутреннюю логику страницы;
• быстрая загрузка страниц, за счет простоты графики;
• привычная типографика повышает читабельность.
Плоский дизайн – это простота и минимализм, которые, с другой стороны, создают трудность в передаче визуально сложных сообщений. Поэтому, прежде чем кидаться с головой в упрощение интерфейса, стоит тщательно продумать схему взаимодействия между сайтом и пользователем.
На базе Web design book of trends.
Краткая история плоского дизайна
Как это часто бывает в истории искусства, новый жанр обычно возникает как ответ на предыдущую или нынешнюю тенденцию – и является полной противоположностью своему предшественнику. Поскольку история, похоже, повторяется, на этот раз она не сбилась с пути.
Что такое плоский дизайн?
Плоский дизайн может быть определен как двухмерный стиль в дизайне, в котором утрачены все стилистические элементы, которые приукрашивают изображение и делают его трехмерным. Вместо того, чтобы сосредотачиваться на градиентах, тенях и текстурах, плоский дизайн делает акцент на содержании, цвете и типографике.
Особенности плоского дизайна:
— Минималистский подход
— Акцент на цвете
— Акцент на типографике
— Простые элементы
Несмотря на то, что это звучит упрощенно, по сути, плоский дизайн — это не то, что нужно новичкам в веб-дизайне. или дизайном вообще можно заниматься в первый же день своей работы. Если вы один из таких новичков и хотели бы познакомиться с плоским дизайном, вы можете найти больше информации о его принципах на Designmodo.
Очевидно, что за последние три-четыре года сеть стала по-настоящему плоской, независимо от ниши. Эта тенденция возникла как оппозиция так называемому «богатому дизайну» и скевоморфизму , которые использовались в начале 2000-х, в основном iOS6, которая была законодателем моды в то время и в основном состояла из реалистичных дизайнов, которые скопировали вещи из реального мира.
Скевоморфный и плоский интерфейс (iOS6 и iOS7)Истоки: швейцарский дизайн и минимализм
Похоже, что плоский дизайн берет свое начало в швейцарском стиле (также известном как международный типографский стиль), который доминировал в дизайне в 1950-х годах.
Он появился в 1920-х годах в России, Нидерландах и Германии, а по-настоящему популярен в 1950-х годах в Швейцарии, когда был разработан всемирно известный шрифт Helvetica (тогда он назывался Neue Haas Grotesk).
Так же, как и послевоенный минимализм, этот стиль был ориентирован в основном на шрифты и большие изображения — содержание, а не дизайн доносил сообщение — и по сей день сохранил эту черту во всемирной паутине.
Как цифровой мир стал плоским
Перенесемся в двадцать первый век. Каждый плоский дизайнер знает, что его современная история начинается с того дня, когда две противоборствующие компании — Microsoft и Apple — начали свою дизайнерскую битву. А именно, когда iPod наводнил рынок, Microsoft создала медиаплеер Zune в 2006 году. Дисплей этого плеера был ориентирован на типографику, у него было большое меню, написанное строчными буквами, а его фоновые изображения менялись при воспроизведении новой песни.
После этого последовательность событий была естественной — дизайн был распространен на Windows Phone 7 в 2010 году (и назывался «Метро»), и был настолько влиятельным, что даже Apple заменила свой скевоморфный дизайн и стала полностью плоской в iOS7 . Разговор об изменении формы.
Одно из последних преобразований включает ребрендинг Google и введение их плоского логотипа 2015 года. Однако их услуги были далеки от плоских, и теперь они предписывают материальный дизайн.
Материальный дизайн (от Google)Несмотря на то, что он отличается от плоского, очевидно, что в процессе материализации использовались некоторые принципы.
Это изменение также было вызвано другой важной вещью, поразившей мир веб-дизайна: адаптивный дизайн , в котором основное внимание уделялось функциональности веб-сайтов на разных устройствах. Яркие и насыщенные дизайны загружались медленнее на небольших мобильных устройствах, особенно при плохом подключении к Интернету, поэтому дизайнерам нужно было все упростить.
Будущее плоского дизайна
Несмотря на то, что в прошлом плоский дизайн подвергался критике за то, что он создавался для дизайнеров (а не пользователей) или за то, что ему не хватало искусства и истинных особенностей дизайна, очевидно, что он сохранялся на протяжении многих лет, в то время как его потомство — материальный дизайн — может стать следующей большой вещью в веб-дизайне.
Как вы думаете, долго ли продержится плоский дизайн и не забудется ли он в этом году? Каковы ваши прогнозы? Расскажите нам в комментариях ниже.
Понравилась эта статья о плоском дизайне? Подробнее о дизайне:
- Ошибки в веб-дизайне
- Тенденции и прогнозы веб-дизайна на 2016 год
- Великолепный мир иллюстратора Райана Патнэма
Нарисованные от руки эскизы и векторы в плоском стиле
a00002 Aaron is02Aaron White
Ветеран графического дизайна с 15-летним стажем, живет в Дентоне, штат Техас.
Ему очень нравятся дорожные путешествия, камеры и сложные дизайнерские концепции.
Использование правильного стиля или языка для вашей иллюстрации является ключевым. Узнайте, как различия между схематичными, нарисованными от руки стилями и стилями на основе векторов могут формировать ваше сообщение.
Изображение на обложке через cosmaa
Иллюстративный дизайн намного старше графического дизайна. Действительно, узоры на древних сосудах старше Пола Рэнда примерно на 30 000 лет. Теперь, когда у нас есть компьютеры, помогающие нам создавать векторы и добиваться идеальной геометрии, мы можем использовать различные стили для придания формы нашим проектам. Варианты почти бесконечны, поэтому мы должны рассмотреть, что сообщают эти стили.
Можно сравнить два самодостаточных стиля: рисованную иллюстрацию и более плоскую векторную иллюстрацию. Мы рассмотрим, как они представляют определенные типы дизайна, а также могут усилить сообщение либо с помощью игривой, нацарапанной эстетики «сделай сам», либо с помощью простого и застегнутого на все пуговицы подхода.
Затем мы узнаем, как смешивание двух стилей может поддерживать друг друга.
Векторная иллюстрация
В векторной иллюстрации формы и символы дизайна представляют собой упрощенные представления, такие как значки, с использованием компьютера для создания четких краев и точных кривых. Возможно, вы помните революцию в плоском дизайне, произошедшую несколько лет назад, когда многие производители телефонов и компьютеров перешли на плоский стиль пользовательского интерфейса, а не на скевоморфный, и дизайнеры приложений последовали их примеру.
Посмотреть этот пост в Instagram
Пост, опубликованный Кемалем Санли (@studiokemalsanli)
Эта идеология переносится на иллюстрацию, где мы разделяем элементы на тщательно продуманные базовые формы. Цвета могут стать более важными при использовании плоского стиля.
UX-дизайн основан на этом взаимодействии, на упрощении информации, чтобы она была суперпонятной и универсальной.
Чтобы превратить плоские векторы в дизайн, дизайнеры наслаивают геометрические фигуры, которые могут варьироваться от простых до очень сложных. Это очень современный стиль, уходящий корнями в те же принципы деконструктивизма, что и абстрактная геометрия.
Изображение через Bloomicon
Для прямого общения, например, с дизайном интерфейса или иллюстрацией учебного дизайна, плоский стиль поможет вам общаться с большим количеством людей с большей ясностью. По мере того, как мы начинаем видеть иконографические шаблоны в устройствах, которые используем, и все больше отраслей используют эти шаблоны, развивается язык.
Плоский векторный стиль поможет вашему сообщению быть деловым, с четкой темой и простой цветовой палитрой. Вы также можете добавить тонкие, но четкие тени и блики, чтобы добавить немного глубины. При использовании с более игривыми изображениями вы можете создавать более живые значки.
Нарисованный от руки стиль
Нарисованный от руки стиль — это другой конец иллюстрации. Независимо от того, нарисовано ли оно от руки и использовано в пиксельном дизайне, или сделано на компьютере с помощью векторов, оно передает более игривую эстетику или эстетику «сделай сам».
Рисунок (извините) от увлечения приключениями на свежем воздухе, Walking Designs создает ряд иллюстративных брендов для клиентов, начиная от закусок и заканчивая курортами. Их лента в Instagram — отличный способ увидеть процесс создания набросков идей на различных носителях с помощью различных ручек и карандашей, прежде чем создавать более совершенные иллюстрации. Круто то, что вы можете видеть, насколько рафинированные или нерафинированные идеи переходят в готовый продукт.
Посмотреть этот пост в Instagram
Пост, которым поделился Уокер | Ходячие конструкции (@walking_designs)
В этой обстановке эскизный стиль поддерживает приземленную атмосферу «сделай сам», как почерк мамы на пакете с домашними закусками.
Мы можем видеть рисованный стиль, используемый в рекламе. Это может быть дикая типографика, показывающая нацарапанное сообщение, или динамические графические элементы, добавляющие движения и характера.
Посмотреть этот пост в Instagram
Пост, которым поделился жизненный совет для «креативщиков» (@thingsarewhatyoumakeofthem)
На дизайне обложки этой книги, созданном Адамом Дж. Курцем, мы можем видеть написанное от руки название, подкрепленное рваной бумагой, чтобы предложить веселое, но измученное состояние. Это соответствует и поддерживает тему, поскольку творческая карьера может находиться в различных состояниях игривого беспорядка (или бедствия).
Посмотреть этот пост в Instagram
Пост, которым поделился пользователь ???? (@biffstudio)
В редакционном дизайне печатных и онлайн-журналов добавление нарисованных от руки графических элементов было популярно в разные периоды дизайна, но сейчас особенно благоприятное время для «прославленных дудлов».
Такие художники, как Бифф , превратили дудл в уважаемую в отрасли дизайнерскую работу.
Сочетание плоского рисунка с нарисованной от руки иллюстрацией
Если плоская иллюстрация похожа на застегнутого на все пуговицы современного профессионала, нарисованный от руки стиль может добавить немного бликов и вывести плоский стиль из своей раковины. Когда они собираются вместе, это более динамичная пара, которая может пересекать жанры, чтобы передавать больше идей.
https://www.instagram.com/p/BMhdiTiDUte/
Иллюстратор Дэниел Кларк добавляет структурные формы из архитектуры к своим геометрическим, плавным формам, смешивая рисунок и живопись с компьютерным дизайном в журналах и афишах мероприятий.
Посмотреть этот пост в Instagram
Пост, которым поделился Антонио Уве (@mr_uve)
Добавление текстур или набросков к определенным элементам иллюстрации придаст ей энергию или действие, которые могут поднять ее.