Стиль дизайна сайтов – минимализм. Минималистичный дизайн сайта – какой он? Идеи, примеры, советы.

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

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

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

Необходимое vs. Достаточное

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

• Пример 1: пусть сверху будет телефон и e-mail для связи, а еще кнопка «заказать звонок», а еще «получить предложение», и дополнительно «задать вопрос». И обязательно — иконки всех возможных и существующих мессенджеров и систем связи, пусть даже сегодня часть из них безнадежно устарела (whats app, telegram, vk, facebook, instagram, Одноклассники, ICQ, MSN…). А сбоку — не забыть всплывающее окно онлайн-помощника и пусть оно все время мигает, привлекая внимание, и еще — в середине страницы несколько раз продублируем кнопку «задать вопрос» и несколько раз «получить предложение», а на 15-й секунде сайта пусть будет всплывать еще одно гигантское окно «Хотите мы вам перезвоним?»

• Пример 2: текущую акцию разместим на главном слайдере + бегущей строкой внизу экрана, плюс в верхнем меню пускай мигает красным с тремя восклицательными знаками «АКЦИЯ!!!» + в разделе новостей первой новостью + в разделе акций первой новостью + еще создадим раздел «Полезное для клиентов» и в нем также разместим ее.

Это, конечно, несколько утрированные примеры. Но вы поняли о чем мы. И, конечно, вспомнили такие сайты, где подобная «избыточность», «навязчивость» и желание продублировать по сути одно и то же наблюдается повсеместно во всех разделах и применительно ко всем блокам. И они бесят 90% посетителей.

В море этих кнопок, ссылок и информации клиенту попросту говоря трудно ориентироваться — от переизбытка блоков рябит в глазах, от внимания ускользает главное (собственно сам продукт или услуга и их преимущества), страдает сама логика структуры сайта.

Минимализм — как раз о противоположном. Необходимо оставить на сайте ровно столько информации, разделов и блоков, сколько будет достаточно для того чтобы донести до потенциального клиента главное. И убрать с сайта весь «шум»:

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

Подробное меню vs. «бургер»

До сих пор не утихают споры что лучше — развернутое меню, где посетителю в один клик доступны все разделы сайта, либо условно скрытое меню, свернутое в «бургер» (то есть оно доступно по клику на 3–4 характерные горизонтальные черты).

Дизайнеры настаивают на том, что «бургер» смотрится современнее и «дороже» в проектах любого типа. Сами клиенты, а также маркетологи чуть более осторожны и полагают, что подобное решение может прийтись не по нраву возрастной части аудитории, которая воспринимает его как «непонятное», плюс возникает необходимость «дополнительного клика» для перемещения по разделам сайта (сначала на «бургер» — затем на нужный раздел).

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

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

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

Главная страница — для главного

Вспоминаем о важнейшем принципе минимализма — убрать все лишнее. Главная страница сайта в этом плане должна быть квинтэссенцией «полезности», отшлифованной до идеала — ведь именно это «лицо» вашей компании в интернете.

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

Однако, сейчас лучше работает подход от противоположного: на главной стоит показать исключительно самое важное, не загромождая пространство и не распыляя внимание посетителя. Лаконичность главной страницы как бы указывает на то, что компания знает себе цену, и НЕ нуждается в дешевых маркетинговых приемах. Вы как бы говорите: «вот, это вершина нашего айсберга», и заинтересованный посетитель, которого вы будто и не пытались удержать, углубляется во внутренние разделы за деталями.

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

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

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

Свернутая детализация

Как уже упоминалось выше — желательно, чтобы текстов как таковых на сайте было меньше, и чтобы они были короче (но лучше по качеству!). Однако, как быть со сложными продуктами/услугами, функционал и особенности которых требуют пояснений и зачастую детальных?

Отличное решение — свернутые списки. То есть, вы оставляете видимым лишь основной заголовок (и подзаголовок блока), детали же доступны при наведении курсора/при клике на стрелку разворачивающую текст.

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

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

Фото — лучше текста, а видео — лучше фото

Графическая, а тем более динамическая информация гораздо удобнее и проще для восприятии и больше нравится всем посетителям сайтов.

Везде где это возможно следует изменять баланс «текст/фото» в пользу изображений. Например, вместо того, чтобы детально описывать ваше производство словами, можно показать 5–6 фото процесса, которые будут дополнены 1–2 абзацами емкого текста или перечнем неких преимуществ.

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

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

Какие шрифты подойдут для сайта в духе минимализма?

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

Оптимально, чтобы на сайте использовалось не более 5–6 вариаций. Изменяемым параметром может быть как сам шрифт, так и стиль его написания (жирный, полужирный, курсив, полукурсив и т. д.) и размер.

Как правило, на сайте используются 2–3 разных шрифта + их вариации по размеру и начертанию. Пример:

• Акцентированный (и, возможно, необычный) шрифт для крупных заголовков;
• Шрифт для заголовков второго/третьего уровня;
• «Обычный» шрифт для текстов описаний, новостей и проч.;
• Шрифт для крупных кнопок (например, «ЗАКАЗАТЬ»);
• Шрифт для мелких ссылок (например, «Подробнее», «Показать еще»).

Если говорить о типах шрифтов, то глобально они делятся на следующие:

• С засечками;
• Без засечек;
• Рукописные.

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

Какие цвета оптимальны для минималистичного сайта?

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

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

Минималистичные сайты чаще опираются на следующие оттенки:

• Белый;
• Серый и серо-голубой;
• Кремовый, айвори, песочный;
• Бежевый, терракотовый, коричневый;
• Черный, графитовый, темно-серый;
• Фисташковый, салатовый, горчичный, пастельный изумрудный;
• Пепельно-розовый, кораллово-розовый, персиковый;
• Нежно бирюзовый, бледно-васильковый;
• Баклажановый, серо-лиловый;
• И проч.

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

Миинималистичн цвета — интерьер

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

____________________

Давайте начнем работу над вашим сайтом прямо сейчас? Мы подготовим дизайн-макет главной страницы БЕСПЛАТНО, чтобы вы могли в реальности оценить как будет выглядеть ваш сайт, разработанный в нашей студии, еще до непосредственного заключения договора.