Flat стиль: 5 основных принципов Flat дизайна

5 основных принципов Flat дизайна

Flat дизайн (плоский дизайн) – один из основных трендов сегодня, как в сфере веб-дизайна, так и технологиях создания пользовательских интерфейсов. Из недавних примеров наиболее заметными будут: решительный шаг компании Microsoft в этом направлении, с ее Windows 8 и новый дизайн Google, с явной демонстрацией желания углубиться в минимализм.

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

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

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

Float Design

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

Заметьте, что это основа построения «плоского» сайта.

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

Coderwall

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

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

Minimal Monkey

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

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

Beard Design

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

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

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

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

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

Identity

83 Design Collective

Frunatic

The Umbrella Group

 Slcl Foundation

My Felt

Behzad

Atlant

Simple as Milk

Weranda Family

Kitchen Sink Studios

Coffee Surfing

Sunny7

Krivaja Homes

Spring Summer

RIT Rochester Institute of Technology

Snow Bird

LEDbow

Основные принципы плоского flat-дизайна

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

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

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

Наша компания уже имеет опыт в создании сайтов в стиле Flat, и мы с радостью поможем вам в создании flat сайта!

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

Ниже мы проанализируем и приведем примеры некоторых сайтов, которые используют flat-стилистику.

 

1. Убираем все эффекты

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

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

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

 

2. Используем простые элементы

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

3. Сделаем акцент на типографике

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

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

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

 

4. Привлечем внимание цветом

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

Наиболее популярными цветами являются первичные и вторичные цвета. То есть основные цвета (cyan, magenta, yellow, black) и полученные на основе их смешения. Также очень часто в цветом решении при создании плоского дизайна используются цвета ретро, такие, как salmon (лососевый), purple (фиолетовый) и т.д.

 

5. Минимализм

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

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

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

 

5 особенностей и принципов Flat Design

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

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

Разработка дизайна веб сайтов в стиле Flat Design началась с платформ для Windows Phone с ее стилистически простыми и революционно упрощенными интерфейсами. Плоский дизайн нашел свое отражение и в мире Apple. Эта тенденция стала интересной и необычной, потому что такой монстр как Microsoft тоже решил резко и необратимо измениться и обновиться.

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

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

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

Краткая предыстория флэт дизайна

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

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

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

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

1. Flat Design делает акцент на контенте

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

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

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

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

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

Тогда не теряйте время, напишите нам прямо сейчас!

Оставить заявку

2. Выразительная типографика в плоском дизайне

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

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

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

Полезная информация по этому вопросу в статье: Разработка дизайна сайта и использование шрифтов (типографика в дизайне)

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

3. Flat Design с фокусом на адаптивность

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

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

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

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

Познакомьтесь с нашей новой публикацией, чтобы лучше понять, как это может помочь вашему сайту и бизнесу: Адаптивный дизайн сайта (responsive web design) – основа успешного проекта

4. Разработка web сайта в стиле Flat помогает улучшить пользовательский опыт

Всплеск популярности Flat  дизайна это 2012 год, но и сегодня он применяется в таких крупных компаниях, как: Amazon, Apple, IBM, Microsoft. Плоский дизайн, в сочетании со стилем минимализма становится сильным эстетическим инструментом и дает возможность находить интересные дизайнерские решения. Что же из себя представляет Flat дизайн и как его применять в практике, о чем стоит помнить? Вот его основные принципы:

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

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

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

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

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

Пять базовых принципов флэт дизайна.

• 1. Отсутствие объемных эффектов

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

• 2. Простота представления всех элементов

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

• 3. Шрифты становятся частью навигации

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

• 4. Минимализм в цветовых схемах

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

• 5. Лаконичность и простота

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

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

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

Тогда не теряйте время, напишите нам прямо сейчас!

Оставить заявку

Разработка web сайтов в стиле Flat

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

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

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

Задача любого коммерческого сайта не просто привлечь внимание и произвести впечатление — главное ПРОДАТЬ! Поэтому наша команда разработает профессиональный дизайн, чтобы доступно донести торговое предложение и вызывать желание купить ваш продукт.  Если вам нужен современный адаптивный сайт, который будет легко открываться на мобильных устройствах, в этом случае мы рекомендуем использовать плоский дизайн. 

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

10.10.2021

← Поделиться с друзьями !

