Как сделать хороший дизайн: пошаговая инструкция от задачи до готового макета

Хороший дизайн редко появляется от вдохновения. Обычно это результат правильной последовательности: сначала понять задачу, потом собрать содержание, расставить приоритеты, проверить сценарий и только после этого выбирать шрифт, цвет и картинки.

Ниже — процесс, по которому можно спроектировать лендинг, корпоративный сайт, интернет-магазин или интерфейс сервиса. Это не список абстрактных принципов. На каждом шаге есть конкретное действие, результат и критерий проверки.

Короткая формула такая:

Хороший дизайн = ясная задача + понятная иерархия + последовательные правила + реальные данные + проверка на людях.

Красота из этой формулы не исключена. Просто она появляется не вместо смысла, а поверх работающей конструкции.

Шаг 1. Записать задачу одним предложением

До открытия Figma нужно закончить фразу:

Человек приходит сюда, чтобы __________, а сайт должен помочь ему __________.

Плохой ответ: «Сделать современный сайт и повысить узнаваемость».

Рабочий ответ: «Владелец небольшой компании ищет бухгалтерское сопровождение, должен за две минуты понять состав услуги, порядок цен и оставить заявку на расчет».

Следом запишите четыре вещи:

• кто принимает решение;
• с каким вопросом он приходит;
• что мешает ему решиться;
• какое действие на странице главное.

Главное действие должно быть одно. Позвонить, заказать, зарегистрироваться, выбрать тариф или скачать документ — не все сразу. Остальные действия могут существовать, но не должны спорить с основным.

Результат шага: одна задача, одна аудитория, одно главное действие и список основных сомнений пользователя.

Шаг 2. Собрать содержание до макета

Макет с текстом Lorem ipsum почти всегда врет. В нем любой заголовок короткий, все карточки одинаковые, а у товара никогда не бывает названия на четыре строки.

До визуального дизайна соберите хотя бы черновые данные:

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

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

Если данных нет, это не задача «потом наполнить». Это ограничение проекта, которое уже влияет на дизайн. Например, без хороших фотографий не стоит строить всю страницу на огромной фотогалерее. Без трех сильных преимуществ не нужен блок из трех карточек только потому, что так красиво в шаблоне.

Результат шага: черновик страницы в обычном документе без сетки, цветов и декоративных блоков.

Шаг 3. Построить путь пользователя

Теперь разложите страницу не по названиям секций, а по вопросам человека.

Для страницы услуги последовательность может быть такой:

1. Туда ли я попал?
2. Решаете ли вы мою задачу?
3. Что именно входит в работу?
4. Сколько это стоит и сколько занимает времени?
5. Почему вам можно доверять?
6. Что будет после заявки?
7. Как начать?

Отсюда уже появляется структура:

1. Первый экран с ясным предложением.
2. Кому и в каких ситуациях подходит услуга.
3. Состав работ.
4. Цена, сроки и ограничения.
5. Кейсы, факты или отзывы.
6. Этапы работы.
7. FAQ.
8. Форма или другой следующий шаг.

Если блок не отвечает ни на один вопрос и не помогает перейти дальше, скорее всего, он не нужен. «Немного истории компании для солидности» — типичный кандидат на вылет.

Результат шага: линейный сценарий от входа до целевого действия.

Шаг 4. Расставить приоритеты в содержании

Разделите информацию на три уровня.

Уровень	Что туда входит	Как показывать
Первый	То, без чего нельзя понять предложение и сделать следующий шаг	Сразу, крупно, без раскрывающихся элементов
Второй	Доказательства, условия, сравнения и ответы на сомнения	Ниже по сценарию, заметно, но спокойнее
Третий	Юридические детали, редкие вопросы, справочная информация	В FAQ, документах, подсказках или на отдельной странице

На одном экране не может быть пять главных элементов. Если все крупное, яркое и жирное, иерархии нет — есть только визуальная драка.

Полезное ограничение: на первом экране оставьте один заголовок, короткое пояснение, главное действие и одно доказательство. Например, цену от определенной суммы, срок, рейтинг или конкретный результат. Не пытайтесь засунуть туда всю компанию в вакуумной упаковке.

Результат шага: видно, что человек должен заметить сначала, что потом и что можно не читать до появления интереса.

Шаг 5. Сделать серый прототип

Соберите страницу без фирменных цветов, фотографий и эффектов. Используйте прямоугольники, настоящий текст и один нейтральный шрифт.

На этом этапе решаются:

• порядок блоков;
• количество колонок;
• длина текста;
• расположение действий;
• повторяемость элементов;
• переходы между страницами и состояниями.

Серый прототип должен выглядеть скучно. Это нормально. Его задача — дешево показать ошибки структуры. Переставить три серых блока занимает минуту. Переделывать готовый экран с графикой, адаптивом и согласованной анимацией — уже маленький филиал ада.

Проверьте прототип тремя вопросами:

1. Можно ли за пять секунд понять, о чем страница?
2. Можно ли найти главное действие, не читая все подряд?
3. Логично ли следующий блок продолжает предыдущий?

