Как задать характер сайта: три дизайн-направления для одного брифа

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

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

1. Зафиксируйте содержание, которое останется одинаковым

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

Подготовьте общий бриф:

Учебный проект: сайт студии оформления презентаций.
Аудитория: небольшие команды с готовым содержанием презентации.
Главная задача: познакомиться с услугой и обсудить свой проект.
Заголовок: «Оформляем презентации по вашему содержанию».
Главное действие: «Обсудить презентацию».
Путь действия: [утверждённая рабочая ссылка для обращения].
Блоки: предложение, состав услуги, предоставленные работы,
этапы сотрудничества, вопросы и контакт.
Материалы: [утверждённые тексты и разрешённые изображения].
Ограничения: не выдумывать клиентов, отзывы, цены и сроки.
Не обещать подготовку содержания, если услуга этого не включает.

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

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

2. Редакционное направление: содержание и крупные фрагменты работ

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

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

Дизайн-направление: редакционное.
Фон тёплый светлый, основной текст тёмный, один бордовый акцент.
Заголовки с засечками; основной текст и подписи без засечек.
На широком экране текст и изображение могут занимать разные доли
сетки, но левый край текстовых блоков должен быть согласован.
В блоке работ используй крупные изображения с короткими подписями.
Сохраняй важные детали изображений; не обрезай текст на слайдах.
Услуги оформи последовательными строками с тонкими разделителями.
Главная кнопка однотонная; вторичные переходы — текстовые ссылки.
Не добавляй декоративные кавычки, вымышленные цитаты и отзывы.
На телефоне выстрой содержание в одну колонку в логичном порядке.

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

3. Спокойное сервисное направление: понятная последовательность

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

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

Дизайн-направление: спокойное сервисное.
Используй единый шрифт без засечек и три уровня текста:
заголовок раздела, основной абзац, поясняющая подпись.
Фон светлый; синий акцент оставь главным кнопкам и ссылкам.
Услуги покажи карточками с одинаковым внутренним порядком:
название, состав работы, результат, уточнение.
Этапы расположи последовательным списком с ясной нумерацией.
Используй умеренные скругления и заметные границы карточек.
Работы покажи в спокойной сетке с подписями и без автокарусели.
Во всех разделах повторяй одинаковый вид главной кнопки.
На телефоне карточки идут последовательно; текст не обрезается.

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

4. Выразительное направление: один заметный приём

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

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

Дизайн-направление: выразительное.
Главный приём — крупные заголовки без засечек и чередование
светлого фона с оранжевыми акцентными полями.
Основной текст сохраняй спокойным и хорошо читаемым.
Покажи крупные фрагменты предоставленных работ с подписями.
Ограничь акцентные поля первым экраном и завершающим блоком.
В середине страницы сохраняй единую сетку и привычный порядок.
Не добавляй бегущую строку, автоматическое видео и анимацию скролла.
Кнопки должны различаться с фоном и иметь понятные подписи.
На телефоне уменьши масштаб заголовков без обрезки слов;
изображения и декоративные поля не перекрывают текст и действия.

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

5. Выберите направление и передайте одно задание

Обсудите три текстовых описания до генерации. Для первого выбора необязательно собирать три работающих сайта. Спросите клиента, какое направление соответствует его материалам и задаче; зафиксируйте причину выбора. Например: «Берём редакционное, потому что хотим подробно показать предоставленные работы и пояснения к ним».

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

Составьте итоговый промпт из общего брифа, одного выбранного направления и следующего блока:

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

Передайте такое задание в Lovarus. После сборки проверьте результат по одинаковым критериям:

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

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