09 ноября 2017, 16:40

DIЧ № 23: раскрываем секреты лучших дизайнерских проектов

В эфире агентство Red Collar.

Red Collar, redcollar.ru

Отражение digital — Reflet

Сайт агентства Reflet, которое уже больше 15 лет связывает международные лакшери-бренды и их клиентов. Сайт с принципами, подходами и услугами компании.

Раскрытие сторон

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

Компания называется «Отражение», и все свои принципы они иллюстрируют двойными слайдами с интересным интерактивом. Надо зажать и листнуть страницу влево или вправо: «R» превратится в «Я», а сухие «Эмоции» на бэкграунде — в призывное «Ощущай эмоции», «Мечты» → «Создавай мечты». Таким образом ребятане только играют с названием, но и иллюстрируют принцип своей работы. После этого так и хочется сказать «Хотите превратить сухое существительное в важный процесс? Вам к Reflet!»

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

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

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

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

Глубина картинки

Если не хочется снимать видео и перегружать им информационное и визуальное пространство, а динамика в кадр просится, сделайте параллакс изображения. Он разнообразит страницу, а интерактивная составляющая (движение завязано на курсоре) привлечёт внимание пользователя и теснее свяжет его с сайтом.

Параллакс бывает разный: можно, например, расслоить изображение на передний и задний планы, а затем каждому присвоить движение в своей плоскости. Но здесь авторы сделали более сложный вариант с иллюзией 3D-эффекта на движке PixiJS.

Музыкальная посылка — Soundtrack.FedEx

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

Праздник в каждом действии

Мы в Red Collar считаем, что интересные и продуманные способы взаимодействия должны быть всегда. Это завлекает пользователя, погружает, заставляет запомнить сайт и бренд и подталкивает поделиться необычной находкой с друзьями.

С каждой цифрой точки на многогранной фигуре множатся плюс меняется сама форма с яркими светлячками. Об удобстве тоже подумали: можно не только печатать по одному символу за раз, но и вставлять код целиком и стирать его в случае ошибки. Всё как в обычном поле ввода — но как волшебно и завораживающе выглядит! Будто ждёшь не рутинную посылку, а настоящий праздник.

Визуализация процесса

Когда люди взаимодействуют с сайтом или магазином, они редко задумываются над тем, как создаётся товар или услуга. Смотрят на картинки готового продукта, читают кейсы, но максимальной наглядности это не даёт. Справедливости ради: наглядность нужна не всегда. Но порой попадает в точку и формирует верный имидж.

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

Игра с ножом

The Knife Game от Hellohikimori. Старый-добрый экстрим с ранами и кровищей, но в безопасной браузерной забаве. Хочешь — играй по правилам, хочешь — просто отрубай себе фаланги. А ещё можно соревноваться с игроками по всему миру и играть со смартфонов. Enjoy!

Бехансы недели

Обыграть код — <smile />

Концепция ребрендинга одной из старейших ИТ-компаний мира, которая работает только с открытыми источниками кода. Проект Graphéine в коллаборации с Quentin Degrange.

Хорошее решение: не только создание айдентики на тематике компании, но и символическое разделение на отдельные ветки: e-Business, Digital, Information Systems и так далее.

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

Увы, проект клиентам не приглянулся. А вот так выглядит сайт компании сейчас.

Работа с указателями — European Capital of Culture. Debrecen 2023

Венгерский город Дебрецен соревнуется за звание европейской культурной столицы 2023 года. Команда Multiple Owners разработала фирменный стиль для этого события.

Большое искусство — грамотная работа с простыми и, казалось бы, заезженными формами: кругами, стрелками, полосами и так далее. Ещё интереснее: как эти формы образуют свежие паттерны.

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

Дефиле-шоу

Эксперименты с моушн-дизайном от VA Designer. Фэшн-девушки из дыма, песка, воды и кракена дефилируют по сюрреалистичным пространствам.

Перевод свежака от DEADSIGN

Статья от Мэри Страйбли (Mary Stribley) про 10 правил композиции, без которых не обходится ни один дизайнер. Автор рассказывает про сочетание и единство элементов, про работу с фокусом и воздухом, указателями и контрастом и многое другое на наглядных примерах. Без всего этого никакой дизайн не будет ни рабочим, ни эстетически приятным. Важные вещи!