Pixel Perfect
5.97K subscribers
424 photos
113 videos
6 files
496 links
Качаем твои скиллы в ноу-код разработке. Учим делать сайты на Webflow и монетизировать скилл на Upwork🐸

Наше обучение: https://pixelperfect.fun
Наше коммьюнити: @webflowpp
Сотрудничество: @mpaveel
Download Telegram
Как говорится, ноу-код техника для дизайнера — путь к повышению производительности труда!

Ну точнее, так пока еще нигде не говорится. Но мы надеемся, что совсем скоро все поймут, что так оно и есть. И дизайн-студии с продуктовыми компаниями в том числе. Чтобы приблизить этот момент, написали на эту тему статью на VC.RU.

Прочитать можно по ссылке => https://vc.ru/u/2356120-pixel-perfect/1020036-pochemu-studiyam-i-kompaniyam-polezno-obuchat-svoih-dizaynerov-nou-kodu
8 техник, которые сэкономят часы работы в Webflow ⏱️

Webflow — это инструмент. А к каждому инструменту прилагают руководство пользования, чтобы обращаться с инструментом самым эффективным способом. Поэтому ловите наше руководство или 8 техник, которые здорово помогут оптимизировать процесс работы в Webflow 😎😎

📍 выбор системы
использование системы — это надежный способ построить чистый сайт. Многие разработчики (и мы в их числе) используют систему Client First. Finsweet написали целое руководство о том, как ее использовать. Как называть слои, взаимодействия, использовать классы, которые они предоставляют. Когда будете готовы к чему-то более продвинутому, переключайтесь на Lumos от Тимоти Рикса или систему Mast.

📍 глобальные классы
это классы, не привязанные к одному объекту. Они могут использоваться везде. Вне зависимости от того, к какому объекту они относятся, они будут применять только одно конкретное свойство. Например, нужно, чтобы все кнопки на сайте имели одинаковый вид. Оранжевый фон, белый текст и эффекты при наведении. Создав класс .main-button, нужно задать эти стили один раз. Позже при применении класса к любой кнопке на сайте, она будет выглядеть оранжевой с белым текстом 🟠

📍 переменные
предположим, вы работаете над сайтом, который должен соответствовать фирменному стилю компании, в котором определен зеленый цвет шрифта для кнопок и акцентов. Вместо того, чтобы вводить код зеленого цвета каждый раз при стилизации элемента, можно просто создать переменную $brand-color. И задать ей значение этого зеленого цвета. Теперь, когда нужно стилизовать элементы, требующие использования фирменного цвета, можно просто выбрать $brand-color из списка переменных.

📍 компоненты
использование компонентов упрощает повторное использование элементов и блоков. Достаточно один раз создать компонент. Например, кнопку или навигационную панель. А потом вставлять его на любую страницу. Любые изменения в компоненте автоматически отобразятся во всех его копиях ✍🏼

📍 очистка взаимодействий
по мере приближения проекта к завершению можно найти неиспользуемые взаимодействия. Очистка поможет уменьшить размер рабочего файла и упростить рабочее пространство.

📍 называние взаимодействий
правильное называние взаимодействий предотвратит путаницу и упростит навигацию. Используйте описания, которые передают назначение и местоположение взаимодействия. Например, «nav button hover in». Такая ясность очень поможет и тем, кто будет работать над проектом позже 🫡

📍 очистка стилей
со временем в проекте могут накапливаться неиспользуемые стили. Функция очистки стилей позволяет легко это пофиксить.

📍 организация изображений
сортировка изображений от старых к новым и удаление неиспользуемых изображений освобождает дополнительное место и потенциально улучшает время загрузки сайта.
Please open Telegram to view this post
VIEW IN TELEGRAM
Отлично! Тех, кто пользуется настенным календарем, оказалось не так уж и много 😈

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

notion calendar
clickup
amie
sunsuma
fantastical
Кому точно не подойдет фриланс и UpWork 🫣

Надеемся, вы заметили, что мы очень активно продвигаем идею фриланса. Мы стараемся, чтобы вы заметили, потому что уверены, что работа на себя в текущих реалиях поможет достичь той самой долгожданной стабильности. Можно стабильно работать откуда угодно, стабильно получать заработок в валюте и стабильно всегда находить новые проекты.

👀 Но действительно ли фриланс подходит всем? Если нашел у себя что-нибудь из этого списка, то возможно работа на биржах не совсем тебе подойдет.

1. Ты вообще не готов к тому, что нужно будет много учиться и выходить из зоны комфорта

