Flat дизайн: Что такое flat design или плоский дизайн / Skillbox Media

Плоский дизайн: история, проблемы и эволюция

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

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

3D-эффекты

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

1. Выпуклые элементы выглядят так, будто на них можно нажать (кликнуть мышкой). Эта техника используется, чтобы обозначить на экране кнопку.
2.  Утопленные и полые элементы — как будто требуют, чтобы их заполнили. Эта техника применяется, чтобы выделить поля ввода или панель поиска.

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

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

• 5 принципов визуальной привлекательности современного веб-дизайна

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

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

Например, в ранних моделях планшета Kindle Fire от Amazon операционная система на базе Android использовала скевоморфный дизайн для виртуального книжного шкафа с 3D-полками и древесными текстурами.

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

Скевоморфный дизайн приложения в Kindle Fire

• 10 примеров материального веб-дизайна

Реализм

Реалистичный дизайн имитирует физические предметы или текстуры из эстетических соображений.

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

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

• Примеры использования пастельных тонов на посадочных страницах

История возникновения плоского дизайна

Релизы интерфейса Metro компанией Microsoft и Windows 8 в 2011 году во многом способствовали популяризации плоского дизайна. В документации Microsoft новый стиль назван «подлинно цифровым». Это словосочетание очень точно передает суть плоского дизайна.

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

Выбор плоского дизайна для домашней страницы Apple демонстрирует рост популярности тренда.

Скевоморфизм и реализм долгое время были отличительными знаками дизайна Apple — вплоть до 2013 года дизайнеры компании сопротивлялись «плоскому» тренду:

Домашняя страница Apple в 2007 году: панель навигации глянцевая, имеются 3D вкладки

2012 год: метафора вкладок осталась в прошлом, но панель навигации по-прежнему глянцевая и скругленная (это скорее пример реализма, чем скевоморфизма).

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

Домашняя страница Apple в 2012 году

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

Домашняя страница Apple в 2015 году

• 16 примеров интернет-магазинов с плоским дизайном

Проблемы юзабилити

С появлением плоского дизайна в 2011 году компания Nielsen Norman Group критически высказалась о проблемах, присущих его юзабилити.

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

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

В ходе исследования в рамках курсов «Дизайн для миллениалов» (Designing for Millennials) 22-летнюю жительницу Канады спросили, как она понимает, куда можно кликать на сайте, и она ответила:

«Если текст выделен голубым цветом или подчеркнут, значит, на него можно кликать. Иногда это понятно из контекста. Но подчеркивание реально помогает. Удобно, когда есть кнопка — но на ней необязательно должно быть написано “Нажмите сюда”, или другой текст: “Купить” ,“Купить сейчас”, “Добавить в корзину”».

Эта цитата очень точно иллюстрирует типы сигналов, по которым люди понимают, что им нужно делать:

1. Традиционные знаки (например, текст, подчеркнутый голубым цветом, кнопки).
2. Нечто, напоминающее традиционные знаки (например, подчеркивание текста любым цветом, текст в рамке).
3. Контекстные подсказки (например, текст, на который можно кликнуть, размещенный в верхней части страницы).

Так, домашняя страница сайта Trader Joe`s демонстрирует разнообразие кликабельных элементов:

• подчеркнутый текст традиционного голубого цвета для ссылки «Смотреть все»;
• плоский, красный фон для кнопки «Искать», понятной даже без реалистичных или 3D-эффектов;
• черные разделы-ссылки в панели навигации (узнать, что они кликабельны, можно только по их расположению).

Обратите внимание, что в целом «плоская» страница имеет один скевоморфный элемент — деревянную полку под ассортиментом продуктов:

Домашняя страница компании Trader Joe`s

• Как сделать кликабельные элементы лендинга интуитивно-понятными?

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

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

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

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

Material design от Google — один из примеров плоского дизайна 2.0 с правильно расставленными акцентами: в нем используются последовательные метафоры и заимствованные из физики принципы, помогающие людям разобраться в интерфейсе и интерпретировать визуальную иерархию контента:

Приложение Evernote для Android — хороший пример преимуществ плоского дизайна 2.0. Несмотря на наличие в основном плоского интерфейса, в приложении есть тени на панели навигации и плавающая кнопка “Добавить”.

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

• Эволюция веб-дизайна — 20 лет за 5 минут!

Вместо заключения

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

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

Высоких вам конверсий!

По материалам: nngroup.com 

05-11-2015

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

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

Вот примеры элементов, определяющих .

Жизнь после Web 2.0

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

Float Design

Типографика в основе стиля

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

Coderwall

Читайте также: 12 основных цветов и примеры их восприятия пользователями

Цветовая палитра плоского дизайна

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

Minimal Monkey

Свободное пространство, большие элементы

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

Beard Design

Плоский дизайн иконок, кнопок, иллюстраций

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

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

Читайте также: 20+ вдохновляющих сайтов с плоскими иллюстрациями в дизайне

Примеры шаблонов сайтов с плоским дизайном Flat UI

Примеры сайтов в стиле Flat-дизайна

Identity

83 Design Collective

Frunatic

The Umbrella Group

Slcl Foundation

My Felt

Behzad

Atlant

Simple as Milk

Weranda Family

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

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

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

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

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

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

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

СОВМЕСТИМОСТЬ С АДАПТИВНЫМ ДИЗАЙНОМ

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

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

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

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

ГИБКАЯ ПЛАТФОРМА

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

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

ЧИТАЕМАЯ ТИПОГРАФИКА

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

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

МИНУСЫ

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

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

Возьмем для примера вот этот сайт. Какие элементы в нем являются интерактивными. Все? Или только некоторые? Непонятно. Выяснить это можно только «методом тыка», но это уже лишние движения, что нежелательно.

ПОТЕРЯ ИНДИВИДУАЛЬНОСТИ

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

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

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

ПОГОНЯ ЗА МОДОЙ

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

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

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

НЕУДАЧНЫЙ ВЫБОР ШРИФТОВ

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

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

FLAT 2.0

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

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

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

Очень много для продвижения Flat 2.0 сделала компания Google. Гайдлайн Material Design – это попытка создать новый визуальный язык, объединяющий плоские и объемные элементы дизайна. Рекомендации Google очень подробны и следовать им легко и просто. При этом Google не настаивает на жестком соблюдении всех правил, изложенных в гайдлайне – дизайнеры могут экспериментировать, создавая свои оригинальные проекты, где могут сочетаться самые разные элементы.

ВЫВОД

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

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

По большому счету, разница между плоским дизайном (Flat design) и материал дизайном (Material Design) едва уловима. Человеку, который не имеет глубоких познаний в графическом дизайне , они и правда могут казаться очень похожими. В этой статье я попытаюсь “пролить свет” на некоторые различия между ними. Вы получите дополнительные знания, которые так необходимы, чтобы случайно не ранить нежную натуру дизайнера.

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

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

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

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

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

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

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

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

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

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

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

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

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

Результаты юзабилити теста Windows 8 , проведенного NN Group, показали, что пользователи с трудом отличали кликабельные объекты от некликабельных. Пользователи жаловались, что объекты, которые выглядят как статичные, на самом деле оказывались кликабельными. В результате, основная миссия компании — помочь пользователям корректно интерпретировать систему, была провалена.

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

Материал дизайн

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

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

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

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

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

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

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

• Минималистичный стиль.
• Достаточно понятен на интуитивном уровне. Материал дизайн будет одинаково легко восприниматься как опытными пользователями, так и новичками.
• Умеренный скевоморфизм. Все выглядит более реалистично благодаря использованию оси Z (уникальной концепции Google).
• Имеется набор руководств, которые постоянно обновляются. Поэтому любой дизайнер всегда может обратиться к ним, если возникают трудности в процессе работы.
• Поощряется анимация для веб-решений. Нет необходимости напоминать, насколько люди любят движение. Кроме того, анимация позволяет сделать интерфейс более понятным и интуитивным.

• Имеет владельца (компания Google). Поэтому любые вопросы и предложения по улучшению должны быть адресованы с владельцу.
• Из-за наличия оси Z на процесс создания дизайна может потребоваться больше времени.
• Анимированные элементы требуют больше ресурсов.
• Неуклонное следование руководствам может ограничивать оригинальность дизайна.

