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


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

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

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

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

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


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

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


#табы #текст

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

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

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

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


#композиция

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

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

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


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

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


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

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

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

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

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

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



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

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

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

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

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

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


#анимация

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

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


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

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

Ползунок с воздушным шаром
Чертовски милая микроанимация ползунка. Заодно решает важную проблему: значение не закрывается пальцем, а всегда парит над ним.


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

Фиолетовый и жёлтый
Мощь и сила контраста: противоположные друг другу цвета чуть ли не светятся на листе, усиливая друг друга. Сочная палитра создаёт ощущение вызова и дерзости, даже если нет сильных иллюстраций.


#цвет

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

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


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

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


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

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


#текст #линия

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

Ошибка
Метафора ошибки и проблем с загрузкой блестяще передана с помощью двух радикально разных шрифтов и плёнки. Остроумный ход.


#типографика

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

Сгибы
Буквы на плакате согнуты под разными углами так, чтобы была видна контрастная изнанка. Пластично и аккуратно.

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

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