Даниил!

Главная проблема страницы не в выравнивании колонок, а в скучной вёрстке и чрезмерно растянутом по высоте содержании. Длинная светлая страница хорошо работает, когда главную роль на ней играют иллюстрации, а текст является необязательным дополнением. Например, Эпл использует этот приём, чтобы показать свои часы со всех сторон. Страждущий пользователь готов листать и листать красивые картинки, пока не захлебнётся слюнями. На вашей странице картинок нет, а весь текст может уместиться в один экран. Пользователь вынужден смотреть на однообразные текстовые этажи, разделённые ненужными линейками и огромными вертикальными отступами.

Другая проблема страницы — плохой выбор шрифта и слабые маленькие заголовки, которые не держат свои этажи. Тонкий шрифт основного текста в принципе плохо читаем, а на вашей странице это усугубляется серым цветом. Кстати, тот же Эпл не использует тонкий шрифт просто так. На странице часов он, вероятно, использован, чтобы подчеркнуть ювелирность изделия, но на страницах других продуктов используется более жирное начертание.

Попробуем сделать вашу страницу компактнее. Первым делом уберём линейки и серый фон второго этажа:

Сразу стало видно, сколько места между этажами пропадает зря.

Поправим отступы между этажами и заголовками с абзацами по «правилу внутреннего и внешнего», изменим шрифт на более читаемый, добавим заголовкам вес:

Ради компактности уменьшим кегль основного текста и наведём порядок в этажах. Все четыре колонки блога отлично уместятся в один ряд, а строчку после заголовка можно вообще убрать: содержание уже раскрыто в колонках, ссылку на блог поместим в заголовок. В этаже о работе избавимся от двух колонок:

Переставим этажи так, чтобы их дробность увеличивалась сверху вниз:

Получилось три одинаковых текстовых блока подряд. Скучно, не видно главного.

Внесём разнообразие, перенеся текст с контактными данными и резюме в правую колонку. Заодно ради большей компактности избавимся от неинформативных заголовков:

С компактностью почти разобрались. Однако сейчас на странице ничто не подсказывает (впрочем, как и раньше), что её владелец увлекается и работает в музыкальной сфере. Чтобы исправить это, возьмём более выразительную фотографию и переместим информацию о месте работы в шапку:

Получившаяся конструкция шапки соответствует варианту из коллекции «швейцарских клише»
Получившаяся конструкция шапки соответствует варианту из коллекции «швейцарских клише»

Линейка и обрезанная фотография разделили рассказ на два отдельных этажа. Пострадала и компактность, и цельность повествования. Объединим два этажа в один. Для этого переместим фотографию в нижний правый угол, а колонку с контактами — наверх:

Направление верное, но одной только фотографии недостаточно, чтобы создать настроение: поставь другую фотографию и получишь сайт другого человека. Чтобы добавить ещё больше индивидуальности, напишем имя и место работы интересным гротеском:

Похоже на победу. Однако тонкая линейка, которую я ввёл, чтобы обрезать фотографию, определённо не из этого мира. Чтобы избавиться от неё, попробуем повернуть фотографию так, чтобы та обрезалась краем окна:

Выглядит неплохо, но текущей фотографии не хватает размера, чтобы обрезать её аккуратно. Возьмём другую:

Красота! Новая фотография не только лучше обрезана, но и удачно заигрывает с остальным содержимым страницы. Напоследок добавим ещё больше веселья и индивидуальности шапке и подружим с ней заголовок блога:

Было
Стало

Высота страницы стала меньше в два раза, конструкция — крепче, вёрстка — выразительнее.

P. S. Это был совет по средам о вёрстке и типографике в вебе. Хотите знать всё об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? Присылайте вопросы.

Типографика в вебеСайтыФормат: иллюстрацияФормат: текстНоситель: сайтДоработка вёрстки
Отправить
Поделиться
Запинить

Рекомендуем другие советы