На занятии дали задание изучить структуру веб-сайта и записать свои наблюдения.

Сначала я не понял задание и написал с десяток банальных пунктов типа «сайты состоят из текстика и картиночек». Потом решил попробовать перерисовать Медузу. Пока перерисовывал, начал замечать мелкие детали. По ходу всё записывал.

В общем

Контент лежит на белых плашках. Между плашек проходит серый фон. Серый фон создает второй уровень — контент на плашках и плитках как будто чуть выше, т.е. ближе к зрителю.

Горизонтальные и вертикальные отступы между плашек везде 15 px.

Этажность, вёрстка

Контент разбит на этажи. Но не по темам, а по хронологии и иерархии.

Этажи отличаются ритмом верстки. Два соседних этажа не могут быть одной ритмичности.

Размер плиточек создает визуальную иерархию — это помогает зрителю быстрее понять порядок чтения. Самое большое — самое важное. Можно прочитать только его. Если есть время, можно почитать то, что поменьше.

Фоточки в плиточках большего размера и кадрируются под каждый типоразмер плиточек, поэтому одна фотография подходит под все плитки. Это позволяет любой новости свободно встраиваться в любой этаж. Плитка с этой фоткой и новостью встает в этаж на 1-2-3-4 колонки.

В текстовых полях тема не отделяется от лида переносом строки — достаточно изменения с полужирного гротеска на регуляр антикву. Подозреваю, некоторые подписи «вгоняют».

С четвертого экрана остаются только плиточные этажи. Там собрался условный архив, партнерские материалы, шапито, друзья.

Для каждой категории есть своя страница, доступ через табы.

Текстовые этажи

Есть три текстовых этажа без картинок — это простые новости. Они быстро обновляются и сползают вниз. Интересно, что тип новостей один, но эти три этажа равномерно размазаны по трем экранам.

Верстка зависит от контента. Есть «запасные» варианты компоновки контента. Верстка может меняться с каждой новой новостью.

Компоновка текстовых этажей одинакова: одна большая новость слева и четыре одинаковых справа.

У правых текстовых модулей может быть от двух до пяти строк. Чтобы «закрыть» эти неровные модули, используется «бирки» с временем — они всегда на одной высоте и помогают визуально сделать модуль прямоугольным.

Высота такого текстового этажа подстраивается под высоту правых текстовых модулей. Если там четыре коротких новости, этаж меньше.