​Инвертированная шапка
При скролле иконки в шапке не просто залипают вверху экрана, а инвертируются. Так шапка становится менее тяжёлой.


#mobile #навигация

Визуальный код

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


#карты #данные

Визуальный код

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


#цвет #паттерн

Визуальный код

Наклон
Бодрый стиль, построенный на наклонах заголовков и сочной высококонтрастной палитре. Понравилась простота, лёгкость и смелость.

Визуальный код

Этикетка на горлышке
Легко, просто, неожиданно.


#упаковка

Визуальный код

Маска на видео
Старый добрый приём для зрелищного первого экрана. Выглядит эффектно, но в реализации на самом деле не так сложно: свгшная маска накладывается на обе части экрана, в одной половине фото, в другой зацепленное видео на фоне, и по ховеру маску сдвигаем, масштабируем или трансформируем. За наводку спасибо @yesiwannado

Визуальный код

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

Визуальный код

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


#иллюстрация #полукруг #фото

Визуальный код

Неожиданный ховер
Очень замороченно и очень зрелищно.

Визуальный код

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


Визуальный код

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


#табы #текст

Визуальный код

Рукав или автобус
На табло вылета в лаунже авиакомпании S7 показывается не только номер гейта, а ещё и соответствующая иконка: рукав или автобус. Удобная штука для понимания, как долго будет идти посадка и надо ли снимать пальто.

Визуальный код

Сетка
«Сеточная» композиция экрана с привязкой к модульности и пропорциям. Создаёт ощущение упорядоченности — всё на своём месте. Раньше такой приём часто встречался, а сейчас слегка ушёл в прошлое — видимо, потому что поддерживать приём непросто, и практичность сомнительна. Но красиво.


#композиция

Визуальный код

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

UPD: подписчики подсказывают, что этот приём называется depth maps — 3D-градиент по глубине. За наводку спасибо @tranya


Визуальный код

Карточки с градиентом
Ещё один пример вёрстки модулей-карточек. Градиент на фоне адаптируется и для малых форматов «в строку», и для более весомых карточек.


#градиент #модули

Визуальный код

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

: личные фото, Рим
#навигация #схемы

Визуальный код

Переходы
Зрелищные переходы на промо-сайте сериала Dark, посвящённом генеалогическому древу персонажей. На сайте много эффектного и своеобразного, но мне почему-то особенно понравился вот этот переход между экранами — поглощающая зыбь, как круги на воде. Вживую в браузере смотрится лучше, чем на видео. За наводку спасибо @vanyauhalin



Визуальный код

Фрактальные психоделические иллюстрации с эффектом приближения.

Визуальный код

Заголовок и две колонки
Большой короткий заголовок + две узкие колонки текста + много пространства вокруг. Способ вёрстки скорее журнальный и книжный, но в вебе на больших экранах тоже должно смотреться неплохо.

Визуальный код

Анимация перелистывания
Экраны листаются с эффектной анимацией, основанной на масштабировании и искажении кнопки. Дичь, но красота.


#анимация

Визуальный код

Анимация вариативного шрифта
Шикарная анимация, показывающая вариативность шрифта, на странице шрифта Antonia от австрийской студии TypeJockeys. Приём с последовательной зацикленной демонстрацией фичи. Наглядно и зрелищно.


#типографика #анимация

Визуальный код