Web Design · Гид
Типографика в вебе
Как построить типографическую шкалу, какие значения line-height работают, зачем нужен clamp и почему на мобильном нельзя просто уменьшить всё пропорционально.
Web Design
Сайт, который выдерживает второй визит
Дизайн сайтов: лендинги, электронная коммерция, портфолио, медиа. Композиция, сетки, типографика в вебе, анимация, производительность и то, как это влияет на результат.
Темы рубрики
Главное в рубрике
Свежие материалы
Структура лендинга
Первый экран, доказательства, возражения, действие. Разбираем логику посадочной страницы как аргументацию, а не как набор модных блоков.
Портфолио дизайнера
Сколько проектов достаточно, как устроен работающий кейс, что смотрят арт-директора первым и почему процесс важнее финальных картинок.
Карточка товара
Фотографии, цена, варианты, доставка и кнопка. Разбираем порядок элементов, работу с галереей и то, где чаще всего теряется покупатель.
Оформление заказа
Обязательная регистрация, скрытая доставка, слишком много шагов и неудобная оплата. Разбираем причины брошенных корзин и то, что с ними делать.
Фотография товара
Свет, фон, ракурсы, цветопередача и масштаб. Разбираем, какие снимки нужны для каждой категории и почему цвет на фото — юридический вопрос.
Тренды веб-дизайна 2027
Крупная типографика, честная сетка, возвращение плотности и тихая анимация. Разбираем, куда движется дизайн сайтов, и показываем, как эти приёмы выглядят на практике.
Сайт живёт в браузере, а не в макете
Веб-дизайн отличается от печатного тем, что у результата нет фиксированного размера. Одна и та же страница открывается на телефоне в метро, на ноутбуке в офисе и на большом экране с масштабом 125%. Макет — это одно из состояний, а не сам продукт.
Из этого следует практика: проектировать не композицию экрана, а поведение блоков; закладывать текст разной длины; проверять, что происходит при медленном соединении и при выключенных картинках. Дизайн, который выглядит хорошо только в идеальных условиях, разваливается в первый рабочий день.
Что решает на практике
- Скорость первого экрана: она влияет на впечатление сильнее, чем любая типографика.
- Ясность первого экрана: что за продукт, для кого и что делать дальше — без прокрутки.
- Читаемость длины строки: 60–80 знаков на десктопе, иначе глаз теряет строку.
- Состояния: наведение, нажатие, загрузка, ошибка, пустой список — их проектируют, а не оставляют по умолчанию.
- Работа с изображениями: заданные пропорции, современные форматы, отсутствие скачков вёрстки при загрузке.
Как мы пишем о вебе
Мы разбираем приёмы, которые переживают смену трендов: сетки, ритм, типографика в вебе, навигация, посадочные страницы, витрины интернет-магазинов и портфолио. Модные эффекты рассматриваем через их цену — что они стоят в производительности и доступности.
