Иллюстрации, графические элементы, персонажи, маскоты, инфографика и GIF. Смотрите работы целиком, разбирайте технику и собирайте свою версию.
Изображение
Две квадратные марки для вымышленных магазинов: персонаж встроен в продуктовую вывеску. Сначала работает крупный силуэт маскота, затем название: контрастный контур и 2–3 локальных цвета удерживают знак читаемым в малом размере.
Разобрать пример
Изображение
Два самостоятельных знака: кролик в сумке и улыбающаяся ель с домиком. Примеры того, как характер и один предмет объясняют назначение бренда.
Разобрать пример
Изображение
Два знака, где персонаж и надпись образуют единую марку для гастро-брендов. Встраивайте персонажа в ритм букв: высота глаз, ушей и продуктового символа должна поддерживать базовую линию логотипа.
Разобрать пример
Изображение
Монохромная объёмная буква L, собранная как оптический объект. Для сложной монограммы достаточно одной оси света и одного материала: они объясняют объём без дополнительных декоративных деталей.
Разобрать пример
Изображение
Светлый fashion-постер: фигура в бежевой одежде перекрывает большой чёрный буквенный знак. Типографика одновременно служит рамкой и создаёт глубину.
Разобрать пример
Изображение
Тёплый портрет в розовом платье: воздушная занавеска обрамляет лицо у окна. Окно оставляйте главным источником света, а полупрозрачную ткань используйте как слой глубины, не как отдельный сюжет.
Разобрать пример
Изображение
Скейтбордист прорезает крупные геометрические буквы и городские фотополосы. Сильнее всего работает одно действие, выходящее за буквы; повторяйте цвет букв в небе, чтобы коллаж не распадался на слои.
Разобрать пример
Изображение
Синий вертикальный рекламный постер Trident White с центральной упаковкой и крупным слоганом. При одном герое упаковка должна быть самой контрастной зоной, а текст — поддерживать направление взгляда к ней.
Разобрать пример
Изображение
Два вертикальных рекламных постера Lacoste с зелёным кодом бренда и lifestyle-фотографией. Серия выглядит связной, когда фирменный цвет, размер wordmark и место продукта повторяются, а сюжет кадра меняется.
Разобрать пример
Изображение
Вертикальная инфографика связывает транспорт, энергию, зарядку и AI в одну экосистему. Разбираем композицию и маршрут чтения. Числа и маркетинговые тезисы на изображении не проверялись. Атрибуция Diplomeme — по публичной странице AITASVIR.
Разобрать пример
Изображение
Оранжевый персонаж с розовой шевелюрой на синем фоне. Сохранён полный макет Jiro: он показывает, как крупный герой работает вместе с заголовком.
Разобрать пример
Изображение
Яркий объектный hero с желейной долькой арбуза как главным акцентом. Один материальный объект выглядит убедительнее набора мелких иллюстраций: дайте ему крупный масштаб и фон с близкой, но более тихой насыщенностью. Сохранён полный макет: графику разбираем в контексте страницы.
Разобрать пример
Изображение
Дружелюбный иллюстрированный hero для детской обучающей академии. Для детского интерфейса объединяйте мягкую палитру, крупные округлые формы и простую сцену, где герой направляет внимание к действию. Сохранён полный макет: графику разбираем в контексте страницы.
Разобрать пример
Изображение
Коллажный экран для сервиса организации moodboard с вырезками, типографикой и перекрывающимися карточками. Управляйте коллажем через один доминантный цвет и повторяющийся угол карточек: тогда разнородные фрагменты выглядят как единая система. Сохранён полный макет: графику разбираем в контексте страницы.
Разобрать пример
Изображение
Пёс в светлой шапке и очках на тёмном зелёном фоне. Сохранён полный макет Jiro для разбора масштаба персонажа и свободного поля под текст.
Разобрать пример
Изображение
Графический фрагмент для портфолио копирайтера с типографикой как главным визуальным материалом. Когда текста много, постройте один крупный типографический жест и дайте мелким строкам служить ритмом, а не вторым заголовком. Сохранён полный макет: графику разбираем в контексте страницы.
Разобрать пример
Изображение
Чёрно-белый карандашный кадр схватки в манга-стилистике. Направление удара и линии движения важнее отделки: сначала соберите диагональ тела и оружия, затем добавляйте штриховку.
Разобрать пример
Изображение
Предметная серия: два вида тирамису и схема его слоёв. Переход от готового объекта к объясняющей композиции с короткими подписями.
Разобрать пример
Изображение
Тёмный лист примеров загрузочных состояний: индикаторы, сетки и минимальные анимационные паттерны. Для каждого загрузочного состояния выбирайте один ритм движения и один контрастный акцент; единая сетка помогает сравнивать варианты.
Разобрать пример
Изображение
Вертикальная таблица нейтральных оттенков для тёмного интерфейса. Нейтрали должны различаться по светлоте достаточно, чтобы слои интерфейса читались без усиления насыщенности акцентных цветов.
Разобрать пример
Изображение
Синяя обложка учебного гида по основам UI-дизайна с крупной многострочной типографикой. Большой заголовок на модульной сетке остаётся выразительным без иллюстрации: достаточно одного интенсивного фона и спокойной второстепенной строки. Здесь представлена обложка; полный учебник не сохранён.
Разобрать пример
GIF
Дополнительный открытый пример формата: небольшой шар отскакивает от большого. GIF содержит 132 кадра и цикл 5,28 с. Автор Thierry Dugnolle, CC BY-SA 4.0; файл сохранён без изменений. Подходит для изучения ритма и замыкания анимации.
Разобрать пример