Сегодняшний выпуск «Веб-тюнинга» будет не таким, как обычно. Потому что посвящен обзор будет не конкретной бизнес-отрасли, как это было ранее, а фишкам веб-дизайна в целом. Опираясь на свой опыт, а также прошерстив лучшие сайты мира, которые появились на свет в 2014 году, мы сделали выводы, и составили прогноз трендов и тенденций веб-дизайна для 2015 года.
Хотите идти в ногу со временем, и сделать свой сайт еще лучше? Советуем воспользоваться фишками, о которых и пойдет речь в статье.
1 Флет-дизайн
Плоский дизайн вошел в тренды еще несколько лет назад, заставив объемные элементы пылиться на полке истории веба. Хотя, пока еще не все сайты стали плоскими, а это значит, что можно с уверенностью заявить о том, что флет в 2015 от нас не то, что никуда не денется, а накроет своей лавиной еще больше веб-проектов.
Пример флэт-дизайна на сайте Lantic:
2 Видео на бэкграунде
Наверняка в предыдущих выпусках веб-тюнинга вы заметили, что я то и дело советую использовать в первых экранах сайтов фоновое видео. И не просто так. Видео отлично включает внимание посетителя, добавляет сайту жизни и позволяет передать то эмоциональное послание, которое вы хотите. Однозначно, в 2015 году будет еще больше видео на бэкграундах главных страниц, и этот тренд безусловно положительный.
Пример видео на бэкраунде сайта Drygital:
Отличный пример с фоновым видео от Twin Pine Journey:
И еще пример, после которого очень хочется есть от Nea Lagunay:
3 Интерактивный скроллинг
Навигация по сайту исключительно с помощью нажатия кнопок — это скучно. Вот если страница будет меняться по ходу скроллинга — это куда интереснее. А с помощью таких эффектов, как параллакс, можно делать невероятные вещи.
И хотя параллакс и интерактивный скроллинг — явления не новые, фантазия дизайнеров и работа фронтэнд-разработчиков творит чудеса и удивляет нас снова и снова.
Хороший пример параллакса на сайте Kresko:
Еще более чем достойный пример навигации по скроллингу Lycka:
И шедевр Pioneers Brancottestate:
4 Блочное расположение информации
Этот тренд прижился по одной простой причине — блочное размещение информации очень удобно при адаптивной верстке. Экран уменьшается, а блоки спускаются один под другой. Но это решение не только функционально, но и удобно для восприятия пользователя, так как вероятность каши в голове, от обилия потоков информации, минимизируется.
Пример блочного расположения информации на сайте Goglazed:
Пример блоков на сайте Martinauer:
5 Контурные иконки
В продолжение темы плоского дизайна, в моде не просто флет-иконки, а максимально схематичные, будто бы нарисованные дизайнером за 2-3 минуты. Минимум деталей, максимум графичности — зато какой эффект!
Пример контурных иконок от Mais Pastel:
6 Прозрачные CTA-кнопки
Кнопки призывов к действию поярче и позаметнее, говорите? Но посмотрите на западные сайты — там сплошь и рядом CTA с прозрачным фоном, и лишь обведенные по контуру. Никаких кислотных тонов, все максимально гармонично с цветами сайта. И что самое главное, ее хочется нажать :-)
Прозрачная CTA-кнопка на сайте Maaemo:
И еще пример от Martinauer:
7 Карта в футере
Хотите, чтобы ваши клиенты пришли к вам? Покажите им карту пути к вам. А чтобы все заметили уж наверняка, разместите ее в футере вашего сайта. Отличное решение.
Пример карты в футере Quincy Requin Avocats:
Пример контурных иконок от Mais Pastel:
8 Сэндвич-меню
Опять же, в связи с тем, что на мобильных гаджетах не эргономично размещать развернутое меню, в моду вошли сэндвичи, то есть, по умолчанию свернутое меню в одну иконку, похожую на сэндвич. Меню разворачивается при клике, и часто чуть ли не на весь экран. Тут уже как дизайнер придумает.
Пример свернутого меню:
Пример меню, которое при клике на него разворачивается на весь экран от Aquest:
9 Большие фоновые фото
Логично, что чем больше стали наши мониторы, тем крупнее элементы на сайтах. Ведь мелкое смотрится очень невзрачно на экранах с большим разрешением. А вот крупные фотографии на фоне — другое дело :-)
Фоновое фото на сайте Creamoire:
Пример больших фоновых фото от Cooking Academy:
Пример больших фоновых фото от Cafe Cimo:
10 Пастельные тона
Все реже на сайтах можно заметить кричащие цвета, и все чаще — палитру пастельных красок. Да и давно пора! При желании, можно ввести один яркий цвет, и остальные выбрать неброские.
Пример использования пастельных тонов на сайте Axara:
11 Тонирование
Чтобы максимально акцентировать внимание на послании, и не рассеивать его по мелочам, веб-дизайнеры прибегают к эффекту тонирования экрана, когда все заливается одним цветом, и остается лишь мощный слоган или заголовок. Довольно хорошее решение, если вам есть, что сказать, причем это должно быть не полотно буков, а одно, но зато какое, предложение.
Пример тонирования на сайте Ruby Tap:
12 Гигантские формы обратной связи
Если вы прочитали предыдущие пункты, наверняка успели сделать вывод, что элементы на веб-страницах растут. Вот и формы обратной связи туда же.
В тренде показывать их на посадочных страницах в активном виде, то есть, не при нажатии вызывать, а по умолчанию. Веб-дизайнеры настолько смелы, что делают их в тоне сайта, вроде как «кто это тут замаскировался?» :-)
Пример формы обратной связи на сайте Aquest:
Еще пример огромной формы обратной связи на сайте Antoinelaoun:
13 Тонкие шрифты
Это не только тренд веба, но и граф. дизайна тоже. Тонкие — не значит мелкие. Они тоже крупные, но линии делаем тонкими, будто бы свой обычный шрифт мы посадили на диету.
Пример тонких шрифтов от Cooking Academy:
Пример тонких шрифтов на сайте Buongiorno Illy:
14 Короткие футеры
Что и уменьшается в вебе, так это размер футеров. Если ранее были актуальны огромные подвалы с кучей ссылок, то теперь остается лишь самый сок. Ничего лишнего.
Пример:
Пример короткого футера на сайте Breezyexcursion:
15 Липкое меню
Традиция оставлять меню при скроллинге пришла не в 2014, а раньше, не возьмусь точно утверждать год. Но однозначно скажу, что в 2015 она никуда не денется, и все больше меню на сайтах станут липкими.
Пример липкого меню на нашем сайте:
16 Типографика
Шрифтовые эксперименты поощряются, и есть ряд удачных экспериментов, когда с помощью правильного использования типографики,удавалось добиться большего эффекта, чем с использованием фотографий или видео. Что подойдет вам — решайте сами, экспериментируйте.
Пример типографики на сайте Basic:
И еще пример от Goglazed:
17 Поп-апы — реинкарнация
2014 год стал перерождением моды на поп-апы. Только теперь их используют по умному, без навязывания, четко настраивая время или действия пользователей, на которые они появляются.
Пример нашего поп-апа:
18 Текст+картинка
Споры вокруг того, читают люди тексты или смотрят картинки исчерпаны. Ведь решение сочетать пропорционально текст и фото — просто и гениально.
Пример сочетания текста и изображения:
Пример гармонии текста и картинки:
19 Хипстер-стайл
Хэштегом #vscocam вовсю можно отмечать веб-странички некоторых сайтов. И это не спроста. Все же, не обязательно быть хипстером, чтобы оценить стиль подобного дизайнерского решения.
Сайт с элементами хипстер-стайла Maaemo:
Пример хипстер-стайла на сайте Mabeat:
20 Адаптивность
Адаптивный веб-дизайн — это отличное решение для тех, кто хочет продавать мобильным юзерам. Это даже не тренд, а важное для каждого интернет-предпринимателя внедрение, к которому все мы со временем придем.
Пример адаптивного сайта Модерн-ХХI:
Пример адаптивного сайта Студии ОШО:
На этом рубрика «Веб-тюнинг» берет небольшой отпуск, и вернется в следующем году с новыми идеями для улучшения ваших сайтов.