От автора: приветствую вас, друзья! Сегодня мы поговорим о том, что такое flat design, или плоский дизайн сайтов. Термин этот уже давно покорил сердца веб-дизайнеров и уверенно держится в тренде до сих пор. Крупнейшие компании (Google, YouTube, Microsoft, Apple Inc. и т. д.) используют его для оформления своих сайтов и приложений. Вы все еще не в секте сторонников плоского дизайна сайта? Тогда мы идем к вам!
Как вы думаете, в чем причина такой бешеной популярности flat дизайна? Отвечу вам в двух словах: он реально работает! В данной статье я поясню вам, что это за стиль, расскажу о его плюсах и минусах, покажу вам несколько отличных примеров flat дизайна сайтов, которые наверняка вдохновят вас на подвиги. Итак, поехали!
Все начиналось со скевоморфизма
Для тех, кто не в курсе, скевоморфизм - это не ругательное слово, а еще один стиль веб-дизайна. Flat design часто представляют в качестве противоположности скевоморфизму, что, на мой взгляд, не совсем правильно. Это, скорее, его упрощение, чем антагонизм.
До 2010-го года скевоморфизм был доминирующим стилем в дизайне интерфейсов. Он отображал элементы такими, какими они выглядели в реальности, активно используя текстуры, тени, отражения и прочие атрибуты трехмерного изображения. Особенно старалась в этом плане компания Apple, которая тщательно срисовывала большинство софтверных объектов с реально существующих предметов.
Вскоре псевдовыпуклые иконки перестали привлекать большинство пользователей и веб-разработчиков, что положило начало эре flat дизайна сайтов. Мир пришел к выводу, что все декоративные элементы нужно убрать, а оставить лишь то, с чем удобно взаимодействовать конечному пользователю.
«Лучший дизайн - это как можно меньше дизайна»
Как в воду смотрел Дитер Рамс - известный промышленный дизайнер, выступающий против навязчивого дизайна, анимационных эффектов и т. п. В июне 2013-го года Apple Inc. представила революционную iOS 7, которая получила все атрибуты в стиле flat веб-дизайна. Однако, плоскость далеко не сразу «победила» реализм и объем.
Пользователи долго не могли забыть магию Стива Джобса и иконки, «которые хочется лизнуть». Многие даже распрощались с «убогой семеркой» и перешли на «лучезарный Android». Подливало масло в огонь и большое количество багов, присутствовавших в iOS 7, и белесый, полупрозрачный дизайн с параллаксом и анимацией в виде «сопли» при открытии приложений.
Те же, кто смирился с неизбежной реальностью и остался с «яблочной» операционкой, в конце концов, осознали, что плоский веб-дизайн не только интересно смотрится, но и привносит во все приложения порядок и единый визуальный стиль.
Плюсы и минусы плоского дизайна
К преимуществам использования этого стиля можно отнести:
ясность композиции и лаконичность визуальных средств. Отзывчивый интерфейс в стиле «ничего лишнего», благодаря чему пользователи быстрее осознают, что до них хотели донести;
акцент на хорошей типографике. Контент на первом месте, что чрезвычайно важно в современном изобилии информации;
меньший размер веб-страниц и ускорение работы сайта за счет минимального количества визуальных эффектов. Особенно это полезно при создании адаптивных версий, ведь, чем проще формы, тем легче их отображать на небольших экранах мобильных устройств.
Есть у flat веб-дизайна и недостатки:
ограничение фантазии веб-дизайнера упрощенными цветами, типографикой, иконографикой. Поэтому риск создать скучный и невыразительный сайт выше;
отсутствие трёхмерности и теней иногда не позволяет понять, кликабельный элемент или нет;
отсутствие конкретных закрепленных правил.
Если вы приняли решение использовать этот стиль на вашем сайте, поздравляю - это свидетельствует о том, что вы заботитесь об удобстве пользователей и идете в ногу со временем. Если вы только начинаете карьеру веб-дизайнера и не знаете, как правильно использовать плоский дизайн, чтобы ваш сайт выглядел актуальным, но не примитивным, воспользуйтесь следующими советами:
Забудьте о «кирпичных стенах» и ярких фонах. В плоском веб-дизайне принято использовать простые, гладкие, неяркие изображения для фона.
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого роста с нуля в сайтостроении
Никаких градиентов, объемных иконок, анимированных переходов и прочих спецэффектов. Все это утяжелит ваш сайт и привнесет суету - оно вам нужно?
Используйте плоские иконки с четкими контурами, добавляющие удобства и функциональности.
Используйте яркую, сочную цветовую палитру. Сейчас в тренде тона солнечного спектра: светлые желтые, розовые и зеленые. Главное, не переборщите - цветов на странице должно быть не больше 3-х.
Сосредоточьтесь на типографике. В плоском дизайне предпочтение отдается ярким, оригинальным надписям, которые создают призыв к действию и обеспечивают удобную навигацию по сайту. Здесь тоже важно не перестараться. Забудьте о «рукописных» и прочих вычурных шрифтах. Для выделения заголовков можно использовать заглавные буквы.
Не стесняйтесь использовать разнообразные геометрические формы. Квадраты, круги, линии и прочие фигуры помогут не только улучшить структуру веб-сайта, но и создать четкую иерархию, а также разделить контент. Пользователи это оценят, уж поверьте.
Максимально упростите навигационное меню и прочие элементы сайта. В качестве кнопок используйте обычные прямоугольники без теней и подсветки.
Таким образом, за прошедшие годы сайты с плоским дизайном стали стандартом, принятым абсолютно всеми. Посмотрите на большинство современных сайтов - они плоские «до мозга костей».
Напоследок, приведу обещанные примеры удачного flat дизайна, которые могут послужить вам вдохновением для создания собственных шедевров.
1. Сайт http://dunked.com.
Популярная площадка для публикации портфолио, ориентированная на представителей различных творческих профессий. Минималистический плоский веб-дизайн вызывает ощущение надежного и понятного сервиса, не отвлекающего лишними спецэффектами.
2. Интерфейс Microsoft.
Microsoft - это одна из компаний, которая сделала flat style таким популярным. Может, помните плеер Zune - конкурента iPod, который Microsoft выпустила в середине 2000-х? Так вот, дизайн этого продукта резко отличался от большинства приложений того времени, во многом благодаря крупной типографике, плоским иконкам, большим и ярким формам.
Этот интерфейс, который назвали Metro, позже перекочевал на персональные компьютеры (ОС Windows 8), интерфейс Xbox 360 и другие программные продукты Mircosoft.
3. Сайт http://www.vox.com.
Ну что, вдохновились? Долой псевдореалистичную 3D эстетику!
На этом все. Подписывайтесь, делитесь нашими статьями с друзьями в социальных сетях. Высоких вам конверсий!
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого роста с нуля в сайтостроении
В этой статье я расскажу вам о flat-дизайне. Вы наверняка уже что-то слышали об этом, так как flat за последние несколько лет стал одним из ведущих трендов в вебе.
Сегодня мы разберемся, что такое flat-дизайн, как он возники что вам нужно, чтобы создать чистый, яркий и отзывчивый дизайн.
Вы можете найти хорошие примеры flat-дизайна на сайте http://market.envato.com/ . Там есть множество макетов, иконок и шаблонов, которые дадут вам четкое понимание о том, как выглядит современный дизайн.
1. Что такой flat-дизайн?
Flat-дизайн — современный стиль пользовательского интерфейса, а также графического дизайна, отличающийся минималистичностью. Для flat-дизайна характерны использование минимума элементов и отсутствие различных эффектов текстуры, тени и света, к примеру: смешанных цветов, градиентов, бликов и так далее.
Флэт противопоставляется скевоморфизму ( скевоморфизм - это принцип дизайна, когда какому-то одному продукту придаётся облик другого, т.е. когда различные элементы интерфейса копируются с реальных объектов — прим.перевод.) , а также насыщенному дизайну.Однако,стоит сказать, что flat-дизайн вовсе не такой простой, каким он кажется на первый взгляд. Он включает в себя некоторые особенности скевоморфизма, но об этом мы поговорим чуть позже.
В общем, флэт помогает сосредоточить пользователя на контенте, без отвлечения на визуальные эффекты. Flat-дизайн подчеркивает простоту элементов, в то же время делая интерфейс более отзывчивым, приятным и легким в использовании.
2. Немного истории
Flat-дизайн, как известно, существовал задолго до того момента, когда он стал мировым трендом в вебе. Flat-дизайн был довольно популярен в 80-е годы в связи с тем, что техника в то время еще не была настолько развита, чтобы поддерживать сложные эффекты, текстуры и тени. Однако, уже тогда дизайн стремился к скефоморфизму, стараясь сделать элементы интерфейса как можно более реалистичными.
Flat-дизайн, в том облике, в котором он мы видим его сейчас, стал набирать популярность после того, как Microsoft стала выпускать продукцию в так называемом metro-стиле. Metro — UI-дизайн от Microsoft, поражающий своей стильностью и простотой.
В 2010 году Microsoft выпустила Windows Phone 7, который использовал flat-дизайн с острыми краями и простой графикой, унаследованной у одного из ранних продуктов Microsoft (Zune) . Позже, вдохновленная успехом, Microsoft выпустила операционную систему Windows 8, основанную на том же самом плоском стиле Metro .
В конце концов, flat-дизайн достиг своего пика популярности в 2013 году, когда Apple выпустила iOS 7, демонстрирующий принципиально новый дизайн с полностью измененными элементами пользовательского интерфейса, включая иконки и шрифты. Фирма Apple создала наглядные принципы UI- и -иконочного дизайна .
Вскоре после этого, Google тоже начал использовать стиль flat в своих приложениях и веб-страницах, назвав его Material Design . У Google даже есть целый раздел, посвященный этому стилю, включающий описание целей веб-дизайна, его принципов и указания по созданию различных объектов дизайна: иконок, макетов и так далее.
С этого времени флэт стал ключевым направлением в веб-дизайне, сделав сайты, приложения и элементы интерфейса элегантными, чистыми и стильными.
Таким образом, есть три глобальных примера флэт-дизайна от фирм, без которых сложно представить современный мир технологий:
Microsoft’s Metro design
Apple iOS 7 design
Google’s Material Design
3. Помните о чистоте
Flat-дизайн, по-видимому, назван “плоским” из-за отсутствия трехмерных элементов и реалистичных эффектов, таких как: градиенты, текстуры, блики, полутона, тени. Запомните, стиль флэт — это двухмерный (плоский) способ изображения объектов.
Более того, в flat-дизайне предметы изображаются очень упрощенно и стилизованно.
А иногда даже используется просто силуэт или контуры объекта, т.е. ровно столько, чтобы сделать объект узнаваемым, но не перегружать его незначительными деталями.
Минимализм в наши дни стал мировым трендом: простота форм и использование острых краев создает чистый и приятный глазу дизайн. Простые формы более понятны и легки для восприятия. Это делает дизайн минималистичным, чистым, не давая ему приобрести загруженный, беспорядочный вид.
4. Доводите до совершенства
Знайте, когда дело доходит до создания flat-иконок и UI-элементов, вы должны заставить их выглядеть хрустящими, аккуратными и идеальными до пикселя, т.е. настолько, насколько это возможно. Причем, это относится и к растровой, и к векторной графике.
Спрограммой Adobe Photoshop здесь все ясно: она работает с растровой графикой, которая основана на пикселях.
Что касается программы Adobe Illustrator, то она использует векторную графику, состоящую из кривых и линий, называемых векторами, которые задаются математическими формулами.
Когда-то Adobe Illustrator не был особо удобной программой для создания идеальной до пикселя графики. Хорошая новость в том, что последние версии Иллюстратора стали отличным инструментом для создания хорошей графики.
Должна сказать, что векторная графика в основном подразумевает работу с простыми, плоскими формами, чистыми цветами и сетками.Adobe Illustrator очень гибок в настройках и позволяет тебе адаптировать сетку к своим нуждам, выравнивать объекты и использовать различные типы снэппинга. Благодаря этому процесс создания совершенного дизайна, который будет чисто и стильно смотреться на любом дисплее, стал более легким. Если ты хочешь научиться создавать идеальную графику, то тебе стоит ознакомиться со статьей: How to create pixel-perfect artwork using Adobe Illustrator .
5. Цвет
Одна из наиболее специфичных особенностей flat-дизайна, помимо теней, это использование цвета. Большинство цветов, которые использует flat-дизайн в своих элементах состоят всего из нескольких базовых цветов.
Цвет в flat-дизайне отличается яркостью, насыщенностью, сочностью. Цветовая схема флэта не ограничивается несколькими особенными цветами.Она содержат множество оттенков, и их выбор зависит только от того, что ты изображаешь, будь то иконки сладостей или объекты в стиле ретро в утонченной ретро-палитре.
Допустим, вы дизайнер интерфейсов и хорошо разбираетесь в цветовых палитрах, вы экспериментируете с цветовой панелью в программах Photoshop и Illustartor, смешивая цвета, как заблагорассудится. Однако, этот процесс довольно сложен и требует хорошей интуиции, опыта и навыков. Здесь вы найдете некоторые инструменты, которые могут помочь вам в создании собственной цветовой палитры.
Некоторые из них подходят для всех видов дизайна и иллюстраций, а не только для flat-дизайна. К примеру, Adobe Color CC , больше известный, как Кулер. Сегодня есть доступ к нему, как через веб-сайт, так и непосредственно через продукты Adobe. Кулер — очень гибкий инструмент, который позволяет тебе или создать свою собственную цветовую палитру, или выбрать из пользовательские палитры из библиотеки.
Другой простой и удобный генератор цветовых палитр — Coolors . Просто нажмите пробел и программа сгенерирует цветовую палитру, вы можете корректировать цвета, также есть функция экспорта.
Есть еще несколько аналогичных сервисов с заказными палитрами, которые могут быть полезны. Однако, есть один инструмент, созданный специально для флэт-дизайна.FlatUIColors.com by Designmodo — сервис с набором “плоских” цветов, очень удобно для работы. Этот сайт стал очень популярным среди дизайнеров, ищущих хорошие цветовые решения для совершенного дизайна. Попробуйте!
И еще вы можете найти большее разнообразие цветов и палитр в Google’s Material Design guide .
6. Длинные тени
Как упоминалось выше, для flat-дизайна характерны простота, много свободного пространства — вот почему флэт отвергает использование любых эффектов. Однако, есть один эффект, характерный для flat-дизайна. Этот эффект стал трендом и характерной особенностью флэта.
Мы сейчас говорим о длинных тенях. У них есть некоторые типичные характеристики, делающие этот эффект узнаваемым, а именно: 45-градусный наклон и большой размер (тень может быть в несколько раз длиннее самого предмета. В результате, длинные тени придают флэту некоторый эффект глубины.
Этот эффект делает объект более трехмерным, но одновременно оставляя его в контексте flat-дизайна.
7. Работа со шрифтами
Типографика играет большую роль в flat-дизайне. Часто текст становится главным элементом композиции.
Во флэте обычно используются простые шрифтовые начертания, делающие весь дизайн в целом чистым и читабельным. Ты можешь найти множество бесплатных шрифтов в Adobe Typekit , если ты используешь продукты Adobe. На Font Squirrel вы также найдете много хороших бесплатных шрифтов. Но не забывайте читать лицензию, если вы собираетесь использовать шрифт в коммерческих целях.
Чаще всего в flat-дизайне принято использовать верхний регистр и контрастные цвета, это делает текст более разборчивым.
Используйте шрифты с осторожностью, помните, что он должен подчеркивать дизайн и соответствовать ему, а не выглядеть отдельным элементом.Это не значит, что ты не можешь использовать шрифты с засечками или рукописные сложные шрифты. Просто помни о минималистичности и держи все в балансе. Однако, флэт все-таки чаще использует шрифты без засечек, так как они выглядят более строго и аккуратно.
8. Плюсы и минусы Flat-дизайна
Несмотря на то, что flat-дизайн стал таким популярным благодаря своим многочисленным плюсам, у него все же есть и недостатки, с которыми сталкиваются дизайнеры при использовании этого стиля. Давайте рассмотрим все за и против.
Плюсы
Популярность
Флэт-дизайн превратился в тенденцию, собирая все больше позитивных отзывов\ от дизайнеров и веб-дизайнеров, и вовсе не кажется, что он теряет свои позиции. Наоборот, он распространяется все больше и больше, обретая некоторые новые формы и особенности, становясь все более креативным.
Простота
Флэт-дизайн простой, минималистичный и чистый. Флэт в вебе помогает пользователям сосредоточиться на контенте, а не отвлекаться на визуальные эффекты. Это также работает для интерфейсов мобильных приложений: чистый дизайн с большими кнопками делает использование мобильных устройств совершенным.
Яркость
Цвет — другой классный плюс в флэт-дизайне. Яркие и насыщенные цвета выглядят привлекательными и чистыми, а отсутствие градиентов делает дизайн стильным. Более того, такие чистые цвета делают его более позитивным, презентабельным, flat-дизайн создает нужное настроение.
Недостатки
У флэта есть еще множество достоинств, но никакой дизайн не идеален, и мы не можем идеализировать его. Здесь некоторые недостатки flat-дизайна, которые мы обязаны упомянуть:
Неотзывчивость
Иногда отсутствие важных деталей или визуальных эффектов делает процесс создания дружеского для пользователя интерфейса сложным, и это в целом делает весь дизайн неотзывчивым. Не всем пользователям флэт кажется комфортным, потому что может быть сложным найти элементы на веб-странице, на которые ты должен кликнуть или нажать на экране мобильного телефона, потому что они не интерактивны.
Проблемы с типографией
Как упоминалось ранее, не всякий шрифт может подойти flat-дизайну. Иногда такой насыщенный шрифт с острыми краями выглядят действительно сбалансировано и стильно. Однако, в том случае, если шрифт выбран неверно, это может разрушить весь дизайн. Ты должен действительно хорошо чувствовать какие шрифты подходят для флэта а какие нет.Недостаток опыта делают выбор шрифта очень трудным.
Слабые визуалы
Из-за ограничений в использовании эффектов, цветов и шрифтов, флэт может выглядеть слишком простым и холодным. Его минималистичность может также стать его главным недостатком —другой flat-дизайн в итоге выглядит точно так же, как и ваш. Поэтому очень сложно сделать ваши иконки или веб-страницы отличными от чужого дизайна, потому что вы используете те же самые упрощенные формы, ограниченные цветовые палитры и аналогичные шрифты. В результате, со временем flat-дизайн может стать скучным.
9. Будущие тренды flat-дизайна
Нельзя сказать, что flat-дизайн полностью сформировался и остановился в своемМожет быть, это из-за его недостатков, упомянутых выше, флэт стремится к развитию и изменению, приобретению новых особенностей и усилению визуальной выразительности.
Если ты внимательно посмотришь последний пример флэт-дизайна, ты можешь заметить что он действительно постепенно от своих строгих инструментов и начинает добавлять тонкие эффекты, такие как: градиенты, тени, освещение и другие визуальные эффекты.
Эти мелочи придают flat-дизайну некоторой глубины, при этом не перегружая деталями, как это делают в скевоморфичном дизайне.Эти незначительные улучшения делают флэт более отзывчивым и удобным, а также привносят свежий взгляд, делая флэт более гибким и универсальным.
Таким образом, флэт не теряет своих особенностей, но становится более интересным, гибким - он действительно становится лучше.
Выводы
Таким образом, мы обсудили некоторые факты из истории флэт-дизайна, и поговорили о цветах, формах и типографике. Мы рассмотрели разные точки зрения, остановились на достоинствах и недостатках флэта и узнали некоторые главные принципы создания хорошего дизайна.
Я надеюсь, что вы почерпнулидля себя новую информацию из этой статьи или хотя бы нашли ее интересной. Вы обязаны попробовать создать флэт-дизайн, если вы не делали этого прежде.
В конце концов, что еще следует упомянуть о flat-дизайне?
Если вам действительно нравится флэт с его острыми краями, сочными цветами и хрустящими шрифтами, его чистоту и минималистичность, то действуйте!
Это в тренде, но, как и со всяким другим графическим стилем, не ограничивайтесь одной техникой. Если флэт в тренде, это не значит, что в свем проекте вы не можете использовать другие стили. Скевоморфизм со своими крошечными деталями и текстурами тоже может стать хорошим решением. Главное, помните, что дизайн свой для каждого проекта, он должен выражать его дух, цель, сущность, оставаясь при этом удобным и функциональным. Вперед!
Flat дизайн (плоский дизайн) – один из основных трендов сегодня, как в сфере веб-дизайна, так и технологиях создания пользовательских интерфейсов. Из недавних примеров наиболее заметными будут: решительный шаг компании Microsoft в этом направлении, с ее Windows 8 и новый дизайн Google, с явной демонстрацией желания углубиться в минимализм.
Вот примеры элементов, определяющих .
Жизнь после Web 2.0
В виде закруглённых форм элементов со всевозможными эффектами — 3D, тени, блики и отражения, градиенты, тиснения. Словом всего, что создает глубину и объем. Большие, яркие элементы управления, глянец, применение текстур и прочие подобные способы проявления уступают дорогу простому, двумерному представлению визуальных объектов.
Float Design
Типографика в основе стиля
Заметьте, что это основа построения «плоского» сайта. Простота элементов Flat дизайна, как и сами принципы минимализма усиливают значимость типографики. Текстовым контентом возможно в принципе заменить некоторую часть тяжелой графики или изображений. Сегодня уже на многих сайтах типографика стала дизайна. Естественно, раз дизайн в стиле флэт зачастую минималистичен, то и характер шрифтов нужно согласовывать с общей схемой, стилем и композицией. Так, например часто используется верхний регистр для элементов или заголовков.
Coderwall
Читайте также: 12 основных цветов и примеры их восприятия пользователями
Цветовая палитра плоского дизайна
Flat дизайн также движется в сторону расширения цветового разнообразия . Веб-дизайнеры все больше используют палитру цветов для реализации, пожалуй, основного принципа дизайна: сайт должен отличаться от себе подобных.
Minimal Monkey
Свободное пространство, большие элементы
От начала до конца имеет минималистичную основу, а значит, перенимает и его основные принципы: крупные блоки контента, большие элементы, свободное пространство, отсутствие излишней суеты и вычурности.
Beard Design
Плоский дизайн иконок, кнопок, иллюстраций
Кнопки, иконки, значки и иллюстрации также принимают двумерный вид. Они должны соответствовать заданному стилю на всех страницах сайта, передавать настроение самого сайта и быть легки для понимания любому пользователю.
Подбор цвета для иконок, как и самих иконок – непростая задача. Можно использовать чистые цвета. Стремясь украсить дизайн, нужно подумать и о том, как сделать сайт удобным в пользовании. С одной стороны важно не нарушить стиль, а с другой – необходимо сделать иконки заметными. В иллюстрациях стремимся к минимализму, избегая столь популярных прежде 3D эффектов.
Читайте также: 20+ вдохновляющих сайтов с плоскими иллюстрациями в дизайне
Примеры шаблонов сайтов с плоским дизайном Flat UI
Примеры сайтов в стиле Flat-дизайна
Identity
83 Design Collective
Frunatic
The Umbrella Group
Slcl Foundation
My Felt
Behzad
Atlant
Simple as Milk
Weranda Family
Flat - design (плоский дизайн) - это популярный стиль в дизайне сайтов и интерфейсов, а также операционных систем, отличительной чертой которого является простота, утонченность и минимализм. Плоский дизайн стал набирать популярность в 2010 году как противоположность скевоморфизму.
Скевоморфизм — физический орнамент или элемент дизайна, который скопирован с формы другого объекта, но изготовлен из других материалов или иными методами. Примеры включают в себя керамику, украшенную имитацией заклёпок для схожести с аналогичными горшками, сделанными из металла, или компьютерный календарь, который имитирует внешний вид скрепления страниц бумажного настольного календаря (определение из Wikipedia ).
Популяризации плоского стиля в дизайне способствовал выпуск операционной системы Windows 8 от Microsoft в стиле Metro, а также iOS 7, в котором компания Apple также выбирает плоский стиль. Именно после этого и наступает настоящая эра плоского дизайна. Вскоре на Flat -design переходят и крупные поисковые сервисы и приложения - Google , Youtube , появляется множество сайтов, использующих принципы плоского стиля в своем дизайне. В последние годы дизайн в стиле flat является лидером в мировых тенденциях дизайна сайтов .
Преимущества плоского дизайна
- Практичность - использование плоского дизайна позволяет минимизировать количество стилей, скриптов и анимации, что позволяет сайту быстрее загружаться.
- Простота в адаптации - плоский дизайн достаточно просто адаптировать под различные разрешения экранов.
- Удобство использования - благодаря упрощенному стилю пользователям легче воспринимать информацию на сайте.
- Красота - внешняя непредвзятость и простые конструкции позволяют сделать акцент на дизайне, который действительно цепляет.
5 принципов плоского дизайна сайтов
Флэт дизайн совсем не скучный, как может показаться на первый взгляд. Благодаря своей чистоте и утонченности решения дизайна могут быть стильными и красивыми, без лишнего шума, что позволяет сконцентрироваться на вашем товаре либо услуге.
1 - Использование двухмерных объектов
В плоском дизайне исключается использование элементов, придающих глубину и объемность объекту: тени, градиенты, блики, текстуры, рефлексы, анимация. При изображении объекта отображаются лишь его контуры.
2 - Иконки и простые объекты
Использование плоских иконок и односложных фигур с четкими контурами и одного цвета позволяет максимально упростить дизайн и сделать его более легким. Элементы управления становятся интуитивно понятными пользователю и стимулируют к взаимодействию.
3 - Простые шрифты в стиль дизайна
Большое внимание уделяется в плоском дизайне типографике и шрифтам. Здесь не используется курсив, шрифт гармонично вписывается в дизайн сайтов не только в контенте, но и в навигации. Даже в типах шрифта для сайта приветствуется стиль минимализма.
4 - Игра цвета
Flat дизайн содержит нескольких основных цветов, которые исключают использование плавных переходов и градиентов, но могут быть яркими и контрастными по отношению друг к другу.
5 - Минимализм
Плоский дизайн предполагает применение визуализации элементов, использование всей ширины экрана и в то же время минимализацию информации.
Существует такое понятие, как почти плоский дизайн. Это одна из концепций плоского дизайна, которая заключается в использовании простых элементов и двухмерного пространства. Примером этому может быть качественное фото, которое размывается на заднем фоне или затемняется. Это позволяет создать глубину и перспективу объекта.
Примеры плоского дизайна
На просторах интернета, в том числе и в белорусском сегменте, можно встретить много примеров разработок сайтов с плоским дизайном в разных тематикам, в том числе новостные ресурсы, порталы и даже интернет-магазины.
В этой статье я расскажу вам о flat-дизайне. Вы наверняка уже что-то слышали об этом, так как flat за последние несколько лет стал одним из ведущих трендов в вебе.
Сегодня мы разберемся, что такое flat-дизайн, как он возники что вам нужно, чтобы создать чистый, яркий и отзывчивый дизайн.
Вы можете найти хорошие примеры flat-дизайна на сайте http://market.envato.com/ . Там есть множество макетов, иконок и шаблонов, которые дадут вам четкое понимание о том, как выглядит современный дизайн.
1. Что такой flat-дизайн?
Flat-дизайн — современный стиль пользовательского интерфейса, а также графического дизайна, отличающийся минималистичностью. Для flat-дизайна характерны использование минимума элементов и отсутствие различных эффектов текстуры, тени и света, к примеру: смешанных цветов, градиентов, бликов и так далее.
Флэт противопоставляется скевоморфизму ( скевоморфизм - это принцип дизайна, когда какому-то одному продукту придаётся облик другого, т.е. когда различные элементы интерфейса копируются с реальных объектов — прим.перевод.) , а также насыщенному дизайну.Однако,стоит сказать, что flat-дизайн вовсе не такой простой, каким он кажется на первый взгляд. Он включает в себя некоторые особенности скевоморфизма, но об этом мы поговорим чуть позже.
В общем, флэт помогает сосредоточить пользователя на контенте, без отвлечения на визуальные эффекты. Flat-дизайн подчеркивает простоту элементов, в то же время делая интерфейс более отзывчивым, приятным и легким в использовании.
2. Немного истории
Flat-дизайн, как известно, существовал задолго до того момента, когда он стал мировым трендом в вебе. Flat-дизайн был довольно популярен в 80-е годы в связи с тем, что техника в то время еще не была настолько развита, чтобы поддерживать сложные эффекты, текстуры и тени. Однако, уже тогда дизайн стремился к скефоморфизму, стараясь сделать элементы интерфейса как можно более реалистичными.
Flat-дизайн, в том облике, в котором он мы видим его сейчас, стал набирать популярность после того, как Microsoft стала выпускать продукцию в так называемом metro-стиле. Metro — UI-дизайн от Microsoft, поражающий своей стильностью и простотой.
В 2010 году Microsoft выпустила Windows Phone 7, который использовал flat-дизайн с острыми краями и простой графикой, унаследованной у одного из ранних продуктов Microsoft (Zune) . Позже, вдохновленная успехом, Microsoft выпустила операционную систему Windows 8, основанную на том же самом плоском стиле Metro .
В конце концов, flat-дизайн достиг своего пика популярности в 2013 году, когда Apple выпустила iOS 7, демонстрирующий принципиально новый дизайн с полностью измененными элементами пользовательского интерфейса, включая иконки и шрифты. Фирма Apple создала наглядные принципы UI- и -иконочного дизайна .
Вскоре после этого, Google тоже начал использовать стиль flat в своих приложениях и веб-страницах, назвав его Material Design . У Google даже есть целый раздел, посвященный этому стилю, включающий описание целей веб-дизайна, его принципов и указания по созданию различных объектов дизайна: иконок, макетов и так далее.
С этого времени флэт стал ключевым направлением в веб-дизайне, сделав сайты, приложения и элементы интерфейса элегантными, чистыми и стильными.
Таким образом, есть три глобальных примера флэт-дизайна от фирм, без которых сложно представить современный мир технологий:
Microsoft’s Metro design
Apple iOS 7 design
Google’s Material Design
3. Помните о чистоте
Flat-дизайн, по-видимому, назван “плоским” из-за отсутствия трехмерных элементов и реалистичных эффектов, таких как: градиенты, текстуры, блики, полутона, тени. Запомните, стиль флэт — это двухмерный (плоский) способ изображения объектов.
Более того, в flat-дизайне предметы изображаются очень упрощенно и стилизованно.
А иногда даже используется просто силуэт или контуры объекта, т.е. ровно столько, чтобы сделать объект узнаваемым, но не перегружать его незначительными деталями.
Минимализм в наши дни стал мировым трендом: простота форм и использование острых краев создает чистый и приятный глазу дизайн. Простые формы более понятны и легки для восприятия. Это делает дизайн минималистичным, чистым, не давая ему приобрести загруженный, беспорядочный вид.
4. Доводите до совершенства
Знайте, когда дело доходит до создания flat-иконок и UI-элементов, вы должны заставить их выглядеть хрустящими, аккуратными и идеальными до пикселя, т.е. настолько, насколько это возможно. Причем, это относится и к растровой, и к векторной графике.
Спрограммой Adobe Photoshop здесь все ясно: она работает с растровой графикой, которая основана на пикселях.
Что касается программы Adobe Illustrator, то она использует векторную графику, состоящую из кривых и линий, называемых векторами, которые задаются математическими формулами.
Когда-то Adobe Illustrator не был особо удобной программой для создания идеальной до пикселя графики. Хорошая новость в том, что последние версии Иллюстратора стали отличным инструментом для создания хорошей графики.
Должна сказать, что векторная графика в основном подразумевает работу с простыми, плоскими формами, чистыми цветами и сетками.Adobe Illustrator очень гибок в настройках и позволяет тебе адаптировать сетку к своим нуждам, выравнивать объекты и использовать различные типы снэппинга. Благодаря этому процесс создания совершенного дизайна, который будет чисто и стильно смотреться на любом дисплее, стал более легким. Если ты хочешь научиться создавать идеальную графику, то тебе стоит ознакомиться со статьей: How to create pixel-perfect artwork using Adobe Illustrator .
5. Цвет
Одна из наиболее специфичных особенностей flat-дизайна, помимо теней, это использование цвета. Большинство цветов, которые использует flat-дизайн в своих элементах состоят всего из нескольких базовых цветов.
Цвет в flat-дизайне отличается яркостью, насыщенностью, сочностью. Цветовая схема флэта не ограничивается несколькими особенными цветами.Она содержат множество оттенков, и их выбор зависит только от того, что ты изображаешь, будь то иконки сладостей или объекты в стиле ретро в утонченной ретро-палитре.
Допустим, вы дизайнер интерфейсов и хорошо разбираетесь в цветовых палитрах, вы экспериментируете с цветовой панелью в программах Photoshop и Illustartor, смешивая цвета, как заблагорассудится. Однако, этот процесс довольно сложен и требует хорошей интуиции, опыта и навыков. Здесь вы найдете некоторые инструменты, которые могут помочь вам в создании собственной цветовой палитры.
Некоторые из них подходят для всех видов дизайна и иллюстраций, а не только для flat-дизайна. К примеру, Adobe Color CC , больше известный, как Кулер. Сегодня есть доступ к нему, как через веб-сайт, так и непосредственно через продукты Adobe. Кулер — очень гибкий инструмент, который позволяет тебе или создать свою собственную цветовую палитру, или выбрать из пользовательские палитры из библиотеки.
Другой простой и удобный генератор цветовых палитр — Coolors . Просто нажмите пробел и программа сгенерирует цветовую палитру, вы можете корректировать цвета, также есть функция экспорта.
Есть еще несколько аналогичных сервисов с заказными палитрами, которые могут быть полезны. Однако, есть один инструмент, созданный специально для флэт-дизайна.FlatUIColors.com by Designmodo — сервис с набором “плоских” цветов, очень удобно для работы. Этот сайт стал очень популярным среди дизайнеров, ищущих хорошие цветовые решения для совершенного дизайна. Попробуйте!
И еще вы можете найти большее разнообразие цветов и палитр в Google’s Material Design guide .
6. Длинные тени
Как упоминалось выше, для flat-дизайна характерны простота, много свободного пространства — вот почему флэт отвергает использование любых эффектов. Однако, есть один эффект, характерный для flat-дизайна. Этот эффект стал трендом и характерной особенностью флэта.
Мы сейчас говорим о длинных тенях. У них есть некоторые типичные характеристики, делающие этот эффект узнаваемым, а именно: 45-градусный наклон и большой размер (тень может быть в несколько раз длиннее самого предмета. В результате, длинные тени придают флэту некоторый эффект глубины.
Этот эффект делает объект более трехмерным, но одновременно оставляя его в контексте flat-дизайна.
7. Работа со шрифтами
Типографика играет большую роль в flat-дизайне. Часто текст становится главным элементом композиции.
Во флэте обычно используются простые шрифтовые начертания, делающие весь дизайн в целом чистым и читабельным. Ты можешь найти множество бесплатных шрифтов в Adobe Typekit , если ты используешь продукты Adobe. На Font Squirrel вы также найдете много хороших бесплатных шрифтов. Но не забывайте читать лицензию, если вы собираетесь использовать шрифт в коммерческих целях.
Чаще всего в flat-дизайне принято использовать верхний регистр и контрастные цвета, это делает текст более разборчивым.
Используйте шрифты с осторожностью, помните, что он должен подчеркивать дизайн и соответствовать ему, а не выглядеть отдельным элементом.Это не значит, что ты не можешь использовать шрифты с засечками или рукописные сложные шрифты. Просто помни о минималистичности и держи все в балансе. Однако, флэт все-таки чаще использует шрифты без засечек, так как они выглядят более строго и аккуратно.
8. Плюсы и минусы Flat-дизайна
Несмотря на то, что flat-дизайн стал таким популярным благодаря своим многочисленным плюсам, у него все же есть и недостатки, с которыми сталкиваются дизайнеры при использовании этого стиля. Давайте рассмотрим все за и против.
Плюсы
Популярность
Флэт-дизайн превратился в тенденцию, собирая все больше позитивных отзывов\ от дизайнеров и веб-дизайнеров, и вовсе не кажется, что он теряет свои позиции. Наоборот, он распространяется все больше и больше, обретая некоторые новые формы и особенности, становясь все более креативным.
Простота
Флэт-дизайн простой, минималистичный и чистый. Флэт в вебе помогает пользователям сосредоточиться на контенте, а не отвлекаться на визуальные эффекты. Это также работает для интерфейсов мобильных приложений: чистый дизайн с большими кнопками делает использование мобильных устройств совершенным.
Яркость
Цвет — другой классный плюс в флэт-дизайне. Яркие и насыщенные цвета выглядят привлекательными и чистыми, а отсутствие градиентов делает дизайн стильным. Более того, такие чистые цвета делают его более позитивным, презентабельным, flat-дизайн создает нужное настроение.
Недостатки
У флэта есть еще множество достоинств, но никакой дизайн не идеален, и мы не можем идеализировать его. Здесь некоторые недостатки flat-дизайна, которые мы обязаны упомянуть:
Неотзывчивость
Иногда отсутствие важных деталей или визуальных эффектов делает процесс создания дружеского для пользователя интерфейса сложным, и это в целом делает весь дизайн неотзывчивым. Не всем пользователям флэт кажется комфортным, потому что может быть сложным найти элементы на веб-странице, на которые ты должен кликнуть или нажать на экране мобильного телефона, потому что они не интерактивны.
Проблемы с типографией
Как упоминалось ранее, не всякий шрифт может подойти flat-дизайну. Иногда такой насыщенный шрифт с острыми краями выглядят действительно сбалансировано и стильно. Однако, в том случае, если шрифт выбран неверно, это может разрушить весь дизайн. Ты должен действительно хорошо чувствовать какие шрифты подходят для флэта а какие нет.Недостаток опыта делают выбор шрифта очень трудным.
Слабые визуалы
Из-за ограничений в использовании эффектов, цветов и шрифтов, флэт может выглядеть слишком простым и холодным. Его минималистичность может также стать его главным недостатком —другой flat-дизайн в итоге выглядит точно так же, как и ваш. Поэтому очень сложно сделать ваши иконки или веб-страницы отличными от чужого дизайна, потому что вы используете те же самые упрощенные формы, ограниченные цветовые палитры и аналогичные шрифты. В результате, со временем flat-дизайн может стать скучным.
9. Будущие тренды flat-дизайна
Нельзя сказать, что flat-дизайн полностью сформировался и остановился в своемМожет быть, это из-за его недостатков, упомянутых выше, флэт стремится к развитию и изменению, приобретению новых особенностей и усилению визуальной выразительности.
Если ты внимательно посмотришь последний пример флэт-дизайна, ты можешь заметить что он действительно постепенно от своих строгих инструментов и начинает добавлять тонкие эффекты, такие как: градиенты, тени, освещение и другие визуальные эффекты.
Эти мелочи придают flat-дизайну некоторой глубины, при этом не перегружая деталями, как это делают в скевоморфичном дизайне.Эти незначительные улучшения делают флэт более отзывчивым и удобным, а также привносят свежий взгляд, делая флэт более гибким и универсальным.
Таким образом, флэт не теряет своих особенностей, но становится более интересным, гибким - он действительно становится лучше.
Выводы
Таким образом, мы обсудили некоторые факты из истории флэт-дизайна, и поговорили о цветах, формах и типографике. Мы рассмотрели разные точки зрения, остановились на достоинствах и недостатках флэта и узнали некоторые главные принципы создания хорошего дизайна.
Я надеюсь, что вы почерпнулидля себя новую информацию из этой статьи или хотя бы нашли ее интересной. Вы обязаны попробовать создать флэт-дизайн, если вы не делали этого прежде.
В конце концов, что еще следует упомянуть о flat-дизайне?
Если вам действительно нравится флэт с его острыми краями, сочными цветами и хрустящими шрифтами, его чистоту и минималистичность, то действуйте!
Это в тренде, но, как и со всяким другим графическим стилем, не ограничивайтесь одной техникой. Если флэт в тренде, это не значит, что в свем проекте вы не можете использовать другие стили. Скевоморфизм со своими крошечными деталями и текстурами тоже может стать хорошим решением. Главное, помните, что дизайн свой для каждого проекта, он должен выражать его дух, цель, сущность, оставаясь при этом удобным и функциональным. Вперед!