26 октября 2017, 16:41

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

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

Red Collar, redcollar.ru

DIЧ № 22

Командная работа: A Friend Of Mine Design Studio

Сайт дизайн-студии A Friend Of Mine. Это банда из 45 рок-звезд от digital, которые создают рекламные кампании для успешных амбициозных брендов со всего мира. Три лаконичные страницы: главная, портфолио и о компании.

Иллюзия резины

Анимации на сайте — это тот же дизайн, то же творчество. Позволяйте своим фронтенд-разработчикам творить всё, что они захотят. И не забывайте развивать их чувство прекрасного, подбрасывая качественные проекты и давая почитать DIЧ :–)

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

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

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

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

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

Место делают люди

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

Здесь, помимо вышесказанного, сделали приятные интерактивные анимации. Кольца-ленты, расходящиеся от фигур, иногда играют с объёмом фотографии, проходя за или перед предметом.

Интерактивный документальный фильм: K’gari

Социальный проект от SBS Online, многоязычного СМИ Австралии. Крупнейший в мире песчаный остров стал называться Фре́йзер после крушения у его берегов корабля капитана Фрейзера. Однако на языке аборигенов батчулла остров именовался «кгари» — рай. В этом проекте вам предлагают побороться за историческую правду.

Сторителлинг как игра

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

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

А вот набирающий популярность эффект с «водным» искажением изображения. Ловите ссылку на Tympanus с готовым для анимации кодом.

Отсутствие контента не приговор. Наоборот — это огромные возможности проявить смекалку и показать креативность агентства. От рендеров до съёмки в stop motion, от иллюстраций — и до лепки из пластилина.

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

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

VR на высоте

Рекламная кампания нового аромата Diesel от L’Oréal. Желающим предлагалось испытать свою храбрость, достав флакон духов из пасти каменного волка в 300 метрах над землёй, пройдя по строительным выступам небоскреба в Нью-Йорке. С ловушками, ветрогенераторами и идеально точно построенным коробом. Три месяца работы над виртуальным пространством и физической площадкой — и увеличение продаж продукта на 120%.

Что по дизайну?

Графика в движении: Film Independent Spirit Awards

Айдентика для фестиваля независимого кино The Spirit Awards.

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

Один из примеров сочетания простого решения и глубокого воплощения. Анимированные слова слетаются, соединяются, на секунду задерживаются и снова разбегаются. Кинематограф никогда не стоит на месте, потому и графика находится в постоянном движении. Три цвета: красный, зелёный и синий, и их смешение в движении, этакий калейдоскопический эффект. Замершие же слова стали фирменным стилем для всей рекламной кампании.

4 столпа хорошего отдыха: cwart

Брендинг для необычного места: фермерского дома в Бельгии, построенного в XIV веке. Это арт-пространство, место для работы, винный бар и вкусная еда в одном месте. Все направления взаимосвязаны и дополняют друг друга.

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

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

Norman: как Paint, только в VR

Художник и кодер Джеймс Патерсон (James Paterson) создал Norman — инструмент для анимации в VR с помощью VR-контроллеров. Программа написана на JavaScript, и работает прямо в веб-браузере. У себя на сайте автор выложил исходный код для работы с рисовалкой. Наш внутренний ребёнок в восторге, а ваш? ;–)

Свежий перевод от Deadsign

Статья про типографику в веб-дизайне: 10 полезных советов от Ника Бабича (Nick Babich). Например, что в проекте следует ограничиваться двумя шрифтами, а не брать разношёрстный ворох. Что лучше выбирать стандартное начертание, а шрифтовые пары подбирать из одной семьи, если иное не требуется по задумке. А также про анимацию текста, его цвета и много других толковых вещей. На пользу!