Курс вёрстки для Вайб-блока β

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

Основы дизайна

1. Основы UX Опыт пользователя — всё, что человек переживает на странице: нашёл ли, понял ли, сколько сил потратил. И первые понятия о цвете и шрифте, без которых дальше не разговориться.
2. Элементы интерфейса Из чего собран экран: кнопки, поля, навигация и их состояния. Как ведёт себя цвет рядом с другим цветом и что надо знать об изображениях, чтобы они не мылились и не весили мегабайты.
3. Движение, значки, тени Детали, от которых интерфейс кажется живым или шумным: анимация и её время, значки одного набора, тени как высота — и слова, которыми говорят о шрифте.
4. Принципы и эвристики Почему глаз объединяет одно и отделяет другое, как собирать интерфейс из деталей и десять правил, по которым страницу проверяют без пользователей.
5. Экраны и сетки Страницу чаще открывают с телефона, чем с компьютера. Типовые раскладки, колоночная сетка, точки перелома и то, что меняется под пальцем.
6. Композиция Где стоят элементы, какого они размера и как держат равновесие. Пустота собирает группы, один крупный элемент ведёт глаз, асимметрия делает экран живым.
7. Работа в UX и UI Кто что делает в команде и что отдаёт, как пишут тексты интерфейса, как узнают, что нужно людям, и как раскладывают содержимое по страницам.

Вайб-блок на практике

8. Как панель видит код Панель СТИЛЬ не смотрит на дизайн — она читает теги и классы. Здесь то, от чего зависит, дадут ли дизайнеру поле ссылки, правку текста и кегля.
9. Редактор блока Кнопки над блоком, его настройки и мобильный вид. Что в редакторе Тильды трогать, что оставить коду и что проверить перед публикацией.
10. Цвет и шрифт Палитра как распределение ролей и шрифтовая пара по строению. Плюс то, о чём забывают: шрифт кто-то должен подключить.
11. Сетка и ритм Страница читается пустотой между буквами и блоками. Одна сетка на сайт, отступы с одной шкалы, строка разумной длины и выделение по одному.
12. Приёмы Тильды Попап, форма и заливка — места, где Вайб-блок ведёт себя не как обычная страница. Что знать, чтобы окно открывалось, а заявки доходили.
13. Без штампов Страницу, собранную моделью, узнают не по ошибкам, а по приёмам, которые появились сами. Как их замечать и чем заменять.
14. Страница целиком Сначала вся страница строчками плана, потом то, что видно у посетителя: как грузятся картинки, как ломаются строки и понятно ли, куда нажать.
15. Подготовка макета в Figma Как нарисовать макет, чтобы чат собрал по нему страницу без сдвигов и лишних правок: кадр и секции, шрифты и текст, наклоны, ряды за краем и картинки.

re-block по шагам

16. Вход, проекты, мост Первый экран: вход по паролю, шапка, колонки, проект-папка и мост к Тильде.
17. Бриф Поле, в котором описываете сайт, и чипы над ним: тип сайта, тексты заказчика, референс, Figma, старый сайт, фото.
18. Карта сайта Страницы, экраны по порядку и меню со списками — до плана. Собрать по брифу или нарисовать самому.
19. Стиль, система, шрифты, сетка Манера вёрстки, дизайн-система, пара шрифтов и своя сетка — что даёт каждая кнопка.
20. План Чертёж страницы до сборки: сюжет, стиль, меню, секции строками и уточнения. Всё правится руками и бесплатно.
21. Сборка и превью Карточка «Генерация», сбой и «Дописать», «переделать» и история, ширины превью, правка без ИИ и «Элемент».
22. Заливка Секции из папки в Вайб-блоки Тильды через мост: «Залить», «Обновить», все страницы сразу, новая страница, публикация.
23. Сдача Проверка страницы, обоснование дизайна, ссылка и правки заказчика, инструкция, перевод и картинка для соцсетей.
24. Баланс, оплата, поддержка Остаток и пополнение, что платно, «Помощь», поддержка, доска идей, «Что нового» и меню ☰.

Ключа нет? Напишите в телеграм @vitas_gref — пригласим на курс.

Ключ запоминается только в этом браузере. Прогресс тоже живёт здесь и в расширении не виден.