Тренды веб-дизайна в 2018 году

Стильные и эффектные сайты привлекают посетителя с первых секунд просмотра. Но как сделать такой сайт самостоятельно? Делимся с вами шестью трендами в веб-дизайне, которые актуальны в 2018 году и которые можно легко воплотить в жизнь на платформе Vigbo.

Чистая типографика

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

Примеры красивого сочетания шрифтов. Источники: vedadsiljak.com, chocolatier-megeve.fr, verse-co.com, handsoneveryday.com

Дизайнеры часто используют для заголовков декоративные шрифты с засечками. А в паре к нему для основного текста берут классический шрифт без засечек. При выборе шрифтов также помните о том, что размер шрифта может управлять вниманием. Чем крупнее, ярче и толще шрифт, тем больше он будет привлекать внимания и тем важнее будет казаться написанный им текст. И наоборот — если читатель видит мелкий и светлый текст, то подсознательно воспринимает его, как второстепенный и неважный.

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

Эффектный логотип

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

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

Источники: culturainquieta.com, @whiteandsalt

На платформе Vigbo прямо в системе управления сайтом вы можете за несколько минут создать стильный шрифтовой логотип: подобрать шрифт, цвет и размер под дизайн вашего сайта.

Создание шрифтового логотипа в системе управления сайтом Vigbo

Лаконичный дизайн

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

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

Примеры сайтов с лаконичным дизайном: threegraceslondon.com, sansceuticals.com, marbury.co, jessicacomingore.com, heschung.com, kinfolk.com

Стильные фотографии

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

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

Рассмотрим пример поиска фото по запросу «Interior». Мы видим популярное фото, которое имеет много скачиваний на стоке и, соответственно, очень часто встречается на сайтах.

Одинаковые фотографии на четырех разных сайтах. Источники: dribbble.com, theme.pixflow.net, designhouse605.com, behance.net

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

Примеры фотографий по запросу interior на unsplash.com

Анимация

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

Источники: dribbble.com, behance.net

Делимся с вами двумя быстрыми способами, как самостоятельно сделать простую гифку из видеоролика или серии фотографий:

1. Используем ресурс Giphy: загружаем ролик, обрезаем нужные кадры, сохраняем результат.


2. Используем программу Photoshop: выбираем file (Файл) > import (Импортировать) > video frames to Layers (Кадры видео в слои). Выбираем нужную часть видео, сохраняем как файл gif (комбинация alt+ctrl+shift+s или file > export > save for Web). В модульном окне выбираем формат gif. 

Конечный результат рекомендуем дополнительно сжимать через ресурс IloveIMG. Так гифка станет значительно легче и будет быстро загружаться на страницах вашего сайта.

Эффекты при загрузке контента

Анимационные эффекты при загрузке контента также цепляют внимание зрителя и впечатляюще смотрятся на сайтах. На сайтах Vigbo доступны несколько эффектов:

• Параллакс-эффект. Фоновое изображение в перспективе движется медленнее, чем элементы переднего плана.


• Эффект фиксации изображения. Картинки на странице остаются неподвижными при прокрутке.


• Эффект плавного появления. Контент плавно загружается при прокрутке страницы.

Настроить эффекты вы можете за пару минут в системе управления сайтом, а если возникнут сложности, на помощь всегда придут пошаговые руководства.

Надеемся, вы найдете в этой статье вдохновение для создания своего сайта или для доработки уже существующего. Ведь нет предела совершенству, как мы помним :)

А если возникнут вопросы, воспользуйтесь нашими руководствами или обратитесь к техподдержке Vigbo — мы всегда на связи!