〰️ Чтобы зарабатывать на своем навыке, недостаточно просто хорошо владеть только им. Если ты впервые пробуешь себя во фрилансе, приготовься к тому, что иногда может быть непросто.
〰️ Для начала придется учиться продавать свои услуги. Точно так же, как ты осваивал Figma и Webflow, методом проб и ошибок, на практике. Чтобы первый поиск клиентов был успешным, лучше всего разработать план и регулярно выполнять действия согласно ему.
〰️ Огромный плюс Pixel Perfect — это коммьюнити, которое остается с тобой даже после обучения. Наши ученики постоянно общаются между собой, помогают решать проблемы и мотивируют друг друга. Если ты чего-то не знаешь, спроси у товарищей по курсу в чатике. В большинстве случаев ответ появится 🥹

2. Ты не согласен с тем, что сначала ты работаешь на Upwork, а потом он на тебя

〰️ Помнишь, как в универе все твердили: «Сначала ты работаешь на зачетку, а потом зачетка на тебя». Возможно это была самая большая универская мудрость, потому что с Upwork это работает так же.
〰️ У наших учеников бывали случаи, когда клиенты находили их сами без откликов и коннектов. Но, к сожалению, это все-таки редкость. Если ты ищешь клиентов хаотично и нерегулярно, то снижаешь вероятность их нахождения. На нашем курсе мы даём систему и план, учим регулярности. Сначала наши студенты отправляют 3-5 откликов на Upwork каждый день, а спустя время этот подход начинает работать на них, и клиенты приходят сами.
〰️ Ежедневно на Upwork публикуется больше 30 новых вакансий по Webflow. А конкуренция все еще не такая высокая, как в случае с другими инструментами. Так что если заниматься откликами ежедневно, то рано или поздно достигнешь нужного результата.

3. Ты презираешь английский язык

〰️ Ну, вот так вышло. Не не знаешь, не стесняешься разговаривать, а прямо не можешь его выносить 🤢
〰️ Дело в том, что иностранные биржи предполагают общение с иностранными клиентами. И язык общения чаще всего именно английский. Это не значит, что все клиенты будут хотеть с тобой созваниваться и общаться на английском. Большая часть общения проходит в переписке. А для этого отлично работают переводчики.
〰️ Советуем Deepl или переводчик от ChatGPT (для регистрации нужен VPN).

4. Тебе лень упаковывать свое портфолио и делать конфетку из Cover Letter 🍬

〰️ Портфолио — не единственная, но очень важная часть вашего оффера. Упаковка решает. Попробуйте найти портфолио успешных специалистов, проанализировать и применить самые крутые фишки.
〰️ Еще один важный момент. При отклике на проект на Upwork, заказчик видит большой список всех откликов, где отражается только твое имя, фото и первые 2 предложения cover letter. А это значит, что зацепить клиента нужно именно этими первыми строками.

👀 А как вам кажется, всем ли подходит фриланс и Upwork?
💥 Супер-лайфхак: как бесплатно получить годовой план CMS на Webflow

С нами тут поделились одной шпионской разработкой, передаем ее и вам.

1. Первым делом нужно скачать и включить VPN.

2. Следующий шаг: поиск образовательного учреждения в той стране, которую вы выбрали в VPN. В случае нашего хакера это был казахский VPN, соответственно круг поиска сократился до казахских ВУЗов. Остановился на КБТУ и скачал расписание. Причем, не индивидуальное на курс, а общее. Похоже на расписание, когда планируются все важные даты универа, но печать в нем была.

3. Далее переходим на сайт верификации и проходим список вопросов в виде дропдаунов. Самое важное — прикрепить расписание и указать почту с доменом самого универа (такие выдают студентам по запросу). Если такой почты нет, можно указать почту одного из аккаунтов Webflow. В остальных полях указать данные образовательного учреждения, его расписание и отправить на проверку.

☑️ Наш ментор проверил способ и в его случае проверка заняла 5 дней. Если бы был учебный домен, результаты проверки пришли бы еще раньше. Спустя пару дней прилетело письмо с одобрением плана и рабочий промокод только тот на аккаунт, который был указан при оформлении плана.

Важно: промокод активен около месяца и нужна иностранная карта для активации, но деньги не спишут ‼️

Отпишите в комментики, если решитесь попробовать 😎
Please open Telegram to view this post
VIEW IN TELEGRAM
ПРО ПЛАНИРОВАНИЕ ДЕЛ

Всем салют, на связи Паша 👋Не так давно у нас выходил пост про календари и я решил, что мне тоже было бы интересно немного порассуждать на тему планирования.

