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

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

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

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

Флэт дизайн – это обтекаемый и современный метод резвой подачи инфы. В нем нет теней, бликов и выделений, которые нередко употребляются в остальных стилях дизайна для придания изображениям трехмерного вида. Он стал пользующимся популярностью опосля выхода Windows 8 (2012) и iOS 7 (2013) от Apple. С упором на чистоту и иерархию, тонкий дизайн делает многофункциональные сайты, которые доносят информацию резвым и понятным методом.

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

Флэт дизайн – это современный стиль дизайна, который поочередно сохраняет миниатюризм и 2D-черты. Вот 6 признаков того, что перед вами флэт дизайн:

1. Контрастные цвета: нередко калоритные цвета, тонкий дизайн полагается на ясный контраст, чтоб отправить зрительные подсказки юзерам.
2. 2D-стиль: обыкновенные формы и отсутствие близких к реальности изображений.
3. Обычная типографика: обычно, шрифты sans-serif являются выбором плоского дизайна. Они стремительно загружаются, подступают к минималистскому стилю и просто читаются.
4. Белоснежное место: негативное место помогает дизайнерам указать, на какой части странички они желают сосредоточить внимание юзеров, и делает веб-сайт наиболее читабельным.
5. Макеты на базе сетки: обычно тонкий дизайн симметричен и употребляет сетку для компоновки и иерархии.
6. Простота: символические значки, абстрактные формы, отсутствие текстур и градиентов.

Как дизайнеры пользовательского интерфейса употребляют тонкий дизайн?

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

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

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

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

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

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

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

Когда следует употреблять тонкий дизайн?

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

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

Если же вы заинтересовались в полном исследовании дизайна, мы советуем для вас направить свое внимание на курс от образовательной платформы Skillbox «Профессия UX/UI-дизайнер». На данном курсе вы научитесь визуализировать макеты, создавать анимацию, клавиши, слайдеры. Можете проектировать комфортные интерфейсы по правилам юзабилити.

Плюсы флэт дизайна

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

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

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

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

1. Масштабируемость и простота итераций, что делает их неплохим выбором для длительных проектов.
2. Применимы к хоть какой нише
3. Оптимизированы для доступности и мобильности по дизайну

Недочеты плоского дизайна

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

Некие примеры «лишнего миниатюризма» включают редизайн иконок Гугл в 2020 году и Microsoft Windows 8. Когда тонкий дизайн становится очень плоским, он удаляет главные признаки, указывающие на то, что по сути является кликабельным, оставляя юзеров в замешательстве.

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

Флэт дизайн и анимация

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

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

Представляем тонкий дизайн 2.0

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

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

В 2014 году компания Гугл сделала очередной шаг вперед и выпустила Material Design. Material – это система плоского дизайна, которая ставит во главу угла действенный дизайн и неплохой пользовательский опыт, также стремится стандартизировать дизайн сайтов и приложений. Почта Gmail от Гугл – хороший пример плоского дизайна 2.0. В крайней версии при наведении курсора на значки возникают маленькие темные надписи, чтоб юзеры знали их предназначение и знали, что на их можно надавить.

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

Выводы по флэт дизайну

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

1. Флэт дизайн – это малый подход к дизайну пользовательского интерфейса, веб-приложений и приложений, который может повытрепываться скоростью, читабельностью, масштабируемостью и простотой.
2. При использовании плоского дизайна опасайтесь лишнего миниатюризма. На данный момент мы находимся в эре плоского дизайна 2.0. Используйте тени, градиенты и анимацию, чтоб донести свою идея до читателя!
3. Чтоб начать обучаться употреблять тонкий дизайн, попытайтесь создать набор иконок! Векторы – это обычный метод погрузиться в идеи плоского дизайна. Если для вас нужна доборная помощь, мы сделали пошаговое управление по созданию иконок.