10 августа 2017, 13:05

Рассказываем, как дизайн меняет пользовательский опыт. Показываем на гифках. Это DIЧ

Red Collar собирает лучшие дизайнерские проекты и объясняет секреты их магнетизма. Постарайтесь не моргать — в эфире «Digital в Четверг».

Red Collar, redcollar.ru

Рассказываем, как дизайн меняет пользовательский опыт. Показываем на гифках. Это DIЧ

Арт-директор

Сайт Коралайн Коласс (Coraline Colasse), арт-директора из Парижа. Она занимается дизайном интерфейсов, совмещает фотографию и иллюстрацию. В проекте собраны разноплановые и самые яркие работы Коралайн.

Забота, забота и ещё раз забота

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

Эффективная и выгодная реклама с сервисом от МегаФона

Широкий выбор рекламных каналов, более 100 параметров по интересам, подробная аналитика и другие возможности уже ждут в Личном кабинете. А еще кешбэк 100% за запуск рекламы в первый месяц и еще 10% — каждый месяц.

Узнать больше >>

Реклама. ПАО «МегаФон». ИНН 7812014560. ОГРН 1027809169585. ERID LjN8K1P7y.

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

Цельное пространство

Повторим в энный раз: эмоции продают. И это одни из лучших рычагов влияния на потенциального клиента. Эмоции делают человека лояльней к бренду, привязывают к нему.

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

Умный подвал

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

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

Мнимая простота

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

Вдохновлять деталями: таймлайн

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

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

Страница с материалами

Важно показать весь ассортимент продукции и качественно презентовать его «в жизни». На сайте сделали конфигуратор, где можно пощёлкать и примерить материалы и цвета обивки, которые красиво меняются на объёмной модели продукта. Варианты обивки кресел вынесли в отдельный раздел. Обратите внимание на рендеры: при выборе цвета меняется окрас и фактура сразу всего кресла.

Эскизы и чертежи

А как заставить всерьёз заинтересоваться продуктом? Передать через сайт своё отношение к предмету: веру в его значимость и ценность. Авторы сделали отдельную страницу с рассказом о дизайне кресла. Начиная с самых первых эскизов. Как вдохновлялись и размышляли над ощущениями от материала, как выбирали базовые цвета и что вышло в итоге.

Музыкальная пауза

Emmit Fenn — исполнитель из США, играющий инди-электронику, и его интерактивный альбом. Каждый трек со своим взаимодействием: где-то лицо автора подсвечивается как в матрице, где-то инфернальный луч света на чёрном фоне, где-то неоновый фонтан — и всё откликается на музыку и движение курсора. Полное погружение.

Behance

Универсальная коробка

Айдентика для корейского канала «Драма» от Cobb Studio. Идентификационные ролики, разделённые по категориям контента: сериалы, музыка, мультики и заставки с ограничивающим рейтингом.

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

В основе смысла «Драмы» — коробка с наборными частями, из которых можно сложить любого персонажа.

«Через эти сцены раскрывается суть канала: разнообразие развлечений. Идея успешно развивается, показывая, как различные цвета и формы объединяются и создают мир „Драмы“», — говорят авторы концепции.

Сохранение традиций

Редизайн крема для губ Suavina от Lavernia & Cienfuegos. Девиз — «135 лет заботы о ваших губах».

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

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

Было:

Стало:

Так рождается магия

Нарезка процесса создания работ от крутейшей студии Jam3.

Digital-чтения от Deadsign

Свежая статья, только-только переведённая с английского: «Я не UX дизайнер, и вы тоже» авторства Бена Мосса (Ben Moss). О том, что UX невозможно спроектировать, как невозможно заранее продумать и создать ощущения, которые испытает велосипедист при езде. Вы можете создать только сам велосипед — UI. Но в чём секрет по-настоящему успешного UX?..

Disclaimer: нашему проекту Deadsign два года, и здесь мы переводим только то, что считаем полезным, интересным и важным. То, что читаем в Red Collar мы сами. Полезного чтения!