Сайты в стиле флэт: 20 нестандартных дизайнов. Стиль в дизайне флэт


Лучшие флэт-сайты: 20 примеров нестандартного дизайна

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

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

Liber Finance Group

WordPress-сайт финансовой группы европейских строительных компаний из Варшавы

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

Coulee Creative

Оригинальный Flat сайт американского веб-агентства

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

Bukwild

Сайт калифорнийского digital-агентства с лаконичным продающим flat-дизайном

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

Appico

Сайт немецкой дизайнерской студии специализирующейся на UI/UX дизайне

Красиво применяются последние & актуальные веб-тренды: элементы в общем пространстве, слои материального стиля, интересные flat-иллюстрации.

Animal Logic

Сайт мирового лидера анимации фильмов, сделан на Вордпрессе c применением CSS3

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

Root Studio

Яркий, приятный сайт агентства графического и веб-дизайна из Лондона

Идея дизайна – произвести впечатление и визуально подкрепить коммерческое предложение «Создаем незабывемые проекты». Сайт запоминается оригинальной шапкой и футером.

Waaark

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

Эффектный материальный дизайн с применением HTML5 / CSS3 / jQuery. На главной странице высококлассная интерактивная анимация с реалистичным затуханием колебаний. Красота дизайна достигается оптимальными пропорциями макета & элементов страниц и переходами.

Made in Haus

У маркетинговой компании из Лос-Анжелеса залипательный сайт с интригующим визуалом

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

Wretch & Rascal

Флэт дизайн свежего сайта английского фото-сервиса

Интересное сочетание ярких ретро-цветов со скетчевыми рисунками & шрифтами заголовков.

MezzoLab

Дистанционное агентство цифровых услуг. Клиенты: компания L’Oréal, футболист К. Роналду…

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

MADWELL

Плоский сайт Нью-Йоркского агенства — интерактив, анимация, индивидуальный стиль

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

360I

После 20 лет присутствия на рынке 360i названо медиа-агенством года (2017)

Анимация, hover и scroll эффекты делают интересным компактный дизайн. Отлично оформлен расширенный раздел «О нас». Поддомен CAREERS представлен анимированной 3D-графикой.

Coraline Colasse

Индивидуальное Арт-портфолио парижского дизайнера К. Коласс

Интерактивный WP-сайт, использует CSS3, jQuery, GSAP. Проекты на главной странице удобно листать перетаскиванием вниз, а огромная буква C (инициал Каролины) служит трафаретным превью.

Nurture Digital

У первоклассного цифрового агентства из Лос-Анжелеса креативный, высокотехнологичный сайт

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

Paris American Academy

Двуязычная академия дизайна в Париже, основана американцем Ричардом Рей в 1965 г

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

Holm Marcher & Co.

Сайт команды маркетологов из Нью-Йорка

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

seo-design.net

Особенности FLAT - дизайна | Дизайн в жизни

Сравнительно недавно популярным стало такое направление дизайна как FLAT – дизайн или плоский дизайн.

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

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

FLAT – дизайн имеет следующие особенности:

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

На первый план выходит типографика, композиция, геометрия. Особенно если это касается web – дизайна.

Гармония и простота цвета. В дизайне используется ограниченное количество цветов. Вот пример популярной палитры FLAT – дизайна.

Использование креативных информативных иконок.

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

В свое время самым популярным направлением в web-дизайне был Web 2.0. Теперь его место занял FLAT-дизайн. Мода имеет обыкновение возвращаться к хорошо забытому старому, чтобы сделать из него новое. Кто знает, когда выйдет из моды FLAT — дизайн, а пока наслаждайтесь простотой, гармонией и информативностью текущего веяния. К слову, плоский дизайн уже был популярен в 80-е годы, но тогда это было обусловлено техническими особенностями, невозможностью отображения теней и градиентов. А сейчас уже большинство ведущих IT компании перешли на Flat — дизайн.

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

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

(Visited 1 782 times, 1 visits today)

des-life.ru

Flat-design или плоский дизайн сайта

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

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

Популяризации плоского стиля в дизайне способствовал выпуск операционной системы Windows 8 от Microsoft в стиле Metro, а также iOS 7, в котором компания Apple также выбирает плоский стиль. Именно после этого и наступает настоящая эра плоского дизайна. Вскоре на Flat-design переходят и крупные поисковые сервисы и приложения – Google, Youtube, появляется множество сайтов, использующих принципы плоского стиля в своем дизайне. В последние годы дизайн в стиле flat является лидером в мировых тенденциях дизайна сайтов.

Классический логотип Google Логотип Google плоский Классический логотип YouTube Плоский логотип YouTube

 

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

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

5 принципов плоского дизайна сайтов

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

1 – Использование двухмерных объектов

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

2 – Иконки и простые объекты

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

3 – Простые шрифты в стиль дизайна

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

4 – Игра цвета

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

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

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

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

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

 

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

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

 

 

 

 

Вернуться назад

Статьи по теме:

www.kasper.by

