sergey fedorov · product designer
481 subscribers
313 photos
24 videos
19 files
262 links
Бросаю дизайн с 2014 Работаю в https://www.cedro.agency/

Канал про продукты, дизайн-системы, компоненты, иконки, портфолио, рефы, 3D и тд

Портфолио:
https://fedoroj.framer.website
dribbble.com/fedoroj

Автор: @fedoroj
Чат: @productdesignchat
Download Telegram
Если цвета макета при экспорте в фигме получаются тусклыми, не забудьте чекнуть color space. В macOS может стоять Unmanaged (не тот). В Windows — sRGB (тот)

По макоси взято у @eyedesign1, еле-еле найдено на винде мной

#useful #figma
Жизная жиза

Если вам только исполнилось 18 и вы точно планируете в течение 10 лет куда то съездить за границу (как турист) — оформляйте загранник as soon as possible

Потому что очень трудно заполнять раздел последних 10 лет (в госуслугах), особенно когда были расплывчатые этапы жизни, вроде безработицы, отчисления и прочего

18-летнему достаточно указать начало/окончание школы, период безделья перед поступлением в вуз и сам вуз. Либо только школу если нет планов поступать...

upd: раздел десятилетки подразумевает заполнение инфы помесячно. С какого по какой месяц ты учился / работал / служил / не учился и не работал. Иначе не продолжится оформление заявки

#useful #опыт
Как и куда расти дизайнеру

Статья про «одержимость тайтлом» (джун, мид, синьор и тд), рост в пользу ценности вместо «титула», как не распыляться на ненужные скиллы и много чего еще

#useful
sergey fedorov · product designer
Идея креатива — @AngelinaKrass Анимацию в фигме сделал по этому уроку #figma
В комментах спросили как записал анимацию

Для работы использую ShareX getsharex.com — это скриншотилка, кибарг-убийца под windows

Опенсорсная, может записывать гифки, видео (60fps), скриншотить только в определенных местах. На скриншотах можно рисовать карандашом, рисовать типичные обручи, стрелки, блюрить и пикселить определенные места, использовать цифры в виде шагов 1 2 3. Готовый скриншот автоматом заносится в буфер обмена

Также есть еще тонна гиковских фич, которые я не использую: генерация QR, палитра, пипетка, линейка, простой фоторедактор, автоматическая выгрузка скриншота в imgur, dropbox, pastebin, google drive...бла бла бла

Ну вы поняли, кибарг-убийца 👀

#useful
Серый текст на белом и черном

Мастхэв статья (по факту запись из бложика Бирмана) про корректное использование черного текста на белом фоне и наоборот. Постоянно скидываю ее новичкам.

Если ваш UI кажется вам грязно-серым и слабым (светлая тема) — попробуйте юзать оттенки близкие к абсолютному черному и играться с начертаниями. Это, как ни удивительно, улучшает визуал всей типографики

Например, одна из претензий пользователей-дизайнеров к Notion — как раз злоупотребление ноушеном слабоконтрастных цветов в шрифтах 👀

Дополняющий пост: «Не забледняй»

upd: примеры из полиграфии применимы к UI

#useful
Столкнулся с всратой проблемой блендера — при импорте чужих моделей НЕ работает параметр Auto Smooth — позволяет сглаживать полигоны через команду Shade Smooth, угловатость будет видно только на краях, думаю вы видели такое в играх с low poly графонием

Решение как обычно оказалось спрятано в ебенях — вкладка Geometry Data, кнопка «Clear Custom Split Normals Data» (UX копирайтеры дико визжат)

После очистки чекбокс и поле Auto Smooth снова доступны. Результаты до и после прикрепляю

#useful #blender
С перехода на новый смартфон (huawei→xiaomi) думал, что стилизацию текста телеги похерили на уровне контекстного окна клавиатуры (там где копировать/вставить). Полтора года спустя (!!!) случайно нахожу, что функцию спрятали в три точки в правом верхнем углу (когда выделен текст)

Явахуи

#useful #ux
Стыковка линеек и плашек

Статья про линейки и плашки от Игоря Штанга. Мастхэв для новичков, олды все более менее знают, можно бегло освежить знания:

🔗 awdee.ru/matching-rulers-and-dies/

в дополнение есть видео от ютубера «design course» про бордеры

@fedoros #useful #design
Ээээксперименты