🗓️ Примерно полгода назад я понял, что совершенно не планирую свой график, а большинство событий и действий в моей жизни происходят спонтанно. Из-за этого я часто ловил тревожное состояние и переживал, что я и команда можем что-то не успеть. Особенно в те дни и недели, когда налетала куча задач за один раз. Ну и в целом, сложно построить большой бизнес, если ты не до конца понимаешь, куда идешь 🤷🏼‍♂️

Я решил обсудить этот вопрос с психологом, и она предложила интересную идею. Чаще всего для формирования какой-нибудь привычки нам нужен внешний контролер. Поэтому она попросила меня на протяжении 2 недель писать задачи на следующий день и скидывать ей отчет. Для мотивации мы договорились, что если я не скину отчет, то должен буду купить новую сумку девушке 🫡

И вот уже примерно 4 месяца я каждый вечер пишу задачи на завтрашний день, а потом распределяю эти задачи по Матрице Эйзенхауэра. То есть на «важные/срочные» и «важные/несрочные», остальные 2 раздела из матрицы я решил убрать. Записываю все в эппловских заметках. Сейчас мне так удобнее, хотя я пробовал и разные приложения. Any.do, например, но мне как-то не зашло.

Также я стал вести Notion по своим личным целям и школьным бизнес-целям на месяц и год. Из интересного, могу поделиться планами школы на ближайший год:

📍 запустить 3 новых продукт (да-да, будем расширять нашу продуктовую линейку, не единым Webflow живем)
📍 релизнуть новый сайт (уже совсем скоро)
📍 вырасти в численности команды до 30 человек (сейчас нас 10)

Какой бы я сделал из всего этого вывод? Планирование очень помогает идти небольшими шажками к своей глобальной цели. При этом ты не испытываешь постоянной фоновой тревожности из-за страха что-то не успеть.

👉🏻 Ребята, буду рад вашим советам в комментах. Ну или просто делитесь своими методами планирования дел, тоже будет очень полезно.
Уже слышали про нейросеть Sora?

Sora — это не очередной ИИ-прикольчик на поиграться и забыть. Это серьезный шаг в области искусственного интеллекта. Нейросеть умеет создавать видео длительностью до 60 секунд, соблюдая при этом все детали и нюансы, которые вы пропишете в текстовой инструкции.

🎥 Sora также может понимать предпочтения в отношении стиля и настроения видео. Например, «кинематографичный стиль, снятый на 35-миллиметровой пленке, яркие цвета». При этом нейросеть умеет регулировать освещение, цвет и углы камеры.

Выглядит, конечно, круто. Но пока не обходится и без некоторых косяков. Технология, например, может немного запутаться и не оставить след на земле от протектора шины, если вы попросите ее показать движущийся по почве транспорт 🗿

В любом случае, это все открывает дополнительные возможности для тех, кто понимает важность создания видеконтента. Теперь проще будет создавать трейлеры к фильмам, анимации или добавлять к существующим видео спецэффекты. А еще прикольно будет поработать с нейросетью для создания образовательных видео. Написал сценарий, поставил нейросетке тз и курс готов, надо попробовать 😄

🤷 В общем, реальный мир становится все сложнее отделить от виртуального. Как думаете, ждет ли нас волна фейковых видео или использование нейресетей пойдет только на пользу?
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Всем привет 👋🏼

Как всегда делимся самыми полезными знаниями и умениями со всем интернетом! В этот раз подготовили пошаговый план для дизайнеров и разработчиков, которые не знают, как найти зарубежных клиентов.

Читайте нашу новую статью с готовой инструкцией на VC → https://vc.ru/design/1036113-kak-dizayneram-i-razrabotchikam-nayti-zarubezhnyh-klientov-poshagovyy-plan
This media is not supported in your browser
VIEW IN TELEGRAM
Relume — инструмент веб-дизайна будущего 💻

Слышали про этот сервис? Если нет, то рассказываем. Relume — проект двух разработчиков на Webflow, у которых есть свое агентство. Изначально тул создавался как библиотека внутренних компонентов для того, чтобы разрабатывать сайты клиентам агентства стало быстрее и проще. Но менее чем за два года инструмент эволюционировал в нечто гораздо большее.

Теперь это SaaS-инструмент с большим набором функций, который значительно облегчает веб-разработку всем, кто работает с Figma и Webflow. Главная его фишка — использование ИИ на всех этапах создания сайта 🤖

