VIDEMIND

Web Design

18 материалов

Сайт, который выдерживает второй визит

Дизайн сайтов: лендинги, электронная коммерция, портфолио, медиа. Композиция, сетки, типографика в вебе, анимация, производительность и то, как это влияет на результат.

ВдохновениеСмотреть ленту рубрики «Web Design»Только изображения, без текста

Темы рубрики

Тренды веб-дизайна 2027: что меняется в интерфейсах — графика VIDEMIND
Дизайн лендинговОдна страница, один аргумент
Карточка товара: что должно быть на первом экране — графика VIDEMIND
Дизайн интернет-магазиновВитрина, каталог и касса в одном интерфейсе
Портфолио дизайнера: что показывать и в каком порядке — графика VIDEMIND
Портфолио дизайнераСайт, который работает вместо резюме

Главное в рубрике

Свежие материалы

Сайт живёт в браузере, а не в макете

Веб-дизайн отличается от печатного тем, что у результата нет фиксированного размера. Одна и та же страница открывается на телефоне в метро, на ноутбуке в офисе и на большом экране с масштабом 125%. Макет — это одно из состояний, а не сам продукт.

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

Что решает на практике

  • Скорость первого экрана: она влияет на впечатление сильнее, чем любая типографика.
  • Ясность первого экрана: что за продукт, для кого и что делать дальше — без прокрутки.
  • Читаемость длины строки: 60–80 знаков на десктопе, иначе глаз теряет строку.
  • Состояния: наведение, нажатие, загрузка, ошибка, пустой список — их проектируют, а не оставляют по умолчанию.
  • Работа с изображениями: заданные пропорции, современные форматы, отсутствие скачков вёрстки при загрузке.

Как мы пишем о вебе

Мы разбираем приёмы, которые переживают смену трендов: сетки, ритм, типографика в вебе, навигация, посадочные страницы, витрины интернет-магазинов и портфолио. Модные эффекты рассматриваем через их цену — что они стоят в производительности и доступности.

Коротко о рубрике

С какого разрешения проектировать сайт?
С мобильного. Не потому, что мобильный трафик больше, а потому что узкая колонка вынуждает решить главное: что здесь по-настоящему важно. Расширять готовую мобильную иерархию проще, чем ужимать десктопную.
Сколько шрифтов использовать на сайте?
Обычно достаточно двух семейств и трёх-четырёх начертаний. Каждое дополнительное начертание — это вес, который загружается до отрисовки текста. Разнообразие лучше набирать размером и толщиной внутри одного семейства.
Нужны ли анимации?
Нужны те, что объясняют изменение: откуда появился блок, куда делся элемент, что происходит после нажатия. Декоративные эффекты при прокрутке чаще мешают — они задерживают контент и плохо переносятся на слабые устройства. Уважение к системной настройке «уменьшить движение» обязательно.

Ещё по теме

С чего начать

Связанные темы

#UX47#типографика36#разбор31#web30#цвет29#издательский26#дизайнсистема21#сетка19#мобильное16#упаковка14#тренды202711#анимация7
АрхивВсе материалы рубрики по датам18 материалов

Архив рубрики