Как и почему стоит использовать плоский дизайн
![Как и почему стоит использовать плоский дизайн](https://static.wixstatic.com/media/72c0b2_730bd3a58fda423293970936ee0555c0~mv2.jpg/v1/fill/w_105,h_60,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/72c0b2_730bd3a58fda423293970936ee0555c0~mv2.jpg)
Согласитесь, на слух название «плоский дизайн» может показаться не таким заманчивым. Но знали ли вы, что на деле — это один из самых значимых дизайн-трендов последнего времени? В этой статье мы поясним, что же это за тренд, и покажем, как его можно применить в дизайне вашего сайта.
В основе плоского дизайна лежит двухмерное пространство (собственно, поэтому он и называется «плоским»). К примеру, в других типах дизайна кнопки имеют объем, и выглядят так реалистично, что можно представить, как вы буквально нажимаете на них. В плоском дизайне все совсем иначе: здесь используется максимально простая графика и структура.
![Плоский дизайн - пример](https://static.wixstatic.com/media/72c0b2_b9bb221e7eff4d7cafd564986d233b5b~mv2.jpg/v1/fill/w_117,h_36,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/72c0b2_b9bb221e7eff4d7cafd564986d233b5b~mv2.jpg)
В чем преимущества плоского дизайна?
Есть несколько причин, по которым плоский дизайн стал так популярен в последние годы. Прежде всего, это его практичность. Страницы с плоским дизайном загружаются гораздо быстрее сайтов с анимацией и множеством графических элементов.
Также плоский дизайн легко подгоняется под экраны различных устройств. Так как все больше и больше пользователей используют мобильные устройства для выхода в интернет, плоский дизайн стал большим преимуществом для тех, кто считает своей целевой аудиторией пользователей не только компьютеров, но и других дивайсов.
Ну и еще одной важной причиной, конечно же, является красота плоского дизайна, который отличается простотой и удобством использования. Многие дизайнеры и пользователи поняли преимущество простоты перед сложными конструкциями других видов дизайна. Доказательством тому является решение компании Apple отказаться от старого дизайна и использовать плоский дизайн в новой iOS.
![Плоский дизайн - пример Apple](https://static.wixstatic.com/media/72c0b2_766b7b972f2844b5bae2f6d4d939cb0b~mv2.jpg/v1/fill/w_117,h_77,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/72c0b2_766b7b972f2844b5bae2f6d4d939cb0b~mv2.jpg)
Как использовать плоский дизайн на вашем сайте
Использование плоского дизайна может послужить хорошим доказательством того, что вы идете в ногу со временем и заботитесь об удобстве ваших пользователей. Вот несколько вещей, которые вам нужно сделать, чтобы ваш сайт выглядел актуальным:
1. Используйте простые фоновые изображения: забудьте о броских фонах и «кирпичных стенах». В плоском дизайне принято использовать неяркие, гладкие и едва заметные цвета в фоне.
![Плоский дизайн фона сайта](https://static.wixstatic.com/media/72c0b2_c25a8c61e7be40c1a0798d5314cde66a~mv2.jpg/v1/fill/w_117,h_68,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/72c0b2_c25a8c61e7be40c1a0798d5314cde66a~mv2.jpg)
2. Никаких спецэффектов: никаких объемных иконок, никаких градиентов и анимированных переходов со страницы на страницу. В плоском дизайне нужно избегать всего, что может утяжелить ваш сайт, увеличить размер элементов или привнести суету.
![Плоский дизайн без спецэффектов](https://static.wixstatic.com/media/72c0b2_1d11546381474bdf825cf5c740300b46~mv2.jpg/v1/fill/w_117,h_68,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/72c0b2_1d11546381474bdf825cf5c740300b46~mv2.jpg)
3. Используйте иконки: иконки прекрасно вписываются в плоский дизайн, так как они добавляют функциональности и удобства. Используйте иконки в вашем дизайне, но только если они выглядят просто и понятно (иначе какой в них смысл?).
![Плоский дизайн - использование иконок](https://static.wixstatic.com/media/72c0b2_92dd2381dd9d40d3ac1d4d3e3f69b0c4~mv2.jpg/v1/fill/w_117,h_68,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/72c0b2_92dd2381dd9d40d3ac1d4d3e3f69b0c4~mv2.jpg)
4. Экспериментируйте с формами: в плоском дизайне модно использовать разные формы. Круги, квадраты и линии не только улучшат структуру вашего сайта, но и помогут правильно разделить контент на странице, сохраняя его иерархию и помогая пользователю лучше понять его структуру.
![Плоский дизайн - формы](https://static.wixstatic.com/media/72c0b2_17f9b3452f704ba485572d445e41327c~mv2.jpg/v1/fill/w_117,h_52,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/72c0b2_17f9b3452f704ba485572d445e41327c~mv2.jpg)
5. Выбирайте яркие цвета: цветовая палитра в плоском дизайне должна быть яркой, легкой и веселой. Светлые оттенки розового, зеленого или желтого часто встречаются на сайтах с этим видом дизайна. Однако тут важно не перестараться: цветов на странице должно быть 2-3, не больше.
![Плоский дизайн - цвета](https://static.wixstatic.com/media/72c0b2_8fad10c230e84b8c8bb950cdc3f308b9~mv2.jpg/v1/fill/w_117,h_59,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/72c0b2_8fad10c230e84b8c8bb950cdc3f308b9~mv2.jpg)
6. Сделайте меню простым: навигационное меню, кнопки и все возможные ссылки должны выглядеть максимально просто. Уберите все эффекты вроде теней или подсвечивания кнопок меню. В плоском дизайне часто используются обычные прямоугольные формы в качестве кнопок, а в более минималистичном дизайне вообще ничего, кроме текста.
![Плоский дизайн - простая навигация](https://static.wixstatic.com/media/72c0b2_2e0c4a509c3b4234b20c45d4a64f8eec~mv2.jpg/v1/fill/w_117,h_81,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/72c0b2_2e0c4a509c3b4234b20c45d4a64f8eec~mv2.jpg)
7. Уделяйте внимание шрифтам: с приходом плоского дизайна обычный текст наконец-то получил свои 15 минут славы. Предпочтение отдается ярким, новым типам шрифтов, так как теперь буквы и символы являются неотъемлемой частью дизайна.
![Плоский дизайн - шрифты](https://static.wixstatic.com/media/72c0b2_a8fc18171a91412eb102c37505e89a04~mv2.jpg/v1/fill/w_117,h_72,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/72c0b2_a8fc18171a91412eb102c37505e89a04~mv2.jpg)
8. Используйте шаблоны с плоским дизайном от Wix: к счастью, вам не придется тратить лишних усилий на дизайн плоского сайта – дизайнеры Wix уже обо всем позаботились! Вот несколько примеров готовых шаблонов в «плоском» стиле. Во первых, вы сможете увидеть, как плоский дизайн выглядит на деле, а во вторых – любой из этих шаблонов легко подойдет для множества направлений, просто измените содержание и создайте свой уникальный сайт:
![Плоский дизайн - шаблоны](https://static.wixstatic.com/media/72c0b2_57720a5075174aaa92a20741fcc17606~mv2.jpg/v1/fill/w_117,h_36,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/72c0b2_57720a5075174aaa92a20741fcc17606~mv2.jpg)