Flat дизайн – новый тренд в веб-дизайне. Айкон

Flat Design (он же «плоский дизайн») – это дизайн веб-объектов, выполненный в простом минималистичном стиле. Концепция плоского дизайна состоит в отказе от скевоформизма – выборе эстетически простых изящных решений вместо визуализации объектов в трехмерном изображении с помощью теней, текстур и градиентов. В последние несколько лет интерфейсы многих популярных программ и веб-сайтов изменились, отказавшись от «реалистичных» изображений в пользу плоскости. В частности, таким образом в 2013 году изменила разработку дизайна компания Apple при выпуске операционной системы iOS 7, а Microsoft сделала выбор в пользу плоскости еще в 2010-м, использовав плоский интерфейс Metro для программы Windows Phone 7.

   

Причины появления Flat дизайна

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

Основные принципы Flat дизайна

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

 

Разработка Flat дизайна

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

Читайте далее: Зачем вам SEO-продвижение, когда есть SEO-талисманы!

Плоский (Флэт) Дизайн или Материал Дизайн

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

Кратко из истории плоского стиля

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

Что такое материальный дизайн?

Материальный дизайн был впервые представлен компанией Гугл. Вокруг материального дизайна больше философии, принципов и идей. Это в первую очередь, улучшенный и модернизированный плоский стиль, даже в дизайне 2019 года. Здесь мы встречаем тени, плавную анимацию, насыщенные цвета. Контраст цветов очень сильный. Некоторые дизайнеры называют материальный дизайн semi-flat, или flat design 2. 0. Важно определить что делать первым сайт или мобильное приложение.

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

Материальный дизайн или плоский дизайн?

Среди трендов графического дизайна 2019 года, нет материального дизайна, ни плоского. Почему? В чистом виде материальный дизайн используется только Гугл. Для них первая цель была объединение всех их цифровых продуктов единой темой и гаммой — словно они это электронная торговая площадка. Они этого достигли. Однако не всем далеко по душе материальный дизайн. Операционная система Андроид (дочерняя компания гугл) построена полностью на принципах материального дизайна. Пользователи iOS не очень ее любят, в первую очередь из-за цветовой гаммы. Ведь iOS гораздо красочнее, к тому же используют градиенты как тренд. Макеты построенный на принципах материального дизайна действительно отличается.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Брэндинг

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

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

 
Источник

10 принципов «плоского дизайна» — Курсы Веб-Дизайна

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

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

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

1. Что такой flat-дизайн?

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

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

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

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

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

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

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

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

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

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

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

Microsoft’s Metro design

Apple iOS 7 design

Google’s Material Design

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

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

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

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

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

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

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

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

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

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

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

5. Цвет

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

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

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

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

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

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

И еще вы можете найти большее разнообразие цветов и палитр в Google’s Material Design guide.

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

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

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

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

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

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

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

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

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

8. Плюсы и минусы Flat-дизайна

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

Плюсы

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

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

Простота

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

Яркость

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

Недостатки

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

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

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

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

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

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

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

9. Будущие тренды flat-дизайна

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

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

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

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

Выводы

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

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

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

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

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

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

Плоский дизайн и полуплоский дизайн: что это такое и как использовать

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

Автор felipe_charria

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

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

–

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

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

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

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

Автор: astuaris

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

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

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

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

• Высокая контрастность
• Минимализм
• Использование цвета и контраста для создания глубины
• Эффективное использование площади
• Использование символов вместо точного воспроизведения для передачи идей

Стиль Баухаус не замысловат и не детализирован. Он утилитарный, как и плоский дизайн. Via Bauhaus Dessau. Модернизм берет на себя правила искусства и отбрасывает все, что не соответствует видению художника.Via Osnat Fine Art.

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

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

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

Плоский внешний вид Windows 8 был создан, чтобы облегчить перенос ОС на планшеты. Через Microsoft.

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

В прошлом общая эстетика Apple была скевоморфной, и это побудило Microsoft пойти в другом направлении, начав с интерфейсов Windows Media Player и Zune в начале 2000-х годов.К тому времени, когда в 2012 году была представлена ​​Windows 8 с полностью плоским интерфейсом, Microsoft зарекомендовала себя как лидер этой тенденции.

