Веб-тюнинг. 20 фишек веб-дизайна 2015 года

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

Хотите идти в ногу со временем, и сделать свой сайт еще лучше? Советуем воспользоваться фишками, о которых и пойдет речь в статье.

Плоский дизайн вошел в тренды еще несколько лет назад, заставив объемные элементы пылиться на полке истории веба. Хотя, пока еще не все сайты стали плоскими, а это значит, что можно с уверенностью заявить о том, что флет в 2015 от нас не то, что никуда не денется, а накроет своей лавиной еще больше веб-проектов.

Пример флэт-дизайна на сайте Lantic :

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

Пример видео на бэкраунде сайта Drygital :

Отличный пример с фоновым видео от Twin Pine Journey:

И еще пример, после которого очень хочется есть от Nea Lagunay:

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

И хотя параллакс и интерактивный скроллинг — явления не новые, фантазия дизайнеров и работа фронтэнд-разработчиков творит чудеса и удивляет нас снова и снова.

Хороший пример параллакса на сайте Kresko:

Еще более чем достойный пример навигации по скроллингу Lycka:

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

Пример блочного расположения информации на сайте Goglazed:

Пример блоков на сайте Martinauer:

В продолжение темы плоского дизайна, в моде не просто флет-иконки, а максимально схематичные, будто бы нарисованные дизайнером за 2-3 минуты. Минимум деталей, максимум графичности — зато какой эффект!

Пример контурных иконок от Mais Pastel:

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

Прозрачная CTA-кнопка на сайте Maaemo :

И еще пример от Martinauer :

Хотите, чтобы ваши клиенты пришли к вам? Покажите им карту пути к вам. А чтобы все заметили уж наверняка, разместите ее в футере вашего сайта. Отличное решение.

Пример контурных иконок от Mais Pastel :

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

Пример свернутого меню :

Пример меню, которое при клике на него разворачивается на весь экран от Aquest :

Логично, что чем больше стали наши мониторы, тем крупнее элементы на сайтах. Ведь мелкое смотрится очень невзрачно на экранах с большим разрешением. А вот крупные фотографии на фоне — другое дело :-)

Фоновое фото на сайте Creamoire :

Пример больших фоновых фото от Cooking Academy :

Пример больших фоновых фото от Cafe Cimo :

Все реже на сайтах можно заметить кричащие цвета, и все чаще — палитру пастельных красок. Да и давно пора! При желании, можно ввести один яркий цвет, и остальные выбрать неброские.

Пример использования пастельных тонов на сайте Axara :

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

Пример тонирования на сайте Ruby Tap :

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

В тренде показывать их на посадочных страницах в активном виде, то есть, не при нажатии вызывать, а по умолчанию. Веб-дизайнеры настолько смелы, что делают их в тоне сайта, вроде как «кто это тут замаскировался?» :-)

Пример формы обратной связи на сайте Aquest :

Еще пример огромной формы обратной связи на сайте Antoinelaoun :

Это не только тренд веба, но и граф. дизайна тоже. Тонкие — не значит мелкие. Они тоже крупные, но линии делаем тонкими, будто бы свой обычный шрифт мы посадили на диету.

Пример тонких шрифтов от Cooking Academy :

Пример тонких шрифтов на сайте Buongiorno Illy :

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

Пример короткого футера на сайте Breezyexcursion :

Традиция оставлять меню при скроллинге пришла не в 2014, а раньше, не возьмусь точно утверждать год. Но однозначно скажу, что в 2015 она никуда не денется, и все больше меню на сайтах станут липкими.

Пример липкого меню на нашем сайте:

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

Пример типографики на сайте Basic :

И еще пример от Goglazed :

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

Пример нашего поп-апа:

Споры вокруг того, читают люди тексты или смотрят картинки исчерпаны. Ведь решение сочетать пропорционально текст и фото — просто и гениально.

Пример сочетания текста и изображения:

Пример гармонии текста и картинки:

Хэштегом #vscocam вовсю можно отмечать веб-странички некоторых сайтов. И это не спроста. Все же, не обязательно быть хипстером, чтобы оценить стиль подобного дизайнерского решения.

Сайт с элементами хипстер-стайла Maaemo :

Пример хипстер-стайла на сайте Mabeat:

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

Пример адаптивного сайта Модерн-ХХI:

Пример адаптивного сайта Студии ОШО:

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