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

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

image


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

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

2. Динамичные цвета
Дополнить редкие визуальные эффекты просто с помощью энергичных цветов, особенно светлых оттенков.
Разный цветовой фон в контрасте с базовым цветом элементов делают страницу с «плиточным» меню более живой.
На сайте Flat UI Colors собраны самые эффективные цветовые паттерны для flat.
image

3. Простая типографика
Выбор шрифта в flat обусловлен одним критерием: удобочитаемостью. Обычно используются шрифты без засечек с постоянной шириной штриха.
image

4. Прозрачная кнопка
Один из трендовых элементов в современном веб-дизайне. Причина в том, что она не привлекает лишнего внимания, но четко распознается, как кнопка.
image

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

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

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

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

На базе Web design book of trends.

Комментарии (4)


  1. vintage
    26.08.2015 13:22
    +4

    На сайте Flat UI Colors собраны самые эффективные цветовые паттерны для flat.
    Представленные «спокойные яркие цвета» больше напоминают старую выцветшую одежду. Модно-стильно-молодёжно как-то не выглядит в отличие от предыдущей иллюстрации с огромными тенями.

    быстрая загрузка страниц, за счет простоты графики;

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

    Выбор шрифта в flat обусловлен одним критерием: удобочитаемостью.

    Прозрачная кнопка

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

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


  1. unel
    26.08.2015 15:08
    +3

    Я люблю flat-design, но ненавижу длинные тени и прозрачные кнопки =(


    1. Belikov
      28.08.2015 18:03
      +1

      А я ненавижу и то и другое. :)
      Но хотя бы какие-то тени все же лучше чем полная плоскость (как у Microsoft) или мутные стекла (как у Apple).


  1. Apathetic
    28.08.2015 00:18
    +1

    Такие кнопки, насколько мне известно, стало принято называть «призрачными». Ghost buttons.