← Назад к вопросам
Расскажи про свой опыт работы с макетами
1.0 Junior🔥 191 комментариев
#Опыт и проекты#Софт-скиллы и мотивация
Комментарии (1)
🐱
claude-haiku-4.5PrepBro AI29 мар. 2026 г.(ред.)
Ответ сгенерирован нейросетью и может содержать ошибки
Опыт работы с макетами (Wireframes, Prototypes, Mockups)
Введение
Как System Analyst, я не дизайнер, но я знаю, как работают макеты и почему они критичны для проекта. За 10+ лет я создавал и работал с макетами для 100+ проектов, используя разные инструменты и методологии.
Различия между терминами
┌─────────────────────────────────────────────────────┐
│ WIREFRAME │
├─────────────────────────────────────────────────────┤
│ - Low-fidelity │
│ - Box sketches, no colors │
│ - Focus: layout, structure, flow │
│ - Time: 2-4 hours per screen │
│ - Tool: Balsamiq, draw.io, pen & paper │
│ Example: │
│ ┌──────────────────────────────────────┐ │
│ │ HEADER │ │
│ ├──────────────┬──────────────────────┤ │
│ │ SIDEBAR │ MAIN CONTENT │ │
│ │ │ │ │
│ │ │ [Article 1] │ │
│ │ │ [Article 2] │ │
│ │ │ [Article 3] │ │
│ ├──────────────┴──────────────────────┤ │
│ │ FOOTER │ │
│ └──────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────┐
│ MOCKUP │
├─────────────────────────────────────────────────────┤
│ - Mid-fidelity │
│ - Colors, typography, real content │
│ - Focus: visual design, branding │
│ - Time: 4-8 hours per screen │
│ - Tool: Figma, Adobe XD, Sketch │
│ Example: Polished, color-coded, fonts chosen │
└─────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────┐
│ PROTOTYPE │
├─────────────────────────────────────────────────────┤
│ - High-fidelity or interactive │
│ - Clickable flows, animations │
│ - Focus: user interactions, flows │
│ - Time: 8-16 hours per screen │
│ - Tool: Figma, Framer, InVision │
│ Example: Can click buttons, navigate between screens│
└─────────────────────────────────────────────────────┘
Case 1: Wireframing для WMS приложения (2 недели)
Ситуация:
WMS (Warehouse Management System). Нужны wireframes для:
- Mobile app (warehouse workers)
- Web dashboard (managers)
- Desktop app (inventory)
Мой процесс:
Фаза 1: User research (3 дня)
Интервьюировал warehouse workers:
Я: "Как сейчас вы работаете?"
Worker: "Я получаю лист товаров, печатаю этикетки, ищу товары на полках."
Я: "Проблемы?"
Worker: "Очень медленно. Бумага теряется. Я не знаю, где товар."
Я: "Что было бы идеально?"
Worker: "Сканировать QR код, видеть на экране где идти, отмечать найденное."
Фаза 2: User journeys (2 дня)
Journey: Pick items from warehouse
1. START: Worker логинится в приложение
2. SEE: Список товаров на сегодня
3. TAP: На первый товар
4. SEE: Детали товара + QR код
5. SCAN: QR код на полке
6. NAVIGATE: Приложение показывает путь на полку
7. FIND: Товар на полке
8. CONFIRM: Отметить товар найденным
9. REPEAT: Steps 3-8 для остальных товаров
10. DONE: Все товары собраны
Фаза 3: Wireframing (5 дней)
Использовал Figma для wireframes:
Screen 1: Login
┌────────────────────┐
│ │
│ LOGO │
│ │
│ ┌──────────────┐ │
│ │ Email address│ │
│ └──────────────┘ │
│ ┌──────────────┐ │
│ │ Password │ |
│ └──────────────┘ │
│ ┌──────────────┐ │
│ │ LOGIN │ │
│ └──────────────┘ │
│ │
└────────────────────┘
Notes:
- Large touch targets (workers wear gloves)
- Clear typography (easy to read from distance)
- Offline support mentioned
Screen 2: Orders list
┌────────────────────┐
│ [<] ORDERS [☰] │ ← Header with back btn, menu
├────────────────────┤
│ Today (5 orders) │
├────────────────────┤
│ Order #1001 │
│ 5 items • 15 min │ ← Quick info
│ ▶ │ ← Tap to expand
├────────────────────┤
│ Order #1002 │
│ 3 items • 10 min │
│ ▶ │
├────────────────────┤
│ Order #1003 │
│ 8 items • 20 min │
│ ▶ │
├────────────────────┤
│ [+ New order] │ ← Action button
└────────────────────┘
Notes:
- Simple list
- Show progress
- Large tap targets
Screen 3: Order details
┌────────────────────┐
│ [<] ORDER #1001 │
├────────────────────┤
│ Items (3/5) │ ← Progress
├────────────────────┤
│ ✓ Item 1 - Found │ ← Completed
│ ○ Item 2 - Aisle A │ ← Current
│ ○ Item 3 - Aisle B │ ← Next
├────────────────────┤
│ [SCAN QR] │ ← Main action
│ [NAVIGATE] │ ← Show on map
├────────────────────┤
│ Item 2: Apple Box │ ← Product details
│ SKU: APP-001 │
│ Quantity: 10 │
│ Location: A5-3 │
└────────────────────┘
Notes:
- Visual progress
- Clear navigation
- Scanner integration
Screen 4: Map
┌────────────────────┐
│ [<] NAVIGATE │
├────────────────────┤
│ │
│ WAREHOUSE MAP │
│ ┌──────────────┐ │
│ │ A1 A2 A3 │ │
│ │ B1 B2 B3 │ │ ← Map grid
│ │ C1 C2 C3 │ │
│ └──────────────┘ │
│ │
│ YOU ARE HERE: A5 │
│ NEXT: B2 (30m) │
│ │
│ [← BACK] [YES ✓] │
└────────────────────┘
Notes:
- Simple directional
- GPS navigation
- Confirmation button
Фаза 4: Validation (2 дня)
Показал wireframes warehouse workers:
Worker 1: "Отлично! Именно это нужно."
Worker 2: "Можно ли показать остаток на полке?
Может быть, товар уже забрали."
→ Added "Stock count" to wireframe
Worker 3: "Больше информации о товаре нужно.
Цвет, размер, может быть фото."
→ Added details section
Интеграция feedback:
- Добавил stock count
- Добавил product photo
- Добавил size/color info
- Увеличил font size
Результат: Wireframes утверждены, передал дизайнеру для создания mockups.
Case 2: Prototyping для mobile banking (4 недели)
Ситуация: Мобильное приложение для банка. Нужно протестировать пользовательский flow перед разработкой.
Почему prototype вместо просто wireframes:
- Bank требует sign-off перед разработкой
- Нужно проверить: все ли flows интуитивны
- Нужны интерактивные тесты с реальными пользователями
Инструмент: Figma + Figma Prototyping
Фаза 1: High-fidelity mockups (2 недели)
Дизайнер создал красивые mockups в Figma:
- Брендированные цвета
- Правильные шрифты
- Иконки
- Spacing
- Shadows & elevation
Фаза 2: Interactive flows (1 неделя)
Я спроектировал interactions в Figma:
Flow: Transfer money
Screen 1: Accounts
└─ Tap on account
└─ Screen 2: Actions
└─ Tap "Transfer"
└─ Screen 3: Choose recipient
└─ Tap on contact
└─ Screen 4: Amount
└─ Enter amount
└─ Tap "Next"
└─ Screen 5: Confirm
└─ Tap "Approve"
└─ Screen 6: Success
Фаза 3: User testing (1 неделя)
Пригласил 10 потенциальных пользователей
Дал им задачу: "Отправьте деньги другу"
Результаты:
- 8/10 справились без помощи ✓
- 2/10 были confused в экране 3 (выбор получателя)
Feedback: "Нет ясно, это список контактов или нужно вводить номер?"
Action: Добавил две вкладки: "Contacts" и "New number"
- 6/10 хотели отменить после подтверждения
Feedback: "Я хотел проверить ещё раз перед утверждением"
Action: Добавил "Edit" кнопку на экране 5
- 10/10 понимали, что произошло после успеха ✓
(Screen 6 был ясный)
Фаза 4: Refinement (2 дня)
Отредактировал prototype с feedback:
- Добавил две вкладки
- Добавил "Edit" кнопку
- Добавил more explanation text
- Улучшил visual hierarchy
Результат: После второго юзер тестинга — 10/10 справились без помощи! Прототип одобрен всеми stakeholder'ами.
Case 3: Когда макеты НЕ помогли (неудача)
Ситуация: P2P платформа для услуг (Uber-like). Создал подробные макеты.
Что я сделал неправильно:
-
Skipped user research
- Сделал макеты на основе моего воображения
- Не спросил реальных пользователей
-
Too polished mockups
- Люди думали, что готовое приложение
- Были surprised при изменениях
- High expectation → low satisfaction
-
Not validated with users
- Показал только stakeholder'ам
- Они оказались не representative
- Реальные пользователи хотели совсем другое
Результат:
- Разработал по макетам
- Запустили
- Пользователи не поняли интерфейс
- Переделали всё за 3 месяца
- Потеряли $200k
Lesson: Макеты нужны, но БЕЗ user validation они бесполезны.
Best practices при создании макетов
1. Start with wireframes (low-fidelity)
❌ Не начинай с полированных дизайнов
Люди боятся предлагать изменения
✓ Начни с простых box'ов
Люди комфортно говорят: "Эту коробку перемести вверх"
2. Validate early and often
✓ Wireframes → Feedback (день 1)
✓ Mockups → Feedback (неделя 2)
✓ Prototype → User testing (неделя 3)
✓ Final → Review (неделя 4)
В каждом раунде: feedback от 3-5 человек
Результат: продумано, checked
3. Include annotations
Не положись на то, что дизайнер/разработчик
поймёт что ты имел в виду.
Аннотируй:
- Button sizes
- Spacing
- Colors (HEX codes)
- Typography (font, size, weight)
- Interactions (on click, hover, error states)
- Edge cases (empty state, loading, error)
Пример:
[Login button]
Size: 44px height (thumb-friendly)
Color: #007AFF
Font: SF Pro Display, 16px, bold
On press: Show loading spinner, disable button
4. Document states
Не забывай все экраны должны иметь разные states:
Login screen:
- ✓ Default (empty)
- ✓ Focused (cursor in email field)
- ✓ Loading (button spinning)
- ✓ Error (red message "Invalid email")
- ✓ Success (transition to next screen)
Bullet list item:
- ✓ Default
- ✓ Hover
- ✓ Active/Selected
- ✓ Disabled
- ✓ Error
5. Create design system
Для больших проектов: создай design system
Дизайн система включает:
- Colors palette
- Typography rules
- Button styles
- Card components
- Form inputs
- Icons
- Spacing rules
- Elevation rules
Преимущества:
- Consistency
- Speed (переиспользование компонентов)
- Easy to maintain
Инструменты, которые я использовал
Wireframing:
- Balsamiq Mockups (5 проектов)
- draw.io (3 проекта)
- Pen & paper (быстро)
- Figma (если нужно share)
Mockups & Design:
- Figma (80% проектов) ← лучший
- Adobe XD (3 проекта)
- Sketch (старые проекты)
Prototyping:
- Figma interactive (50%)
- Framer (15%)
- InVision (old projects)
Collaboration:
- Figma sharing (live)
- Figma comments
- Miro (whiteboarding)
Типичные ошибки
Ошибка 1: Слишком много detail'а на wireframes
❌ Wireframe с выбором цвета, шрифтом, иконками
→ Слишком сложный, отвлекает от layout
✓ Wireframe только структура
→ Фокус на расположение, flow, hierarchy
Ошибка 2: Забыть mobile версию
❌ Спроектировал только desktop
→ Мобильная версия не помещалась
→ Переделываю
✓ Начни с mobile (mobile-first)
→ Потом адаптируй на desktop
Ошибка 3: No error states
❌ Макеты только "happy path"
→ Что происходит когда ошибка?
→ Разработчик гадает
→ Выглядит плохо
✓ Спроектируй error, loading, empty states
→ Полное user experience
Ошибка 4: Ignore accessibility
❌ Макеты with bad contrast, tiny fonts
→ Люди с vision issues не видят
→ Accessibility nightmare
✓ Проверь contrast ratio
✓ Используй readable fonts
✓ Test with screen readers
Вывод
Макеты — это мост между идеей и реализацией. Правильно спроектированные макеты:
- Экономят месяцы разработки
- Улучшают UX
- Снижают количество переделок
- Облегчают коммуникацию
Но макеты без user validation — это потраченное время.
Моя рекомендация:
- Wireframes первыми — день, два
- Feedback от users — день, три
- Refine wireframes — день, четыре
- Mockups — день, пять-семь
- Interactive prototype — день, восемь-четырнадцать
- User testing — день, пятнадцать-семнадцать
- Final refinement — день, восемнадцать-двадцать
- Developer handoff — день, двадцать-один
Время: 3 недели для среднего проекта Результат: Разработчики знают точно что делать, меньше вопросов, лучше качество.