Это был лишь вопрос времени, когда другие бренды последовали их примеру и обновили свой старый скевоморфный дизайн, например, поляризационный ребрендинг Instagram. В конце концов, даже Apple запрыгнула на поезд с плоским дизайном в 2013 году с iOS 7, а к середине 2010-х годов плоский дизайн был повсюду.

Скеоморфный дизайн отвечает на вопросы: «Что это такое и как им пользоваться?» через Shopify

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

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

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

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

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

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

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

— Эта инфографика объясняет продукт на простых примерах с использованием полуплоского дизайна.Автор LittleFox.

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

Страницы с практическими рекомендациями и руководства по приложениям — отличное место для плоского дизайна. Автор 9zArt.

• Инфографика, цель которой — выделить сложную тему в легко усваиваемые примеры
• Руководства и страницы с инструкциями на веб-сайтах, которые помогают пользователю выполнить пошаговые инструкции
• Реклама, в которой зритель не искал материал и определенно не хочет делать дополнительную умственную работу, чтобы понять его
• Разработка логотипа и брендинг, где бизнес-концепция может быть незнакомой и должна немедленно передать ее атмосферу
• Значки приложений и другие рисунки, которые слишком малы, чтобы их можно было слишком детализировать
• Мобильные игровые интерфейсы, в которых пользователи, как правило, являются обычными игроками, ищущими отвлечение, а не чрезмерно сложным моделированием
• Для интерфейсов, где пользователю нужно сразу знать, что делать дальше.Если у вас плотный многостраничный веб-сайт с множеством функций, плоский дизайн может не для вас. Но если вы стремитесь стать «Uber [укажите отрасль, которую вы хотите изменить здесь]», квартира — это ваш путь.

Хотя это обычные подозрения, когда дело доходит до плоского дизайна, этот стиль сам по себе имеет характер, и ничто не мешает вам воспользоваться им по чисто эстетическим причинам!

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

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

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

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

Получите правильную плоскую конструкцию, выполнив следующие шаги

—

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

Не путайте плоский со скучным

Даже с небольшим количеством элементов, с которыми нужно работать, минималистский дизайн все равно может быть красивым. Автор Typelab D.

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

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

Цвет, контекст и контраст — твои друзья

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

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

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

Цвет, контекст и контраст направляют зрителя через дизайн. Автор Fenixo.

Оживите свой плоский дизайн с помощью анимации

Мария Дзядюлия,

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

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

Выберите удобный шрифт

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

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

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

Квартира там, где она находится по адресу

–

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

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

Язык дизайна IBM — плоский стиль

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

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

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

Два квадрата и два круга, чтобы сделать глаз.

Два круга и один квадрат в форме сердца.

Размер и интервал

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

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

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

Убедитесь, что точка привязки четко прилегает к пересекающимся линиям сетки.

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

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

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

Не используйте случайно размещенные фигуры с разделением менее 8 пикселей.

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

Используйте стандартные углы — предпочтительны 15 °, 30 °, 45 °, 60 °, 75 ° и 90 °. С использованием эти стандартные углы помогут вашим иллюстрациям выглядеть последовательными. Несмотря на то что вы можете использовать любой угол, мы рекомендуем придерживаться стандартных предлагаемых углов здесь.

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

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

Не используйте неправильные кривые, если их можно избежать.

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

Закругленные углы и размещение

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

Вложенные линии этой кривой должны оставаться на одинаковом расстоянии с увеличением радиуса.

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

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

Градиенты и штриховка

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

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

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

Дизайн • Дизайн веб-сайта Кэрри Казинс • 28 мая 2013 г. • 6 минут ПРОЧИТАТЬ

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

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

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

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

Без добавленных эффектов

Конструктор электронных писем

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

Попробуйте бесплатноДругие продукты

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

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

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

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

Простые элементы

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

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

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

Нужна помощь в начале работы? Designmodo предлагает множество наборов пользовательского интерфейса с использованием плоских стилей — от Square UI Free и Flat UI Free, простого набора пользовательского интерфейса PSD / HTML с базовыми компонентами, до Square UI и Flat UI Pro, полного пакета пользовательского интерфейса PSD / HTML для веб-сайтов и дизайн-проекты приложений.

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

Из-за простой природы элементов в плоском дизайне типографика чрезвычайно важна.

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

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

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

В фокусе цвет

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

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

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

Минималистский подход

