Как спроектировать первый экран, который обеспечивает конверсию

Перевод статьи Михала Малевича с советами по проектированию главного экрана лендинга. Его рекомендации основаны на 500 часах записей сессий в Hotjar и анализе более чем 400 реальных сайтов. В статье он даёт базовую чёткую структуру для оформления экрана и приёмы для привлечения внимания. Основные мысли и советы: • Главный экран лендинга — это то, что на 90% должно убедить пользователя совершить целевое действие • Важно избегать ИИ‑абстракций и пустых пафосных заголовков. Это создаёт красивую, но бессмысленную витрину • Начинать дизайн лучше с вайрфрейма без детализации, но с упором на проработку текста • Подумайте, почему ваше сообщение должно заинтересовать клиента. Затем создайте три-пять вайрфрейм-версий и протестируйте их • Формулировки должны соответствовать конкретной отрасли. ‍Главное — сделать сообщение понятным для целевой аудитории • Визуальные образы должны подкреплять и усиливать сообщение • Изображение людей повышает эмоциональную связь в 99% случаев. Важно, чтобы изображения были уникальными и максимально соответствовали стилю бренда • Пользователи интуитивно смотрят туда же, куда и человек на фото. Это можно использовать, чтобы сделать акцент. Например, на CTA-кнопке • Пять основных элементов главного экрана: фраза перед заголовком (кикер), основной заголовок, краткое описание, CTA-кнопка и изображение для эмоциональной связи #статья

⌨️Глянуть UI Kit⌨️ #uikit

___________________ Привет работяги! Это Роман Васильев и уже в этот вторник, я снова приглашаю вас проверить себя и свои силы, и порисовать UI! Правила те же: ✍🏻Выдаётся тема ⏱️ 40 минут на то чтобы сделать готовый скетч Далее свободное обсуждение/поболтач/дорисовка. На этот раз мы будем рисовать окно в стиле Diablo 3! И что бы поставить всех в одно положение, на встрече вам будет предложен простой вайрфрейм на который вам уже будет нужно натягивать визуал. Место проведения: дискорд комьюнити Если вдруг вы не успели или просто можете прийти, но позже -- никаких проблем, просто ставим таймер сами себе на 40 минут и делаем! Работы так же можно и нужно скидывать либо в чат, либо в дискорд. По желанию. _____________ Роман Васильев

#вайрфрейм #прототипирование 👨 Дизайн-телега

🗓 25 июня 16:00-18:00 (МСК) Это практическое онлайн-занятие предназначено для тех, кто хочет научиться самостоятельно создавать кликабельные прототипы простых вайрфреймов в Figma без помощи технического или продуктового дизайнера. В результате занятия должен получиться готовый кликабельный прототип (≈ 10 экранов). 🎯 На занятии: Теоретическая часть: • что такое кликабельный прототип в Figma, зачем он нужен и т.д.; • что такое сетка, зачем она нужна; • зачем нужен горизонтальный вертикальный шаг; • что такое базовая единица, как она применяется; • показываем готовый сценарий или остановимся на создании структуры в FigJam. Большая практическая часть: • Вайрфреймы. Как их рисовать: - нарисуете 1-2 основных экрана со всеми основными элементами. • Создание прототипа: - как в режиме прототипирования в Figma между собой объединять варфреймы по нашему готовому сценарию; - как сделать базовую анимацию перехода между экранами; - участники попробуют сделать несколько экранов в прототипе; - в режиме реального времени показываем создание прототипа. ✨ Занятие будет максимально полезным для: • UX-исследователей, которые хотят научиться работать с Figma, базовыми функциями прототипирования, аналитики, бизнес-аналитики; • менеджеров продукта. ✏️ Записывайтесь на занятие Ждём вас!)

Рынок сейчас, мягко говоря, кризисный, поэтому стратегии пятилетней давности просто не работают. Ребята, которые несколько лет назад устраивались в компанию по одному собесу, сейчас не могут дойти даже до этапа собеседований — не то что пройти дальше. Рынок конкурентный, и приходится играть по его правилам. Ниже — стратегия, которую я считаю сложной, но рабочей. Именно её я бы использовала, если бы сейчас искала работу и хотела выйти на новый уровень дохода. 🔡Шаг 1 Смотрим на рынок, компании, количество вакансий, требования заранее До того, как ты оказался на морозе с голой жопой есть возможность доучиться, доработать портфолио, дособирать метрики и более спокойно общаться с другими компаниями. Время поиска работы сейчас растягивается до 6 месяцев, и это средний показатель. 🔡Шаг 2 Изучаем вакансии, выписываем ключевые слова, оформляем резюме К сожалению, без качественного резюме вы просто не проходите автоматические фильтры на HH, и ваше резюме не видят. Вчера вышел пост про метрики и достижения в резюме, используй. 🔡Шаг 3 Переделываем портфолио Делаем сочные подачи: кратко, но чётко описываем бизнес-цель, свою роль, процесс и результат. Нет исследований? Идём в поля и прямо сейчас общаемся с пользователями хотя бы в пет-проекте. Работаем со сторителлингом, визуализацией данных и общей подачей информации. Никакой воды, никаких серых вайрфреймов и бесполезных юзерфлоу. Всё чётко, по делу, по структуре — и красиво. Дизайнера в первую очередь берут за UI и UX. Вы не менеджеры, чтобы строить таблички — вы дизайнеры, и продавать нужно именно этот навык. Если сложно оценить качество своего портфолио — обращайся за помощью к ментору или карьерному консультанту. Кстати, 13 июня я проведу эфир с разбором портфолио продуктовых дизайнеров. Приходи и присылай свои материалы для разбора. 🔡Шаг 4 Готовимся к собесам Будь то техническое интервью или whiteboard — нужно подготовить презентации кейсов, отрепетировать ответы на вопросы, быть готовым показать больше, чем просят. 🔡Шаг 5 Становимся проактивными Нужно мониторить вакансии, знакомиться с рекрутерами и лидами, обходить системы, находить рефералки. Строить воронки поиска, вкладываться в процесс отклика, строить личный бренд. В общем, хочешь жить — умей вертеться. Сейчас это как никогда уместно. Смена работы сегодня — это в первую очередь смена мышления. Без этого будет сложно не только найти классную работу, но и выйти на повышение. На днях у меня был звонок со старшим HR Катей, мы обсуждали, как строится процесс найма "на той стороне". Дизайнеру сейчас очень важно уметь себя продавать и упаковывать, важно иметь стратегию поиска. В противном случае можно затеряться среди других кандидатов. С тебя лайкос ❤️‍🔥 @design_awesome

