DIЧ: Обзор крутых сайтов и свежих дизайнерских решений

Коллеги из Red Collar собрали для Cossa новый «Digital в четверг» — дайджест, который раздвигает грани хорошего веб-дизайна. Предыдущий выпуск.

Пятёрка вдохновляющих сайтов

Бада бум!

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

Скрины/1_03%20Наркоманы.png

Скрины/1_03%20Наркоманы%20ещё.png

Сыграть на китах

Синтезатор песен китов от креативного агентства Resn. По сути, промо MailChimp для привлечения внимания к компании. Качественная работа со звуком. И ещё одна приятная деталь — анимированный логотип. Сайт адаптивный, самое вкусное взаимодействие на сенсорном экране.

Скрины/1_02%20Киты.png

Столетний перформанс

Проект «Будущая библиотека» от агентства Hello Monday. Призван собрать сотню авторов и хранить их произведения в течение 100 лет, а затем напечатать тексты на бумаге, сделанной из тысячи деревьев, посаженных в 2014 году.

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

Прокачай свои digital-скиллы!

COSSA рекомендует крутые практические онлайн-курсы для прокачки ваших digital-скиллов:

  • UX-Аналитика развернуть программу
    • Введение в специальность. UX-Аналитика в digital
    • UX Аналитика. Data-Driven / Data-Informed
    • Обзор аналитических инструментов
    • Продвинутый разбор Google Analytics
    • Построение и оптимизация воронок
    • Очные исследования
    • Удаленные исследования
    • Петля улучшений. Поиск гипотез и версионность тестов
    • A/B Тесты и другие способы проверки гипотез
    • Юнит-Экономика
    • Почему не обойтись без базовых знаний JS
    • Настройка Google Tag Manager
    • Зачем нужен SQL и как с ним работать?
    • Аналитика 360. Ваши персональные большие данные
    • AIC.Brain. Аналитическая система своими руками
    • Введение в BI. Обзор промышленных систем аналитики
    • Разбор кейсов
    Записывайтесь на курс! Старт ближайшего потока — уже 27 октября.
  • Управление Digital-проектами развернуть программу
    • Экологичный путь менеджера
    • Релиз-менеджмент: готовим проекты к запуску
    • Требовательность digital-продюсера
    • Аналитика. Базовые навыки
    • Как пасти котов: правильное делегирование в IT
    • Переговорные навыки. Часть 1. Цикл продаж
    • Переговорные навыки. Часть 2. Провокации. Работа с возражениями
    • Оценка и декомпозиция digital-проектов
    • Планирование своего времени
    • Управляем дизайнерами. Scrum в дизайне
    • Выравнивание рабочего потока и балансировка нагрузок
    • Навыки ведения конструктивного диалога
    • Работа с кадрами: сложные вопросы
    • Тонкие моменты (рассмотрим по ходу дела)
    • Работаем с типовыми документами
    Записывайтесь на курс! Старт ближайшего потока — уже 27 октября.
  • UX-Дизайн развернуть программу
    • Профессия дизайнера в эпоху цифровых перемен
    • Основные этапы проекта
    • Service design
    • UX-проектирование — качественные исследования
    • UX-проектирование — прототипирование
    • Data-driven design
    • Concept design творчество в дизайне
    • Visual design
    • Техника успешной презентации
    • Отраслевая специфика
    • Разбор кейсов из практики: «госуслуги» — проектирование и дизайн интерфейсов
    • Разбор кейсов из практики: 1C-битрикс и битрикс24 — разработка дизайна сайта, продуктов и единой экосистемы интерфейсов
    • Разбор кейсов из практики: нтв-плюс — разработка и развитие сайта
    • Специализация и карьера
    Записывайтесь на курс! Старт ближайшего потока — уже 27 октября.
  • Скетчинг для дизайнеров развернуть программу
    • Понимание формы
    • Техники и инструменты. Светотень
    • Фактуры и текстуры
    • Перспектива и аксонометрия
    • Перспектива как инструмент
    • Построение теней и отражений
    • Изображение людей. Базовые пропорции и анатомия
    • Человек в движении. Одежда
    • Изображение головы и рук человека. Лицо, мимика, жесты
    • Анатомия животных
    • Рисование без натуры. Методы и возможности
    • Домашние заготовки. Типовые изображения часто встречающихся форм
    • Композиция. Основные принципы. Композиция иллюстрации. Взаимодействие пространства и формы
    • Скетч как инструмент креативности
    • От живого рисования — к цифровому. Обзор
    • Цифровое рисование. Технические приемы
    Записывайтесь на курс! Старт ближайшего потока — уже 27 октября.

