ШАГ 3:
Нарисовать wireframe первого лендинга
Описание шага
[Что делать] Создай черно-белый wireframe лендинга по схеме из шага 2: блоки, текст-заглушки, сетка колонок. Экспортируй в PNG.
[Как это работает] Wireframe тестирует usability до цвета — экономит 50% времени на правках.
[Ожидаемый результат] Готовый скелет первого лендинга для детализации.
[Критерий готовности] Шаг выполнен, когда wireframe содержит все 5 блоков, сетку 12 колонок, 10+ элементов (текст, кнопки, изображения).
Как выполнить шаг
1) [Подготовка] Открой графический редактор, новый артборд 1440x3000px.
2) [Действие 1] Нарисуй сетку 12 колонок, добавь 5 блоков по высоте 500-700px каждый.
3) [Действие 2] Заполни заглушки из шага 2: прямоугольники для фото, текст в 2-3 шрифта.
4) [Действие 3] Добавь 3 CTA-кнопки, стрелки навигации.
5) [Проверка результата] Прокрути: читаемо ли на мобильном (дублируй артборд)?
6) [Что дальше] Wireframe утвержден — переходи к цветовой схеме.
Частые ошибки
1. [Пропускать мобильную версию]: 60% трафика с phones. Дизайн не продает. Делай responsive с самого wireframe.
2. [Делать слишком детальный wire]: Тратишь часы на финальный дизайн. Держи черно-белым — фокус на логике.
3. [Игнорировать spacing]: Элементы слипаются, выглядит дешево. Используй 24px отступы между блоками.
Полезные инструменты
Векторный графический редактор.
🎯 Цель с этим шагом
Создай 8 полноценных лендингов для портфолио. Получи навыки веб-дизайна, которые помогут брать заказы на фрилансе и расти в карьере дизайнера. Реалистичный план для начинающих с ежедневным прогрессом на 1%.
Подробнее о цели →