Подведем итог

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

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

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

Что такое flat design (плоский дизайн) и в чем его основные принципы

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

Flat design – это…

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

Считается, что flat design появился в году эдак 2010, когда Microsoft представила одну из своих новых операционных систем (Windows Phone). К 2014 году тенденция обрела огромную популярность. Сейчас она распространена повсеместно, и редко какой сайт выполнен не по этому принципу.

Данную концепцию противопоставляют скевоморфизму – направлению, где упор делается как раз на детали, объем, тени и блики. Этой концепции раньше придерживался Apple. Со временем его красота и возможности в плане графики приелись аудитории, важнее стало создание чего-то более лаконичного и удобного. Соответственно, плоская графика такой запрос удовлетворила.

Где и для чего используется

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

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

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

Комьюнити теперь в Телеграм

Подпишитесь и будьте в курсе последних IT-новостей

Подписаться

Основные принципы flat design

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

1. Отсутствие лишних эффектов. Это значит, что все элементы и изображения находятся на одной плоскости, также не используются демонстрация объема, текстур, теней и бликов.
2. Наличие у предметов простых и узнаваемых черт. Причем здесь важно не передать реалистичность объекта, а понятным образом изобразить его схематически. Например, если мы говорим про время, то это могут быть часы, а если про чтение – книжка. Никаких лишних деталей, только характерная, узнаваемая форма, по которой пользователи с легкостью могут распознать объект.
3. Присутствие цветовых контрастов. Из-за отсутствия визуальных эффектов полагаться приходится только на контрастность. Соответственно, два элемента не должны сливаться друг с другом.
4. Упор на типографику. В этой концепции за счет упрощения изображений больше внимания уделяется именно тексту. Поэтому внимание здесь отдается шрифтам, кеглю, интервалам и так далее.
5. Ориентация на опытных пользователей. Здесь больше затрагивается пользовательский опыт. Например, продвинутый зритель знает, как выглядят кнопки под разные команды, а вот начинающий может не сразу распознать суть какого-то визуального объекта.
6. Удобство при отображении на гаджетах. Будь то часы, смартфон или планшет – эти девайсы пользователи в руках (а некоторые на руках) используют намного чаще. Именно дизайн должен быть оптимизирован под разные мобильные экраны. И важно, чтобы элементы хорошо распознавались и в крупном, и в мелком масштабе.
7. Быстрая загрузка страниц. Если сравнивать с объемной графикой, файлы с плоскими объектами весят значительно меньше. Соответственно, вкладка или страница загружается значительно быстрее.

Плюсы и минусы

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

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

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

Но и недостатков у данного подхода тоже достаточно, и вот что к ним относят:

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

Примеры

Теперь, чтобы лучше понять и передать суть flat design, приведу несколько успешных примеров сайтов с подобным оформлением.

Microsoft Windows

Это те, с кого, предположительно, и началась вся эта flat-тема. Первой в данном плане стала именно мобильная операционная система Windows Phone. Тогда они использовали художественный стиль оформления Metro, где акцент как раз делается на текст, типографику, графический минимализм, плавные анимации. Но ключевая характеристика – прямоугольные плоские плитки, на которые назначались определенные функции. Затем уже на основе этого интерфейса разрабатывали сайт корпорации, Xbox 360, Xbox One, Windows 8, ну и частично Windows 10.

Современные смартфоны

Вне зависимости от того, какую ОС мы берем – iOS или Android, дизайн интерфейса соответствует тенденции плоского дизайна. Иконки выполнены минималистично и отражают основную суть приложения; теней, бликов и объемов также очень мало, только по мере надобности. Только редкие приложения, скачанные из онлайн-маркета, могут выполняться в более объемном стиле, но и это сейчас редкость.

Комьюнити

Ну и, конечно, сайт Timeweb Комьюнити тоже является ярчайшим примером реализации flat дизайна. Здесь тоже все просто – преобладание текста, наличие контраста, акцент на контенте и тексте, отсутствие лишних деталей и так далее.

На этом у меня все! Надеюсь, суть направления flat design стала вам более понятной, и вы сможете использовать его в своей практике 😉

