Style flat: Что такое flat design или плоский дизайн — Независимое театральное объединение "Зрительские симпатии"

Содержание

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

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

В плоском дизайне всё заточено под функциональность

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

Эффект объёма в буквах убрали, оставили только разницу цветов

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

Термин flat также используется и для иллюстрации. Двухмерные картинки часто размещают на сайтах, чтобы оживить простой функциональный дизайн. Преимущества у них всё те же: быстрая загрузка и хорошая узнаваемость. А ещё 2D-графика сравнительно недорогая в отрисовке: такие иллюстрации для компаний выгоднее, чем профессиональная фотосъёмка или 3D-визуализация.

почему дизайн стал плоским? / Хабр

Не знаем, заметили вы или нет, но в последнее время (особенно в последний год) в веб-дизайне по всему миру начала прослеживаться чёткая тенденция к упрощению, жесткому минимализму и визуальному облегчению того, с чем мы как пользователи взаимодействуем каждый день. Проще говоря, дизайн стал «плоским»: в отличии от выпуклых иконок времен бурного роста социальных сетей и web 2.0, сейчас нас всё чаще встречают простенькие иконки новых сервисов. Всё это получило своё название – flat design. Не квартирный, а плоский.

Своей вчерашней презентацией новой мобильной ОС, iOS 7, компания Apple окончательно подтвердила стремительный рост популярности этого направления, традиционно обрадовав часть своих фанатов, но и встретив значительное недовольство среди опытных пользователей и дизайнеров. В чём же дело? В чём польза этого плоского дизайна и действительно ли он нужен миру? Мы решили обратится к экспертам из Украины и зарубежья.

Мы попросили их ответить на три главных вопроса:

почему мир начал двигаться к flat design в вебе и мобайле и что он из себя представляет;
что это даст Apple и iOS 7;
как это повлияет на дизайнеров — с одной стороны, и на пользователей — с другой.

Денис Судилковский, Киев
Interaction Design специалист, продюсер Prodesign.in.ua

«Эффект маятника» в предсказании будущего проявляется в том, что если в каком-то вопросе существуют две крайности — человечество будет кидаться из одной стороны в другую. Без сомнения, это справедливо и для дизайна интерактивных систем. Плоский и неинтересно-примитивный веб в своё время изменился на объёмные вебдванольные кнопочки. Визуализации интерфейсов достигли своего апогея реалистичности и маятник летит в обратную сторону — flat&simple.

Что получит от этого Apple? Сохранит своё место в тренде и сотни тысяч комментариев, что их iOS становится очень похожей на Android.

Дизайнерам придётся эволюционировать (и не шутить на тему, когда же flat-дизайн придёт в машиностроение и подарит нам плоские автомобили :). Когда нет декораций — вся работа состоит в создании настроения контентом для конкретного сценария с пользователем. Эта профессия будет иметь всё больше общего с Режиссёром, нежели с Художником. Пользователи, напротив — получают новый опыт и новые впечатления. Лично я 4 года был адептом iPhone, но этой весной сменил телефон на Android по единственной причине — надоела однообразная идеальность яблочного интерфейса.

Daniel Bruce, Stockholm
Senior Digital Creative, danielbruce.se

Для начала, я хотел бы отметить, что я не люблю термин «плоский дизайн». Большинство графического дизайна на протяжении столетий были «плоскими». Я также считаю, что это ограничивает вашу возможность сделать выдающимся дизайн, когда выбор стоит между flat и чем-то ещё. Дизайн может быть чем-то значительно большим, нежели это. Весёлым, ярким, темным, позитивным, минималистичным — его можно назвать как угодно. Но сегодня я редко слышу, чтобы кто-то считал дизайн не только плоским или склероморфным. Это немного грустно.

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

Я был очень удивлён, когда Microsoft выбрали для себя это направление несколько лет назад, презентовав известный Metro стиль. Фактически, они использовали графический дизайн для больших знаков, на которые люди смотрят с определённых расстояний и никогда не взаимодействуют с маленькими экранами со значительным количеством элементов. Это выглядит красиво, но имеют ли они хорошее юзабилити?

То, что я увидел вчера вечером от Apple, было лишь плохой копией нескольких интересных дизайнов, которые появляются на сайтах наподобие Dribbble i Behance на протяжении последнего года. Я не увидел ничего нового — кроме того, что это далеко не тот же «старый Apple» Стива Джобса. Компания показала, что она не на передовой дизайна мобильных интерфейсов. Конечно, мы увидим и фанатов, которые будут наследовать все эти белоснежные дизайны и креативные градиенты следующие несколько месяцев, но я не думаю что этот аспект будет настолько влиятелен, как недавние прекращения Google. Но с другой стороны, как бы там не было, Apple всегда выступала законодателем мод и вдохновением для многих людей, включая меня.