Если нет, не лечите это цветом. Чините структуру.

Результат шага: кликабельный или линейный прототип с реальным содержанием.

Шаг 6. Задать сетку и систему отступов

Хороший макет держится не на таланте расставлять элементы «на глаз», а на небольшом наборе повторяемых правил.

Для обычного сайта достаточно:

• контейнера шириной примерно 1120–1280 пикселей на большом экране;
• 12 колонок на десктопе и 4 колонок на мобильном;
• базового шага отступов 4 или 8 пикселей;
• нескольких размеров секционных отступов вместо уникального значения у каждого блока.

Например, можно использовать ряд 4, 8, 12, 16, 24, 32, 48, 64, 96. Не обязательно применять все значения. Важно, чтобы 23, 37 и 51 пиксель не возникали в макете просто по настроению.

Практические ориентиры:

• расстояние между подписью и связанным с ней полем меньше, чем между соседними полями;
• внутренний отступ карточки обычно 20–32 пикселя;
• между секциями на десктопе часто достаточно 64–120 пикселей, на мобильном — 40–72;
• текстовая колонка обычно уже общего контейнера.

Это не строительные нормы. Если контент требует другого значения, меняйте. Но сначала заведите правило, а исключение делайте осознанно.

Результат шага: элементы выровнены, одинаковые отношения повторяются, случайных отступов нет.

Шаг 7. Настроить типографику

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

Безопасная стартовая система для сайта:

Роль	Размер	Межстрочный интервал
Основной текст	16–18 px	1.45–1.65
Подпись	13–14 px	1.35–1.5
Небольшой заголовок	20–24 px	1.2–1.35
Заголовок секции	32–48 px	1.1–1.2
Главный заголовок	40–64 px на десктопе, меньше на мобильном	1.05–1.15

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

Проверьте еще пять вещей:

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

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

Шаг 8. Добавить цвет по ролям

Сначала добейтесь рабочей иерархии в оттенках серого. Потом назначьте цветам роли:

• фон страницы;
• фон карточки или другой поверхности;
• основной текст;
• вторичный текст;
• границы;
• акцент и главное действие;
• ошибка;
• предупреждение;
• успех.

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

Контраст основного текста к фону должен быть не ниже 4.5:1. Для крупного текста допустим порог 3:1. Но формальная цифра не отменяет проверки глазами: тонкий шрифт на пестрой фотографии может плохо читаться даже при бодром отчете плагина.

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

Результат шага: цвет помогает понять интерфейс, а не превращает его в витрину маркеров.

Шаг 9. Привести компоненты к одним правилам

Проверьте все повторяющиеся элементы: кнопки, ссылки, поля, карточки, табы, фильтры, модальные окна, уведомления.

Для кнопок обычно хватает трех уровней:

1. Основная — главное действие на экране.
2. Вторичная — полезное, но не главное действие.
3. Текстовая — спокойная навигация или дополнительная возможность.

У каждого интерактивного элемента нужны состояния:

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

Форма без состояния ошибки — не законченный дизайн. Карточка товара без отсутствующей фотографии — тоже. Интерфейс существует не только в тот идеальный момент, который красиво выглядит в презентации.

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

Результат шага: одинаковые элементы выглядят и ведут себя одинаково во всех местах.

Шаг 10. Использовать изображения как доказательство

У каждого изображения должна быть работа:

• показать продукт;
• объяснить процесс;
• подтвердить результат;
• познакомить с человеком;
• помочь сравнить варианты;
• создать нужный эмоциональный контекст.

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

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

Иконки используйте для узнаваемых действий и быстрого сканирования. Не заменяйте ими обычные слова, если смысл придется угадывать. Пиктограмма ракеты рядом с «быстрым запуском» еще никого не вывела на орбиту.

Результат шага: визуальные материалы добавляют информацию или доверие, а не просто занимают площадь.

Шаг 11. Проектировать адаптив сразу

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

После каждой важной десктопной секции сделайте мобильный вариант. Проверьте:

• что останется на первом экране;
• в каком порядке сложатся колонки;
• где окажется главное действие;
• как откроются меню, фильтры, таблицы и подсказки;
• что произойдет с длинными словами и числами;
• можно ли пользоваться интерфейсом без наведения мыши.

Интерактивная область кнопки или иконки должна быть около 44–48 пикселей по каждой стороне, даже если сама иконка меньше. Между соседними действиями нужен зазор, чтобы по кнопке можно было попасть большим пальцем, а не только верой.

Проверяйте макет хотя бы на ширинах 320, 360–390, 768, 1024 и 1440 пикселей. Точки переключения выбирайте там, где ломается контент, а не потому, что такой набор брейкпоинтов завещал предыдущий шаблон.

Результат шага: основной сценарий работает на узком и широком экране без потери смысла.

Шаг 12. Подставить неудобные данные

Идеальные данные маскируют слабый дизайн. Перед передачей макета разработчику специально попробуйте его сломать.

Подставьте:

• заголовок в две-три строки;
• очень длинное имя и email;
• цену с большим количеством цифр;
• одну карточку вместо четырех и семь вместо трех;
• пустой результат поиска;
• отсутствующую фотографию;
• длинную ошибку формы;
• текст на другом языке, если он планируется;
• загрузку, отсутствие связи и повторную отправку.

Увеличьте страницу до 200 процентов и пройдите ее с клавиатуры. Проверьте, не исчезает ли фокус, не обрезается ли содержание и сохраняется ли порядок действий.

Это менее эффектная часть работы, чем выбор градиента. Зато именно здесь дизайн перестает быть картинкой и становится продуктом.

Результат шага: макет выдерживает реальную жизнь, а не только демонстрационные данные.

Шаг 13. Проверить иерархию без чтения

Отдалите макет или слегка расфокусируйте взгляд. Должны остаться видны три уровня:

1. Главная мысль и главное действие.
2. Названия смысловых блоков.
3. Детали и пояснения.

Если все сливается в равномерную серую массу, не хватает контраста размеров и пространства. Если экран похож на новогоднюю распродажу, акцентов слишком много.

Еще один тест: временно выключите цвет. Если без фирменного фиолетового кнопка и заголовок перестали быть заметными, значит иерархия держалась только на окраске. Усильте размер, вес, расположение или свободное пространство.

Результат шага: даже при быстром просмотре понятно, куда смотреть и что делать.

Шаг 14. Проверить макет на людях

Не спрашивайте: «Вам нравится?» Это вопрос о вкусе, настроении и желании не обидеть автора.

Покажите страницу человеку, который не участвовал в проекте, и попросите выполнить задачу. Например: «Вы хотите понять стоимость и заказать расчет. Покажите, что будете делать».

После сценария задайте конкретные вопросы:

• что вы заметили первым;
• чем занимается компания;
• что вы ожидаете после нажатия кнопки;
• какой информации не хватило;
• где пришлось остановиться и подумать;
• что вызвало недоверие.

Не объясняйте интерфейс во время проверки. Если приходится говорить «вот здесь у нас задумано», вы проверяете уже не дизайн, а качество собственной экскурсии.

Записывайте наблюдаемое поведение отдельно от мнений. Фраза «я люблю синий» — мнение. Три человека, которые не нашли цену, — проблема сценария.

Результат шага: список конкретных затруднений, отсортированный по влиянию на главное действие.

Шаг 15. Провести проход на удаление

Откройте каждый экран и задайте по очереди:

1. Какую задачу решает этот блок?
2. Что потеряет пользователь, если его убрать?
3. Нельзя ли сказать то же короче?
4. Не повторяет ли он уже сказанное?
5. Не конкурирует ли он с главным действием?

Удалите декоративные подписи, лишние рамки, повторные заголовки, бессодержательные иконки и секции, созданные только ради ритма. Потом снова проверьте страницу. Часто после такого прохода дизайн внезапно становится «дороже», хотя в него ничего не добавили.

Минимализм здесь не цель. Цель — оставить столько элементов, сколько нужно для задачи, и ни одним больше.

Результат шага: на странице нет деталей, которые требуют внимания, но ничего не дают взамен.

Шаг 16. Подготовить макет к разработке

Готовый дизайн — это не набор красивых экранов. Разработчику должны быть понятны правила поведения.

Перед передачей проверьте, что в макете есть:

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

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

Результат шага: другой человек может реализовать интерфейс без телепатии и бесконечной переписки.

Финальный чек-лист

Перед утверждением дизайна я бы прошел этот список целиком.

Задача и содержание

• за пять секунд понятно, что предлагает страница;
• у экрана есть одно главное действие;
• порядок блоков отвечает на вопросы пользователя;
• использован реальный или реалистичный контент;
• условия, цена и ограничения не спрятаны без причины;
• доказательства конкретны, а не состоят из слов «качество» и «профессионализм».

Визуальная система

• есть понятная сетка;
• отступы собраны из небольшого набора значений;
• текст легко читать;
• строка не слишком длинная;
• акцентов немного;
• цвет используется по ролям;
• одинаковые компоненты не выглядят как дальние родственники.

Сценарии и доступность

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

Адаптив и разработка

• проверены узкие и широкие экраны;
• длинные тексты не ломают блоки;
• изображения кадрируются предсказуемо;
• таблицы, меню и фильтры имеют мобильный сценарий;
• разработчику понятны состояния и поведение;
• сложные эффекты дают пользу, соразмерную стоимости реализации и поддержки.

Если времени мало: минимальный рабочий процесс

Иногда на проект нет недели исследований и трех кругов тестов. Тогда не выкидывайте этапы целиком, а сожмите каждый:

1. За 30 минут сформулируйте задачу, аудиторию и главное действие.
2. За час соберите реальный контент и вопросы пользователя.
3. За час сделайте серый прототип ключевой страницы.
4. Покажите его одному человеку, который не знает проект.
5. Задайте сетку, типографику, цвет и компоненты.
6. Сразу соберите мобильную версию.
7. Проверьте длинные данные, ошибки и пустые состояния.
8. Уберите все, что не помогает понять, выбрать или сделать действие.

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

Итог

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

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

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