Плоский дизайн прост по своей природе и хорошо сочетается с общим минималистическим подходом к дизайну.

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

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

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

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

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

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

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

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

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

Нравится то, что вы читаете? Подпишитесь на наши главные новости.

История плоских шаблонов дизайна в мобильных устройствах | Dropsource

Гостевой пост Ника Бабича

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

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

Определение плоского дизайна

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

Происхождение плоского дизайна

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

Простые формы, строгие шрифты и четкая визуальная иерархия гармонично сочетаются друг с другом, чтобы соответствовать содержанию. Изображение: Йост Шмидт, «Plakat Zur Bauhaus — Ausstellung in Weimar 1923», 1923 год

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

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

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

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

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

Как сказал Джони Айв в одном из интервью вскоре после выпуска iOS 7: « Мы поняли, что люди уже привыкли к прикосновению к стеклу, им не нужны физические кнопки, они понимают преимущества. Так что была невероятная свобода в том, что не нужно было так буквально ссылаться на физический мир. Мы пытались создать менее конкретную среду ».

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

Почему плоский дизайн — правильный выбор для мобильных приложений

Давайте посмотрим, как плоский дизайн улучшает взаимодействие с пользователем:

Без декоративных элементов

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

Больше внимания к содержанию

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

Лучшая отзывчивость

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

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

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

Рассмотрим разницу между скевоморфным (слева) и плоским дизайном (справа).

Проще создавать прототипы приложений

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

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

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

Иконки

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

Четкие плоские значки. Изображение: Ramotion

Иллюстрации

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

Простота иллюстрации позволяет легко понять сообщение. Изображение: Ghani Pradita

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

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

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

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

Избегайте слишком плоской конструкции

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

Дизайн метро в Windows 8.Отличить интерактивные элементы в этом интерфейсе сложно.

В попытке решить эту проблему появился более сбалансированный подход к плоскому дизайну — Flat 2.0 (или полуплоский дизайн). Google Material Design — отличный пример полуплоского дизайна. Материальный дизайн основан на парадигме плоского дизайна, но он добавляет глубины (трех измерений), чтобы передать функциональность и ясность.

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

Избегайте низкой контрастности

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

Создавая плоскую эстетику, всегда обращайте внимание на контраст.Убедитесь, что ваш текст и элементы разборчивы. Следуйте рекомендациям WCAG и создайте текст и значки с коэффициентом контрастности 4,5: 1.

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

Ограничьте количество шрифтов в вашем приложении

Минималистские стили дизайна не очень хорошо смотрятся при использовании множества разных шрифтов. Выбор одного гарнитуры с достаточным весом, чтобы учесть вариации шрифта, необходимые для достижения целей визуального дизайна, — способ справиться с этим ограничением.В идеале у вас должен быть только один шрифт в вашем приложении, и этот шрифт следует выбирать в соответствии с рекомендациями по платформе (San-Francisco для iOS, Roboto для Android). Если вам нужно выделить какую-то информацию, используйте другой размер шрифта или толщину шрифта, но не другой шрифт.

Визуально расставьте приоритеты для важных объектов

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

Кнопка с надписью «Информация об автомобиле» является наиболее заметным объектом в этом пользовательском интерфейсе. Изображение: Ramotion

Четко обозначить интерактивные элементы

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

• Пробел. Добавьте отрицательное пространство между интерактивным элементом и контентом, чтобы выделить его.
• Контраст. Использование контрастного цвета для интерактивного элемента может помочь пользователям понять, что они могут делать на странице.
• Тени. С первых дней разработки цифровых продуктов в графических интерфейсах использовались псевдо-3D эффекты, чтобы помочь пользователям с первого взгляда понять доступные действия.

Использовать анимацию для описания пространственных отношений

Визуальная простота

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

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

Проверьте свой дизайн

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

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

Об авторе: Ник Бабич — разработчик, технический энтузиаст и любитель UX.Последние 10 лет он работал в индустрии программного обеспечения, уделяя особое внимание разработке. Среди своих бесчисленных интересов он считает рекламу, психологию и кино.

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

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

Трехмерные эффекты, скевоморфизм и реализм

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

Трехмерные эффекты

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

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

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

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

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

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