Что касается обычных пользователей, то им нравятся яркие цвета.

Иван Клименко, Киев
дизайнер мобильных интерфейсов, 5tak.com

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

Эпоха Баухауса 20-30-х годов принесла огромный вклад в дизайн, но всё-таки тональная герметичность и искуственность не выдержала желания и внутреннего позыва людей существовать в окружении более натуральных вещей.

Потом в 60-х все начали восхищаться пластиком.

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

Жесткий контраст форм и минималистичная графика всегда выражали накопление внутренних конфликтов внутри общества. Дизайн — всего лишь зеркало, которое показывает наш внутренний мир. Слишком много всего вокруг. Жизнь очень ускоряется, и у нас просто не остаётся времени подумать и рассмотреть что-нибудь. У нас часто нет времени просто жить.

Минималистичность и все эти электронные железяки — всего-лишь шаг на дороге к чему-то более природному и человеческому. Большему чем просто ещё один компьютер. Мне даже жаль, что Apple, которая умела смотреть глубоко, больше не существует.

Олеся Гричина, Киев
UI designer at Componentix, twitter: elendiel

Думаю, что на дизайнеров очень повлияло большое количество гаджетов с разными размерами экрана и разрешающей способностью — для всего этого разнообразия легче создавать дизайн без текстур, сложных теней, которые правильно учитывают освещённость и т.п. Больше стали думать в направлении «как бы удобнее для пользователя сделать», а не «как бы красиво нарисовать». Контент — это главное, и в нашей работе важно подать его наилучшим образом.

Мне кажется, что за внешними изменениями (flat UI, иконки) особенно и не заметили серьёзных изменений в удобстве работы, и того, как ругаются на эту тему. Когда проверят в работе — начнётся «ооо, как удобно, и почему раньше так не сделали». На дизайнеров, надеюсь, это повлияет таким образом, что они больше внимания будут уделять удобству интерфейса, а не текстурам и теням. В конце концов заказчикам можно будет пояснять, что это в тренде 🙂

На пользователей flat design, думаю, особенно не повлияет — если им удобно будет создавать и потреблять контент, довольных будет много. Но иконки на домашнем экране всё же кислотные 🙂

Павел Грозян, Киев
Product Designer at MacPaw, grozyan

«Apple! А-ха-ха, прекрати! — Кричат дизайнеры. — Ура, стало проще. — скандируют пользователи». Понимаю обе точки зрения. Сегодня, после презентации с WWDC2013, многие из моих коллег встали и сказали «да ну её, эту профессию! Кто угодно теперь такую дурость нарисовать сможет. А эти иконки за $30?!». И на первый взгляд, они правы. Но если копнуть глубже, понимаешь, что есть тысячи предметов, которые долгое время отличались один от другого только сценарием использования, потом формой, потом цветом, и только потом — художественными деталями. Я помню времена, когда все эти ребята в LinkedIn профилях которых сегодня написано UX, UI Designer, нервно копировали эффект белой тени у букв. Как у Apple. Потом светлые и легкие сайты. Как у Apple. Потом насыщенные текстурами и реализмом интерфейсы. Как у Apple. Вся их работа заключалась в копировании, поскольку не было оригинальной, единой и удобной для всех концепции развития. Именно эту задачу сегодня решает flat design. Хотя мне кажется неправильным называть его именно так. Хорошо, что не Microsoft его придумала, и он формировался в течении десяти лет до цифровой эры, в сфере publishing.

Flat — он не для кликов, он для нажатий, тапов, taps. Плоским его не назовёшь — отсутствие «толстых» текстур и теней у кнопок делает его, скорее, упрощённым, и без визуальной агрессии. И без градиентов к кнопкам не обойтись. Я поддерживаю эту тенденцию. Если это не будет мешать качеству опыта использования, но с ним всем будет легче жить. В первую очередь пользователю. Во-вторую — творцу: будет проще в технической реализации, удобнее для нажатия (подчеркиванию ссылок — привет), и мультиплатформенно — объединяя веб, мобайл и декстоп в один единый опыт. Без сомнения, для Apple это смелый шаг. И только они могут на него решится. Их история имеет десятки подтверждений, потому им это скорее удастся, нежели наоборот.