Земля всё же плоская: стиль flat в дизайне

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

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

Эволюция flat-дизайна

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

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

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

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

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

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

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

5. Минимализм. Flat дизайн предполагает визуализацию объектов, использование всего экрана, но при этом минимализирование информации. Это значит, что дизайнер не стремится заполнить всё свободное пространство и не боится пустого места.

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

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

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

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

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

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

4. Внешний вид. Как вы думаете, сколько времени нужно пользователю, чтобы сформировать мнение о ресурсе? Минута? Может, 30 секунд? Правильный ответ: 0,05 секунды! За это время невозможно изучить контент сайта, но можно просканировать внешний вид и понять, какие ощущения он вызывает. Flat дизайн говорит пользователям, что ваш сайт современный, что его развивают, а это уже предпосылка к формированию базового доверия.

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

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

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

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

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

e-shutova.com

Основные принципы Flat design на видеокурсе от Loftblog

Образование — ключ для открытия золотых ворот свободы. Джордж Вашингтон

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

Flat Design и его 5 принципов

Flat Design (плоский дизайн) – современный стиль пользовательского интерфейса и графического дизайна, в котором присутствует минимализм во всех деталях. Этот стиль характерен для веб-дизайна, где отсутствует чрезмерное количество эффектов, текстур, теней, градиентов, бликов и так далее. Flat Design используется в продуктах таких мировых компаний, как Microsoft, Apple, Google и других.

Рассмотрим подробно 5 основных принципов Flat Design:

  • 1. Минимализм.
  • 2. Отсутствие эффектов.
  • 3. Простота элементов.
  • 4. Акцент на цвет.
  • 5. Аккуратная работа со шрифтами (типографикой).

Минимализм во Flat design

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

Отсутствие эффектов во Flat design

В плоском дизайне используется только контур объектов. Поэтому во Flat design отсутствуют элементы, придающие объемность и глубину элементу: тени, градиенты, текстуры, блики и так далее.

Простота элементов во Flat design

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

Акцент на цвет во Flat design

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

Аккуратная работа со шрифтами во Flat design

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

Практическая часть видеоурока

Далее каждый урок будет содержать 2 части: теоретическую и практическую. Все занятия разбиты по темам, начиная от прорисовки простого элемента и двигаясь к более сложным элементам дизайна. Для работы понадобятся такие программки, как Adobe Illustrator и CorelDraw. Ссылки на них приведены ниже:

Adobe Illustrator

CorelDraw

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

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

Надеемся, вас заинтересовал этот видеокурс. Ждем всех на следующих видеоуроках!

Приятного всем просмотра! Учитесь с удовольствием! Всегда ваш LoftBlog!

Рекомендуемые курсы

loftblog.ru

Гид по плоскому дизайну или что нужно знать о flat | Веб-сайты

20 сентября 2013

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

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

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

Популярность плоского дизайна

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

Но ведь плоские конструкции были и раньше? Все верно. Но из-за текущих особенностей рынка дизайна были, скажем так, не востребованными и даже забытыми, если бы не … Microsoft с их Metro UI и Windows 8. Именно они встряхнули сферу дизайна и показали, что простой интерфейс может быть удобным, функциональным и, что самое главное, красивым. При этом он способен объединять десктопные программы и мобильные приложения в единое целое, ликвидируя тем самым «разрыв» между устройствами.

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

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

Яркие цвета

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

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

Простая типографика

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

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

Примеры плоский сайтов

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

Заключение

Плоскую концепцию уже во всю используют такие интернет гиганты как Google, Microsoft и Yahoo, что только подчеркивает актуальность плоского стиля. Скоро к ним подтянуться и остальные игроки рынка. Так же нельзя не брать во внимание новый дизайн iOS, полностью переработанный во flat. Ее выход без сомнения подтолкнет многих дизайнеров на использование это стиля как минимум, чтобы сайты приложений и продуктов соответствовали стилистике от Apple. Главное здесь не переборщить …

Продолжение следует … не пропустите.

womtec.ru

Флэт дизайн 2.0 - становление нового тренда в веб-дизайне

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

Flat дизайн в текущем же его состоянии (Ryan Allen называл это "Flat 2.0") - хоть и отличается от того, каким он был раньше, но на основные черты время особо не повлияло.

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

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

Преимущества и недостатки Flat-дизайна

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

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

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

Недостатки:

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

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

Тени

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

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

Динамичные цвета

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

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

Простая типографика

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

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

Благодаря своему акценту на легкую читаемость, флэт-типографика проникла в другие, более минималистичные стили дизайна. Мы можем наблюдать флэт-типографику в тексте, который размещают на так называемых hero-header сайтах (marketblog.envato.com/web-design/exploring-hero-image-trend-web-design/), а так же на сайтах, состоящих вовсе из одного только текста (onepagelove.com/tag/text-only). Изображения на них, как видите, совсем не используются.

Легкие кнопки

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

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

Минимализм

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

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

Широкое использование иконок

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

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

Акцентные цвета

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

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

Вывод

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

webformula.pro