Конспект урока
Сайт без визуала выглядит как все
После второго модуля у тебя на сайте есть текст и структура. Это хорошо, но не отличает от тысяч других сайтов, собранных в Bolt за прошлую неделю. Картинки — то, что превращает «технический сайт» в «твоё пространство». Поэтому сегодня мы добавим визуал.
На сайте обычно нужны три типа картинок. Они работают вместе: аватарка задаёт лицо, обложка — атмосферу, баннеры разделов — структуру. После урока все три у тебя будут готовы и стоять на сайте.
Что мы добавляем
🖼 ТРИ ТИПА
Три обязательных визуальных элемента, которые делают сайт твоим. Каждый — со своим форматом и своей задачей. Делать будем по очереди, не все сразу.
Формат:
Шаг 1. Делаем аватарку
👤 АВАТАРКА
Аватарка — это «лицо» сайта. Это не обязательно твоё реальное фото. У многих творческих людей аватарка — это иллюстрация, символ или просто цветовое пятно, которое они выбрали себе как знак.
Как применить. Когда выбрал лучший вариант аватарки, скачай его. Открой свой проект в Bolt и напиши в чате: «Замени аватарку на сайте на эту картинку», прикрепи файл. Bolt вставит её на главную и в шапку, если она там есть.
Шаги 2 и 3. Главная и разделы
🌅 ОБЛОЖКА И БАННЕРЫ
Обложка главной — большая горизонтальная картинка, которая встречает посетителя. Баннеры разделов — поменьше, по одному на каждый блок сайта. Все они должны быть в одном стиле, тогда сайт ощущается цельным.
Главное правило цельности. Когда генеришь баннеры, используй один и тот же стиль во всех промптах. Если первая обложка вышла в watercolor pastel — все остальные тоже делай в watercolor pastel. Иначе сайт будет выглядеть как сборная солянка.
Прошёл — отметил
✅ ЧЕК-ЛИСТ
Это твоя дорожная карта на ближайшие минут двадцать. Отмечай каждый пункт по мере выполнения — так ты увидишь весь прогресс по визуалу для портфолио в одном месте.
🎉 Сайт получил визуал. Теперь он выглядит как твоя личная страница, а не как шаблон. На последнем уроке модуля сделаем серию артов под твоё хобби — это будет финальный артефакт модуля.
Отмечено: из . Делай по одному — спешить некуда.
Что говорит твоя аватарка Что твоя аватарка должна говорить о тебе с первого взгляда?