10 принципов «плоского дизайна»

В этой статье я расскажу вам о 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-дизайне?

Если вам действительно нравится флэт с его острыми краями, сочными цветами и хрустящими шрифтами, его чистоту и минималистичность, то действуйте!

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

Источник: design.tutsplus.com
Перевод: команда webdesign2.ru

история, преимущества и применение на практике

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

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

Определение флэт дизайна

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

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

История флэт дизайна

Очевидно, что флэт дизайн не появился из воздуха. Его истоком обычно считают швейцарский стиль. Швейцарский стиль, также известный под названием International Typographic Style или более коротко — международный стиль, — это направление, которое зародилось в 1920-х годах, но было встречено очень критично, а затем получило яркое перерождение в графическом дизайне в Швейцарии 1940-50-х годов, ставшим прочной основой графического дизайна середины 20-го века во всем мире. Основоположниками этого творческого движения были Йозеф Мюллер-Брокманн и Армин Хофманн.

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

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

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

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

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

Так основными особенностями плоского дизайна стали:

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

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

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

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

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

Флэт дизайн — применение на практике

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

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

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

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

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

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

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

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

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

Брэндинг

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

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

Источник

с чего начать? Пять основных принципов Flat дизайна — PowerBranding.ru

Новости → Дизайн → «Плоский дизайн»: с чего начать? Пять основных принципов Flat дизайна

После недавней презентации новой операционной системы iOS от компании Apple все только и говорят о Flat дизайне. «Плоский дизайн» (русскоязычное название flat дизайна) окончательно становится ключевым направлением в дизайне на последующие 3-5 лет.

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

Что же такое «плоский» дизайн, как его использовать на практике, о чем не стоит забывать?

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

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

Плоский дизайн (англ. flat design) — минималистичный подход к дизайну объектов, который подчеркивает удобство использования, он в большей степени ориентирован на конечного пользователя.

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

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

Пример скевоформизма:

Компания Microsoft была одной из первых, кто применил концепцию «плоского» дизайна в своих продуктах. Теперь же все больше веб-сайтов и IT компаний переходят к данному направлению дизайна, чтобы удивить пользователя, который постепенно устает от реалистичных визуализаций App приложений.

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

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

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

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

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

Элементы плоского дизайна передают только контуры реального объекта.

Второй принцип flat дизайна: Простота элементов

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

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

Третий принцип flat дизайна: аккуратная работа с шрифтами

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

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

Четвертый принцип flat дизайна: акцент на цвет

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

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

Пятый принцип flat дизайна: минимализм

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

Почти плоский дизайн

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

Источники: http://www.creativebloq.com/ и http://designmodo.com

Твитнуть Please enable JavaScript to view the comments powered by Disqus. comments powered by

Flat Design — от истоков до наших дней

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

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

Вот парочка примеров скевоморфизма, активно развиваемого в свое время Apple.

Прообразом для плоского дизайна стали три направления в искусстве: минимализм, баухауз и Международный типографический стиль(также известный, как швейцарский стиль). А первым ярким продуктом в стиле плоского дизайна был интерфейс Metro от Windows.

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

Никаких лишних эффектов. Тени, блики, текстуры — всего это нет в плоском дизайне. Он описывает лишь контуры реального предмета и использует двумерную визуализацию объектов.
Простота элементов. Использование простых фигур и четких контуров подчеркивает легкость дизайна. Элементы должны стимулировать желание взаимодействовать с объектом: нажать, прикоснуться, потрогать. Простота элементов не означает простоту их дизайна, только простоту форм и очертаний. Простые формы интуитивно понятны пользователю и улучшают удобство использования.
Аккуратная работа с шрифтами. Они должны быть контрастными и дополнять существующий дизайн. Шрифты могут быть сложными и необычными, но понятными пользователю.
Яркие цвета. Цвет также как и шрифт является значимой частью плоского дизайна. Большинство цветовых палитр плоского дизайна основаны на 2-3 основных цветах, но встречаются и более разнообразные по цвету примеры. В плоском дизайне используются чистые яркие цвета, без лишних переходов и градиентов.
Минимализм. В плоском дизайне следует избегать излишних «наворотов», сложных подходов к визуализации элементов.

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

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

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

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

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

В плоском дизайне все заточено под функциональность

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

Эффект объёма в буквах убрали, увеличивают только разницу цветов

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