В более ранних моделях планшетов Amazon Kindle Fire операционная система на базе Android использовала скевоморфный дизайн книжных полок с трехмерными полками и текстурой дерева. Метафора книжной полки была призвана помочь пользователям перенести предыдущие знания о книжных полках (как месте для хранения и организации физических носителей) в цифровую среду.Полки и текстура дерева не имеют отношения к функциональности системы, но должны были усилить метафору. Позже Amazon убрала скевоморфный дизайн книжной полки из пользовательского интерфейса.

Реализм

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

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

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

Истоки плоского дизайна

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

Уплощение главной страницы Apple дает полезный ориентир для роста популярности этой тенденции. Скевоморфизм и реализм долгое время были фирменными знаками дизайна Apple, и его домашняя страница сопротивлялась плоской тенденции примерно до 2013 года.

Домашняя страница Apple в 2007 году (через WayBack Machine). Панель навигации оформлена в виде глянцевых трехмерных вкладок. Домашняя страница Apple в 2012 году (через WayBack Machine). Метафора вкладок исчезла, но панель навигации по-прежнему выглядит глянцевой и округлой (пример реализма, а не скевоморфизма). В новый инструмент поиска добавлены тени, чтобы он выглядел пустым (более элегантный визуальный эффект, чем появление полей ввода Windows 17 годами ранее, но концептуально та же идея). Значки, видимые в правом нижнем углу, настолько глянцевые, что почти мешают зрителю понять, что это такое.Эти кнопки кажутся скорее светящимися, чем приподнятыми. Домашняя страница Apple в 2015 году. Вся панель навигации, включая логотип, полностью плоская, без заметных теней, текстур или бликов. Здесь нет трехмерных, реалистичных или скевоморфных эффектов. Единственный способ узнать, что параметры навигации можно щелкнуть, — это условно: ярко окрашенная полоса в верхней части веб-страницы, как правило, является панелью навигации (кроме случаев, когда это реклама, но эта слишком тонкая, чтобы стать жертвой баннера. слепота).

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

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

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

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

«Когда он выделен синим цветом и подчеркнут, это то, как вы понимаете изначально.Вы видите это даже в Word и прочем. Но на самом деле, особенно когда он подчеркнут, это помогает. Или, если это кнопка, на ней не обязательно должно быть написано «Нажмите здесь», но если на ней написано «Купить сейчас» или «Купить» или «Добавить в корзину».

Эта цитата прекрасно иллюстрирует типы подсказок, которые люди используют для определения кликабельности:

• Традиционные внешне согласованные указатели (например, синий, подчеркнутый текст или выпуклые кнопки)
• Что-то напоминающее традиционное обозначение (например, подчеркнутый текст любого цвета или текст в рамке)
• Контекстные подсказки (например, активный текст или размещение вверху страницы)

На главной странице Trader Joe’s отображаются различные индикаторы кликабельности.(1) Синий подчеркнутый текст Просмотреть все является традиционным обозначением. (2) Плоский красный фон ссылки Find напоминает кнопку, даже без трехмерных или реалистичных визуальных эффектов. (3) Черные ссылки на главной панели навигации сообщают о своей кликабельности только своим расположением и текстом. (Обратите внимание, что в основном плоская страница имеет один элемент скевоморфизма — деревянную полку под каруселью представленных продуктов.)

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

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

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

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

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

Язык дизайна Google Material — это один из примеров плоской версии 2.0 с правильными приоритетами: он использует последовательные метафоры и принципы, заимствованные из физики, чтобы помочь пользователям разобраться в интерфейсах и интерпретировать визуальные иерархии в контенте.

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

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

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

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

Краткая история плоского дизайна

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

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

---

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

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

Особенности плоского дизайна:

— Минималистский подход

— Сосредоточение внимания на цвете

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

— Простые элементы

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

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

Скевоморфный и плоский интерфейс (iOS6 и iOS7)

---

Истоки: швейцарский дизайн и минимализм

Кажется, что плоский дизайн происходит от швейцарского стиля (также известного как международный типографский стиль), который доминировал в дизайне еще в 1950-е годы. Он появился в 1920-х годах в России, Нидерландах и Германии, а стал действительно популярным в 1950-х годах в Швейцарии, когда был разработан всемирно известный шрифт Helvetica (в свое время он назывался Neue Haas Grotesk).

«Простота — не цель . Это совместный продукт хорошей идеи и скромных ожиданий ». Paul Rand

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

---

Как цифровой мир стал плоским

