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

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

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


Даниил!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Было
Стало

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

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

Поделиться
Отправить

Комментарии

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

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

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

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

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

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

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

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

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


15 апреля 2015

Николай!

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

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

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

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

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

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

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

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

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


16 апреля 2015

Даниил!

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

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

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


16 апреля 2015

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

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

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

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


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

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

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

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

1 2