Термин плоский также используется и для иллюстрации. Двухмерные картинки часто размещают на сайтех, чтобы оживить простой функциональный дизайн. Преимущества у них всё те же: быстрая загрузка и хорошая узнаваемость. А ещё 2D-графика сравнительно недорогая отрисовка: такие иллюстрации для компаний выгоднее, чем профессиональная фотосъёмка или 3D-визуализация.

почему дизайн стал Плата? / Хабр

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

Своей вчерашней презентацией новой мобильной ОС, iOS 7, компания Apple окончательно подтвердила стремительный рост среди этих направлений, традиционно обрадовав часть своих фанатов, но и встретив значительное недовольство опытных пользователей и дизайнеров. В чём же дело? В чём польза этого плоского дизайна и действительно ли он нужен миру? Мы решили обратится к экспертам из Украины и зарубежья.

Мы попросили их ответить на три главных вопроса:

почему мир начал двигаться к плоской конструкции в вебе и мобайле и что он из себя представляет;
что это даст Apple и iOS 7;
как это повлияет на дизайнеров — с одной стороны, и на пользователей — с другой.

Денис Судилковский, Киев
Interaction Design специалист, продюсер Prodesign.in.ua

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

Дизайнера придётся эволюционировать (и не шутить на тему, когда же плоский дизайн придёт в машиностроение и подарит нам плоские автомобили :). Когда нет декораций — вся работа создает в создании контенту для конкретного сценария пользователь.Эта профессия будет иметь всё больше общего с Режиссёром, нежели с Художником. Пользователи, напротив — получают новый опыт и новые впечатления. Лично я 4 года был адептом iPhone, но эта сменил телефон на Android по единственной причине — надоела однообразная идеальность яблочного интерфейса.

Daniel Bruce, Stockholm
Senior Digital Creative, danielbruce.se

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

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

Я был очень удивлён, когда Microsoft выбрали это направление несколько лет назад, презентовав известный стиль Metro. «Фактически, они используют стандартные значки больших знаков», которые никогда не взаимодействуют с маленькими экранами со значительными элементами.Это выглядит красиво, но имеют ли они хорошее юзабилити?

То, что я увидел вчера вечером от Apple, было лишь плохой копией интересных дизайнов, которые появляются на сайтах наподобие Dribbble i Behance на протяжении последнего года. Я не увидел ничего нового — кроме того, что это далеко не тот же «старый Apple» Стива Джобса. Компания показала, что она не на передовой дизайн мобильных интерфейсов. Мы увидим, что эти белоснежные дизайны и креативные градиенты за несколько месяцев будут поражены, как недавние прекращения Google.Apple всегда выступала модератором и вдохновением для многих, включая меня.

Что обычных пользователей, то им нравятся яркие цвета.

Иван Клименко, Киев
дизайнер мобильных интерфейсов, 5tak.com

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

Потом в 60-х все начали восхищаться пластиком.

Минималистичность и все эти электронные железяки — всего-лишь шаг на дороге к чему-то более природному и человеческому. Большему чем просто ещё один компьютер.Мне даже жаль, что Apple, которая умела смотреть глубоко, больше не существует.

Олеся Гричина, Киев
Дизайнер пользовательского интерфейса в Componentix, twitter: elendiel

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

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

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

Павел Грозян, Киев
Продуктовый дизайнер MacPaw, грозян

«Apple! А-ха-ха, прекрати! — Кричат дизайнеры. — Ура, стало проще. — скандируют пользователи «. Понимаю обе точки зрения. Сегодня, после презентации с WWDC2013, многие из моих коллег встали и сказали« да ну её, эту профессию! »А эти иконки за $ 30 ?!». на первый взгляд, они правы.Разнообразие предметов, которые отличаются друг от друга. Я помню времена, когда все эти ребята в LinkedIn профилях которых сегодня написано UX, UI Designer, нервно копировали эффект белой тени у букв. Как у Apple. Потом светлые и легкие сайты. Как у Apple. Потом насыщенные текстурыми и реализмом интерфейса. Как у Apple. Вся их работа заключается в копировании, поскольку не было оригинальной, единой и удобной для всех концепций развития.Именно эту задачу сегодня решает плоский дизайн. Хотя мне кажется неправильным называть его именно так. Хорошо, что не Microsoft его придумала, и он формировался в течение десяти лет до цифровых эры, в сфере публикации.