Быстро переместимся в двадцать первый век. Каждый дизайнер квартир знает, что его современная история начинается с того дня, когда две противостоящие компании — Microsoft и Apple — начали свою дизайнерскую битву.А именно, когда рынок заполонил рынок iPod, Microsoft в 2006 году создала медиаплеер Zune. Дисплей этого плеера был сфокусирован на типографике, у него было большое меню в нижнем регистре, а фоновое изображение менялось при проигрывании новой песни.

После этого последовательность событий была естественной — дизайн был расширен до Windows Phone 7 в 2010 году (и назывался «Metro») и был настолько влиятельным, что даже Apple заменила свой скевоморфный дизайн и полностью утратила свою актуальность в iOS7. . Поговорим о смене формы.

Один из последних обновлений включает ребрендинг Google и введение плоского логотипа 2015 года. Однако их услуги далеко не плоские и теперь требуют материального дизайна.

Материальный дизайн (от Google)

Несмотря на то, что он отличается от плоского, очевидно, что некоторые принципы были использованы в процессе материализации.

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

---

Будущее плоских

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

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

---

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

Кольцо PEMBROKE Flat Style с полированным вольфрамовым синим бриллиантом — 6 мм и 8 мм

Thorsten Rings: отправьте в тот же рабочий день, если заказано до 15:00 по тихоокеанскому стандартному времени,

.

Золотые кольца Пн-Пт Торстен: 6-8 недель

Кольца других производителей: 7 дней

Кольца из титана и кобальта: 2 недели

Кольца с черным кобальтом: 4 недели

Кольца из драгоценных металлов: 2-4 недели

Обручальные кольца: 4 недели

Кольца Sossi: 4 недели

Лэшбрук: 3 недели

Ожерелья, браслеты, серьги и подвески: 7 дней

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

(888) 602-6862 • [адрес электронной почты]

Доставка

Q: Сколько времени займет получение моего заказа и как он будет отправлен?

A: Процесс производства платиновых, золотых и палладиевых колец занимает от 5 до 11 рабочих дней, в зависимости от производителя. Как только ваше кольцо получено от производителя, оно будет отправлено в тот же день. Вольфрамовые кольца обычно есть в наличии и будут отправлены в день размещения заказа или на следующий рабочий день.Если вам нужна гравировка, это не приведет к задержке вашего заказа, потому что мы делаем это на дому. Все заказы на адреса в США включают БЕСПЛАТНУЮ доставку по почте в течение 2-3 дней. Все международные заказы (адреса за пределами США) Larson Jewelers отправляются через почтовое отделение США, что занимает от 7 до 10 дней, в зависимости от таможни вашей страны, или через FedEx, что занимает от 3 до 4 дней.

Q: Буду ли я платить таможенные пошлины за международные заказы?

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

Q: Вы отправляете доставку в APO и FPO?

A: Совершенно верно. Заказы, отправляемые на адреса APO и FPO, будут отправлены через Priority Mail через почтовое отделение США.При оформлении заказа просто укажите адрес доставки, указав свой адрес APO или FPO.

Обмен, возврат и гарантия

Q: Какова наша политика обмена / возврата?

A: Мы предлагаем 30-дневную политику обмена или возврата для всех драгоценных металлов (золота, палладия и платины) и некоторых ювелирных изделий из вольфрама, а также 45-дневную политику обмена или возврата для большинства ювелирных изделий из вольфрама. Это означает, что у вас есть 30 или 45 дней со дня, когда перевозчик доставит вам посылку, чтобы обменять ее, или, если она вам просто не нравится, вы можете вернуть ее для возврата.

Q: Какая у нас гарантия?

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

Q: Предоставляется ли бесплатная пожизненная гарантия на вашу продукцию?

A: Мы предлагаем обширную пожизненную гарантию на все наши кольца из карбида вольфрама.Почти все бренды имеют пожизненную гарантию, которую можно использовать бесплатно, только Triton Rings взимает 40 долларов США за использование своей пожизненной гарантии. Если с вашим кольцом что-то случится, будь то ваша вина или нет, оно будет отремонтировано или заменено, поэтому вам никогда не придется покупать новое кольцо. Пожизненная гарантия также распространяется на размер. Если размер вашего пальца изменится в течение вашей жизни, вы можете просто отправить кольцо и получить другой размер столько раз, сколько потребуется. Гарантии на кольца из драгоценных металлов различаются, пожалуйста, проверьте информацию о гарантии на странице конкретного продукта, который вы хотите приобрести.

