Плоский стиль в веб-дизайне отличается отсутствием объёма и теней, простотой подачи контента без детализации. Это полная противоположность скевоморфизму — стилю, в котором объекты изображаются максимально реалистично. Рассказываем подробнее о главных элементах плоского стиля:
Композиция
Все элементы сайта находятся в одной плоскости. Нет объёмных изображений, текстур и шумов на фоне. У кнопок нет теней и бликов. В отличие от минимализма, на сайте в плоском стиле может не быть большого пустого пространства, сайт может быть декоративным и с большим количеством контента на экране.
Пример: juniors.qa
Цвет
В плоском дизайне используются чистые локальные цвета. Они могут быть акцентными или в качестве фона. В дизайне таких сайтов не будет градиентов.
Пример: petsend.ru
Типографика
В типографике нет случайных элементов и декоративных шрифтов, соблюдается чёткая визуальная иерархия. Чаще используются шрифты без засечек.
Пример: budetbalance.ru
Иллюстрации
Изображения и иконки простые и легко считываются. Они выразительны, но без лишних деталей. В иллюстрациях нет перспективы, теней и объёма. Исключение — длинные плоские тени одного цвета.
Пример: kasanie.org
Композиция
Все элементы сайта находятся в одной плоскости. Нет объёмных изображений, текстур и шумов на фоне. У кнопок нет теней и бликов. В отличие от минимализма, на сайте в плоском стиле может не быть большого пустого пространства, сайт может быть декоративным и с большим количеством контента на экране.
Пример: juniors.qa
Цвет
В плоском дизайне используются чистые локальные цвета. Они могут быть акцентными или в качестве фона. В дизайне таких сайтов не будет градиентов.
Пример: petsend.ru
Типографика
В типографике нет случайных элементов и декоративных шрифтов, соблюдается чёткая визуальная иерархия. Чаще используются шрифты без засечек.
Пример: budetbalance.ru
Иллюстрации
Изображения и иконки простые и легко считываются. Они выразительны, но без лишних деталей. В иллюстрациях нет перспективы, теней и объёма. Исключение — длинные плоские тени одного цвета.
Пример: kasanie.org
