Pixel Perfect

Pixel Perfect

@pixeleperfect
Изображение канала: Pixel Perfect
5 988 подписчиков
39 постов
Посты
Уже видели, что Webflow обновили variables? 🦾
Теперь можно создавать наборы значений переменных, которые легко переключать и применять по всему сайту. Это открывает возможности для адаптивного дизайна на разных устройствах, упрощает создание тем и сокращает общее количество переменных для управления.
В декабре мы обещали рассказать историю Саши, который делал тестовое задание для Relate Studio ☄️
Так вот, Саша все-таки сделал себе отличный подарок к новому году, потому что круто выполнил это оплачиваемое задание, успешно прошел собес с фаундером и получил фулл-тайм работу. Теперь он Creative Developer. В сентябре прошлого года мы уже писали Саше с предложением попробовать свои силы в студии. Но тогда он отказался, так как на фрилансе был большой загруз. Чуть позже времени у него стало побольше и он сам к нам обратился. А уже в ноябре у нас появилась подходящая вакансия в Relate Studio. В студии Саша будет разрабатывать сайты на Webflow и, по необходимости, саппортить проекты в качестве дизайнера. Саша говорит, что рад быть частью крутой команды: очень нравится дизайн, который делают ребята. «Я достаточно эмоционально отношусь к проектам и, когда мне нравится дизайн, я более охотно его делаю. Команда очень открытая, позитивная и целеустремленная!» ✨ А еще у Саши есть актуальное портфолио, которым он поделился. Тут можно ознакомиться. Ребята, 15 января у нас стартует новый поток курса для начинающих по Webflow. Если кто-то хотел начать новый год с новой профессии, то оставляйте заявку, пару мест еще есть. Это можно сделать #pricing?utm_source=telegram&utm_medium=channel_+pp&utm_campaign=sasha_relate">[на сайте] 😇
https://content.desigram.ru/static/19974f89-29c0-4648-89b8-42612970dc80.jpg
Что такое Whiteboard Challenge и чем он лучше тестовых заданий?
Whiteboard Challenge — это формат собеседования, где продуктовый дизайнер решает задачу прямо в Figma в режиме реального времени. Такой подход заменяет тестовые задания, экономит время и показывает, как человек думает и работает. В некоторых компаниях Whiteboard полностью вытеснил тестовое задание при найме в продуктовые команды. Тестовое для middl-av может занимать 8 часов, а Whiteboard всего час🧐 Почему это удобно для компании и для дизайнера? • это быстрее: вместо долгих тестовых проверок всего час совместной работы • видно, как дизайнер решает задачи и общается • легче понять, подходит ли человек для конкретной команды Вот, как может выглядеть задача ✨ Вводные Представьте, что вы работаете над приложением для планирования путешествий. Пользователи часто жалуются, что процесс поиска и бронирования поездок слишком сложен: приходится прыгать между разными сервисами и терять кучу времени ✨ Задание Разработайте концепт интерфейса, который поможет пользователю удобно и быстро спланировать поездку в одном месте — от выбора направления до бронирования Как whiteboard проходит для дизайнера Сейчас whiteboard может выглядеть по-разному как в компаниях, так и в командах внутри одной компании — все зависит от целей и задач нанимающих. Чаще всего дизайнеру для успешного прохождения можно следовать прозрачному дизайн-процессу, а именно: 1. Уточнить задачу, проблемы, цели 2. Получить больше контекста о пользователях и о проблеме 3. Сгенерировать одну или несколько идей, которые решают проблему 4. Реализовать решение на lo-fi макетах (прямоугольниками и текстом) 5. Сделать овервью решения и подумать, где его можно улучшить Как whiteboard проходит для нанимающих Основное, что хотят узнать интервьюеры — как дизайнер мыслит, подходит к решению задачи, достигает результата и аргументирует Whiteboard Challenge — это про честное и быстрое знакомство с навыками дизайнера без лишней траты времени. Чтобы погрузиться в тему глубже, можете посмотреть проект whiteboard.framer.wiki, там можно найти примеры задач, полезные материалы или даже попробовать пройти тестовый whiteboard 😏
https://content.desigram.ru/static/d45e02b0-f7d4-421b-ad3c-ef6336b2e472.jpg
Остались считанные часы до нового 2025 года 🥂
Вся команда 😇 Pixel Perfect хочет поздравить вас всех с этим праздником и поблагодарить за поддержку и доверие. Нам было очень приятно провести этот год с вами. Вы — наше вдохновение и мотивация, давайте и дальше продолжать расти и развиваться вместе. Что у нас получилось в 2024 году? • запустить новое обучение по абсолютно новому направлению — продуктовому дизайну • расширить команду до 15 человек • запустить 3 новых сайта • подготовить 10 бесплатных курсов • завершить 10 Битв верстальщиков • впервые отправить студентов на стажировки в дизайн-студии • выпустить больше 1000 студентов • написать много-много историй про вас • найти много-много вакансий и проектов для вас • провести 10 прямых эфиров Год был очень продуктивным и, тем не менее, мы видим огромный пласт работы, который еще только предстоит. Так что встречаемся в новом году здесь же. С праздником 🎄🎅 😏
https://content.desigram.ru/static/2aa1594f-b11f-48e0-ad9f-558f1c1931ef.jpg
Всем привет 👋🏼
Сегодня расскажем вам о тарифах нового курса по продуктовому дизайну, чем они отличаются и как выбрать подходящий. ☺️ Тариф START (6 месяцев) Идеальный вариант для тех, кто хочет изучить новую профессию и сделать первые шаги в дизайне. Что вас ждет: – 100+ видеоуроков, которые помогут освоить материал до уровня Junior – 5 проектов в портфолио: лендинг, интернет-магазин, приложение, проект для Дизайн-битвы и выпускной проект – 6 онлайн-воркшопов от экспертов – персональная обратная связь и поддержка в боте доступ к материалам на 12 месяцев ✨ Тариф BASIC (8 месяцев) Для тех, кто хочет не только освоить профессию, но и получить полноценную поддержку в трудоустройстве. Включает все из тарифа START, а также: – карьерное сопровождение до трудоустройства (помощь с поиском работы, упаковкой портфолио, подготовкой резюме и сопроводительного письма) – проверка итоговых проектов лично автором курса – 7 личных консультаций с менторами – дополнительный обучающий модуль – персональная поддержка еще на 2 месяца – возможность заморозки обучения на 1 месяц ☀️ Тариф MENTOR (9 месяцев) Для тех, кому нужен индивидуальный подход в освоении новой профессии и трудоустройстве. Все из тарифа BASIC, плюс: – индивидуальное сопровождение Senior дизайнера на протяжении всего курса (Артем проверяет домашние задания и дает персональную обратную связь) – поддержка в реализации коммерческих проектов (разберем по шагами, как реализовать ваш первый рабочий проект) – 5 личных консультаций с автором курса – гарантированная стажировка в продуктовой компании (2 недели в компании-партнере под руководством тимлида) – персональная поддержка в боте еще на 2 месяца Вся программа нашего курса есть на сайте. А если есть какие-то вопросы, то можно их задавать нашему менеджеру.
https://content.desigram.ru/static/2fe3dfab-8fd6-4054-83e7-f7890aa8d52b.jpg
Ну вот и закончился последний в этом году эфир! Все, кто на него не попал, ловите запись:
🌐 запись на youtube 💬 запись в vk Первый поток курса по продуктовому дизайну стартует 15 января. А на нашем сайте можно ознакомиться с программой курса еще раз и оставить заявку, если вы уже решились 😏 Продуктовый дизайнер — это профессия, тесно связанная с аналитикой, но при этом не лишенная творчества. В курсе мы делаем упор на исследования, UX и поиск работы. То есть на то, что несколько упускают другие обучения. Конечно, не забываем и про UI часть — основы типографики, колористики и другие модули также предусмотрены в курсе. Вас ждут реальные кейсы, обратная связь от экспертов и подготовка к собеседованиям в IT-компании. Всем, кто решит присоединиться к потоку сегодня, дарим скидку 30% на покупку обучения. Промокод: NEWYEARPIXEL30, использовать можно у нас на сайте
https://content.desigram.ru/static/7ce04f05-047d-47d7-a646-87f44bcc1a75.jpg
Привет! На связи Олег. Недавно в канале мы обсуждали платные тестовые задания. Так вот, буквально на следующий день мне на Upwork прилетело предложение выполнить подобное задание.
Клиент — швейцарский сервис онлайн-бронирования услуг, который захотел обновить сайт. Тестовое — редизайн лендинга. Задание было оплачиваемым, но без конкретного бюджета 💴 Сразу встал вопрос: сколько денег запросить? В случае с тестовыми заданиями этот вопрос стоит остро, так как UpWork не поощряет маленькие проекты: ▪️ если вы выполните 3-4 тестовых задания с бюджетом около $100, то Upwork начнёт продвигать вас в нише проектов с таким же низким ценовым диапазоном. ▪️ когда клиент зайдёт в ваш профиль, он увидит, что у вас много недорогих проектов. Логично, что он будет рассчитывать на аналогичные расценки. Как правильно в таком случае работать с тестовыми заданиями? В идеале — почасовой контракт контракт с manual hours. Это упрощает переход с теста на полноценный проект и сохраняет вашу статистику. И продвигайте клиента на больший объём. Чем больше он вложит в тест, тем выше шанс продолжения совместной работы. Как поступил я? Предложил клиенту три концепта, мобильную версию, дизайн-систему и раунд правок за 540$ (9 часов работы). Клиент посчитал это избыточным и предложил убрать мобильную версию и оставить один концепт. В итоге сошлись на 300$ (5 часов), убрав мобильную версию и два концепта. Как прошла работа? В качестве референсов я ориентировался на платформы типа Booking и Airbnb. Задача стояла повысить конверсию и привлечь молодую аудиторию, поэтому я добавил яркий акцентный цвет и структурировал дизайн блоками, чтобы он выглядел современно. А результат презентовал через Loom. Работа клиенту понравилась, но сам проект стартует только в середине января. Контракт остался открытым, и мне сказали, что свяжутся. А вот свяжутся ли — узнаем в январе. В любом случае, $300 на дороге не валяются 😄
https://content.desigram.ru/static/b96c0fec-9207-444a-bd1d-cd039ffd483f.jpg
Бесплатный курс — вчера, новый сайт — сегодня ✨
Открываем новую главу в истории Pixel Perfect и объявляем набор на первый поток будущих продуктовых дизайнеров. Как вы догадались, на нашем новом сайте ☺️ Подробно изучить программу курса, узнать больше об опыте Артема и, конечно, оценить наш подход можно по ссылке. Как обычно, будем рады вашим комментариям и обратной связи. А для тех, кто давно ждал старта курса (да-да, мы знаем, что вас таких много), у нас есть особый подарок: Early Bird скидка 60% при покупке курса до 21 декабря 23:59 по мск 😏 Первый поток стартует 15 января, так что у вас будет возможность начать Новый год с новой профессии. Лучше цены на этот курс точно не будет. Так что если доверяете нам, то может быть нет смысла откладывать? Ну что, кто с нами?
Доступ к первому бесплатному курсу по продуктовому дизайну 🚀
В последнее время мы усиленно работали над тем, чтобы уже в этом году вы смогли пройти наш бесплатный интенсив по продуктовому дизайну. И, кажется, все получилось клево. Всем, кому интересна тема продуковтого дизайна, велком на курс 🥳 Как будет проходить обучение? В лучших традициях подхода Pixel Perfect. Вас ждет: ・ 5 видеуроков ・ бонусный урок для самых внимательных студентов ・ домашние задания с проверкой ・ поддержка на любом этапе выполнения заданий ・ самая новая и актуальная программа ・ полное погружение в работу продуктового дизайнера Какие темы на обучении рассмотрим? ・ начнем с функционала 🎨 Figma — разберем UI kit и перерисуем экраны ・ продолжим исследованиями — сгенерируем и отработаем гипотезы ・ проведем интервью — с 🧠 ChatGPT, родными, в чате или незнакомыми людьми ・ сделаем конкурентный анализ и отрисуем юзер флоу ・ закончим отрисовкой экранов по референсам На традиционном прямом эфире планируем встретиться тоже в этом году, так что ждем встречи. Мы не хотели ограничивать места на новый курс, но поняли, что менторской поддержки хватит только на 100 человек. Так что залетайте, пока есть места 😄 [получить доступ к бесплатному курсу здесь]
Артем вам тут оставил важное сообщение про бесплатный курс по продуктовому дизайну.
Ну вы поняли, да? Встречаемся 18 декабря, быть всем 😎
Продуктовый дизайнер на фрилансе: опыт нашего ученика Олега
Принято считать, что продуктовые дизайнеры всегда работают в компаниях или студиях. Но на самом деле это не всегда так 💼 Наш студент Олег вполне успешно работает на фрилансе через Upwork. На сегодняшний день у него было больше 50 клиентов, большинство из которых нашли его именно там. Но кое-кто пришел и с LinkedIn, и с Behance и через «сарафанное радио». Кстати, его аккаунт на Upwork можно взять как хороший референс, если вы дизайнер. Какие плюсы и минусы есть у такого подхода к работе продуктовым дизайнером? Рассказывает Олег. ✨ ПЛЮСЫ • разнообразие проектов работаешь в разных сферах: медицина, SaaS, экология, криптовалюта и даже виноделия. Это помогает развивать насмотренность, учиться адаптироваться к новым вызовам и находить креативные решения для продуктовых задач • нетворкинг фрилансеры часто работают напрямую с владельцами бизнеса и стартапами. Это не только полезные связи, но и шанс получить новые заказы через рекомендации. Хорошие отношения с клиентами — это возможность находить все новые и новые проекты • свобода никаких офисов, фиксированного графика и бесконечных совещаний. Ваш рост зависит только от вас: чем больше развиваетесь, тем больше зарабатываете ✨ МИНУСЫ • нестабильность про этот минус знают все фрилансеры. У вас нет гарантированного дохода. Сегодня проекты есть, а завтра может быть затишье • постоянный поиск заказов часто приходится ежедневно искать проекты, проходить собеседования, обновлять портфолио и объяснять, зачем клиентам вообще нужен дизайнер. Со временем это становится легче • дедлайны и ограничения проекты на фрилансе часто «горят», нет возможности проводить полноценные исследования или собирать данные, а бюджеты часто ограничены. При этом идеи приходится изо всех сил защищать перед руководством, чтобы отстоять свой подход к дизайну На фрилансе продуктовый дизайнер — это человек-оркестр 🥁 В отличие от корпоративной должности, здесь вы и UX, и UI, и исследователь, а иногда и графический дизайнер. Потому что в 99% случаев вы будете единственным дизайнером на проекте. Это непросто, но опыт бесценный.
https://content.desigram.ru/static/5b30c01a-6514-4492-a962-7f82d6580431.jpg
Записываем уроки к бесплатному курсу по продуктовому дизайну ✨
Активно готовимся к запуску курса. Артем с командой записали почти уже все уроки для бесплатника, сейчас они на монтаже. Если все пойдет по плану, то на следующий неделе уже можно будет попробовать наше новое обучение. Вы как, планируете проходить курс? 🥹
https://content.desigram.ru/static/a6f1034b-bb9f-44ca-955c-499a7c91973d.jpg
На нашем курсе Webflow PRO есть отдельный модуль по Spline 🐶
Этот раздел по интерактивному веб-дизайну разработал и записал Никита. Что такое Spline и для чего он нужен? Это графический редактор, с помощью которого можно создавать 3D элементы и настраивать взаимодействие с ними в web без знания кода. Но на этом его функции не заканчиваются. Он также используется для создания полноценной геймификации на сайтах. Разработчиков, которые уже знакомы с Webflow, в программе курса PRO Никита знакомит с этим вариативным инструментом. И посмотрите заодно, какую штуку Никита намутил для Дизайн выходных, используя Spline в пайплайне разработки. Это браузерная игра с анимированным персонажем и симуляцией физики объектов, адаптированная под различные устройства. Подробности и ссылка на игру у него в канале, там он делится работами, кейсами и полезными сервисами ☺️
Вдохновляющий пост «Как найти клиентов» от нашего выпускника Димы 💼
Сразу после курса я начал активно искать заказчиков. Составил список из 500–600 студий в США, Европе и Австралии и начал им писать. Несколько компаний откликнулись, мы провели интервью. Так я начал работать с брендинговым агентством из Австралии и получил несколько разовых проектов в Нидерландах. Работа с брендинговым агентством дала мне большой буст. Я общался напрямую с владельцем, который познакомил меня с ребятами из студии звукозаписи в Нью-Йорке и брокером из Сиднея. С этими клиентами я уже больше полугода сотрудничаю на постоянной основе. Занимаюсь доработкой их сайтов, провожу UX-исследования, помогаю выстраивать бренд-стратегии. Для звукозаписывающей студии даже участвовал в оптимизации бизнес-стратегии 👀 Один из последних проектов — разработка e-commerce сайта для бренда австралийской косметики Embodyd. Это был проект на шаблоне от заказчика, но работы было много, переделывали буквально все 😅 Сейчас занимаюсь дизайном и разработкой сайта для клининговой компании в Москве. Это первый опыт работы на российском рынке больше чем за год. Хотя этот проект я получил не столько из-за знаний в разработке, сколько из-за опыта в клиниговом бизнесе и понимании рынка, мне удалось без проблем продать клиенту идею, что сайт нужен не на Tilda за 10.000 рублей, а на Webflow 🦾 И что использование передовых технологий этого сервиса быстро отобьют вложенные средства. А с этого года я начал делегировать часть работы другим разработчикам. Это позволяет мне брать больше заказов и позиционировать себя как студию. Что дальше? Я уже прохожу курс Webflow PRO, кстати, он окупился с первого заказа. В 2025 году планирую совершенствовать английский, развивать работу агентства и релоцироваться в США ❤️
https://content.desigram.ru/static/a67d90ae-6d8d-4f1c-af69-cbb0fc7d9ab9.jpg
Ребята, как вам прямой эфир про анимации с Никитой? Делитесь в комментах, будет интересно почитать вашу обратную связь 📖
Запись трансляции для тех, кто не смог присутствовать, будет доступна до 7 декабря 23:59 мск: 🌐 запись на youtube 💬 запись в vk Если решение присоединиться к курсу Webflow Basic уже принято, то не забудьте про нашу акцию к Черной Пятнице. До конца завтрашнего дня курс можно купить со скидкой -45%. Промокод: BLCKFRD. А если еще не определились, точно ли вам нужно обучение, то советуем еще раз посмотреть на то, что вам удалось сделать на бесплатном курсе. И на результаты нашего выпускника Никиты для вдохновения ☺️ Курс длится 3 месяца. Представьте, что спустя это время у вас уже будет готовое портфолио разработчика и можно будет брать первых клиентов. Посмотреть программу и оставить заявку ↗ Задать вопрос ↗
https://content.desigram.ru/static/0a0a5b6a-1ef5-4faf-bd9d-80a51186a4c1.jpg
Прямой эфир «Анимация с умом: что нужно знать для повышения вовлеченности» сегодня в 19:00 🎬
Хорошая анимация не просто оживляет сайт, а классно повышает его метрики: вовлеченность и конверсию. Но как понять, где грань между «круто» и «слишком»? Расскажет наш спикер Никита, старший продуктовый дизайнер в GigaCode, проект Сбера. У него отличный опыт работы в продуктовых командах, которым он и поделится. 🔷 Что обсудим? • почему сайты без анимации не работают и как это исправить • какие виды анимаций раздражают • как понять, что именно нужно твоему проекту • основные ошибки при работе с анимацией и как их избежать • тренды 2025 года на реальных примерах • простой план внедрения анимации, который сэкономит время и деньги Эфир будет полезен для каждого, кто не знает, как применить в своих проектах лучшие практики или как реализовать задумки с макетов 💙 Присоединяйтесь, будет интересно и полезно! Посмотреть эфир можно будет сразу на двух платформах: 🌐 трансляция на youtube 💬 трансляция в vk
https://content.desigram.ru/static/9d8d93b3-0a51-4844-91fb-f9908292685d.jpg
То самое сообщение, которое открывает Black Friday 🎁
C сегодняшней пятницы, все выходные и в понедельник отдаем наши курсы почти в два раза дешевле. -45% на любое обучение от Pixel Perfect. Идеальная возможность начать 2025 год с развития новых навыков. • курс для новичков → выбрать • курс для более опытных → #pricing?utm_source=telegram&utm_medium=channel_+pp&utm_campaign=black_friday">выбрать Промокод: BLCKFRD, cкидка действует до 02.12 включительно. Если остались какие-то вопросы или надо обсудить детальнее курс, пишите нашему менеджеру в личные сообщения 😏
https://content.desigram.ru/static/45e55f66-8c88-42d6-82df-726cb67921dc.jpg
Бесплатный курс по анимациям в Webflow ✨
Сегодня начинаем работать над проектом для российской студии стильной мебели Eburet. Присоединиться к курсу можно с любым уровнем владения Webflow. Как будет проходить обучение? ・ курс бесплатный ・ 6 видеуроков ・ домашние задания с проверкой ・ подарки для тех, кто сдаст все ДЗ ・ поддержка в боте и чате Какая программа курса? ・ полный разбор анимаций в Webflow ・ параллакс и горизонтальное движение ・ анимация при прокрутке страницы ・ появление элементов и анимации при наведении ・ кастомный курсор ・ плавный скролл и адаптивность анимаций В конце курса традиционно проводим прямой эфир с подведением итогов. Да, это точно последний шанс залететь на бесплатный курс по Webflow в этом году 😄 Места ограничены, так что залетай скорее и регистрируйся по ссылке. [получить доступ к бесплатному курсу здесь]
https://content.desigram.ru/static/ee3b8f53-f222-49cd-a226-eb84d3f3c9fc.jpg
А вот и он — макет нового бесплатного курса ✨
Будем верстать сайт для российского бренда мебели Eburet. 6 уроков, 6 домашек, фокусируемся на анимациях. Кто с нами? 🥹
Эта неделя богата на обновления в Webflow. Собрали их всех в один небольшой пост 🦾
↗️ Запустили варианты для компонентов Теперь в Webflow можно задавать несколько вариантов стилей для одного компонента. Например, «Кнопка» с заливкой или контуром, «Карточка» с горизонтальным или вертикальным оформлением и многое другое. Это упрощает настройку и делает дизайн более гибким. Детали тут. ↗️ Появились новые типы переменных С этой недели можно использовать числа и проценты в качестве переменных в дизайн-системах. Например, «body» сайта всегда должно быть настроено следующим образом: • Font weight: 400 • Font size: 1rem • Line height: 1.4 • Font family: Inter Теперь можно сохранить вес шрифта и высоту строки без единицы измерения в качестве числовых переменных. Подробности на сайте. ↗️ Команда «Slash» в ричтексе Теперь с помощью символа “/” можно вставлять такие элементы, как изображения, видео, заголовки, блоки кода, цитаты и многое другое. Детали тут.
https://content.desigram.ru/static/be82466d-e8a2-47f6-af3a-da6a913ac1cb.jpg