Лого vc.ru

Тренды в веб-дизайне 2015 года: «Обложки», блочная структура, разделение экрана

Тренды в веб-дизайне 2015 года: «Обложки», блочная структура, разделение экрана

Блогер и писатель Николь Бойер собрала для издания Creative Bloq пять трендов в веб-дизайне, которые ей удалось выявить за первые шесть месяцев 2015 года.

Поделиться

1. Разделение экрана

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

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

Dewey's Pizza

Peugeot

2. «Блочная» сетка

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

Первый пример, который приводит девушка, — сайт обувной компании Greats. Так как все ботинки, пишет она, имеют «одинаковый вес», проектировщик страницы сделал квадратные блоки с ними одинакового размера.

Второй пример — сайт музыкального сообщества Mecenat Musical. Здесь все блоки имеют разную значимость — поэтому сделаны разного размера.

3. Отказ от использования «хрома»

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

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

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

4. Использование полноэкранной «обложки»

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

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

5. Параллакс

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

The Great Forest Park Balloon Race

Статьи по теме
Новый тренд веб-дизайна: контурные кнопки28 мая 2014, 17:01
«Бюро Пирогова»: Какие тренды веб-дизайна получат развитие в 2015 году05 декабря 2014, 14:49
Тренды в дизайне мобильных интерфейсов 2015 года — мнение дизайнера «Яндекса»08 января 2015, 18:59
Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

А что, если в 2015 не появилось новых трендов в веб-дизайне, а просто шлифуются и оттачиваются тренды последних лет? )

требую 2001 год и вэб 1.0! Параллакс у барышни, блин, в тренде)))

Да, много классных сайтов стало. Даже сайты местечковых соревнований www.crimeaskyrunning.com

Шутишь? Это же страшно.

0

Я уверен что основным трендом станет не сам дизайн как таковой, а более осмысленные интерфейсы и наращивание количества сервисов.
К примеру:
Доставка еды может иметь не просто тугую корзину Выбор>Заказ>Оплата а ещё и трекинг авто доставки, расчёты калорий в заказанных блюдах.
И всё в подобном стиле.

в Америге сайды - это белая страничга, цведной заголовок, и чиорный тегст. А я делаю MUTYDA.COM

Плагиат по прежнему один из главных трендов:

0

Ну вообще это одна компания. Росбанк входит в состав Societe Generale. Посмотри копирайт в футере.

1

тренды совсем не тренды, а сайту Peugeot, который приведен в первом примере уже больше полутора лет.

0

Возможность комментирования статьи доступна только в первые две недели после публикации.

Сейчас обсуждают
Mike Kosulin

Сначала шутишь в комментариях, а потом без VPN смотришь только рутьюб.

Телеканал «Пятница» добился «вечной» блокировки видеохостинга Dailymotion в России
0
Глеб Горохов
Versta

Хм, обнаружил на VC вот такое: vc.ru/p/30-bezumnyih-otzyivov-v-google-play

По теме же, где рекомендации?) Стыдно?

Apple позволит разработчикам отвечать на отзывы в App Store
0
John Doe

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

GoWithKid — сервис по поиску мест для отдыха с ребёнком
0
Эдгар Китаев

Что-то вроде 👽

Президент «Дикси» и два топ-менеджера покинули компанию после падения выручки ритейлера
0
Gregory Golovanov

При пристальном взгляде на ваших выпускников всплывает, что всё не так радужно. Твил в жопе, например. Симиларвеб говорит, что с июля по сентябрь аудитория упала в 10 раз, с 3млн+ до 300 тысяч уников, но это ладно. Меня больше всего убила история с myguru.ru (бог с ним, что в Москве есть сервис с почти таким же названием и смыслом!). Посмотрел на то, в чём разбираюсь и развиваюсь. Вы там пишете что 360 заказов вместо 60, ну-ну. Да, без акселерации оно бы подохло, но с ней не лучше. Лендинг перенаправляет на какую-то контору. В Москве и области один телефон, в Казани и области — другой, причём если в Москве у "Тандема" еще есть офис, то в Казани, Йошкар-Оле и окрестностях просто человек с могилой ходит. Если решение проблемы стартапа кроется в принципе "наеби клиента — сделай редирект на человека с мобилой, диспетчера студентов работающих за еду", то это вас с хорошей стороны не показывает. Никаких заказов, никаких мастеров. Тупо окно с телефоном, заказом обратного звонка и счётчиком в стиле БМ. Браво. Видна огромная работа и результат акселерации за 600к налицо, ура, молодцы!

В одиннадцатый акселератор ФРИИ вошли сервис для загрузки музыки из «ВКонтакте» SaveFrom.net и ещё 27 проектов
0
Показать еще