Аватар следит за курсором

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

Коллега показал сайт метамаска. Очень ярко и динамично. Куча интерактивных элементов и анимаций. И, конечно же, очаровательная лисичка, взгляд которой всегда направлен на ваш курсор.

Изображение поста
Изображение поста
Изображение поста

«Курсор для дизайнеров» хочется полюбить уже просто за его футер

Изображение поста

Дизайн-батл / МИФ

⚡️ В этом туре курсорами столкнулись Оля Молосай и Лиза Сашенкова. Они сделали редизайн сайта МИФ. Задача — обновить визуал и предложить новое видение. Оля сделала акцент на иллюстрациях мифических существ в стиле средневековья, а Лиза — на отсылках к культурным мемам и мифам. Кто выйдет в следующий этап? Голосуйте в комментариях!
Режим хеллоуина в FigJam
→ Тематические курсоры и иконки → Жутковатая музыка → Тематические ленты → Тыквы Доступно до 4 ноября 🖼️ Хороший интерфейс 🖼️ Концепты интерфейсов 🖼️ Офферы для дизайнеров
⚡️ В втором туре курсорами столкнулись Юля @ymonastyrshina и Влад @vldnt222. Они делали редизайн Самоката.
Задача — обновить визуал и предложить новое видение. Юля сделала ставку на славянской концепции с отсылкой к нашей культуре, а Влад придумал двух маскотов и накинул несколько сцен в Blender. Кто выйдет в следующий этап? Голосуйте в комментариях!
Я из тех, кто видит каждую мелочь 👀
Пока сильнее всего это проявляется в дизайне Реально, даже не задумываясь, если я замечаю тонкие колебания цвета, то сразу делаю кадр ярче и нахожу то, что обычно «практически» незаметно 🧐 С текстом та же история: если мне интересно, я читаю даже самый мелкий шрифт и пытаюсь понять, что там спрятано, обращая внимание даже малейшие отклонения в отступах — Ну и если вернуться к мелкому шрифту, и отбросить вопросы про CTR и маркетинг, то он просто выглядит стильно и минималистично! Мелкий набор текста часто создает аккуратную эстетику, в связке с крупным текстом Да о чем говорить: на ноуте 15" у меня стоит уменьшенное системное масштабирование (примерно 75%), а курсор минимального размера. Просто так комфортнее 😆 Поэтому мелкий текст для меня не способ спрятать проблемы с компоновкой, это осознанный выбор и часть визуала Если клиент попросит, я сделаю крупнее. Но себе оставлю версию с мелким текстом! Такие мысли. А как вы относитесь к мелким деталям или тексту? 👇🏻
Изображение поста
💅В этом туре курсорами столкнулись Элиза и Даша. Они делали редизайн сайта Золотого Яблока.
Задача — обновить страницу в каком-то новом стиле. Элиза развивает концепцию с орбитами. В центре яблоко, вокруг которого вращается продукция бренда. Даша же делает акцент на художественной концепции, генерируют картины эпохи ренессанса и интегрирует в них главный образ бренда. Голосуйте в комментариях, кто пройдёт в следующий тур!
Добрые комиксы, дизайн пакетов и альтернатива думскроллу
Дизайнерка Bang Bang Education Маша Асауляк делится находками, которые порадуют иллюстраторскую душу. Страничка Анны-Лауры Салливан: найдете комиксы про простые радости жизни. Все работы — с эффектом оплаченной сессии у психолога. Оцифрованные архивы Музея дизайна в Цюрихе: внутри много интересных визуальных исследований — например, о белом цвете в рекламе или дизайне пакетов. Old Book Illustrations: гигааантский архив книжной иллюстрации. Есть возможность поиска по эпохам, художникам, жанрам и техникам. Страничка Наты Метлух: аниматорка и иллюстраторка создает сюрные работы на злобу дня. Работает в дидже и традишке, а на ее переходы в анимации можно залипать часами. Playground: креативный кодинг от художника Киля Мючелнауса и студии Warriors. Инструмент создает анимационные визуализации, следующие за курсором при рисовании. River: движок подбора картинок подтягивает материалы из Are.na и позволяет свободно перемещаться между ними. Хорошая альтернатива думскроллу.
Изображение поста
🚀 В этом туре курсорами столкнулись Камилла @renssunn и Стёпа @itssdesign. Они делали редизайн сайта Telegram.
Задача — обновить лендинг и предложить новое видение. Камилла сделала ставку на шрифтовую пару гротеск + рукописный, необычную вёрстку и фирменного маскота, которого она оживила через Recraft. Утёнок встречает нас на первом экране, плещется в преимуществах и даже отвечает на вопросы. Стёпа же стилизовал заголовки под готику, заменил самолётик на почтового голубя и провёл нас через славянские мотивы — от узоров и буквиц до иллюстраций и финального футера. Голосуйте в комментариях, кто войдет в следующий тур!
Прощай ручка Микки Мауса в в курсоре 🥺
Изображение поста
#UI_ревью 9. Interactive Login Form
Работа: Outcrowd Сильная работа, которая вызывает вау-эффект, на деле довольно трудоёмкая для разработки, хотя выполнимая. + Без слов считываемая идея, что они следят за курсором, это даёт очень эмоциональный эффект «они меня видят». Такое уже было у Tunnelbear, но в этот раз выполнено более выразительно. + Эффект усиливается их реакцией на ситуацию: пароль неверный или видимый. Забавно отыграны такие эмоции как сочувствие, фрустрация, неловкость, и от этого мы начинаем сопереживать им обратно. + Мультяшный стиль с ярким применением принципов анимации Уолта Диснея. + Простые формы героев, при этом сами они все особенные благодаря исполнению лица, цветам и разнообразию форм. + Поскольку все движущиеся элементы локализованы в блоке слева, понятен механизм экспорта анимации Lottie из After Effects через Bodymovin. C анимацией по тригеру каждой ситуации проблем быть не должно. – Что будет сложно реализовать: движение каждой формы вроде зрачка, лица или рта придётся привязывать к курсору по отдельности, это существенная ручная работа. Дизайн настолько удачный, что его даже плагиатят. Если тебе понравился разбор, поддержи пост звездой. Так мне будет понятно, что такой контент тебе нужен. По теме: Анимация приложения для горных прогулок @slashdesigner #первые_шаги #UI_анимация
Совет про тултипы
Тултипы должны появляться с задержкой, чтобы предотвратить случайную активацию. Но вот после того, как подсказка уже показалось, наведение курсора на другие подсказки должно открывать их без задержки в анимации. Это выглядит быстрее, но при этом не умаляет смысла первоначальной задержки. Источник 🖼️ Хороший интерфейс 🖼️ Концепты интерфейсов 🖼️ Офферы для дизайнеров
Сегодня хочу поделиться ещё одной дизайн-историей из своего прошлого. А начнётся она, в очередной раз, со слов «работал я в одной шараге». Это потому, что был период, когда я неправильно подходил к выбору и поиску мест работы, от чего и попадал в разные безымянные подпольные дизайн-шараги.
На этот раз я устроился в небольшую подрядную дизайн-студию, арендующую полуподвальное помещение в одном московском районе. Устроился я туда на зарплату в целых 50 000 деревянных. Для 2008 года сумма была очень даже неплохая. Доллар тогда стоил всего 24 рубля, а не 78 как сегодня. Студия кормилась за счёт одного крупного рекламного агентства, регулярно поставляющего техническую работу вроде ресайзов, адаптаций и допечатной подготовки. Были и достойные задачи, даже веб-сайты и брендинг. В первые пол года дела шли неплохо — зарплата исправно выплачивалась, пусть и в конверте. *** На компьютерах студии была установлена программа Radmin, позволяющая владельцу студии подключаться к любому из наших мониторов и следить за тем, кто и что делает. Пару раз я наблюдал, как курсор мышки чуть заметно двигался без видимой на то причины. А однажды, зайдя без стука в кабинет владельца, я обнаружил свой рабочий стол на его мониторе. Так владелец студии наблюдал за работой дизайнеров. Вскоре, кризис 2008 года дал о себе знать. Начались первые задержки выплат. К Radmin добавилось требование о ведении ежедневных отчётных таблиц в Excel. Каждый дизайнер, включая руководителя отдела, был обязан по пришествии в офис записать время начала работы над той или иной задачей. Если требовалось выйти на перекур или в туалет, это также необходимо было отразить в отчёте. Это мешало работе. Периодически я вспоминал, что не отметил в графике старт или завершение работы над задачей и принимался вспоминать, что и когда я начал или закончил вместо того, чтобы работать над задачами. В студии повисла атмосфера недоверия. Однажды, после того, как кто-то из дизайнеров рассказал пару анекдотов, руководителю отдела был сделан выговор от владельца студии. На следующий день руководитель собрал нас и попросил не смеяться, тем более громко, а желательно вообще помалкивать. Видимо наше настроение и юмор пришлись не к месту. *** Настал день отчёта. Руководитель зашёл в кабинет и попросил предъявить отчёты за месяц. Оказалось, никто, кроме меня их не вёл. Ещё один дизайнер пытался, но сдался уже на втором дне, никому об этом не сказав. Что любопытно — не прозвучало ни одного слова критики в адрес тех, кто проигнорировал таймшитирование и просто забил на требование руководства. Таким образом, я оказался «крайним». В итоге, на примере моего отчёта, всему отделу было доведено о том, что мы по долгу и слишком часто ходим на перекуры и обеды, и вообще, не очень эффективные сотрудники. А ещё через пару месяцев нас вызвали в кабинет к владельцу студии и объявили о том, что студия больше не имеет возможности платить заработную плату в связи с экономической ситуацией и просит написать заявление об увольнении по собственному желанию. Так был сокращён весь наш отдел, остался только руководитель. А спустя ещё год студия прекратила своё существование вовсе. Задержки зарплаты, наблюдение за экраном, микроменеджмент, таймшитирование, штрафы за опоздания на пару минут — это либо неумелое руководство, либо «чёрные лебеди» для организации. Если в вашей компании присутствует или начинает практиковаться что-то подобное — время задуматься о переменах.
Изображение поста
Скалолазный пинг-понг — для спортивных гиков 🎮
Аркада и спорт в одном формате — в механику классической аркадной игрушки добавили руки и ноги вместо курсора. Шарик отскакивает от мест, где загораются лампочки, так что защищать ворота нужно всем телом. #mapped
↔️ 10 анимаций для свайпа в сторону
Собрала для вас небольшую подборку анимаций для демонстрации возможности пролистать блок в сторону (особенно актуально для дизайна мобильных версий сайта). Скачать можно по этой ссылке. Откройте страницу, наведите курсор на любую анимацию, нажмите правой кнопкой и выберите «Сохранить картинку как...». 2 первых файла в формате SVG (взяты у Тильды) и имеют отличное качество в любом размере. Остальные 8 — GIF картинки размером 150х150рх, подойдут, если вам уже приелся дизайн стандартных иконок Тильды. #дизайн #freebie
Изображение поста
Разработка сайта с агентством: поэтапный гайд от Курсора
Статья об этапах разработки цифрового продукта через призму авторского опыта студии. Узнайте, как не упустить мелочи при подписании договора с разработчиком сайта Читать на дизайнерс | #статья
Изображение поста
Разработка сайта с агентством: поэтапный гайд от Курсора
Статья об этапах разработки цифрового продукта через призму авторского опыта студии. Узнайте, как не упустить мелочи при подписании договора с разработчиком сайта Читать на дизайнерс | #статья
Изображение поста
Разработка сайта с агентством: поэтапный гайд от Курсора
Статья об этапах разработки цифрового продукта через призму авторского опыта студии. Узнайте, как не упустить мелочи при подписании договора с разработчиком сайта Читать на дизайнерс | #статья
Изображение поста
Разработка сайта с агентством: поэтапный гайд от Курсора
Статья об этапах разработки цифрового продукта через призму авторского опыта студии. Узнайте, как не упустить мелочи при подписании договора с разработчиком сайта Читать на дизайнерс | #статья
Изображение поста