Набор из более чем 50 компонентов различных вайрфреймов, которые пригодятся вам при создании новых дизайнов Install 🖼️ Figma Дизайн

🟩 Rectangle. Подписаться

Figma Community • #ui 🖼 Figma за 60 секунд

Библиотека для Figma: юзерфлоу, вайрфреймы, компоненты и стартовая дизайн-система в одном пакете. Отличный фундамент для быстрых запусков. #figma #дизайн_система #вайрфреймы #юзерфлоу #ui #инструменты #стартапы Посмотреть 🔗

Мгновенно делает любые изображения чёрно-белыми. Удобно, если нужно проверить тон, убрать лишний визуальный шум или собрать вайрфрейм. Работает с множественным выбором, быстро справляется с тяжёлыми файлами и не трогает оригинальное изображение — ч/б заливку добавляет как новый слой. #фото #эффекты #цвет Людочка, плагины – отборные плагины в Фигме

• 500+ компонентов • 50+ экранных карточек • 250+ иконок #DesignSystems #UIkit  Открыть в Figma Иконки Figma

#вайрфрейм #прототипирование

Превращает вектор в стильный монохромный лайн-арт одним кликом. Идеально для вайрфреймов, принтов или минималистичных макетов. Просто выберите иллюстрацию, запустите плагин и нажмите «Apply Magic» — остальное он сделает сам. #иллюстрации Людочка, плагины – отборные плагины в Фигме

Для создания макета нужно запустить файл и собрать из SVG-заготовок каркас будущего дизайна. Инструмент полностью бесплатный, коллекция вайрфреймов постоянно пополняется. #плагины #прототипы Установить плагин 🔗 🗳 Плагины Figma

Сегодня делюсь первыми наработками по концепции. Мои студенты начали свои проекты неделю назад, действуют они по методике коммерческих проектов: — составили техническое задание, — сделали функциональный прототип, — провели конкурентный анализ, — сделали вайрфреймы, — собрали референсы и мудборд. И сейчас они уже приступили к проработке главной страницы. Темы у всех учеников разные, как и опыт. Кто-то делает дизайн впервые, кто-то пришёл с графическим бэкграундом. Но сама методика подходит для всех — это мой рабочий подход, по которому я обучал сотрудников и по которому я сам регулярно делаю коммерческие проекты. К концу недели планирую собрать первые полноценные страницы студентов и поделиться с вами результатами. ➡️ Смотреть разбор в хорошем качестве Если интересно следить за этим процессом — напишите в комментах, что именно хотелось бы видеть: этапы, логику, типичные ошибки, советы? Все покажу и подробно расскажу в следующем разборе 😊 И проголосуйте реакциями, как вам такой контент: 🔥 — супер, крутая тема ❤️ — поддерживаю ребят в их проектах 👀 — тоже так хочу

Figma Community • #ui Figma от 0 до 1

#вайрфрейм #прототип

UI Kit с базовыми формами и компонентами в скетчевом стиле, чтобы быстро собирать симпатичные вайрфреймы. Пригодится и на старте проекта, и для оформления в портфолио) #прочее Людочка, дизайн – ресурсы для дизайнеров

⠀ Во-первых, мы все путаем вайрфрейм и прототип. Прототип - это КЛИКАБЕЛЬНЫЙ макет дизайна сайта, в нем есть интерактивность (в отличии от вайрфрейма, который показывает структуру блоков). Не перепутай! ⠀ Кернинг от трекинга отличается тем, что в первом регулируется расстояние между определенными символами в тексте, а во втором - между всеми одинаково. ⠀ Чекбокс позволяет выбрать один или несколько объектов сразу, или не выбирать вообще, в радиокнопка - только один и никак иначе. ⠀ В типографике много своих терминов: ⠀ асцендер - часть буквы, которая выходит за верхнюю границу высоты строчных букв, например, буква "h" десцендер - за нижнюю, например буква "р" ⠀ В дизайне много умных слов, но ты привыкаешь к ним и используешь каждый день. А какие слова ежедневно используешь ты и никто тебя не понимает?