Адаптивный шаблон html css. Marble – блочный адаптивный HTML5 шаблон

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

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

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

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

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

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

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

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

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

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

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

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

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

4 - Игра цвета

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

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

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

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

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

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

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

Как нельзя рисовать флет-иконки

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

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

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

Пример хороших плоских иконок:

Цвета и иконки должны сочетаться не только между собой, но и составлять единое целое.

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

1. Навигация и юзабилити

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

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

2. Длинные плоские сайты-портянки

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

3. Непонятные кнопки

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

4. Плохо нарисованные иконки

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

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

5. Ложная ориентация на контент

Flat дизайн сайта предполагает ориентацию на контент. Ну, очевидно – если акцент не на графику – то на информацию. Но если внимательно посмотреть «современные» лендинги в стиле flat, которые предлагают российские веб-студии, то контенту как раз уделяется мало внимания. А именно:

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

Так нужен ли вообще flat-дизайн для сайтов?

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

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

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

Пример качественного flat дизайна:

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