Когда наши дизайнеры создают новый готовый блок или шаблон страницы, они смотрят сотни разных проектов в поисках вдохновения и подмечают разные идеи. Сегодня мы хотим поделиться ими с вами. Эта подборка визуальных трендов поможет понять, что сейчас актуально и как сделать свой сайт особенным. И главное — все это легко воплотить в жизнь на платформе Vigbo.
Деление блоков на две части
Обычно блоки на сайтах горизонтальные. Это привычно, понятно и... немного скучно. Попробуйте сломать эту геометрию и разделить один из блоков пополам. Так часто делают интернет-магазины, когда рассказывают на главной странице о каких-то бестселлерах. Например, можно вместо одной горизонтальной фотографии сделать две вертикальные. Советуем выбирать фотографии с разных ракурсов или с разными планами — один кадр с крупным, а другой с общим.
Не бойтесь экспериментировать: добавлять больше пространства, совмещать текст с фото. Дайте свободу вашему контенту и используйте разный масштаб. Если одна фотография крупная, а вторая явно дополнительная, вместе они образуют комбинацию. Это всегда впечатляет!
Бренд украшений расставляет акценты на странице за счет разного масштаба изображений. Это легко повторить на своем сайте
Такой эффект несложно сделать на Vigbo с помощью виджетов. Смотрите:
- Добавьте на страницу два изображения.
- Поставьте между ними отступ и измените его ширину так, как вам нужно.
- Дополните одну из фотографий текстом.
Вуаля, необычный блок с ярким контрастом готов! Такой прием поможет вашему сайту выглядеть современно, а клиентам — по-новому посмотреть на продукт.
На сайте магазина женской одежды все еще проще: они совместили картинку и текст. Пространство вокруг текста добавляет воздуха — смотрится очень эффектно
Комбинирование шрифтов
Обычно мы советуем ограничиться одним шрифтом и всего двумя видами насыщенности (например, normal и bold). Дело в том, что много стилей оформления на одной странице может выглядеть неаккуратно. Но если вы готовы на эксперименты, попробуйте в заголовке комбинировать сразу несколько вариантов оформления текста.
Самый простой и безопасный способ — использовать разные начертания одного шрифта. Например, выделить одно слово курсивом. Оно сразу будет привлекать внимание, а значит, это возможность ненавязчиво выделить главную информацию. Так заголовок станет более активным и выразительным. Он доминирует на странице, поэтому можно использовать его без дополнительных элементов — картинок или фотографий.
Елена на своем сайте использует шрифт с засечками EB Garamond. Самые главные слова она выделила курсивом, чтобы они сразу привлекали внимание
Дизайн-студия использует шрифт Canela Web. Здесь совсем нет декоративных элементов, но крупный текст и современный шрифт в сочетании с разными начертаниями дают одновременно ощущение надежности и уникальности
Если вы чувствуете уверенность в работе с текстом, попробуйте перейти на следующий уровень: сочетать в заголовке шрифт с засечками и без засечек. Разные шрифты и начертания помогут придать тексту динамику и изящность. А еще расставить акценты и выделить главное.
Примеры шрифтов
Шрифты с засечками: Times New Roman, Carmorant Regular, Playfair Display, Georgia, Cyntho Pro. Сверху и снизу каждой буквы у них есть «лапки» — это и есть засечки. Такие шрифты считаются классическими и чаще используются в заголовках.
Шрифты без засечек: Arial, Helvetica, Montserat, Roboto. Они кажутся минималистичными и более современными.
На сайте эффектно сочетается шрифт Neue Haas Grotesk (без засечек) и шрифт SaolDisplay (с засечками)
Цветные блоки
Сейчас все листают сайт экранами — они сменяют друг друга, как слайды в презентации. Если блоки на них будут слишком похожи, сложно сосредоточиться. Поэтому на длинных страницах и лендингах удобно у некоторых блоков делать цветную заливку. Такое чередование сделает сайт более интересным, создавая акценты на важных деталях.
Главный секрет — избегать случайных цветов. Можно придерживаться корпоративной палитры, а еще лучше — искать свои уникальные оттенки. Например, использовать не просто зеленый, а какой-то особый и сложный цвет.
Интернет-магазин использует чередование блоков на главной странице. Чтобы сделать так же, в правом верхнем углу блока выберите «Настройки блока» (иконка шестеренки) → «Цвет фона блока» → передвиньте ползунок с прозрачностью до 100% → выберите цвет. Ниже в настройках можно убрать ненужные отступы. Подробнее об этом в руководстве
Сайт интернет-магазина — отличный пример использования цвета, чтобы выделить несколько товаров на странице. Вы можете сделать так же на своем сайте. Для этого добавьте на страницу несколько товаров с кнопкой для покупки и измените фон блока
Наложение слоев
Для контраста и динамики на сайте можно использовать не только цвет. Попробуйте наложить картинки друг на друга, чтобы одна из них стала фоном. Это создаст иллюзию пространства, будто вы смотрите в окно, а не на плоский экран.
Важно правильно подбирать изображения. Если обе картинки будут с множеством цветов и деталей — получится каша. А нам нужен яркий контраст. Поэтому для фона лучше подбирать черно-белое или монохромное фото, а второе — с плотным цветом. Тогда оно будет хорошо видно.
Чтобы добавить картинку на фон, выберите «Настройки блока» (иконка шестеренки) → «Фон блока» → «Изображение»
Анимация и видео
Пусть анимированные сайты — точно не новое явление в интернете, с ними вы всегда будете на шаг впереди тех, кто использует только статичные картинки. Движущиеся элементы отлично приковывают внимание пользователей, а еще создают настроение.
Помните, что анимация — это отличный прием, но перегружать визуальными эффектами тоже нельзя. Поэтому советуем использовать ее аккуратно. Например, только в слайдере. Туда можно добавить классное фоновое видео, которое впечатлит ваших клиентов.
Совет
Если сейчас вам не позволяет бюджет или время заказать анимацию для своего сайта, на помощь придут бесплатные видеостоки. Мы собрали 9 сервисов, где можно найти отличный ролик для обложки. Смотреть подборку →
Фоновое видео на главной странице vigbo.com. Вы можете так же оформить слайдер на своем сайте. Подробнее об этом в руководстве
Крупные 3D-элементы
Трехмерные изображения добавляют сайту объем и глубину. Такие элементы помогут решать разные задачи: реалистично показать продукт, отразить динамичность вашего бренда или создать причудливый виртуальный эффект.
Главное не переборщить и использовать 3D-графику только для добавления акцентов. Например, это еще одна идея для слайдера.
Создатели проекта Material Designers используют 3D-графику, чтобы оживить обложку
Напоследок мы собрали несколько сайтов, где можно искать идеи, вдохновляться и собирать референсы:
- siteinspire.com. Здесь огромная библиотека проектов на любой вкус. А главное, есть удобные фильтры по стилям, темам и типам сайтов — вы точно найдете то, что нужно.
- land-book.com. На этом сайте отличная подборка стильных лендингов.
- thegallery.io. Этот сайт подойдет, если у вас онлайн-журнал, медиа-платформа или вы ищите идеи для работы с типографикой и текстом.
Надеемся, что эта подборка вдохновит вас на создание сайта или его доработку, если он у вас уже есть :)
На Vigbo можно воплотить любую идею. С нами не нужно думать о технических сложностях, только о красоте и качестве контента.
Создать сайт