Плоский — он не для кликов, он для разъемий, тапов, метчики. Плоским его не назовёшь — отсутствие «толстых» текстур и теней у кнопок делает его, скорее, упрощённым, и без визуальной агрессии. И без градиентов к кнопкам не обойтись. Я поддерживаю эту тенденцию. Если это не будет мешать качеству опыта использования, но с ним всем будет легче жить.В первую очередь пользователю. Во-вторую — творцу: будет проще в технической реализации, удобнее для использования (усиление ссылок — привет), и мультиплатформенно — объединяя веб, мобайл и декстоп в один единый опыт. Без сомнения, для Apple это смелый шаг. И только они могут на него решится. Их история имеет десятки подтверждений, потому что им это скорее удастся, нежели наоборот.

10 принципов «плоского дизайна»

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

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

Вы можете найти хорошие примеры дизайна квартиры на сайте http://market.envato.com/. Там есть множество макетов, иконок и шаблонов, которые дадут вам четкое понимание о том, как выглядит современный дизайн .

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

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

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

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

2. Немного истории

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

Flat-дизайн, в том облике, в котором он мы видим его сейчас, стал набирать популярность после того, как Microsoft стала выпускать продукцию в так называемом metro-стиле.Metro — UI-дизайн от Microsoft, поражающий своей стильностью и простотой.

В 2010 году Microsoft выпустила Windows Phone 7, который использовал плоский дизайн с острыми краями и простой графикой, унаследованной у одного из ранних продуктов Microsoft (Zune). Позже, вдохновленная успехом, Microsoft выпустила операционную систему Windows 8, основанную на том самом плоском стиле Metro.

В конце концов, плоский дизайн достиг своего пика в 2013 году, когда Apple выпустила iOS 7, демонстрирующую принципиально новый дизайн с полностью измененными элементами пользовательского интерфейса, включая значки и шрифты.Фирма Apple создала наглядные принципы UI- и -иконочного дизайна.

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

Таким образом, есть три глобальных примера флэт-дизайна от компании, без которых сложно представить современный мир технологий:

Дизайн Microsoft Metro

Дизайн Apple iOS 7

Google Material Design

3. Помните о чистоте

Плоский дизайн, по-видимому, назван «Пост» из трехмерных элементов и реалистичных эффектов, таких как градиенты, текстуры, блики, полутона, тени. Запомните, стиль флэт — это двухмерный (плоский) способ изображения объектов.

Более того, в плоских дизайне предметы представлены очень упрощенно и стилизованно.

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

4. Доводите до совершенства

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

С программой Adobe Photoshop здесь все ясно: она работает с растровой графикой, которая основана на пикселях.

Что касается программы Adobe Illustrator, то она включает векторную графику, состоящую из кривых и линий, называемых векторми, которые задаются математическими формулами.

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

Должна сказать, что графика в основном подразумевает работу с простыми, плоскими формами, чистыми цветами и сетками. Adobe Illustrator очень гибок в настройках и позволяет тебе адаптировать сетку к своему нуждам, выравнивать объекты и использовать различные типы снэппинга.Благодаря этому процессу создания совершенного дизайна, который будет чисто и стильно смотреться на любом дисплее, стал более легким. Если ты хочешь научиться создавать идеальную графику, то тебе стоит ознакомиться со статьей: Как создавать изображения с идеальным пикселем, используя Adobe Illustrator.

5. Цвет

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

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

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

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

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

Есть еще несколько аналогичных сервисов с заказными палитрами, которые могут быть полезны. Однако есть один инструмент, созданный специально для флэт-дизайна. FlatUIColors.com от Designmodo — сервис с набором «плоских» цветов, очень удобно для работы. Этот сайт стал очень популярным среди дизайнеров, ищущих хорошие цветовые решения для совершенного дизайна.Попробуйте!

И еще вы можете найти большее разнообразие цветов и палитр в руководстве Google по Material Design.

6. Длинные тени

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

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

Этот эффект делает объект более трехмерным, но одновременно оставляя его в контексте плоского дизайна.

7. Работа со шрифтами

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

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

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

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

8. Плюсы и минусы Плоский дизайн

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

Плюсы

Популярность

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

Простота

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

Яркость

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

Недостатки

У флэта есть еще множество достоинств, но никакой дизайн не идеален, и мы не можем идеализировать его. Здесь некоторые недостатки плоского дизайна, которые мы соединяем соединитьнуть:

Неотзывчивость

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

Проблемы с типографией

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

Слабые визуалы

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

9. Будущие тренды плоский дизайн

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

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

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

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

Выводы

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

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

В конце концов, что еще следует дымить о плоских дизайне?

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

Источник: design.tutsplus.com
Перевод: команда webdesign2.ru

история, преимущества и применение на практике

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

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