Мы гарантируем качество программ и обучения по всем этим образовательным программам.

Реклама

Скрины/1_01%20Будущая%20библиотека.png

Скрины/1-02деревья.png

Капля брутальности

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

Скрины/1_04%20Игра%20промо.png

Летающие шмотки

Сайт новой коллекции спортивной одежды Descent от компании EPOCH Inc. Избитая тема презентации вещей подана креативно: модели парят в воздухе и улетают с размытием и приятным ускорением.

Кстати, на этом же сайте мы нашли заглушку для новой площадки бренда, которая пока в разработке. Но вместо традиционной статичной заглушки ребята сделали анимацию и интригующе-шутливое объяснение, что процесс идёт.

Скрины/01_05%20Шмотки.png

Скрины/1_05%20Шмотки%20ещё.png

Полезная плюшка

Animista показывает разные анимации и даёт настроить их параметры. Дизайнеры смогут прикинуть, как будут выглядеть их изображения в движении, а разработчики — скачать css-файл для подключения к проекту. Можно добавить в «любимые» самые классные примеры и собрать свою коллекцию.

Рабочие%20файлы%20Ната/Публикации/Cossa/Дич/16.03.17/Скрины/Инструмент.png

Тройка качественных дизайнов

Проект NFL Combine для бренда Under Armour. Это линейка спортивной одежды, дизайн которой вдохновлён формой игроков NFL на ежегодном соревновании Scouting Combine. Основная фишка — одежда без людей. Идея простая, но её редко воплощают столь качественно и интересно.

Скрины/Беханс%20тени%20спорт.png

Визуальное оформление для четвёртого издания квеста 36 Days of Type. Фишка концепции в том, что использован один цвет — зелёный, всё остальное держится на композиции из множества маленьких деталей. Отдельное удовольствие — как продуманно картинка собирается воедино и заполняется элементами.

Рабочие%20файлы%20Ната/Публикации/Cossa/Дич/16.03.17/Скрины/Беханс%201%20-%2036.png

Дизайн-концепция сайта про 40 креативных подходов Люка Салливана из его книги «Рекламная пауза. Откровения креативного директора». Не только лаконичная и стильная задумка, но и ещё один мини-источник, где можно подсмотреть интересную анимацию.

Скрины/Беханс%203.png

Видео на позитив и вдохновение

Stop motion от Павла Пахузина. Покадровая анимация — когда каждая сцена нарисована и снята отдельно. Всё вместе искусно смонтировано в единый ролик. Волшебство!

В портфолио автора можно следить за свежими работами и вдохновляться.

P. S. Бонусная стопка примеров с нестандартными решениями

Мнение редакции может не совпадать с мнением автора. Если у вас есть, что дополнить — будем рады вашим комментариям. Если вы хотите написать статью с вашей точкой зрения — прочитайте правила публикации на Cossa.


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

- 0 +
Сергей Мекеда #
19.03.2017 12:25
Отличная подборка. Особенно пригодилась Animista. Верстка (программирование) готовыми модулями это уже тенденция. Возможно есть, что-то подобное по html (php, js)?
Ответить
Спасибо! Следите за подборками, всё впереди :)
Ответить
- 0 +
Спасибо за подборку, ждём новых! )
Ответить
На пользу и вдохновение.
Ответить
- 0 +
Сайты, которые грузятся по минуте  - ну уж нет.
Ответить
Скажем "Нет" старым устройствам и медленному интернету! :)
Ответить
- +1 +
Это каким таким медленным? Мы занимаемся телекоммуникационными системами. Не думаю, что у нас тут медленный сильно интернет.
Ответить
Ответить?

Самые интересные статьи, обзоры и размышления —
в рассылке!

Email *


Подпишись!


Вход на cossa.ru

Уже есть аккаунт?
Выбирай любой вариант входа:
Facebook Twitter Vkontakte

Используйте свой аккаунт в социальной сети Facebook или Twitter, чтобы пользоваться сайтом

Не забудьте написать email на странице своего профиля для управления рассылкой