что такое флэт иллюстрация
Что такое flat design
Куда исчезли реалистичные иконки и кнопки на сайтах? Оказывается, всему виной мода на flat design.
Flat design: почему дизайн стал плоским
Flat design или плоский дизайн — это тенденция в дизайне, когда объекты изображаются без передачи объёма. Направление обрело популярность
в 2012–2014 годах и остаётся актуальным по сей день. В его основе — чистые, лаконичные, схематичные изображения без лишней детализации.
Пишущий дизайнер. Пришла в профессию, получив второе образование, ранее занималась когнитивными исследованиями, SMM и копирайтингом. Пишет о визуальных трендах, делится наблюдениями из отрасли и техническими лайфхаками.
Почему появился flat design
Плоский дизайн — противоположность скевоморфизму. Плоским иконкам и кнопкам предшествовали изображения, показывающие объекты реалистично: с демонстрацией деталей, светотени и бликов.
На заре компьютерной эры дизайнеры стремились поразить людей красотой и техническими возможностями создания реалистичной графики, привлечь этим новых пользователей. Сейчас красивыми картинками уже никого не удивить, а цифровые сервисы мы используем для покупок, общения, поиска информации — удобство, простота и минимализм в дизайне стали важнее эстетики.
Принципы плоского дизайна
В отличие от скевоморфного дизайна, плоская графика имеет несколько особенностей:
Области применения
Чаще всего термин flat design используют в контексте дизайна интерфейсов. Именно развитие цифровых технологий создало предпосылки для появления тренда на плоскую графику. Пользователям гаджетов потребовались простые и понятные интерфейсы, которые быстро загружаются и легко адаптируются под разные экраны.
Однако с ростом популярности плоских интерфейсов этот тренд перешёл и в дизайн логотипов. Объёмные фирменные знаки сейчас используют гораздо реже, и многие из них кажутся старомодными — большинство крупных компаний перешли на плоский дизайн. Вспомним хотя бы редизайн Google в 2013 году.
Сейчас трудно вспомнить логотип известной компании, который оставался бы скевоморфным. Мы всё больше взаимодействуем с брендами через сайты и приложения, где логотипы становятся частью интерфейса. Они тоже должны быстро загружаться и хорошо смотреться в любом масштабе, поэтому flat design более актуален.
Термин flat также используется и для иллюстрации. Двухмерные картинки часто размещают на сайтах, чтобы оживить простой функциональный дизайн. Преимущества у них всё те же: быстрая загрузка и хорошая узнаваемость. А ещё 2D-графика сравнительно недорогая в отрисовке: такие иллюстрации для компаний выгоднее, чем профессиональная фотосъёмка или 3D-визуализация.
Тренд на flat design появился для улучшения юзабилити пользовательских интерфейсов. Но современный человек всё больше времени проводит с гаджетами. Поэтому логотипы и иллюстрации стали частью цифровой среды, и зачастую они тоже плоские. В современном веб-дизайне не так важны украшения, как скорость взаимодействия и удобство интерфейса.
Теперь дизайнеры интерфейсов занимаются не отрисовкой красивых картинок, а изучением поведения людей на сайтах, чтобы создавать удобные сервисы. Хотите заниматься улучшением пользовательского опыта? Записывайтесь на курс UX-дизайна.
10 главных приёмов по созданию графики в плоском стиле
В этой статье мы поговорим о плоском дизайне. Вы наверняка уже слышали о нём как об одном из главных трендов в дизайне в течение нескольких лет. Давайте получше узнаем об этом тренде – что это, откуда пришло и что нужно для создания аккуратного, яркого и адаптируемого плоского дизайна!
Вы можете найти множество отличных примеров разметки веб-страниц в плоском стиле, плоских иконок, шаблонов и других материалов на Envato Market. Взгляните на них, чтобы иметь чёткое представление о том, как выглядит современный плоский дизайн!
1. Что такое плоский дизайн?
Плоский дизайн – это минималистичный модный стиль пользовательского интерфейса и графического дизайна, в котором используется минимум элементов и исключены сложные цвета, градиенты, блики и другие сияющие, текстурные, теневые эффекты.
Плоский дизайн прямо противоположен скевоморфизму и насыщенному дизайну. Однако, могу отметить, что плоский дизайн не такой простой, каким может показаться. В нём могут присутствовать некоторые признаки скевоморфизма, но мы поговорим об этом позже.
В целом, плоский дизайн помогает сконцентрироваться на содержании без отвлечения зрительными эффектами. Он подчёркивает простоту элементов и в то же время делает интерфейс более оперативным, быстрым и простым в использовании.
2. Немного истории
Плоский дизайн известен тем, что использовался задолго до того, как стал большим трендом в дизайнерском сообществе. Он был широко распространён в 80-е благодаря технологиям, которые не могли создавать и поддерживать сложные эффекты, текстуры и формы. Однако, даже в те годы дизайн получил свои первые простейшие скеоморфные характерные черты в попытках выглядеть более приближенным к реальности.
Плоский дизайн, каким мы видим его сейчас, начал набирать популярность после того, как Microsoft начал выпускать продукты в так называемом стиле Metro. Metro это язык конструирования пользовательского интерфейса, созданный Microsoft, и он простой, аккуратный и современный.
В 2010 году Microsoft выпустил Windows Phone 7, в котором использовался простой пользовательский интерфейс в плоском стиле с острыми краями и понятной графикой, унаследованной от одного из ранних Microsoft (Zune). Позже, вдохновившись успехом, Microsoft выпустил Windows 8 OS, основанную на той же плоской графике в стиле Metro.
Пример дизайна Microsoft Metro в Windows 8
Наконец, плоский дизайн достиг пика популярности в 2013 году, когда Apple представили iOS 7, презентовав его новый дизайн и абсолютно изменив все предыдущие элементы пользовательского интерфейса, включая иконки и шрифты. Они создали очень подробные руководства по дизайну пользовательского интерфейса и иконок.
Apple iOS 7 с иконками в плоском стиле
Вскоре после этого Google также поменял стиль своих веб-страниц и приложений на плоский дизайн, назвав его материальным дизайном. У Google есть целый раздел, посвящённый материальному дизайну, включая его цели, принципы и отличные руководства по созданию материальных иконок, пользовательского интерфейса, макетов страниц и т.д.
Некоторые примеры раздела материального дизайна Google
С тех пор плоский дизайн стал главным направлением в дизайне в течение последних нескольких лет, сделав вебсайты, приложения и элементы дизайна элегантными, аккуратными и стильными.
Подводя итог, можно сказать о трёх глобальных примерах плоского дизайна, которые можно упомянуть в мире современного медиа:
3. Придерживаемся простоты
Плоский дизайн очевидно назван плоским из-за отсутствия трёхмерных элементов и эффектов, таких как градиенты, текстуры, блики, излишние оттенки и тени. Плоский стиль – это двухмерный способ визуализации объекта. Помимо этого, сложные объекты очень упрощены и стилизованы. Иногда мы изображаем только силуэты или контуры, которые делают объект узнаваемым без второстепенных деталей.
Плоские иконки
В настоящее время минимализм – это мировой тренд, и такая простота форм и использование острых краёв подчёркивает аккуратный и визуально приятный дизайн. Простые формы более доступные и лёгкие в восприятии. Они действительно делают дизайн минималистичным и аккуратным, избегая перегруженного и беспорядочного вида.
4. Создаём идеальность
Когда речь заходит о плоских иконках и элементах пользовательского интерфейса, необходимо сделать их как можно более очерченными, точными и идеальными в пиксельном отношении. Это важно и для растровой, и для векторной графики.
В этом случае всё понятно в Adobe Photoshop, т.к. он работает с растровой графикой, которая очевидно пиксельная.
Adobe Illustrator – векторная графическая программа, которая работает с линиями и кривыми, называемыми векторами, которые рисуются математически. Какое-то время назад Adobe Illustrator не был особенно удобен в работе с пиксельной графикой. Хорошая новость – последние версии Adobe Illustrator стали отличным инструментом для дизайнеров, работающих с пиксельной графикой.
Помимо этого, векторная графика изначально подразумевает работу с плоскими, простыми фигурами с чёткими цветами и сетками. Adobe Illustrator очень легко настраивается и позволяет вам изменять Единицы измерения, Направляющие линии и Сетки под ваши нужды, выравнивать объекты и использовать различные виды Чувствительности. Всё это позволяет гораздо легче создавать пиксельный дизайн, который остаётся чётким и аккуратным на любом мониторе. Если вам нужна графика один в один строго до пикселя, взгляните на это отличное руководство по созданию идеальных пиксельных работ в Adobe Illustrator.
Как создать идеальную пиксельную работу в Adobe Illustrator
5. Отличительные цвета и тренды
Одной из самых специфичных черт плоского дизайна, помимо фигур, является использование цвета. Большинство цветовых палитр для плоских элементов состоят из нескольких базовых цветов. Яркие, глубокие, интенсивные, насыщенные цвета присущи плоскому дизайну.
Цветовая схема в плоском дизайне не ограничена несколькими определёнными цветами. Она включает в себя несколько разных оттенков и полутонов и зависит от того, что вы изображаете – будь то яркие конфетные иконки или объекты в ретро стиле в мягкой цветовой палитре.
Картинка с ретро-ярмаркой в плоском стиле
Если вы – опытный дизайнер и обладаете чувством цвета, можете поэкспериментировать с панелью Цвета в Photoshop или Illustrator, выбирая цвета по догадке. Однако, для этого процесса нужна интуиция, практика и хорошие навыки. Есть несколько инструментов, которые могут пригодиться для создания нужной палитры.
Некоторые из них подходят для всех видов дизайна и иллюстраций, не только для плоского дизайна. Это такие сервисы как Adobe Color CC, ранее известный как Kuler. Теперь вы можете войти в него через сайт или напрямую из продуктов Adobe. Это очень гибкий инструмент, который позволит вам создать свою палитру или использовать широкий выбор созданных пользователями палитр из библиотеки.
Вы также можете найти огромное разнообразие цветовых образцов и палитр в руководстве к материальному дизайну Google.
6. Длинные тени
Как упоминалось выше, плоский дизайн прост и всеобъемлющ, поэтому в нём не приветствуется использование любого вида эффектов. Однако, есть один эффект, вышедший из плоского дизайна. Он стал трендом и одним из отличительных признаков.
Мы говорим об эффекте длинной тени. У неё есть некоторые типичные характеристики, делающие этот эффект узнаваемым. Это угол 45 градусов и большой размер (тень должна быть вдвое больше объекта). В результате длинные тени добавляют существенной глубины плоскому дизайну.
Такой эффект делает объект более трёхмерным и в то же время сохраняющим плоский вид.
7. Работаем со штрихами
Типография играет большую роль в плоском дизайне. Очень часто текст становится главным элементом композиции, в то время как плоские элементы не отвлекают зрителя.
В большинстве плоских дизайнов используется надпись в верхнем регистре и контрастные цвета, делая текст более удобочитаемым.
Простая и элегантная многоцелевая тема для HTML
С осторожностью выбирайте шрифт. Он должен подчёркивать всю картинку, соответствовать ей и не выглядеть посторонним объектом. Это не значит, что вы не можете использовать шрифты Serif или какие-то сложные рукописные шрифты с завитушками и дополнительными элементами. Просто придерживайтесь минималистичного вида и сохраняйте баланс. В большинстве успешных плоских дизайнов часто используются шрифты Sans Serif, т.к. у них прямая кромка и они строгие, как и все элементы иллюстраций в плоском стиле.
8. Преимущества и недостатки плоского стиля
Хоть плоский стиль и стал таким популярным из-за многочисленных преимуществ, у него всё ещё есть недостатки, с которыми сталкиваются дизайнеры, работающие в этом стиле. Давайте перечислим преимущества и недостатки плоского дизайна.
Преимущества
Тренд
Плоский дизайн развился в тренд, привлекая много позитивного внимания среди дизайнеров и веб-дизайнеров, и не похоже, что он собирается сдавать позиции. Наоборот, он распространяется всё больше и больше, принимая новые формы и признаки, постепенно трансформируясь в что-то более креативное.
Простота
Плоский дизайн прост, минималистичен и аккуратен. Когда дело касается сайтов, плоский дизайн действительно помогает вам сосредоточиться больше на содержании, а не на отвлекающих визуальных эффектах. Он также хорошо подходит для интерфейсов мобильных приложений: понятный дизайн с большими плоскими кнопками делает его идеальным для работы на мобильных устройствах.
Яркость
Использование цвета – ещё один большой плюс плоского дизайна. Яркие, глубокие цвета выглядят привлекательно и аккуратно, а недостаток градиентов делает дизайн современным. Более того, такие чистые цвета создают позитив и вовлечение, создавая нужное настроение.
Недостатки
Есть много других преимуществ плоского дизайна, но никакой дизайн не совершенен и мы не можем идеализировать его. Есть недостатки, которые нужно отметить:
Негибкость
Иногда недостаток дополнительных деталей или визуальных эффектов вызывает сложность в создании удобного и дружественного интерфейса, что делает весь дизайн негибким. Не всем пользователям удобен такой дизайн, т.к. могут возникнуть сложности с нахождением кликабельных элементов на странице или элементов, на которые нужно нажать в мобильном приложении по причине их неинтерактивности.
Типографические проблемы
Как упоминалось ранее, не каждый шрифт подходит к плоскому дизайну. Иногда такая картинка с яркими шрифтами с прямой кромкой выглядит очень сбалансированной и стильной. Однако, неправильно выбранная типография может разрушить созданный дизайн. Вам действительно нужно чувствовать, какие шрифты подходят для плоского дизайна, а какие – нет. Из-за слабых типографических навыков сложно выбрать подходящий шрифт.
Слабая графика
Из-за ограничений в использовании эффектов, цветов и шрифтов плоский дизайн может выглядеть слишком просто и невзрачно. Его минимализм также может стать большим недостатком – все эти дизайны в конечном итоге становятся очень похожими. Довольно сложно сделать так, чтобы ваши иконки или веб-страницы отличались по дизайну от чьих-то ещё, т.к. мы используем те же упрощённые фигуры, ограниченные цветовые палитры и похожие шрифты. В результате с течением времени плоский дизайн может стать скучным.
9. Будущие тренды в плоском дизайне
Плоский дизайн нельзя назвать полностью сформированным и развитым. Возможно, из-за недостатков, описанных выше, он трансформируется и развивается, приобретая новые черты и визуальные доработки.
Если вы присмотритесь к последним примерам плоского дизайна, то заметите, что он на самом деле имеет отступления от строгих правил, и начинают добавляться лёгкие эффекты, такие как градиенты (неконтрастные), тени, блики и другие визуальные улучшения.
Набор векторных плоских баннеров на тему походов
Происходит то, что эти украшения действительно придают дизайну глубину, не делая его перегруженным деталями, как иногда случается со скеоморфными картинками. Эти незначительные улучшения делают плоский дизайн более адаптивным и удобным, а также привносят свежие идеи, делая его более разнообразным.
В результате плоский дизайн не теряет своих характеристик, наоборот, он становится более интересным и гибким, что делает его лучше.
10. Как начать?
Итак, вы желаете погрузиться в плоский дизайн и жаждете начать создавать плоские объекты! Не могу не согласиться, что этот процесс захватывающий и сложный, вне зависимости от того, что вы создаёте – отдельные объекты или полноценную плоскую картину, включающую группы элементов.
Если хотите попытаться создать плоские иллюстрации, я бы рекомендовала начать с малого набора иконок в одной тематике. Когда почувствуете себя увереннее в этой технике, перейдите к более сложной иллюстрации или другой сфере дизайна, применив свои знания плоской графики в создании плоских веб-шаблонов или баннеров.
Вот некоторые руководства, которые могут быть полезны вам.
Если вы работаете в Adobe Illustrator, взгляните на эти руководства по созданию плоских иконок:
Попытайтесь создать больше деталей, таких как градиенты, блики и текстуры, добавив глубины и реализма:
Попытайтесь изобразить больше плоских объектов, чтобы создать плоскую сцену:
Попробуйте создать более детальный городской пейзаж:
Может, вы работаете в Affinity Designer? Вот несколько полезных руководств и для вас! Начните с создания одной простой иконки:
Затем создайте целый набор иконок:
Двигайтесь дальше и создайте постер с элементами в плоском стиле!
Как я говорила, растровая графика основана на пикселях, поэтому отлично подходит для дизайна иконок. Если вам удобнее работать в Adobe Photoshop, спокойно используйте его и для создания плоского дизайна!
Наконец, если хотите улучшить свои навыки и добавить более сложные детали и эффекты своему дизайну, посмотрите этот видеокурс по созданию плоских элементов для рабочей области в рекламах с детальным описанием и пошаговым процессом рисования каждого объекта с самого начала до конца.
Создаём плоские элементы для рабочей области в рекламах
Давайте подведём итоги
Мы раскрыли некоторые факты из истории плоского дизайна и поговорили о цветах, формах и типографии. Мы рассмотрели плоский дизайн с разных сторон, обсудили его преимущества и недостатки, а также перечислили некоторые основные моменты, необходимые в создании хорошего дизайна.
Надеюсь, вы почерпнули новую информацию из этой статьи или хотя бы посчитали её интересной и вдохновляющей. Вам действительно стоит попробовать себя в создании картинки в плоском стиле, если вы ещё не пробовали.
В целом, что ещё можно отметить, говоря о плоском дизайне?
Если вам действительно нравится плоский дизайн, его прямые формы, яркие цвета, чёткие шрифты и в целом его аккуратный и минималистичный вид, вперёд!
Он популярен, но, как и в других видах графических стилей, не стоит ограничивать свою креативность одним и тем же набором техник и визуальных элементов. Текущие тренды не означают, что вы не можете выбрать любой другой стиль дизайна для своего проекта. Скевоморфизм выглядит сложным, но нет причин перестать рисовать реалистичные объекты с набором мелких деталей и текстур. Просто помните, что ваш дизайн должен подходить определённому проекту, отражая ощущения и вид, сохраняя удобство применения и функции.