Флэт дизайн это: Attention Required! | Cloudflare

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

Пример HTML-страницы

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

Знакомство с flat дизайном

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

Хочется отметить, что «плоско» — не значит «скучно». Решения flat дизайна могут быть красивыми, они более утонченные, чистые, избавленные от избыточности чего-либо, трансформируясь в «островок спокойствия».

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

Принцип №1: долой ненужные эффекты

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

https://dribbble.com/dylanopet

Принцип №2: чем проще, тем лучше

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

Принцип №3: типографика и ее важность

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

http://www.tvlcorp.com/

Принцип №4: цветовые акценты

Не только шрифт, но и цвет —существенная часть в «плоском» дизайне. В подавляющем большинстве палитры базируются на 2-3 цветах, хотя, конечно, есть и исключения. Обычно выбираются сочные и яркие, но при этом чистые цвета. Как было отмечено, нет никаких градиентов и излишних переходов.

https://dribbble.com/fffabs

Принцип №5: выбор в пользу минимализма

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

Плоский или почти плоский? Ищем компромисс!

В завершение хочется отметить, что сегодня имеет место быть синергия между плоским и неплоским дизайном. Речь идет о «почти плоском» дизайне. Это наиболее распространенное применение описанного концепта, когда вместе с простыми и лаконичными элементами и двумерным пространством дизайнеры применяют 1-2 приема для глубины и перспективы. Также трендом 2017 года стал Semi Flat Design — полуплоский дизайн. Под влиянием Material Design, он стал немного более пространственным. Появляются легкие тени, которые делают дизайн полуплоским. Флэт-дизайн актуален и сегодня, за счет теней он стал глубже и сложнее, но основная концепция не нарушается.

  

Ссылка на источник

Flat дизайн

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

Не знаем, заметили вы или нет, но в последнее время (особенно в последний год) в веб-дизайне по всему миру начала прослеживаться чёткая тенденция к упрощению, жесткому минимализму и визуальному облегчению того, с чем мы как пользователи взаимодействуем каждый день. Проще говоря, дизайн стал «плоским»: в отличии от выпуклых иконок времен бурного роста социальных сетей и 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 это смелый шаг. И только они могут на него решится. Их история имеет десятки подтверждений, потому им это скорее удастся, нежели наоборот.

с чего начать? Пять основных принципов 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 и для чего это нужно?

Если зайти на практически любой сайт, то можно заметить, что многие из них создаются в стиле flat. Современные сайты делают именно на основе идеи Flat Design. Это модно, креативно, современно и очень неплохо смотрится. Особенно хорошо в таком стиле выглядит landing page, в последнее время «лендинги» делаются именно во flat design. Но зачем такой стиль нужен на других ресурсах, и нужен ли вообще? Как использовать этот дизайн, как создавать под него сайты? Об этом мы сейчас и поговорим.

Что это и для чего?

Начнём с того, что Flat Design — это современный стиль пользовательского интерфейса, отличающийся от других своей простотой и минималистичностью. Ему присуще минимум эффектов и элементов на странице, также отсутствие градиентов, смешанных цветов и так далее. Flat — это полная противоположность скевоморфизму. Однако, каким бы он ни был простым, всё не так уж и легко. Этот стиль имеет свои принципы и позже мы рассмотрим основные из них, но для начала — для чего он нужен.

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

Принципы Flat Design’a. Простота

Про этот принцип мы уже успели сказать кое-что, но забыли упомянуть, что это главный принцип Flat дизайна. Но, это не совсем принцип, это — идея всего flat стиля. Главная мысль, заключающаяся в том, чтобы пользователь обращал своё внимание на контент, а не на разные эффекты. Чистота и минималистичность — визитная карточка Flat дизайна.

Цвет

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

Тонкость в работе со шрифтами

Работа со шрифтом — довольно муторное дело. Если в других стилях шрифты не имеют большого значения, то здесь всё наоборот. Шрифты во flat дизайне играют огромную роль, их нужно правильно подобрать, они должны вписываться в общую картину сайта, чтобы всё было читабельным и чистым, что также является принципами flat’a. Здесь принято использовать верхний регистр в шрифтах и контрастные цвета.

Чистота

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

Итоги

Делая выводы можно сказать, что Flat Design имеет огромные перспективы, и что стоит начинать создавать сайты в этом стиле прямо сейчас! Конечно, он не идеален, у всего есть свои минусы, но это один из лучших и наиболее креативных стилей на данный момент. Многие большие компании переходят на flat, много заказчиков на биржах просят создавать сайты именно в этом стиле. Flat Design имеет свои принципы, идею и главную мысль, что делает его полноценно проработанным и готовым, но он совершенствуется с каждым днём, и если Вы ещё не начали верстать flat сайты, то Вам стоит начать!

Оставляйте свои отзывы и вопросы в комментариях!

• Создано 27.09.2017 08:00:00
• Михаил Русаков

Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

   Она выглядит вот так:

2. Текстовая ссылка:
   <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

   Она выглядит вот так: Как создать свой сайт

