Даниил Соколовский
15 апреля 2015
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Как улучшить вёрстку страницы? Меня не покидает ощущение, что с выравниванием двухколоночных блоков что-то не так. Сейчас колонки имеют одинаковую ширину, а левый край правой приходится на центр страницы. Очевидное на первый взгляд решение — добавить отступ слева этим блокам — мне не очень нравится, потому что рвётся левый край. Как сделать лучше?


Даниил!

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

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

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

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

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

О правиле внутреннего и внешнего

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

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

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

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

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

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

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

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

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

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

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

Было

Стало

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

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

P. P. S. Дата следующего набора в Школу стажёров пока неизвестна.

 
Мы напишем вам, когда будет открыт набор. Без спама.

Поделиться

Комментарии

Николай Яковенко
15 апреля 2015

По-моему, при улучшении главное вовремя себя остановить. Вариант http://artgorbunov.ru/bb/soviet/20150415/95.png был достаточным для решения задачи. Остальное лишнее украшательство.


15 апреля 2015

Николай!

Мир богаче, чем Гельветика и стандартный шаблон Эгеи.

Дизайнерская задача никогда не решается только формальным набором элементов. Это личная страница модного диджейского перца. Она должна быть личной, модной и диджейской.

Сухость нужна там, где нужна для задачи.

Даниил Соколовский
15 апреля 2015

Михаил, благодарю за подробный разбор!

Не могу сказать, что согласен насчёт последнего «стало», промежуточные варианты местами понравились больше. В любом случае, теперь вижу куда двигаться. По поводу фотографии справа: предполагается, что она всегда будет прибита к краю окна браузера, даже если контент имеет заданную максимальную ширину?

P. S. Поздравляю с первым советом :-)

Иван Титов
15 апреля 2015

Что будет с фотографией на широком экране?

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

Даниил Соколовский
15 апреля 2015

«Это личная страница модного диджейского перца».

Артём, это не совсем так. Под музыкальное детище у меня есть отдельный сайт с дискографией, выступлениями, радиопрограммами и прочим-прочим. В то время как это более персональный сайт. Его цель — рассказать о моих профессиональных и личных интересах, которые не ограничиваются только музыкальной сферой. Отсюда и более строгий внешний вид. Вполне вероятно, что позже на н`м появятся ссылки на другие мои проекты, опять же? не связанные с музыкой. Решил действовать по getting real, начиная с малого — первая версия вообще выглядела так :-)

Конечно, изначально в совете я этого не писал, потому что вопрос был в другом. Поэтому ещё раз спасибо Михаилу за подробный ответ.


16 апреля 2015

Даниил!

Конечно, это совет по вёрстке, интервью с вами как клиентом не проводили.

Однако мы построили догадку, исходя из содержания страницы. Я подсветил только тот текст и ссылки, которые имеют однозначное отношение к музыке.

Важно, чтобы не только дизайн соответствовал содержанию, но и наоборот :-)

Николай Яковенко
15 апреля 2015

Артём, было бы интересно почитать совет о границе между «свежо» и «сухо». Как вы её определяете в каждом отдельно взятом случае?


16 апреля 2015

Николай, я всё перепутал. Я думал, вы предлагали остановиться здесь: http://artgorbunov.ru/bb/soviet/20150415/70.png

Но вариант, который вам нравится больше, к сожалению, неудачный и нечитабельный, в нём несколько конструктивных проблем.

Артур Бадретдинов
15 июля 2015

А правый нижний угол не нужно поддерживать, например, теми же социальными кнопками?


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

1 Как создавался новый сайт бюро. Часть четвёртая Как создавался новый сайт бюро. Часть третья




Недавно всплыло

Как написать заказчику, что я установлю модуль на его сайт после окончательной оплаты, и при этом не обидеть его? 2 Как флексить. Отступить от идеала 2 У меня остаётся ощущение, что я идиот, «рассыпала бобы», но на конкретных ошибках не могу себя поймать 3 Это я неправ, что долго думал, или магазин, что допустил такую ситуацию? 3