Чем отличается плоский дизайн от материал дизайна

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

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

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

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

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

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

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

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

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

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

Плюсы:

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

 Минусы:

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

Материал дизайн

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

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

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

Плюсы:

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

Минусы:

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

Заключение

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

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

Ваш выбор пишите комментариях, посмотрим кого больше!

Читайте также:

8 книг, которые должен прочесть каждый дизайнер

400+ отличных полезных сервисов для каждого

Почему дизайнер и программист должны работать вместе

Блог

28 Май, 2019

Flat design (плоский дизайн) — современный стиль графического дизайна и пользовательского интерфейса. Он не приемлет выпуклостей, бликов, текстур и других атрибутов реализма, но задает тон разным элементам сайта. Flat design давно покорил сердца дизайнеров и уверенно находится в моде и сегодня. Google, YouTube, Microsoft, Apple используют его для оформления приложений и сайтов. «Флэт дизайн» противопоставляется скевоморфизму и насыщенному дизайну. Однако не стоит недооценивать этот стиль и считать его слишком простым или бескомпромиссным! За время своего существования он впитал в себя некоторые особенности скевофорфизма, обзавелся тенями и градиентами. Так же у Flat design есть важное преимущество — файлы изображений имеют небольшой размер и не увеличивают время загрузки страницы.

Есть ли жизнь после Web 2.0?

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

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

Сосредоточьтесь на типографике


Типографика является важнейшим элементом плоского дизайна. Текст используется для передачи сообщений/офферов, обеспечивает навигацию по ресурсу и объясняет посетителю цель конверсии/смысл пребывания на вашем лендинге/сайте. Хороший текстовый контент может даже заменить использование изображений в целом, и тогда дизайн как таковой сведется к подбору нужного шрифта (размер, гарнитура, цвет и т. д.) для создания призыва к действию. На многих сайтах уже сейчас элегантная типографика стала центральным элементом дизайна. Однако всегда нужно помнить о том, что поскольку плоский дизайн чаще всего простой и минималистичный, то и типографика должна максимально соответствовать ему (никаких вычурных шрифтов типа «рукописных»!). Для выделения текстовых элементов навигации и ключевых заголовков чаще всего используется верхний регистр шрифтов.

Использование цветов

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

Большие элементы, много свободного места


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

Плоские иконки, кнопки, иллюстрации

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

В аналогичном минималистическом ключе выполнены и иллюстрации — на них полностью отсутствуют световые и 3D-эффекты, столь распространенные в предыдущую эпоху Интернета.

Плоский дизайн — мощное направление в дизайне — но только при правильном применении.

Плоский дизайн веб-сайта: принципы и примеры

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

Дизайн

10 сентября 2019 г.

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

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

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

Создавайте четкие и эстетически привлекательные плоские конструкции уже сегодня с помощью инструмента прототипирования Justinmind!

Скачать бесплатно

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

• Откуда взялся плоский дизайн сайта?
• Эволюция плоского дизайна веб-сайтов: плоский дизайн 2.0
• Принципы отличного плоского дизайна веб-сайтов
• Примеры плоского дизайна веб-сайтов

Откуда взялся плоский дизайн веб-сайтов?

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

Знаете ли вы: точно так же, как картофель фри на самом деле бельгийский, швейцарский стиль восходит к Германии 1920-х годов, к экспериментальному художественному движению в художественной школе Баухаус.

Перенесемся в 2000-е, и мы увидим цифровое возрождение швейцарского стиля: плоский дизайн. Впервые известный как Metro Design, разработанный Microsoft, плоский дизайн начал внедряться в MP3-плеер Zune.

Zune имел довольно современный плоский дизайн пользовательского интерфейса для своего времени с большими строчными шрифтами без засечек. Тем не менее, устройство не имело большого успеха, в основном потому, что ему приходилось конкурировать с iPod. Затем Microsoft пошла дальше и выпустила свои платформы Windows 7 и 8, которые перекликались с плоским дизайном, используемым в Zune.

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

Хотите открыть для себя модный новый стиль дизайна? Прочтите наш пост о неймофизме.

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

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

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

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

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

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

