Сайты через ИИ | Михаил Калинин

На рынке обучения дизайну четыре ценовых этажа, и только один из них окупается у большинства. Разбор честно, без рекламы. Большие школы: 50–150 тысяч, 4–9 месяцев, группа. Плюс: система и сообщество. Минус: платишь за бренд и маркетинг, а темп группы тянет вниз. Авторские курсы: 20–50 тысяч. Меньше воды, дешевле. Но качество — лотерея конкретного автора. Репетитор: 1 500–3 000 рублей в час, за полгода набегает около 100 тысяч. Отлично для одной конкретной задачи, дорого как путь в профессию. Самообучение: 300–1 500 рублей...

Пятнадцать лет входным билетом в профессию был фотошоп. Месяцы слоёв, масок и нарезки макетов. Но веб изменился, и билет просрочен. Почему фотошоп был королём: сайты 2000-х были картинками. Дизайнер рисовал макет как изображение, верстальщик резал его на куски. Фотошоп подходил под задачу. Современный сайт — код, сетки, компоненты. Макет — схема, а не картинка. Рисовать схему в растровом редакторе — забивать гвозди микроскопом. Figma победила по пяти причинам: работает в браузере, бесплатна для...

Есть макеты, где всё вроде нормально, но чего-то не хватает. А есть макеты, которые выглядят дорого с первой секунды. Разница часто в пропорциях, а пропорции — это математика. Золотое сечение — это 1.618. Пропорция, при которой глаз воспринимает композицию гармоничной. Она в раковинах, подсолнухах и Парфеноне — и в хороших макетах. Как применять без академической скуки: Макет: контент 800 пикселей, сайдбар — 800 разделить на 1.618, примерно 494. Типографика: текст 16 пикселей, заголовок — 16 умножить на 1...

Час туториалов в день, а через месяц свой макет всё равно не собирается. Знакомо? Проблема не в тебе, а в методе: просмотр не учит. Учит разбор. Метод такой: открыть чужой макет и разобрать его как механик двигатель. Измерить отступы между блоками, выписать размеры шрифтов и интерлиньяж, посмотреть палитру (обычно два-три цвета плюс нейтральные), изучить структуру слоёв и компонентов. Потом повторить один блок с нуля, не подглядывая. Пять типов макетов для разбора, по возрастанию сложности: Лендинг услуги: сетка, иерархия, кнопки...