1. Потестил панорманую камеру в блендере. На первой картинке cycles, на второй eevee. Удивило, что настроек фишая во втором случае тупо нет (чзх блендер?), только фокусное расстояние. В случае с cycles можно выбрать 5 типов панорам

2. Появился смысл использовать последний свежий Illustrator (сс22/23). В разделе 3D эффектов был добавлен Inflate который «надувает» вектор так, что сбоку получается равномерный закругленный эффект. Этой функции дико не хватает в блендере. Похожие (как в фш) настройки есть в C4D. Раньше приходилось кое-как создавать скругления через ремеш со скульптингом / криво работающий bevel / симуляцию ткани / создание чб карты глубины (что сейчас и делает большинство blender-ютуберов с хромотипографикой)

А теперь я трачу секунды на создание эффекта, экспортирую результат в OBJ (да, в Ai так можно) и далее в блендер. Некоторые иконки тоже пробую делать через инфлейт (сердечко 🤍, например, неплохо получается)

Гештальт закрыт 🥴

#blender #3d #study #useful
Заколлабился с Назарием Дудником. Он снимает классные и уникальные туториалы по блендеру, например, превращение 3d рендера в svg иллюстрацию, то чего я не смог найти нигде пару лет назад

Так уж вышло, что у нас совпали идеи – он планировал сделать какой-нибудь туториал с 3d текстом, а я вкинул идею о хромированной типографике и проблемах с ее быстрой реализацией (большинство туторщиков пользовалось скульптингом после экструдинга svg). Предложил решение с использованием inflate в иллюстраторе и экспортом в obj

Назарий предложил вариант ещё проще – использовать 2 модификатора – remesh и smooth corrective. Нарисовал ему для видео его имя в y2k стиле. Ниже скину оригинал для практики

лайк, субскрибе, коммент:
🔗 https://youtu.be/SFnh0lcyHJ8

#3d #blender #useful
Снова небольшая коллаба с Назарием. Здесь я выступил только как со-автор идеи:

🔗 https://youtu.be/_ejacrPFZfY

У многих пользователей был незакрытый гештальт к работам этого дизайнера (вторая картинка). Как он это сделал? Оказалось, что 3D софт вообще не использовался – только платный Filter Forge и фотошоп

Назарий и я пришли к решению в блендере: svg + куб, remesh, bool tool, smooth corrective. Плюсом он добавил простую анимацию hdri карты. В итоге выглядит очень похоже и оно живое 💃

Поддержите видос просмотром / комментарием

#3d #blender #useful
Насчет новых обновлений фигмы

Там 32 мелких обновления, все круто классно, НО:

— Vertical trim (обрезка текста по базовой линии) или же leading-trim пока что не поддерживается браузерами. У мамкиного дизайнера есть подробный пост про это;

hanging-punctuation (висячие кавычки) поддерживаются только в Safari;

— для hanging lists (висячие списки) «к элементу <ul> следует добавить отступ 0»;

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

Самое норм обновление — добавили sticky-эффект для шапок в прототипировании, джва года ждал

Распространите 😎

#figma #useful
196+ каналов и чатов в 3-х папках для дизайнеров. Личная подборка

Был бы первопроходцем как автор этого канала но была куча всяких дел

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

1️⃣Папка «Design 1» (100 шт) — содержит наиболее активных авторов контента, которых я читаю чаще всего
https://t.me/addlist/olQhwQq7_OYzMjIy

2️⃣Папка «Design 2» (77 шт) — туда по большей части закинул авторов, занимающихся графдизайном / #3D / прочими специфичными вещами. Они тоже активные, но читаю их не так часто
https://t.me/addlist/CdACyhsVGwQ1ODBi

3️⃣Папка «Reference» (19 шт) — есть авторы каналов, занимающиеся исключительно сбором референсов: продуктовых лендингов и постеров; сайтов с awwwards; моушн видео от студий; промышленно-продуктовое и архитектурно-урбанистическое направление
https://t.me/addlist/OUbMoQ7J-CowM2Vi

Также добавлены нетоксичные чаты по фигме, дизайн-комьюнити и моделированию в #blender

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

Распространите 🎩