«…мы поняли, что людям уже стало комфортно прикасаться к стеклу, им не нужны физические кнопки, они поняли преимущества…»

 Джони Айв  — руководитель отдела дизайна Apple 

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

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

Image by HireFullStackDeveloperIndia

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

«…была невероятная свобода в том, чтобы не ссылаться на физический мир так буквально. Мы пытались создать среду, которая была бы менее конкретной. Он избавился от дизайна».

 Джони Айв  — руководитель отдела дизайна Apple 

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

Найдите богатую коллекцию бесплатных иконок плоского дизайна для использования в своих прототипах на нашей странице наборов пользовательского интерфейса!

Конечно, после Web 2.0 2000-х плоский дизайн веб-сайтов был глотком свежего воздуха.

Когда все становится слишком плоским

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

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

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

Эволюция плоского дизайна веб-сайтов: плоский дизайн 2.0

Встречайте нового героя — плоский дизайн 2.0, иногда называемый «почти плоским дизайном» или «глубоким плоским дизайном». Плоский дизайн 2.0 сохраняет ту же простоту плоского дизайна веб-сайта, используя упрощенные значки и дизайн пользовательского интерфейса, но с добавленной размерностью слоев, что делает его в некотором роде похожим на дизайн Google Material.

Плоский дизайн Интерфейсы 2.0 часто имеют изометрический эффект, который можно даже сравнить с 2.5D-дизайном многих ретро-видеоигр, таких как SimCity 2000, Doom и Duke Nukem 3D. Это также привело к тому, что изображения и элементы плоского дизайна 2.0 получили название «псевдо 3D».

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

Этот тонкий, но улучшенный слой глубины в плоском дизайне 2.0 означает, что дизайнеры могут упростить вещи и снизить когнитивную нагрузку на пользователя, одновременно улучшая UX, предлагая визуальные подсказки. Благодаря плоскому дизайну 2. 0 кнопки теперь выглядят кликабельными, а пространственные отношения между элементами на экране восстановлены.

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

Принципы отличного плоского дизайна веб-сайта

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

Чтобы получить эффект плоского дизайна веб-сайта

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

Значки для плоского дизайна веб-сайта

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

Изображение Теда Кулакевича

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

Изображения для плоского дизайна веб-сайта

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

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

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

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

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

Визуальная иерархия в плоском дизайне веб-сайта

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

Чтобы получить эффект плоского дизайна 2.0

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

3D-стилизация и ось Z

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

Изображение Ranjith Alingal

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

Заставьте вещи двигаться

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

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

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

Использовать масштабируемые векторы

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

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

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

1.

450 GSM

Снимаю шляпу перед 450 GSM за сохранение классической простоты плоского дизайна веб-сайта и в то же время за использование методологий плоского дизайна 2.0. Этим ребятам удается сделать вещи простыми и интуитивно понятными с их дизайном.

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

Зеленая кнопка CTA «начать печать» меняет градиент на более светлый оттенок пастельно-зеленого, когда вы наводите на нее курсор. Эта минималистичная анимация помогает показать, что на нее можно кликнуть.

2. Caps viens-là

Caps viens-là — это простая и веселая онлайн-игра, которая является прекрасным примером эволюции плоского веб-дизайна с 2,5D-графикой. Дизайнеры создали ощущение глубины с помощью 3D-стиля и теней, но элементы, с которыми вы взаимодействуете, безошибочно 2D.

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

3. QБухгалтерский учет

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

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

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

4. Turner’s Dairy

Turner’s Dairy — отличный пример традиционного плоского дизайна сайта. Он органично сочетает реальные изображения своих продуктов с яркими цветами. Сайт не использует затенение или 3D-эффекты. Единственная анимация — это движение каждой панели и кнопки, на которые вы наводите курсор, для демонстрации кликабельности

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

5. CSS Conf EU

CSS conf EU перемещается по Европе, проводя конференции по программированию и принимая различных докладчиков, являющихся экспертами в этой области. Их плоский дизайн веб-сайта — отличный пример того, как использовать цвет в своих интересах для создания простого, но привлекательного дизайна, который направляет взгляд по всей странице.

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