3. BB-код ссылки для форумов (например, можете поставить её в подписи):
   [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Flat design — пользовательские интерфейсы в стиле минимализма

«Плоский» дизайн (flat design) — это сокращённая версия философии дизайна…

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

…главные принципы которой — простота и ясность элементов в пользовательском интерфейсе…

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

Яркий пример «плоского» дизайна — Google Now. Разработчики сервиса применили интерактивные карточки в качестве основных информационных блоков — данные о пробках и маршрутах их объезда, местоположении отелей и магазинов, пройденном расстоянии, напоминания о встречах, днях рождения друзей и многом другом. Этими карточками удобно пользоваться, легко управлять прямо на экране телефона, редактировать и скрывать.

Ещё один пример — Windows 8 и стиль METRO в частности. Главная его особенность — представление информации в определённом графическом ключе, помогающем пользователю определить тип материала, который они читают.

Несколько наших работ, выполненных в стиле МЕТRO:

…именно этих качеств не хватает скевоморфизму (

skeuomorphic design)…

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

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

.

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

В сфере диджитала скевоморфизм появился в 1980-х. Так, в 1984-м компания Apple впервые ввела понятие «Рабочий стол» и стала использовать иконки, похожие на папки и листы бумаг. Скевоморфизм позволил дизайнерам перенести основные черты привычных нам предметов (папки для бумаг) на новые цифровые объекты (папка файлов).

Рабочий стол Apple Lisa, работа с изображением. 1984

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

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

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

Статья основана на «What Is Flat Design?»

В чем их отличие. Что такое плоский дизайн

В этой статье я расскажу вам о 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-дизайне. Вы наверняка уже что-то слышали об этом, так как 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 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 эстетику!

На этом все. Подписывайтесь, делитесь нашими статьями с друзьями в социальных сетях. Высоких вам конверсий!

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

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

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

The ISSLand

January Creative

Minimal Monkey

• Плоский дизайн сфокусирован на пользователе
• Плоский дизайн прост
• Плоский дизайн — меньше градиентов
• Плоский дизайн включает в себя прямые линии и квадратные углы
• Обычно используют сильный цветовый контраст
• В плоском дизайне нет теней, скосов, текстур или того, что выглядит 3D
• Плоский дизайн существует только в 2 измерениях
• Плоский дизайн — тренд к простоте и минимализму
• Плоский дизайн — не используйте дополнительные эффекты
• Нет никаких дополнений
• Плоский дизайн — меньше кнопок и «обвесов»
• Плоский дизайн означает фокус на шрифтах
• Цветовые комбинации, контрастные цвета и интересные цветовые вариации — важные составляющие плоского дизайна
• Плоский дизайн — один из многих дизайнов. Он подходит для одних проектов, а для других нет.

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

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

Нравится плоский дизайн? Вот несколько элементов, которые можно использовать для «плоского» проекта

Flat Icon Pack

Не знаем, заметили вы или нет, но в последнее время (особенно в последний год) в веб-дизайне по всему миру начала прослеживаться чёткая тенденция к упрощению, жесткому минимализму и визуальному облегчению того, с чем мы как пользователи взаимодействуем каждый день. Проще говоря, дизайн стал «плоским»: в отличии от выпуклых иконок времен бурного роста социальных сетей и 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 это смелый шаг. И только они могут на него решится. Их история имеет десятки подтверждений, потому им это скорее удастся, нежели наоборот.

Что такое flat design? | Университет СИНЕРГИЯ

Flat design — современный способ отрисовки юзабилити сайта. Основные приемы плоского дизайна позволят улучшить ранжирование сайта в сети.

Flat design – новая тенденция мира дизайна, популярность которой возрастает последние годы пропорционально спросу. Главное отличие от иных направлений — он выступает против визуализации объектов, чтобы они были схожими с реальными предметами.

Что такое флэт-дизайн?

Если проанализировать само происхождение понятия, то flat design переводится, как «плоский дизайн». Он преследует главный принцип — использование минималистического подхода при моделировании юзабилити сайта. Эта концепция ставит во главу угла комфорт, удобство пользователя.

Приемы плоского дизайна

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

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

Говорим «нет» лишним эффектам

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

Простота очертаний

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

Цветовые контрасты

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

Типографика

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

Ориентация на опыт

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

Удобство для смартфонов

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

Скорость загрузки

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

Для чего используется?

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

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

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

Что можно достичь за счет перехода к плоскому дизайну?

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

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

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

Плоский дизайн. История, преимущества и практика.

| by tubik

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

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

Toonie Alarm

Очевидно, что плоский дизайн появился не из воздуха. Его корни обычно уходят в швейцарский стиль, который историки сферы дизайна считают его прямым предком. Швейцарский стиль, также известный как Международный типографский стиль или сокращенно Международный стиль, — это направление, которое возникло и получило свою порцию критики в 1920-х годах, а затем получило свое яркое выражение в графическом дизайне Швейцарии 1940–50-х годов, справедливо став прочной основой графического дизайна. середины 20 века по всему миру.Руководителями этого творческого движения были Йозеф Мюллер-Брокманн, представитель Цюрихской школы искусств и рукоделия, и Армин Хофманн из Базельской школы дизайна. Согласно порталу Design Is History, краткое описание ключевых особенностей этого стиля выглядит следующим образом: «…стиль предпочитал простоту, разборчивость и объективность. Из множества вкладов двух школ в разработку было использование типографики без засечек, сеток и асимметричных макетов. Также подчеркивалось сочетание типографики и фотографии как средства визуальной коммуникации. Основные влиятельные работы были разработаны как плакаты, которые считались наиболее эффективным средством коммуникации».

Йозеп Мюллер-Брокманн, Афиша автоклуба Швейцарии, 1955 г. Йозеф Мюллер-Брокманн, Афиша ратуши Цюриха, 1955 г. Армин Хоффман, 1959 г. любителям этого стиля понравились простые формы, жирные и строгие шрифты высокой читабельности, гармоничные и геометрически обоснованные сочетания деталей, плоские иллюстрации и четкая визуальная иерархия.Он быстро набирал популярность в разных странах мира и получил новую жизнь в искусстве начала 21 века.

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

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

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

Меню ресторана анимация

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

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

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

Singify App Tutorial

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

User Experience Wireframing

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

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

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

Концепции взаимодействия с пользовательским интерфейсом

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

Traved To Breakeh Взаимодействие GIF для вытягивания вкладка вкладка

UI Навигационные элементы и значки

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

Набор из плоских иконок плоских иконок, примененных в Veggie app плоские иконки плоский дизайн на Blog приложение плоских иконок в Senaily приложение Плоские элементы дизайна пользовательского интерфейса для PassFold

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

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

Cafe Coupon приложение Moneywise приложение иллюстрация Swiftybeaver Timeline приложение Здоровые наклейки

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

Бесплатные красочные обои звездных войн Rogue One Rio 2016 Rio 2016 Californation Bus San Francisco Painted Ladies

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

Tales of Jazz aide Book Cover Pikachu Poster MUSCLE Sucibide Squad Poster Spring Girl Открытка

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

логотип талисман за S SAILY APP логотип зарегистрирован для Passfold логотип дизайн для ANDRE логотип для Design4Users Logo Logo для Toonie Alarm

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

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

Руководство для начинающих к плоскому дизайну

лучшие практики для плоского дизайна

10 Top Tips на создание плоский дизайн графики

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

Принципы плоский дизайн

История плоского дизайна: как эффективность и минимализм превратили цифровой мир в плоский

Швейцарский графический дизайн

Flat vs.Примеры материального и скевоморфного дизайна

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

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

Скевоморфизм

Слово skeuomorph происходит от греческих слов skeuos (что означает «контейнер или инструмент») и morphḗ (что означает «форма»). В дизайне продукта мы определяем скевоморфизм как метод, используемый в дизайне пользовательского интерфейса, при котором объекты, значки и кнопки имитируют свои аналоги из реального мира. Например, значок корзины, который выглядит как мусорное ведро.

Зачем это делать? Во-первых, это помогает нам улучшить взаимодействие человека с компьютером (HCI). Это было важно еще в 1980-х годах, когда персональный компьютер был новой концепцией почти для всех. Крупные компании, такие как Apple, пытались свести к минимуму кривую обучения, создавая элементы и значки, которые были бы знакомы пользователям. Стив Джобс любил скевоморфизм, потому что считал, что он упрощает использование технологий людьми.

Вторая волна скевоморфизма пришлась на конец первого десятилетия 2000-х. Развитие мобильных устройств заставило дизайнеров снова использовать скевоморфизм, чтобы помочь пользователям понять, как взаимодействовать с этими новыми устройствами. Еще в 2008 году концепция сенсорного экрана была новой для многих пользователей, поэтому дизайнеры создали элементы пользовательского интерфейса, которые позволяли пользователям ссылаться на свой предыдущий опыт.Например, значок приложения камеры в Apple iOS 6 имел 3D-эффекты, такие как тени, глубину и текстуры, чтобы сделать его похожим на настоящую камеру.

Примеры скевоморфных иконок в интерфейсе Apple iOS. Изображение предоставлено Apple.

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

В Apple iOS 6 использовалась скевоморфная книжная полка, которая выглядела как настоящая физическая книжная полка с трехмерными полками и текстурами дерева. Изображение предоставлено ipadyoupad.

Через несколько лет после смерти Стива Джобса в 2011 году Apple отказалась от скевоморфизма. Было несколько основных причин, по которым Apple и другие дизайнерские компании приняли это решение:

• К середине 2010-х годов большинство пользователей уже научились использовать интерфейсы, и им больше не нужны были элементы реального мира, чтобы помочь им в этом.
• Скевоморфизм затрудняет масштабирование дизайна, поскольку он неудобен для отклика. В нем используется множество чисто декоративных элементов, которые гораздо сложнее адаптировать под различные экраны и разрешения.Для этого вам потребуется создать детали визуального дизайна для каждого размера/разрешения.
• Скевоморфизм требователен к ресурсам, что означает увеличение времени загрузки и использование большей пропускной способности. Последнее особенно критично для веб-сайтов.

Многие дизайнеры считают, что скевоморфизм мертв, но это не так. Скевоморфизм существует в тонких визуальных деталях во многих продуктах, которые мы используем сегодня. Например, в 2020 году Apple привнесла элементы скевоморфизма в дизайн macOS под названием Big Sur.

На приведенном ниже экране взгляните на Центр управления ОС, особенно на элементы управления «Экран» и «Звук» — на панели яркости дисплея используются мелкие детали скевоморфизма, такие как тяжелая тень для управления яркостью.

Визуальный стиль Центра управления в macOS Big Sur использует элементы скевоморфизма. Изображение предоставлено Apple.

Другой примечательный пример — иконки в Big Sur. Проверьте значки Apple Mail и Apple Messages на снимке экрана ниже.

В док-станции macOS Big Sur используются псевдо3D-значки.Изображение предоставлено Apple.

Плоский дизайн

В 2006 году Microsoft выпустила музыкальный проигрыватель Zune. Плеер должен был конкурировать с iPod от Apple — и, как мы знаем, Microsoft проиграла эту битву. Однако игрок представил миру новую концепцию: плоский веб-дизайн.

Для создания Zune дизайнеры создали новый визуальный язык под названием Microsoft Metro, который представлял собой интерпретацию Microsoft плоской эстетики. Метро было полной противоположностью скевоморфизму. С минимализмом в основе, цель этого языка заключалась в том, чтобы удалить все чисто декоративные элементы и сделать дизайн чисто утилитарным.Metro был одним из первых примеров плоского дизайна в цифровых продуктах, и Microsoft использовала этот язык для многих продуктов, включая Windows 8.

Визуальный дизайн Windows 8 основан на языке Metro. Изображение предоставлено Giorgosarv18.

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

Как следует из названия, эта тенденция использует такие характеристики, как:

• 2D-элементы
• Простая типографика
• Минимализм
• Яркие цвета

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

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

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

В попытке решить эту проблему сообщество дизайнеров разработало Flat 2. 0, визуальный стиль, который воплощает в себе все гладкие минималистичные характеристики плоского дизайна с несколькими заметными исключениями, которые немного приближают его к 3D. Например, он вводит только тонкие тени и градиенты, чтобы предложить улучшенный UX. С тех пор Flat 2.0 стал сегодня стандартом де-факто для приложений и веб-дизайна.

Дизайн-система Adobe Spectrum использует элементы плоской эстетики 2.0. Изображение предоставлено Adobe.

Material Design

Позднее, в 2014 году, Google выпустила собственный язык под названием Material Design. Эта система дизайна представляет собой более сбалансированную интерпретацию Flat 2.0 и пытается объединить реальный и цифровой миры. Слово «материал» относится к цифровым объектам, которые напоминают по свойствам объекты реального мира.

Хотя неясно, почему Google вообще создала Material Design, одной из возможных причин была необходимость унифицировать внешний вид вещей на разных устройствах Android, включая разные размеры экрана и разрешения. Материальный дизайн хорошо играет роль набора руководств, облегчающих эту задачу. Большая часть эволюции UX Google, внутренний гигант включает Material Design в большинство своих продуктов. Примеры Material Design включают YouTube, Evernote и многие другие приложения.

Итак, что такое материальный пользовательский интерфейс с точки зрения дизайна? По сути, Material Design — это использование в основном плоских элементов с тонкими 3D-штрихами. 3D штрихи помогают дизайнерам создавать многомерный опыт, позволяя им создавать несколько слоев, играя с осью Z.

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

Анимированный переход в Material Design. Видео кредит Google.

Заключение

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

Мы отказались от плоского дизайна. Куда мы направляемся дальше? | by Bharat Arimilli

Вы можете увидеть подобное явление с введением темного режима в iOS 13, которая во многом похожа на Windows Phone, которая впервые использовала темный режим в современных операционных системах для смартфонов.

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

Классификация: Плоский дизайн/Пост-плоский дизайн

После многих лет скучного и неуклюжего дизайна Android, который вынуждал производителей телефонов применять тяжелые скины поверх стандартного Android, Google, наконец, привнес на платформу подлинное чувство дизайна с помощью их собственный взгляд на эту тенденцию плоского дизайна.С помощью Material Design Google попытался создать систему дизайна, которую можно было бы применять на всех платформах, а не только на Android. Соответственно, Google повел эту революцию в плоском дизайне немного в другом направлении, отказавшись от полностью плоского дизайна. Несмотря на то, что Google сосредоточился на чистой минимальной типографике и следовал общему уплощению и упрощению элементов пользовательского интерфейса, на самом деле он продолжал использовать физические метафоры для элементов пользовательского интерфейса. Фактически, первоначальное название Material Design было Quantum Paper, поскольку вдохновение Google для языка дизайна было основано на переводе концепции физической бумаги в цифровой мир.

Карта, наложенная на другую с ощущением глубины. Фото предоставлено Google.

Эта концепция бумаги переводится в элемент пользовательского интерфейса, известный как «карта», который является общим контейнером для любой информации, которая может быть наложена поверх других элементов. Это наслоение элементов выполняется с помощью теней, придающих интерфейсам ощущение глубины. В отличие от языков действительно плоского дизайна, которые обычно работают в 2D-плоскости, Material Design добавляет Z-индекс, чтобы обеспечить существование третьего измерения для элементов.Там, где Microsoft пыталась упростить интерфейсы, убирая все метафоры из реального мира, Google продолжал использовать метафоры из реального мира, но в очень упрощенной и современной манере. Однако, как и в Metro (но в отличие от Apple), в Material Design полупрозрачность обычно не используется.

Пример элементов управления пользовательского интерфейса в Android Lollipop. Фото предоставлено Google.

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

Материальный дизайн появится почти во всех частях экосистемы Google, наиболее популярным из которых стал Android Lollipop в 2014 году. Однако материальный дизайн также стал очень популярным языком дизайна, реализованным на сторонних веб-сайтах и ​​в веб-приложениях благодаря пользовательскому интерфейсу, вдохновленному материалами. библиотеки компонентов и фреймворки CSS, такие как Materialize.css и пользовательский интерфейс материалов. Это неудивительно, учитывая, что концепция «карточек» и общая философия языка дизайна очень хорошо подходят для веб-интерфейсов. Таким образом, Material Design стал одним из наиболее универсальных языков дизайна благодаря широкому использованию в Интернете. С точки зрения их использования в Интернете, языки дизайна Metro и Apple в основном останутся на собственных веб-сайтах Microsoft и Apple соответственно.

В то время как Material Design разделял базовый набор принципов с языками плоского дизайна, которые были до него, его уникальное использование теней и глубины сделало бы его скорее гибридом между плоским дизайном и его последующей эволюцией.Microsoft проложила путь к плоскому дизайну с действительно плоским Metro, Apple добавила полупрозрачности в свой язык дизайна iOS 7, а Google представила концепцию глубины в Material Design. Обратите внимание, что полупрозрачность и глубина были взаимоисключающими в этих языках дизайна. Потребуется еще несколько лет, чтобы единый язык дизайна объединил эти две вещи.

Классификация: Post-Flat Design

Fluent Design System от Microsoft — это не совсем новая система дизайна, а скорее эволюция принципов, установленных в Metro и более позднем Microsoft Design Language 2 (MDL2), представленном усовершенствовании Metro. в Windows 10.В то время как Fluent продолжает фокусироваться на чистых минималистичных пользовательских интерфейсах с упором на типографику и контент, а не на хром, он также отказывается от чисто плоских пользовательских интерфейсов, вновь вводя как глубину, так и полупрозрачность.

После, возможно, новаторской революции плоского дизайна с радикальным по-настоящему плоским языком дизайна, последний язык дизайна Microsoft использует множество небольших изменений, представленных как Apple, так и Google. Как было представлено в Material Design, Fluent использует тени, чтобы придать элементам пользовательского интерфейса глубину по оси Z. Подобно языку дизайна Apple, представленному в iOS 7, Fluent также активно использует полупрозрачность и размытие фона с помощью полупрозрачного размытого материала, известного как акрил. В отличие от Metro, Fluent теперь использует слегка закругленные углы для элементов пользовательского интерфейса, а не чисто угловатые формы своего предшественника.

Полупрозрачность, тени и слегка закругленные углы в меню «Пуск» в грядущем обновлении Windows 10. Фото предоставлено Microsoft.

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

Эффект Fluent Design Reveal. Фото предоставлено Microsoft.

Эта эволюция в сторону Fluent также неудивительна, учитывая, что к тому времени, когда он появился, Microsoft вовсю осваивала iOS и Android после кончины Windows Phone.Быстрое использование этих новых концепций значительно упростило бы для Microsoft разработку приложений, которые одновременно воплощали бы идеалы дизайна Microsoft и в то же время чувствовали бы себя знакомыми в каждой из этих операционных систем.

В отличие от смелых изменений дизайна, характерных для эпохи Metro, внедрение Microsoft Fluent было более постепенным и эволюционным. Это понятно, учитывая, что Fluent — это просто эволюция Metro, но это также привело к противоречивым и неполным реализациям.Хотя кроссплатформенные приложения и онлайн-сервисы Microsoft были обновлены с помощью языка дизайна, Windows 10, как известно, остается мешаниной из различных языков дизайна, включая Fluent, Metro, Windows Aero (Vista и 7) и даже устаревшую Windows (XP и более ранние версии). Одной из наиболее заметных реализаций Fluent в Windows 10 на сегодняшний день является замена Microsoft монохроматических плоских значков, представленных в Metro, на значки с цветом, а также с добавлением глубины и теней.

Новые значки приложений Microsoft Fluent.Фото предоставлено Microsoft.

Тем не менее, спустя три года после анонса Fluent, наиболее полной его реализацией для Windows является Windows 10X, грядущий вариант Windows 10 с интерфейсом, созданным с нуля без каких-либо устаревших элементов.

Windows 10X на устройстве с двумя экранами. Фото предоставлено Microsoft.

Будучи полностью построенным с учетом идеалов Fluent, считается, что многие интерфейсы, представленные в Windows 10X, будут перенесены в Windows 10. Кроме того, Microsoft недавно анонсировала предстоящие изменения Fluent Design в Windows 10, такие как обновленное меню «Пуск». показано выше.Наконец, хотя элементы управления Fluent UI исторически были доступны только для приложений, созданных на современной платформе приложений универсальной платформы Windows (UWP) Windows 10, будущая библиотека пользовательского интерфейса, известная как WinUI 3, добавит элементы управления Fluent UI во все приложения Windows независимо от базовой технологии. Это позволит гораздо более тщательно реализовать Fluent Design в сторонних интерфейсах, а также в сторонних приложениях.

Классификация: Post-Flat Design

На конференции WWDC 2020 Apple представила macOS 11 Big Sur с полностью переработанным пользовательским интерфейсом, во многом вдохновленным iOS и iPadOS.Это не случайно, поскольку в этом выпуске Mac становится еще ближе к своим мобильным братьям и сестрам, переключая базовую архитектуру с процессоров Intel на тот же кремний, разработанный Apple, который используется в их мобильных устройствах. Соответственно, приложения для iOS и iPadOS впервые смогут запускаться на компьютерах Mac. Поскольку платформы Apple немного сходятся в этом отношении, Big Sur пытается объединить их визуально. Конечно, в отличие от неоднозначной попытки Microsoft приблизить настольную Windows к Windows Phone в форме Windows 8, Apple не пытается сделать macOS более похожей на iOS или iPadOS.Big Sur просто перенимает язык мобильного дизайна Apple в рамках взаимодействия с настольными компьютерами.

Хотя Big Sur перенимает многие элементы дизайна из iOS и iPadOS, он также вводит новые элементы в язык дизайна Apple. Подобно направлению, в котором Microsoft пошла с Fluent, Big Sur вновь вводит концепцию теней в основную философию дизайна Apple. Big Sur также представляет собой редизайн, но это скорее эволюция предыдущего дизайна Apple, чем полное изменение.Обновленные значки Big Sur, как правило, представляют собой незначительные изменения по сравнению с их предшественниками. Большинство просто добавили тени, чтобы визуально различать элементы, а также приняли согласованную форму значков, подобную iOS. Фактические интерфейсы по-прежнему используют полупрозрачность больше, чем тени, а это означает, что нет резкого изменения прошлого.

Переработанные иконки Big Sur. Фото предоставлено Apple.

С Big Sur мы снова видим больше доказательств того, что Apple и Microsoft объединяются вокруг схожих идеалов. Принятие Fluent полупрозрачности и размытия фона, как Apple сделала с iOS 7, означает, что приложения Big Sur и Fluent теперь имеют общий элемент дизайна полупрозрачных боковых панелей. Конечно, как всегда, интерфейсы Apple и Microsoft остаются совершенно разными, но интересно наблюдать, как они развиваются в несколько схожих направлениях. Конечно, главное отличие здесь заключается в том, что Apple смогла провести тщательную модернизацию своей настольной ОС за один выпуск, в то время как Microsoft уже три года пытается сделать это с Windows 10. Хотя сегодня Apple и Microsoft могут иметь много схожих элементов в своих языках дизайна, Apple уже опережает их в реализации, несмотря на трехлетнее преимущество Microsoft.

Подобные эволюции могут иметь и другую причину. Одной из целей Microsoft при разработке Fluent было создание языка дизайна, который также можно было бы использовать в смешанной реальности. По слухам, Apple выпустит гарнитуру дополненной реальности в 2022 году, и редизайн Big Sur может стать шагом к этому.

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

Ранняя неоморфная концепция Филипа Легьерски на Dribbble.

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

Проще говоря, если приведенная выше концепция дизайна — это то, что мы приняли за идею неоморфизма, то нет, компании никоим образом не движутся к этому.Однако, если мы отступим и подумаем о неоморфизме просто как о повторном введении некоторых метафор реального мира, таких как свет, обратно в плоский дизайн, тогда мы можем классифицировать приведенные выше концепции просто как крайние интерпретации неоморфизма. В то время как вышеприведенная концепция является ранней и экспериментальной интерпретацией неоморфизма, то, что мы видели в macOS Big Sur и Microsoft Fluent Design, возможно, можно считать более утонченными и зрелыми его интерпретациями.

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

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

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

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

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

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

Эволюция плоского дизайна

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

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

Плоский дизайн и Microsoft

Крупнейшим игроком в плоском дизайне и первым, кто выдвинул этот стиль на передний план, была Microsoft. В 2006 году Microsoft выпустила музыкальный проигрыватель Zune. Это было дорого, применяло DRM к вашим музыкальным файлам и было коммерческим провалом. Но даже несмотря на то, что Zune не имел коммерческого успеха, это был первый шаг в определении остальной части дизайна Microsoft на долгие годы. Интерфейс Zune был минималистичным, с акцентом на светлую и крупную типографику, а интерфейс был свободен от лишних деталей и элементов.

С 2006 года по сегодняшний день Microsoft использовала Zune в качестве основы для разработки своего изображения и визуального интерфейса, становясь более чистым и плоским. Другие продукты Microsoft также повлияли на этот стиль, например панель управления Xbox 360, квадратный интерфейс, в котором использовались простые значки и типографика. «Metro UI» Windows 8, вероятно, был одним из самых масштабных изменений интерфейса в Microsoft. Его простой геометрический интерфейс был воспроизведен вскоре после этого в Windows Phone 7, уменьшенной мобильной версии интерфейса Windows 8.

Как создать плоский дизайн?

Кнопки

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

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

Формы

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

Типография

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

Цвета

Фундаментальной частью разработки интерфейса является определение цветовой палитры.Цветовые схемы, используемые в интерфейсах плоского дизайна, имеют тенденцию быть более смелыми и яркими, чем некоторые другие цветовые палитры. Flat UI Colors был разработан с учетом этого и является отличным местом для ознакомления с некоторыми из лучших (и самых популярных) цветов, используемых сегодня в плоском дизайне.

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

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

Формы

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

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

Где следует использовать плоский дизайн?

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

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

Удобство использования (всегда) важнее внешнего вида

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

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

Итак, стоит ли мне использовать плоский дизайн?

Всегда помните, что тренд — это всего лишь тренд. Попробуйте создать отличный дизайн, но такой, который подойдет вашему целевому пользователю. Приоритетом является создание функционального и удобного веб-сайта, а не красивого и модного веб-сайта.Как сказал Уэллс Райли в своем посте Меньше эстетики, больше дизайна : «Дизайн — это форма решения проблем. Никогда не забывайте, что ».

скевоморфных vs.

Плоский дизайн — UX Office

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

Какая разница?

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

Изображение 1 : Эти приложения иллюстрируют скевоморфный дизайн. Они напоминают реальный блокнот и покерный стол.

Плоский дизайн Избегайте всего, что напоминает визуальные эффекты из реальной жизни , такие как градиенты, тени, скошенные края и т. д. Многие дизайнеры начали переходить от скевоморфизма к плоскому дизайну из-за его простоты и чистоты.Windows 8 от Microsoft и iOS 7 от Apple первыми использовали плоский дизайн, и в настоящее время большинство программного обеспечения использует язык плоского дизайна.

Скевоморфизм

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

Скевоморфный дизайн эффективно учит пользователей, как использовать новые или сложные технологии, связывая их с реальными объектами. Это также снижает кривую обучения продукта (Interaction Design Foundation). Но что более важно, скевоморфные конструкции обеспечивают большие возможности .Доступность сообщает пользователям, как взаимодействовать с объектом . Успешные скевоморфные элементы интерфейса избегают использования всплывающего текста (или всплывающих подсказок) для описания их использования (Джефф Харт).

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

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

Изображение 2 : Это диджейское приложение выглядит как проигрыватель, еще один пример скевоморфного дизайна.

Недостатки

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

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

Плоский дизайн

Преимущества

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

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

Еще одним преимуществом плоского дизайна является масштабируемость. Пользователи все больше полагаются на свои мобильные устройства, где ценно пространство экрана. Плоский дизайн с меньшим количеством графических нюансов и эффектов имеет тенденцию быть минималистичным (группа NN), что позволяет пользователю сосредоточиться на содержимом . Poshly, косметический стартап изменил дизайн своего веб-сайта, сделав его более минималистичным и плоским, и они увидели такие преимущества, как увеличение вовлеченности пользователей на 20% и упрощение мобильной разработки (Предприниматель).

Недостатки

Несмотря на основные преимущества плоского дизайна, плоский дизайн может создавать проблемы с удобством использования, особенно в плохо продуманных проектах. Некоторые сообщения о плохом удобстве использования ранних выпусков плоского дизайна в Windows 8 и iOS 7 иллюстрируют эти проблемы.

Плоский дизайн может снизить возможность обнаружения определенных элементов пользовательского интерфейса. В Metro Design в Windows 8 пользователи с трудом различают интерактивные и не интерактивные элементы (рис. 3).Даже значки системы иногда не передают интерактивность, а значки должны помогать пользователям интерпретировать систему и привлекать клики (NN Group).

Изображение 3 : Иконки сами по себе не всегда обеспечивают кликабельность, как в Windows 8.

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

Наконец, сильная зависимость от иконок может быть проблемой с плоским дизайном. Некоторые значки объясняют пользователям свое назначение, а некоторые носят абстрактный характер.Значок общего доступа Android, например, не объясняет своего назначения без дополнительного текста. Это резко снижает обучаемость . (iOS использует другой значок общего доступа, что также снижает обучаемость.)

О чем следует помнить при разработке

После объединения всех различных плюсов и минусов скевоморфизма и плоского дизайна, вот несколько важных моментов, о которых следует помнить при разработке интерфейсов (NN Group):

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

Изображение 4 : iOS (слева) и стороннее приложение (справа) по-разному сигнализируют о кликабельности.

Больше примеров и вдохновения

Google представила Material Design в 2014 году, и его можно считать «золотой серединой» между скевоморфизмом и плоским дизайном.Использование метафор в дизайне последовательно информирует пользователей об интерактивности и иерархии. Карточки, тени и тонкая анимация позволяют пользователям понять, что интерактивный элемент интерфейса.

Когда плоский дизайн терпит неудачу

Плоский дизайн сейчас является самой популярной тенденцией в дизайне пользовательского интерфейса. Внешне плоский дизайн прост:

1. Не используйте градиенты, тени и текстуры
2. Используйте простые формы, яркие цвета и четкую типографику

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

Flat Design’s Origin

«Дизайнер понимает, что достиг совершенства не тогда, когда нечего добавить, а тогда, когда нечего убрать». – Антуан де Сент-Экзюпери

Скевоморфный дизайн

Плоский дизайн – это реакция на своего предшественника, скевоморфизм. Skeuomorphs — это пользовательские интерфейсы, разработанные так, чтобы они выглядели как объекты реального мира. Например, приведенный ниже пользовательский интерфейс напоминает внешний вид и функции реального аудиокомпрессора:

Источник: Клаус Гёттлинг Скевоморфы появились в 1980-х годах как способ упростить людям работу с компьютерными интерфейсами.

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

Цель плоского дизайна

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

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

Проблемы с плоским дизайном

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

Несоответствия пользовательского интерфейса iOS 7

Перед дебютом мобильной операционной системы ходили слухи: под новым руководством Джонатана Айва iOS 7, наконец, собиралась отказаться от скевоморфного дизайна и стать плоской. Так оно и было. Взгляните на сравнение ниже, когда iOS 7 была впервые анонсирована:

Источник: designmodo.com Скевоморфные элементы исчезли.

Больше никаких стилизованных значков и отделки из искусственного дерева. Что не так с iOS 7? Это непоследовательно.

Иконки выглядят явно неуместно, как будто они были разработаны разными командами (и, вероятно, так оно и было).Некоторые значки имеют градиенты. Другие значки — нет.

У значков, которые имеют градиенты, иногда градиенты идут в разных направлениях: Толщина линий различается. Символические изображения некоторых значков чрезмерно упрощены и иногда лишены смысла. Например, значок Game Center представляет собой группу разноцветных стеклянных кругов: Что означает значок Game Center ?

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

Значок Газетный киоск , например, слишком сложен и детализирован по сравнению с его соседями:

Согласованность имеет решающее значение для создания удобного дизайна. Плоский или нет.

Проблемы с удобством использования, возникающие из-за «слишком плоского»

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

И все? Кусок пирога. Но это еще не все.

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

В некоторых пользовательских интерфейсах с плоской конструкцией пренебрегают функциональностью. Возьмем, к примеру, Windows 8:

Источник: mobiletechworld.com Пользовательский интерфейс Window 8 абсолютно плоский. Смелое использование смелых цветов и мозаичный дизайн Modern UI — свежие, позитивные шаги для бренда Windows.

Но его главная проблема — удобство использования. В Windows 8 Microsoft попыталась перенести возможности планшета на рабочий стол. Это не сработало.

Плоский интерфейс Windows Современный пользовательский интерфейс (ранее известный как Metro UI) не является интуитивно понятным для тех, кто использует клавиатуру и мышь. Согласно ежемесячному отчету Soluto’s Monthly Insights Report, между и 44-60% всех пользователей Windows 8 (настольных компьютеров и планшетов) выбирают старый интерфейс, а не вариант Modern UI. Хотя плоский дизайн призван упростить задачу, многие люди по-прежнему находят старый интерфейс более удобным для пользователя.

Джейкоб Нильсен провел тесты удобства использования в Windows 8 и обнаружил несколько проблем с пользовательским интерфейсом. Основная проблема, которую обнаружил Нильсен, заключалась в том, что плоский дизайн операционной системы мешал пользователям понять, кликабельны они или нет.

Источник: nngroup.com Хотя новые значки Windows 8 элегантны и ясны, они не кажутся действенными.

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

Есть даже некоторые опасения по поводу того, что Центр управления iOS 7 «слишком плоский»:

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

Решение: почти плоский дизайн?

Так как же решить проблемы с плоским дизайном? Почти плоский дизайн.

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

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

Чистый и последовательный, недавний редизайн пользовательского интерфейса Gmail приятен для глаз. Понятно, что дизайнеры Google любят плоский дизайн — в последнее время они двигаются к все более и более плоским пользовательским интерфейсам.

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

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

Будущее плоского дизайна

Интерфейс Gmail именно такой, каким и должен быть плоский дизайн:

• Удобный для пользователя
• Последовательный
• Прозрачный

Версии плоского дизайна для iOS 7 и Windows 8 часто жертвуют удобством использования и хорошо зарекомендовавшими себя передовыми методами проектирования ради плоскостности. Честно говоря, и Apple, и Microsoft прислушиваются к критике. Перед выпуском iOS 7 Apple решила некоторые проблемы с удобством использования, такие как обновление слайда для разблокировки функции со стрелкой, указывающей вправо, чтобы дать пользователям лучшую визуальную подсказку, и они настроили цветовые градиенты для значков Safari и Mail, чтобы значки приложений операционной системы более сплочены.

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

Связанный контент

Означает ли трехмерное будущее смерть плоского дизайна?

Почему 3D-дизайн становится все более доминирующим в брендинге?

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

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

3D-дизайн не означает, что вы должны быть профессионалом в САПР — вы можете наполнить плоский дизайн 3D-элементами, чтобы придать глубину и интерес.Векторный шрифт, автор: АННА ЗАСИМОВА.

---

У плоского дизайна был свой день?

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

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

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

Технологические компании, такие как Microsoft, недавно перешли к большему количеству элементов 3D-дизайна в брендинге значков приложений (например, логотип Microsoft Edge, выше). Изображение предоставлено автором rafapress.

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

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

Цветной шрифт Bungee от Дэвида Джонатана Росса.

---

Люфт плоской конструкции

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

Недавно два крупнейших технологических бренда — Firefox и Google — запустили новые версии своих логотипов (Firefox) и значков (Google), которые заменили 3D-дизайн более урезанными минималистичными версиями.

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

Урезанный дизайн логотипа родительского бренда Firefox. Огонь? Проверять. Лиса? Хм.

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

Эволюция (или деволюция) логотипа браузера Firefox. Да, ребята, лиса все еще там. Не паникуйте!

Аналогичную реакцию вызвали новые значки Google для Google Workspace, похожие друг на друга до степени смешения. Когда-то трехмерные и четкие, а теперь минималистичные и плоские, потребители отмечают, как трудно отличить такие приложения, как Gmail, Google Photos и Google Maps. Один сообразительный дизайнер даже создал бесплатное расширение для Chrome, которое позволяет пользователям восстанавливать старые значки на вкладках и в избранном.

В верхнем ряду находятся старые трехмерные и легко различимые логотипы Google, а внизу — их плоские и неразличимые новые воплощения.

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

---

3D-фобия? Как (постепенно) ввести 3D-стиль в ваши иллюстрации и графику

Конечно, для многих графических дизайнеров, выросших на диете швейцарского стиля, 3D-дизайн — не только чуждая концепция, но и исключительно дурной вкус. Возможно, менее графичный и менее утонченный, он является антитезой модернистской эстетике, отстаиваемой такими легендами графического дизайна, как Пол Рэнд и Сол Басс.

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

К счастью для 3D-фобов среди нас, если вы сегодня будете искать «плоский дизайн», результаты не будут строго плоскими. От сногсшибательной типографики до значков с градиентом — дизайнеры развивают свои плоские творения, тонко интегрируя 3D-элементы. Итак, если вы думаете, что вам нужно стать гением САПР за несколько недель, подумайте еще раз. Модный 3D-вид может быть легко достигнут в векторном программном обеспечении с помощью теней с цветовыми блоками, глянцевых бликов или порции текстуры.

Даже самый плоский из плоских дизайнов может стать объемным с помощью нескольких приемов и приемов. Изображение предоставлено автором Яной Михеевой.

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

---

3D-метод №1: Градиент цвета

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

Градиент

был популярен в графическом дизайне в течение последних нескольких лет, но интерпретация 2021 года отходит от неонового заката в стиле 80-х, предпочитаемого в 2019/20 году. Попробуйте слегка бодрящий пастельный градиент для логотипов или веб-сайтов. В качестве альтернативы поэкспериментируйте с темными тонами темно-красного, фиолетового, черного и чернильно-синего цветов, чтобы создать на иллюстрациях угрюмый контраст.

Изображение предоставлено Дианой Хлевняк. Изображение предоставлено автором astel design. Поэкспериментируйте с градиентами, чтобы добавить глубины и объема своим проектам.Изображение автора Maxger.

---

3D-техника №2: затенение и выделение

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

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

Изображение предоставлено автором Moremar. Изображение предоставлено автором Moremar. Добавление нескольких простых цветных блоков теней может мгновенно улучшить плоский дизайн. Изображение автора Anastasia_B.

---

3D-техника №3: ​​Измените углы

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

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

Векторный шрифт автора Alhovik. 3D-дизайн не означает, что вы должны быть профессионалом в САПР — вы можете наполнить плоский дизайн 3D-элементами, чтобы придать глубину и интерес.Изображение предоставлено автором Яной Михеевой.

---

3D-метод №4: текстура и детализация

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

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

Добавление зернистых деталей. Изображение автора molaruso.

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

Простое добавление линий на лицо может добавить необходимые детали вашему рисунку. Изображение автора Moremar.

---

Уже конвертирован?

Несмотря на то, что в 2021 году брендинг склоняется к 3D-дизайну, это не значит, что вам нужно прямо сейчас отказаться от плоского дизайна.

No related posts.