Flat дизайн (плоский дизайн) среда, сентября 30, 2015 Nata Ki 0 Comments. Стиль флэт в дизайне


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

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

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

«ЗА» flat дизайн: он в тренде

Сегодня flat дизайн популярен, но как долго его популярность будет длиться? Если вы как дизайнер, работаете в этом направлении – переходите на плоский стиль, если еще этого не сделали. Грамотно использующие этот стиль проекты приобретают неплохую узнаваемость.

«ПРОТИВ» flat design: а как долго, он будет популярен?

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

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

«ЗА» flat дизайн: простота мобильного интерфейса

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

«ПРОТИВ» flat design: возможные проблемы с юзабилити

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

«ЗА» flat design: яркие цвета поднимают настроение

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

Flat UI Colors, главная цель веб-сайта — демонстрация этого стимулятора отличного настроения и помощь дизайнерам в создании и применении flat colors (цветов для плоского дизайна). Взляните на эти цвета они располагающие и заманчивые. Даже более темные тональности из теплых цветов. Плоский дизайн зачастую многоцветный. Это только увеличивает позитивные ассоциации — ну разве кто-нибудь, глядя на радугу, назовет ее унылой?

«ПРОТИВ» flat design: сложнее подбор цветов

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

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

«ЗА» flat design: акцентирует внимание на красивой типографике

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

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

«ПРОТИВ» flat design: недостатки типографики более заметны

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

«ЗА» flat design: визуально отчётливый и чистый дизайн

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

«ПРОТИВ» flat design: дизайн может выглядеть излишне простым

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

  • Что наиболее важно?
  • Как сделать на этом акцент визуально?

«ЗА» flat design: избавляет от скучного оформления

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

«ПРОТИВ» flat design: все не так уж и плохо было в старом стиле

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

Заключение

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

seo-design.net

flat design Википедия

Меню «Пуск» ОС Windows 8.1

Плоский дизайн (англ. Flat Design) — дизайн интерфейсов программ и операционных систем, представленный, как противоположность реализму. По задумке «плоский дизайн» должен подчёркивать эффект «очаровательной простоты» и утончённости.[1] Стал набирать популярность с 2010 года[2], а с 2013 — становится новым стандартом в дизайнерском компьютерном направлении[2].

История

Прообразом для плоского дизайна стали три направления в искусстве: минимализм, баухаус[3][4][5] и Международный типографический стиль (также известный, как швейцарский стиль). Последнее оказало наибольшее влияние на формирование плоского дизайна[6].

Несмотря на то, что интерфейсы и сайты с элементами плоскости и минимализма создавались ещё в 2000-е годы, массовую популярность они приобрели после того, как с 2010 года, Microsoft стала выпускать продукцию, выдержанную в плоском metro-стиле, тем самым, противопоставляя свою дизайн-политику продукции Apple, выдержанной в стиле скевоморфизма. Однако ещё в 2006 году компанией Microsoft был выпущен MP3 Плеер Zune, который содержал в себе элементы плоского дизайна[6]. В 2010 году Microsoft выпустила мобильную операционную систему Windows Phone 7 с использованием интерфейса Metro, выдержанного в стиле плоского дизайна, где также доминируют яркие цвета. После коммерческого успеха, Microsoft выпускает новую операционную систему Windows 8 в стиле Metro[3]. Фактически с началом выпуска Windows Phone и Windows 8 начинается эра плоского дизайна.[2]

В 2013 году компания Apple выпустила операционную систему iOS 7, дизайн которой также отказывается от скевоморфизма в пользу плоскости[6], это приводит к ещё большей популяризации плоского дизайна и делает его новым преобладающим направлением в компьютерном дизайне[2]. Вскоре после этого на плоский дизайн также перешли поисковик и приложения от Google, вместе с их операционной системой Android, вышедшей в интерфейсе Material Design.[7]

К 2015 году использование объёмного дизайна практически прекрашено.

Замысел

Изображения 6 пар иконок из IOS 6 (2012 год) и IOS 7 (2013 год) Слева иконки выполнены в классическом стиле с элементами скевоморфизма, справа — в плоском

Изначально концепция плоского дизайна заключается в отказе от реализма — иллюзии трёхмерного изображения или объекта, которая достигается путём создания отражения, текстур, теней[3], и создании так называемого плоского дизайна с использованием простейших одноцветных элементов. Согласно задумке, визуально плоский дизайн выглядит более привлекательно и изящно[8]. Также простой дизайн снимает дополнительную нагрузку на сайты или программы, благодаря которому они работают и загружаются быстрее[3]. Плоский дизайн противопоставляется так называемому «богатому дизайну» (англ. rich design), в котором значительный акцент делается на разнообразные визуальные и звуковые эффекты[3][9].

Плоский дизайн был широко распространён в 80-е годы, по причине того, что уровень технологий не позволял создавать сложные текстуры, однако и тогда впервые стали появляться простые элементы скевоморфизма чтобы создать визуальную связь с цифровым объектом. Сегодня элементы псевдовыпуклости перестали привлекать большинство пользователей[10]. Основные принципы плоского дизайна:

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

Критика