6. Olapaloma

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

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

7. Santa Tracker

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

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

8. Wthr.live

Wthr.live — это забавный прогноз погоды, созданный для вдохновения дизайнеров. Это блестящий пример того, как плоский дизайн веб-сайта может вызывать волнение и вовлекать пользователя.

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

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

9. Dots

Компания Dots, занимающаяся мобильными играми из Нью-Йорка, преуспела в своем рекламном веб-сайте, и при этом осталась совершенно неизменной.

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

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

10. Lânderapp

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

CTA не имеют оттенков или градиентов, но выглядят интерактивными, с контрастным оранжевым и жирным белым шрифтом, которые также темнеют, когда вы наводите на них курсор.

Завершение

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

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

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

ПРОТОТИП · СООБЩЕНИЕ · ПОДТВЕРЖДЕНИЕ

УНИВЕРСАЛЬНЫЙ ИНСТРУМЕНТ ПРОТОТИПИРОВАНИЯ ДЛЯ ВЕБ И МОБИЛЬНЫХ ПРИЛОЖЕНИЙ

Скачать бесплатно

Джозеф Даунс

Внутренний копирайтер UX, гурман и любитель классических автомобилей

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

Взгляд на плоский дизайн и почему он важен —

 

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

Конечно, от плоского дизайна легко отказаться как от еще одной мимолетной эстетической тенденции.

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

 

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

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

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

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

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

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

Что такое скевоморфизм?

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

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

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

Проблемы со скевоморфизмом

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

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

Решение, найденное в плоском дизайне

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

Пример № 1:

Пример № 2:

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

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

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

Эта адаптация идеально подходит для улучшения взаимодействия с пользователем несколькими способами.

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

Плоский дизайн — идеальный стиль для отличного UX

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

Плоский дизайн можно бесконечно адаптировать

Пример №1:

Пример №2:

Чтобы увидеть, как просто и красиво можно интегрировать эти приложения друг с другом, взгляните на дизайн Windows Phone в примерах №1 и №2. выше. Компания решила стать ключевым игроком в отказе от внешнего вида, который был тесно связан с Apple, и ее решение окупается за счет отличного интерфейса; яркая цветовая блокировка используется как для обозначения разделов, так и вся типографика и изображения выглядят элегантно и цельно.

Заключение

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

 

Изображение лингвини предоставлено Shutterstock.

 

Если есть разница

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Результаты теста удобства использования Windows 8, проведенного NN Group, показали, что пользователям было трудно отличить активные объекты от неактивных в интерфейсе ОС. Пользователи жаловались, что кликабельные объекты больше походили на логотипы, что почти сразу приводило людей в замешательство. В результате они не выполнили некоторые требования испытательной компании. Таким образом, это означало, что Microsoft, в свою очередь, не справилась с задачей помочь пользователям интерпретировать систему и привлечь клики.

Metro design

Еще одна компания, которая обычно ассоциируется с плоским дизайном, — Apple. Они отошли от скевоморфных элементов дизайна с выходом iOS 7, датируемым серединой 2013 года. И кажется, что их движение в этом направлении восприняли немного лучше. Главным образом потому, что компания не пыталась интегрировать совершенно новую концепцию пользовательского интерфейса, а просто добавила штрих к существующей. Это дало пользователям возможность использовать продукт, опираясь на свои предыдущие знания об ОС и Интернете.

Итак, материальный дизайн, в конце концов

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

Cleveroad material design concapt

Говоря о фирменном дизайне материалов, я имею в виду, что он имеет набор четко определенных руководств и принципов, которых должен придерживаться каждый уважающий себя мобильный дизайнер (однако Google не хочет, чтобы они все как в инструкции). Причина, по которой Google представила свой материальный дизайн, кажется довольно очевидной: необходимость сделать так, чтобы все выглядело одинаково на множестве устройств Android. Но в чем основная идея материального дизайна? Давайте узнаем

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

Дизайн материалов от Google

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

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

Pros

