Чеклист: 50 ошибок в портфолио дизайнеров

Основано на разборе 1000+ портфолио.

Формфактор собрали ошибки, которые:
— портят первое впечатление от портфолио
— вызывают отторжение у лида
— убивают шансы на оффер

Актуально для рынка 2026.

Чеклист в закрепе @formfactor

Реклама.

💾 Toggles – анимированные переключатели, которые меняют цвет, внешний вид внутреннего элемента и даже положение в пространстве.

Сайтодел | #сниппет #css

🖥 Grass – макет для сайта про ИИ. Основной цвет – салатовый, смешанный с бирюзовым. В макете есть небольшие модальные окна и интересная инфографика.

Сайтодел | #макет #figma

🎨 Цветовая палитра макета "Android Material You UI Kit"

HEX | RGB
#F8FDD9 | rgb(248,253,217)
#BDCD68 | rgb(189,205,104)
#50514A | rgb(80,81,74)

⚠️ Цвет копируется одним кликом!

Сайтодел | #палитра

💾 Gallery – галерея с зум-эффектом при наведении курсора на картинки. Для каждого изображения есть маленькие подсказки.

Сайтодел | #сниппет #css

🐙 Bruno – сервис с открытым исходным кодом для тестирования API, альтернатива таким инструментам, как Postman или Insomnia. Работает только оффлайн.

Сайтодел | #репозиторий #github

✍️ Heebo – шрифт для латиницы и иврита, родственный шрифту Roboto. Пример шрифта можно посмотреть в сниппете "Stripe Sessions Style Flex Carousel"

Сайтодел | #шрифт

🐙 Project Based Learning – список уроков для начинающих разработчиков, по которым можно создавать небольшие проекты с нуля. Уроки делятся на языки, среди которых есть JavaScript.

Сайтодел | #репозиторий #github

💾 Portfolio Page – сайт-портфолио с анимированными элементами и ссылками на примеры работ. При наведении курсора на круглую картинку она становится цветной.

Сайтодел | #сниппет #css

🎨 Цветовая палитра макета "AI and Machine Learning Landing Page"

HEX | RGB
#96DDEE | rgb(150,221,238)
#FD82F4 | rgb(253,130,244)
#9640E2 | rgb(150,64,226)

⚠️ Цвет копируется одним кликом!

Сайтодел | #палитра

🖥 Template Plants Animated – дизайн веб-страниц в оттенках холодного и теплого зеленого. Приятный бонус - изображения растений без фона в формате PNG.

Сайтодел | #макет #figma

🐙 DrawDB – бесплатный, простой и интуитивно понятный инструмент для дизайна баз данных, а также генератор SQL. В приложение также можно импортировать DDL-скрипты и JSON-файлы, чтобы построить на их основе диаграммы.

Сайтодел | #репозиторий #github

💾 Motion Blurred Number – счетчик цены с заданными точками на "круглых" числах. Ползунок можно перетаскивать, а можно и кликать на любую точку шкалы.

Сайтодел | #сниппет #css

🖥 AI and Machine Learning Landing Page – сайт для приложения, использующего нейросеть. Выполнен в холодных пастельных тонах, которые хорошо сочетаются с темным фоном.

Сайтодел | #макет #figma

💾 Card Spread Position – набор карточек, которые "разлетаются" из общей куче во время прокрутки страницы вниз. В каждую карточку можно вставить изображение.

Сайтодел | #сниппет #css

💾 Lottie Animations in React – анимация, написанная на библиотеке Lottie. Весь код находится в JS-файле, а HTML и CSS не используются.

Сайтодел | #сниппет #css

💾 AI Inside – спиннер в виде объемного кольца, созданный с помощью библиотеки анимации GSAP. В середине спиннера скрыт еще один графический элемент.

Сайтодел | #сниппет #css

🐙 Project Based Learning – список уроков для начинающих разработчиков, по которым можно создавать небольшие проекты с нуля. Уроки делятся на языки, среди которых есть JavaScript.

Сайтодел | #репозиторий #github

💾 Hexagon Rotating Gradient Border – лоадер, представляющий собой шестиугольник, по периметру которого вращается неоновый свет. Наверху поток замедляется, а внизу наоборот ускоряется.

Сайтодел | #сниппет #css

💾 Lottie Animations in React – анимация, написанная на библиотеке Lottie. Весь код находится в JS-файле, а HTML и CSS не используются.

Сайтодел | #сниппет #css

💾 Glide To Reveal – форма со скрытым паролем. Эффект размытия создан с помощью псевдокласса :has() в CSS.

Сайтодел | #сниппет #css