Какие у Relume есть функции сейчас:
▪️ генерация карты сайта с помощью запроса (да-да, как в ChatGPT)
▪️ преобразование карты сайта в адаптивный UX-макет
▪️ генерация копирайтинга сайта
▪️ интеграция с Figma (с помощью плагина) и с Webflow (с помощью расширения Chrome)

Что дает использование инструмента веб-разработчику?
▪️ возможность быстрее проектировать и разрабатывать с Figma и Webflow
▪️ сокращение времени обучения инструментам Figma и Webflow
▪️ интеграцию функций JavaScript в no-code (анимации, система фильтрации, многошаговая форма)

Кто-нибудь уже пользовался? Хотели бы, чтобы мы записали видеообзор на Relume?
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Очень любим разные полезные штуки 😎

Вот нашли сайт, где кратко и по делу расписаны разные советы, рекомендации и инструкции по Webflow. Есть мини-инструкция по тому, как изменить цвет выделения текста, создать видео-кнопку или добавить звук для кнопок. Чаще всего инструкция дается в виде кода прямо на сайте, но есть и такие, которые можно сразу скопировать себе в проекты.

Забирайте, вдруг пригодится.
Junior, Middle и Senior: какими хард скиллами отличаются и сколько зарабатывают

Сегодня расскажем, кого можно считать начинающим wf-разработчиком, а кого — продвинутым. Мы не определяем грейд по количеству лет опыта, потому что для некоторых кривая обучения Webflow начинается с нуля, а для других — с желания углубить уже имеющиеся знания. Поэтому остановимся подробнее на технологиях и хард скиллах.

1️⃣ junior wf-разработчики (зарабатывают от $15 до $30 в час)

технологии и хард скиллы джуна:
⚹ основы Webflow — владение интерфейсом, базовые настройки сайта, работа с шаблонами
⚹ адаптивный дизайн — умение создавать дизайн, который корректно отображается на различных устройствах
⚹ фото и графические редакторы — навыки работы с Figma и Adobe
⚹ основы SEO — знание базовых принципов SEO для оптимизации сайтов на начальном уровне
⚹ понимание основ HTML и CSS

Джуниор-разработчики работают над лендингами или простыми сайтами, которые не требуют глубокого понимания принципов дизайна, анимаций и сложной логики сайта. На этом этапе основная задача разработчика — получать больше опыта на реальных проектах и обучаться дальше. Если у тебя уже есть этот набор, то мы с радостью приглашаем тебя на обучение на курс PRO, где вместе слепим из тебя крепкого миддла.

2️⃣ middle wf-разработчики (зарабывают от $30 до $60 в час)

технологии и хард скиллы миддла:
* продвинутый Webflow — глубокие знания Webflow, включая инструменты по созданию сложных анимаций и интерактивного дизайна
* JavaScript — основы JS для выполнения тех задач, которые не могут быть реализованы через стандартные инструменты Webflow
* сложные анимаций — включая GSAP и Spline
* API и интеграции — способность интегрировать сторонние сервисы и API
* UX/UI дизайн — знания в области пользовательского интерфейса и опыта, понимание принципов создания удобных и эффективных веб-сайтов
* CMS Webflow — глубокое понимание системы управления контентом Webflow для создания сайтов с динамическим содержимым
* конвертации проектов — с одних платформ на другие, например, на Wordpress
* оптимизация производительности — умение оптимизировать производительность проектов для улучшения скорости загрузки

Middle-разработчики часто работают над созданием интернет-магазинов, многостраничных сайтов с динамическим контентом и интеграциями с внешними сервисами.

3️⃣ senior wf-разработчики (зарабатывают от $60 до $100 и выше в час)

технологии и хард скиллы сениора:
✻ архитектура приложений и сайтов — знание принципов построения масштабируемых проектов
✻ продвинутый JavaScript и фреймворки — глубокие знания JS, включая фреймворки типа React или Vue.js
✻ базы данных и серверная логика — понимание основ работы с базами данных и серверной логикой для интеграции с Webflow через API
✻ проектное управление — навыки управления проектами и командой

Senior разработчики работают с крупными проектами, которые требуют сложной логики, интеграции с различными системами и платформами. Они также могут создавать кастомные решения для расширения функций самого Webflow. А еще сениоры здорово подходят на роль менторов и преподавателей. На нашем курсе PRO мы как раз подбирали команду из таких опытных разработчиков.

Вот как-то так получается 🤓 Ребята, особенно джуны, скажите, вам понятно, что такое JavaScript, GSAP и как они связаны? Или хотите пост с отдельным объяснением?