• Минималистичный и стильный.
• Легко понять. То есть ваша идея будет лучше донесена до масс.
• Экономия времени и ресурсов. Страницы загружаются быстрее, пропускная способность расходуется меньше.
• Сосредоточено на содержании. Никаких чрезмерно детализированных элементов пользовательского интерфейса, которые могут отвлекать пользователей от действительно ценных вещей.
• Одинаково хорошо выглядит на разных устройствах, будь то ПК или браузер смартфона, и делает страницы адаптивными.
• Ускоряет процесс дизайна веб-сайта/приложения, избавляясь от ненужных дизайнерских штрихов.

Плоский дизайн для веб-сайта

Минусы

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

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

Pros

• Минималистичный и стильный.
• Более интуитивный. Материальный дизайн отлично подходит как для опытных пользователей, так и для новичков.
• Умеренно скевоморфный. Делает все более реальным благодаря использованию оси Z (уникальная концепция Google).
• Имеет набор четко определенных руководств, которые постоянно обновляются. Так что вы всегда можете обратиться к ним, если у вас возникнут трудности в работе над проектом.
• Продвигает анимацию для веб-решений. Бесполезно отрицать, люди любят действие. Более того, анимация помогает пользователям лучше понять пользовательский интерфейс.

Концепция материального дизайна от Cleveroad

Минусы

• Принадлежит Google. Так что будет сложно улучшить что-то, чем вы недовольны, не спросив владельца.
• Может занять больше времени, чем развертка, из-за оси Z.
• Движение может быть очень энергозатратным.
• Постоянное следование рекомендациям может негативно сказаться на индивидуальном творчестве дизайнеров.

Подведем итоги

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

Хотя стоит отметить, что плоский дизайн уже не такой плоский. Он пытается учиться на собственных ошибках и успехах конкурентов. Честно говоря, за эти годы плоский дизайн претерпел значительные изменения, пройдя путь от абсолютно плоского стиля до полуплоского. Теперь, оставаясь в значительной степени плоским, он использует слои и слабые тени, чтобы объекты казались немного глубже, чем раньше. Так что мы с вами счастливые современники плоского дизайна 2.0.

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

Хм, кажется, осталось еще кое-что не раскрытым… Не забудьте подписаться!

Часто задаваемые вопросы

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

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

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

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

• Минималистичный и стильный.
• Более интуитивный. Материальный дизайн отлично подходит как для опытных пользователей, так и для новичков.
• Умеренно скевоморфен. Делает все более реальным благодаря использованию оси Z (уникальная концепция Google).
• Имеет набор четко определенных руководств, которые постоянно обновляются. Так что вы всегда можете обратиться к ним, если у вас возникнут трудности в работе над проектом.
• Продвигает анимацию для веб-решений. Бесполезно отрицать, люди любят действие. Более того, анимация помогает пользователям лучше понять пользовательский интерфейс.

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

• Минималистичный и стильный.
• Легко понять. То есть ваша идея будет лучше донесена до масс.
• Экономия времени и ресурсов. Страницы загружаются быстрее, пропускная способность расходуется меньше.
• Сосредоточено на содержимом. Никаких чрезмерно детализированных элементов пользовательского интерфейса, которые могут отвлекать пользователей от действительно ценных вещей.
• Одинаково хорошо выглядит на разных устройствах, будь то ПК или браузер смартфона, и делает страницы адаптивными.
• Ускоряет процесс разработки веб-сайта/приложения, избавляясь от ненужных дизайнерских штрихов.

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

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

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

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

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

Оцените статью!

16778 оценок, в среднем: 4,56 из 5

Поделитесь с нами своими впечатлениями об этой статье

Поделитесь своими впечатлениями об этой статье

Ваше полное имя*Введите комментарий*

Плоские, материальные и скевоморфные примеры дизайна

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

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

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

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

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

Примеры оригинальных скевоморфных иконок Apple Macintosh, созданных Сьюзен Каре. Изображение предоставлено Шейном Бздоком через Flickr.

Вторая волна скевоморфизма пришлась на конец первого десятилетия 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.

Заключение

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

Words by
Ник Бабич

Ник Бабич — UX-архитектор и писатель. Ник провел последние 10 лет, работая в индустрии программного обеспечения, уделяя особое внимание исследованиям и разработкам. Он считает рекламу, психологию и кино среди множества своих интересов.

