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

Коллеги из Red Collar сделали для Cossa подборку красивых и интересных веб-проектов. Находим и смакуем смелые решения, которые расширяют понятие «хорошего дизайна».

Мы убеждены, что в digital-дизайне без вдохновения никуда. Популярные анимации, правила гармоничной композиции, трендовые цвета — лишь инструменты. Суть всегда в человеке. Если нет творческого воодушевления, то красоты не получится. Поэтому каждый четверг мы собираемся перед большим монитором и вдохновляемся сливками цифрового мира. Называем это «Digital в четверг» или просто DIЧ. Поехали!

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

Креативное безумие

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

Стиль в лаконичности

Сайт от Ex Lovers с работами дизайнера Lucie Koldova: мебель, светильники, детали интерьера. Казалось бы, ничего особенного, просто медленно едет фоновая фотография. Но в сочетании с продуманным шрифтом и цветовым оформлением это выглядит чертовски стильно. Интересная задумка с каталогом: товары разделены по типу материала и проиллюстрированы его стилизованным молекулярным составом. В сумме сайт выглядит бомбически.

Прокачай свои 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 октября.

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

Реклама

Целый мир в одном сайте

Unit9 создали крутой сайт, посвящённый новому сезону сериала «Волшебники». Мир кинокартины отражён в 3D-карте и браузерных играх. Например, пользователь может сопоставить планетарные символы или сделать татуировку, соединяя на время точки будущего изображения. Новый квест открывается с каждой серией. Дизайн-приём на заметку: в разделе «О мире Филлори» интересно представлены блоки информации с затемняющимся фоном и иллюстрацией, занимающей пол-экрана.

Нежно о недвижимости

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

Котики вырвиглаз

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

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

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

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

Фирменный стиль для RDV DESIGN — конференции о дизайне. Что особенно удалось: сочетание объёмных композиций для сцены, фотографии и рисунка; опенинг-видео. Яркая и качественная подача.

Anagrama Studio любят повторяющиеся узоры в дизайне и не стесняются об этом не только говорить, но и рисовать, рисовать и снова рисовать (и показывать). Количество и разнообразие вдохновляет. Мы влюбились :-)

Дизайн-концепция бренда одежды Alba Suarez. Интересна тем, что все элементы разные, сочетание цветов специфичное, а в сумме получается тотальная гармония. Деталь, достойная отдельного упоминания: ребята красиво поиграли с размерными символами на бирках, сделав их центральным элементом и совместив с логотипом.

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

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

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

P. S.

А для тех, кто вошёл во вкус и пяти сайтов показалось мало — вот ещё горсть годноты:

  • Сайт в стиле скетчей, которые обычно предваряют сам дизайн и показывают заказчику лишь расположение информационных блоков.
  • Весь сайт сделан на webGL. По сути, это одна большая картинка, которую можно трансформировать мышкой в любом месте.
  • Здесь тройные заполнения для отображения фотографий.
  • А тут — невероятно нежные градиенты и плавные анимации.
  • От ведущего разработчика studio meta две крутых интерактивных анимации: осьминожка и воронка.
  • Двойное заполнение-переход между слайдами, а наложение слоёв создаёт эффект объёма.
  • Как подать даже простую новость типа переезда в новый офис по-настоящему креативно.
  • Внезапно Россия. Переход между слайдами — словно одна фотография перетекает в другую.

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


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

Интересно, много креатива и классных фишек. Но разве по дизайну нужно оценивать крутизну сайта? Его роль быть красивым и креативным? Всегда считал, что сайт нужно оценивать по количеству клиентов, которое он привёл или количеству денег, который он помог заработать. Если можно сделать рекламный канал (сайт) дешевле, то зачем платить за "бурный пшик"?

Если сайт для души и надувания щёк, то дизайн, безусловно, важная штука.
Ответить
- 0 +
Artem Gain #
10.03.2017 09:41
Все правильно, ответили себе своим же комментарием.
Не все сайты коммерческие и не у всех сайтов цель генерация прибыли.

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

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

Email *


Подпишись!


Вход на cossa.ru

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

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

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