#useful
Please open Telegram to view this post
VIEW IN TELEGRAM
sergey fedorov · product designer
🔗 producthunt.com #reference уровня *адмирал ясен хер* Чем сохранять очередную подборку с продуктовыми лендингами – лучше зайти на PH самостоятельно и увидеть самый-самый свежак: куча дизайнерских инструментов и сервисов; стартапы, прошедшие акселератор…
С подключением меня к интернету — у каждого продукта на PH есть блок с Alternative products, аналоги обозреваемого стартапа 👀

Очень пригодилось «вот прям щас» при создании лендинга, аналога Linktree / Taplink. Набралось 60 продуктов:

🔗 https://www.producthunt.com/products/linktree/alternatives

Особенности:
— Около 10 стартапов сдохли, домены мертвы либо истек срок оплаты. Возможно проверяли спрос. Еще несколько оставляют желать лучшего по скорости загрузки и качеству дезигна

— По web3 направлению наткнулся всего на 2 стартапа (!). Идея на мульярд-мульёнов — таплинк для твиттерских NFTшников с стильной кастомизацией

— Презентующих демо только 1 стартап. Может оно и не требуется когда есть скриншоты сервиса. Но и скриншотов у некоторых нет😳

#useful
Please open Telegram to view this post
VIEW IN TELEGRAM
Media is too big
VIEW IN TELEGRAM
Кстати, некстати — попробовал сделать анимированную аватарку для телеги:

— Варианты лиц генерировал в DiffusionBee (MacOS) через img2img. На основе собственного memoji от эпол. Промпты в стиле разных художников. Конвертнул результаты в jpeg с малым разрешением, это важно

— Для AI-морфинга использовал эту библиотеку. Принцип морфинга такой – сделал переходы с 1-ой картинки по 2-ую, 2→3, 3→4, 4→1. На выходе получилось несколько коротких mp4-видео

— Монтаж и эффекты в Capcut. Ускорил в несколько раз. Из-за наложенного эффекта подергивания не получился плавный loop 🥴

Для первого раза сойдет

P.S. Идея для стартапа — для AI-морфинга не нашлось ни нормальных сервисов ни библиотек кроме упомянутой. И то она обычная, не AI-стиль. Artbreeder, который рекомендуют в каждом втором видеотуториале полная неработающая хуйня 😬. Даже для обычного морфинга тоже нет нормального онлайн-сервиса, иди качай After Effects и мучайся 🥴

Суть идеи — создать продукт с ровно одной функцией – возможностью морфить 2 и более изображений в AI или хотя бы обычном стиле


#useful
Please open Telegram to view this post
VIEW IN TELEGRAM
Gifski

Не выкладывал в канал пока не пригодилась по работе. Сконвертировать видео для карточки товара в гифку и закинуть в фигму. Функционал именно тот, что требуется от конвертера — монтаж, фпс, разрешение, скорость, луп. Есть галочка «bounce» для реверс анимаций

На MacOS

Для винды аналогов не нашел, гугление выдает всякий шлак и онлайн сервисы
upd: энкодер есть на винде – https://gif.ski/ но автор mac-версии улучшил ее. В оригинале надо закидывать набор png изображений, видео нельзя 🥴

#useful #tool
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Подробный гайд как сделать темную тему с помощью variables фигмы

Эта статья помогла закрыть небольшой пробел в знании о variables

Не считая прикалдесного эффекта автопереключения темы, самое главное для меня — делать тёмную версию компонентов в variants больше не нужно. Как и использовать color styles (при создании дизайн систем, например)

Первый раз читал статью бегло и жопой🍑, оттого не заметил важного инсайда. Поправочка — требуется тариф Figma Pro, чтобы показанные фичи работали

🔗 https://vc.ru/design/740970-podrobnyy-gayd-kak-sdelat-temnuyu-temu-s-pomoshchyu-variables-figmy

Найдено давно у автора Secret Design

#figma #useful
Please open Telegram to view this post
VIEW IN TELEGRAM
Как вас зовут в почте и Телеграме

Решил скинуть мини-статью о наболевшем, сам периодически сталкиваюсь и на работе и в дизайнерских чатах. Не получается вести серьезный осмысленный диалог с пользователем, у которого вместо имени и аватарки стоит какое-то рандомное эмодзи «🤓»

Перешлите своим сверхразумам, ни на что не намекая:

🔗 https://maximilyahov.ru/blog/all/anal-fisting-is-typing/

Найдено в канале Ильи Бирмана

#useful
Please open Telegram to view this post
VIEW IN TELEGRAM