Плоские дизайны, темы, шаблоны и загружаемые графические элементы на Dribbble

1. Посмотреть векторную иллюстрацию для Archlet

   Векторная иллюстрация для Archlet

2. Посмотреть веб-сайт / 3D-иллюстрацию

   Веб-сайт / 3D-иллюстрация

3. Просмотр Создайте свою идею!

   Создайте свою идею!

4. Просмотр GiB: Игровая аналитика

   ГиБ: игровая аналитика

5. Просмотр персонажа

   Символ

6. Посмотреть QNX / Веб-дизайн / 3D

   QNX / Веб-дизайн / 3D

7. Посмотреть плоскую иллюстрацию командной работы

   Плоская иллюстрация Teamwork

8. Посмотреть иллюстрации для @blogermaker

   Иллюстрации для @blogermaker

9. Посмотреть БЕСПЛАТНО векторный набор музыки

   Бесплатный музыкальный набор Vector

10. Посмотреть дизайн и анимацию / приложение для iOS

    Дизайн и анимация / приложение для iOS

11. Посмотреть иллюстрации Wellpack

    Иллюстрации Wellpack

12. Посмотреть иллюстрацию 2D Simple Character Design, созданную с помощью векторов

    2D Иллюстрация простого дизайна персонажей, созданная с помощью векторов

13. Посмотреть команду

14. Посмотреть домик на дереве

    Дом на дереве

15. Просмотр векторных иллюстраций

    Векторные иллюстрации

16. Посмотреть иллюстрацию чистого векторного дизайна персонажей в Adobe Illustrator

    Чистый векторный дизайн иллюстрации в Adobe Illustrator

17. Просмотр значков дизайна и разработки

    Иконки дизайна и разработки

18. Значок просмотра

19. Посмотреть Астонио

    Астонио

20. Посмотреть коллекцию иконок

    Коллекция иконок

21. Посмотреть веб-сайт PicnicHealth

    Веб-сайт PicnicHealth

22. Посмотреть Dribbble2020

    Дриббл2020

23. Посмотреть Летнее время

    Летнее время

24. Просмотр линейных значков

    Линейные иконки

Зарегистрируйтесь, чтобы продолжить или войдите

Идет загрузка…

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

Ник Бабич | by Nick Babich

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

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

Удалите ненужные стили

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

Плоский дизайн веб-сайта Dropbox ориентирован исключительно на контент

Цвет играет большую роль в эффективности плоского дизайна.

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

Кредиты: Rovane Durso

Советы:

• Материальный дизайн и плоские цвета пользовательского интерфейса дают хорошее руководство по выбору цветов.

Flat UI Colors — отличное место для начала выбора плоской цветовой схемы.

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

Мягкие цвета не будут выделяться из основного сообщения страницы. Кредиты: thehypeagency

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

Яркие изображения на темном фоне способны произвести эффектное впечатление. Кредиты: triplagent

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

Усильте свой дизайн хорошей типографикой

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

Простые шрифты сообщают уверенность и ясность. Кредиты: Cienne

Подсказка: Тон шрифта должен соответствовать общей эстетике дизайна. Сильно украшенный шрифт может выглядеть странно на фоне простого дизайна.

Движение делает плоский дизайн более ориентированным на пользователя и живым

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

• «Что самое важное на этой странице?»
• «Как мне узнать, что делать дальше?»
• «Как я узнаю, что выполнил задание?»

Вы можете использовать движение, чтобы помочь пользователям ответить на эти вопросы. Motion can:

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

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

Язык движения помогает передать взаимодействие, облегчая пользователю его понимание. Кредиты: Аниш Чандран

Используйте иллюстрации, чтобы передать ключевые идеи о вашем продукте

Картинки говорят громче, чем слова

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

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

Взаимодействие должно быть интуитивно понятным для пользователей

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

Дизайн Flat 2.0 сочетает в себе лучшее от минимализма и скевоморфизма

Дизайн Flat 2.0 использует тонкие тени для передачи интерактивности. Тени дают пользователям необходимые визуальные подсказки, чтобы они знали, на что можно нажимать.

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

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