Q: Гравировка моего кольца аннулирует гарантию?

A: Нет, на кольца с гравировкой по-прежнему распространяется пожизненная гарантия. Если вам нужно обменять его на другой размер или кольцо повреждено и его необходимо заменить, вам придется заплатить за гравировку на новом кольце.

В: Что, если я куплю кольцо из карбида вольфрама до того, как будет предоставлена ​​бесплатная пожизненная гарантия?

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

Гарантия самой низкой цены

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

Thorsten Rings: отправим в тот же рабочий день при заказе до 15:00 по тихоокеанскому стандартному времени с понедельника по пятницу

.

Золотые кольца Thorsten: 6-8 недель

Кольца других производителей: 7 дней

Кольца из титана и кобальта: 2 недели

Кольца с черным кобальтом: 4 недели

Кольца из драгоценных металлов: 2-4 недели

Обручальные кольца: 4 недели

Кольца Sossi: 4 недели

Лэшбрук: 3 недели

Ожерелья, браслеты, серьги и подвески: 7 дней

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

(888) 602-6862 • [адрес электронной почты]

Доставка

Q: Сколько времени займет получение моего заказа и как он будет отправлен?

A: Процесс производства платиновых, золотых и палладиевых колец занимает от 5 до 11 рабочих дней, в зависимости от производителя. Как только ваше кольцо получено от производителя, оно будет отправлено в тот же день. Вольфрамовые кольца обычно есть в наличии и будут отправлены в день размещения заказа или на следующий рабочий день.Если вам нужна гравировка, это не приведет к задержке вашего заказа, потому что мы делаем это на дому. Все заказы на адреса в США включают БЕСПЛАТНУЮ доставку по почте в течение 2-3 дней. Все международные заказы (адреса за пределами США) Larson Jewelers отправляются через почтовое отделение США, что занимает от 7 до 10 дней, в зависимости от таможни вашей страны, или через FedEx, что занимает от 3 до 4 дней.

Q: Буду ли я платить таможенные пошлины за международные заказы?

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

Q: Вы отправляете доставку в APO и FPO?

A: Совершенно верно. Заказы, отправляемые на адреса APO и FPO, будут отправлены через Priority Mail через почтовое отделение США.При оформлении заказа просто укажите адрес доставки, указав свой адрес APO или FPO.

Обмен, возврат и гарантия

Q: Какова наша политика обмена / возврата?

A: Мы предлагаем 30-дневную политику обмена или возврата для всех драгоценных металлов (золота, палладия и платины) и некоторых ювелирных изделий из вольфрама, а также 45-дневную политику обмена или возврата для большинства ювелирных изделий из вольфрама. Это означает, что у вас есть 30 или 45 дней со дня, когда перевозчик доставит вам посылку, чтобы обменять ее, или, если она вам просто не нравится, вы можете вернуть ее для возврата.

Q: Какая у нас гарантия?

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

Q: Предоставляется ли бесплатная пожизненная гарантия на вашу продукцию?

A: Мы предлагаем обширную пожизненную гарантию на все наши кольца из карбида вольфрама.Почти все бренды имеют пожизненную гарантию, которую можно использовать бесплатно, только Triton Rings взимает 40 долларов США за использование своей пожизненной гарантии. Если с вашим кольцом что-то случится, будь то ваша вина или нет, оно будет отремонтировано или заменено, поэтому вам никогда не придется покупать новое кольцо. Пожизненная гарантия также распространяется на размер. Если размер вашего пальца изменится в течение вашей жизни, вы можете просто отправить кольцо и получить другой размер столько раз, сколько потребуется. Гарантии на кольца из драгоценных металлов различаются, пожалуйста, проверьте информацию о гарантии на странице конкретного продукта, который вы хотите приобрести.

Q: Гравировка моего кольца аннулирует гарантию?

A: Нет, на кольца с гравировкой по-прежнему распространяется пожизненная гарантия. Если вам нужно обменять его на другой размер или кольцо повреждено и его необходимо заменить, вам придется заплатить за гравировку на новом кольце.

В: Что, если я куплю кольцо из карбида вольфрама до того, как будет предоставлена ​​бесплатная пожизненная гарантия?

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

.

No related posts.