Некоторые дизайнеры уверены в том, что мода на плоский дизайн в его радикальном виде является лишь временным явлением и интерес к нему со временем спадёт. Один из явных недостатков плоского дизайна заключается в том, что из-за отсутствия теней сложно различить ссылки и понять, являются ли они действующими[11]. С другой стороны плоский дизайн хвалят за его простоту и универсальность, он может подходить для самых разных приложений и размеров экрана. Дизайнеры в конечном счёте уверены, что в будущем эволюция компьютерного дизайна закончится на том, что плоский дизайн также будет в себе сочетать элементы скевоморфизма, который позволит подробнее выделять мельчайшие детали[11][12]. По мнению психолога Элизабет Кюблер-Росс — повальная мода на плоский стиль является следствием того, что скевоморфизм в течение слишком длительного времени навязывался, как самый «идеальный и передовой» дизайн для сайтов и программ. Сначала пользователи недоверчиво относились к новому стилю IOS 7, но быстро привыкли к нему, приняв «плоскость» за новый стандарт[13].

  • Youtube «классический»

  • Youtube «плоский», с 2015 года

  • Google «классический»

  • Google «плоский», с 2015 года

Примечания

  1. ↑ 1 2 3 4 5 «Плоский дизайн»: с чего начать? Пять основных принципов Flat дизайна
  2. ↑ 1 2 3 4 The True History Of Flat Design
  3. ↑ 1 2 3 4 5 Turner, Amber Leigh The history of flat design: How efficiency and minimalism turned the digital world flat. The Next Web (March 19, 2014). Проверено 11 апреля 2014.
  4. ↑ Diogo Terror. Lessons From Swiss Style Graphic Design. Smashing magazine (July 17, 2009). Проверено 28 марта 2014.
  5. ↑ A brief history of flat design. Tech Samurais (July 31, 2013).
  6. ↑ 1 2 3 Taimur Asghar. The True History of Flat Design. Web Design Ai (July 9, 2014).
  7. ↑ 9 principles Google created for its colorful ‘Material Design’ UI refresh. The Next Web.
  8. ↑ Carrie Cousins. Flat design principles. designmodo.com (May 28, 2013).
  9. ↑ Yair Grinberg. iOS 7, Windows 8, and flat design: In defense of skeuomorphism. VentureBeat (September 11, 2013). Проверено 13 апреля 2014.
  10. ↑ Kelsey Campbell-Dollaghan. What Is Flat Design?. Gizmodo Australia (May 27, 2013). Проверено 13 апреля 2014.
  11. ↑ 1 2 Kyle Stalzer and Dan Klammer. Why Flat Design Will Die. tackk (недоступная ссылка — история) (n.d.). Проверено 3 декабря 2014. Архивировано 4 ноября 2014 года.
  12. ↑ Alex Peters. Why Flat Design is Here to Stay. How Design (March 10, 2014).
  13. ↑ Элизабет Кюблер-Росс. Как и почему плоский дизайн победил скевоморфизм. macradar.ru (28 апреля 2014).

Ссылки

wikiredia.ru

Основные тенденции дизайна. Flat или Material. Адаптивный или отзывчивый дизайн?

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

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

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

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

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

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

  • Типографика в основе стиля. Во Flat design главное — удобство восприятия. Здесь приоритет за шрифтами без засечек с постоянной шириной.

  • Минималистичный подход. Во «Флэте» все внимание должно быть приковано к контенту.

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

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

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

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

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

Адаптивный и отзывчивый дизайн

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

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

  • Responsive Design (отзывчивый дизайн) — подход, когда сайт создается с определенными значениями свойств, к примеру, с гибкой сеткой макета. Это позволяет одному сайту открываться на широком спектре устройств.

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

Преимущества Adaptive Design:

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

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

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

Преимущества Responsive Design:

  • одинаковый вид в разных браузерах и платформах;

  • наличие одного URL, что выгодно для сео-оптимизации;

  • разработчики обслуживают только одну версию, что экономит время и деньги;

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

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

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

rizon.pro

Flat дизайн (плоский дизайн) | it

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

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

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

Float Design

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

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

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

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

Minimal Monkey

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

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

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

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

Примеры шаблонов сайтов с плоским дизайном 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

it.nata.cv.ua

Тренд: Flat-дизайн

Сегодня мы поговорим о таком модном направлении, как flat-дизайн, что подразумевает под собой плоский дизайн. Считается, что термин ввел Аллен Гринштейн (Allen Grinshtein, Layervault), который объявил, что ему больше не интересна борьба за красивые тени и градиенты. Именно этот дизайн так часто в последнее время появляется в топе Dribbble, тот, который сейчас выбирают Google и Microsoft. Apple тоже на подходе, как недавно заявил главный дизайнер компании Джонатан Айв.

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

То, что дизайн плоский, вовсе не означает, что он тупой. Тут вступает в силу принцип «Лучше меньшне да лучше»

Особенности Flat-дизайна

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

Примеры

Naikom » Дизайн

naikom.ru

Особенности flat-дизайна | UX design

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

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

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

Главные цели

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

Типографика

На фоне упрощенного дизайна — более тщательного внимания требует типографика. Шрифты должны соответствовать общей стилистике, что подразумевает отсутствие засечек (пример — Calibri), не желательно использовать в начертании наклон (italic), но можно «играть» с жирностью (начертанием шрифта в bold, или псевдополужирностью ), выделяя важные по смыслу заголовки или информационные блоки. Шрифты в этом виде дизайна должны быть такими же простыми и понятными, как и другие элементы дизайна, нацеленные на повышение интерактивности.

Цвет

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

Пример оформления в стиле flat (*depositphotos)

 

На сегодняшний день, тенденцией развития веб-дизайна в этом направлении можно считать:

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

Смотреть все новости

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

«Полигональная стилистика» в дизайне

www.uxdesign.cool

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

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

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

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

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

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

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

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

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

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

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

get-element.3dn.ru