[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "create", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-158433683", "adfox_url": "//ads.adfox.ru/228129/getCode?p1=bxbwd&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid21=&puid22=&puid31=&fmt=1&pr=" } } ]
{ "author_name": "Daria Khokhlova", "author_type": "self", "tags": ["\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0434\u0438\u0437\u0430\u0439\u043d","\u0442\u0440\u0435\u043d\u0434\u044b","\u0432\u0435\u0431_\u0434\u0438\u0437\u0430\u0439\u043d","\u0440\u0443\u0431\u0440\u0438\u043a\u0430_\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0442\u0440\u0435\u043d\u0434\u044b_\u0432_\u0434\u0438\u0437\u0430\u0439\u043d\u0435","\u0442\u0440\u0435\u043d\u0434\u044b_\u0432_\u0432\u0435\u0431_\u0434\u0438\u0437\u0430\u0439\u043d\u0435","\u043f\u0430\u0440\u0430\u043b\u043b\u0430\u043a\u0441","\u043e\u0431\u043b\u043e\u0436\u043a\u0438","\u0431\u043b\u043e\u0447\u043d\u0430\u044f_\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430"], "comments": 17, "likes": 25, "favorites": 21, "is_advertisement": false, "section_name": "default", "id": "9325" }
Daria Khokhlova
16 333

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

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

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

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

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

Dewey's Pizza

Peugeot

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

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

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

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

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

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

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

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

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

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

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

5. Параллакс

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

The Great Forest Park Balloon Race

#Интерфейсы #Дизайн #тренды #веб_дизайн #Рубрика_Интерфейсы #интерфейсы #тренды_в_дизайне #тренды_в_веб_дизайне #параллакс #обложки #блочная_структура

Статьи по теме
Новый тренд веб-дизайна: контурные кнопки
«Бюро Пирогова»: Какие тренды веб-дизайна получат развитие в 2015 году
Тренды в дизайне мобильных интерфейсов 2015 года — мнение дизайнера «Яндекса»
Популярные материалы
Показать еще
{ "is_needs_advanced_access": false }

Комментарии Комм.

0 новых

Популярные

По порядку

Прямой эфир

Команда калифорнийского проекта
оказалась нейронной сетью
Подписаться на push-уведомления