Практически каждый дизайнер хотя бы раз в своей практике сталкивался со следующей проблемой: вроде бы всё хорошо получилось, но что-то где-то не так, есть ощущение какой-то недоделанности и неряшливости. Кто-то в этом случае привычно махнёт рукой и, надеясь на некомпетентность клиента, выведет недоделанный сайт в Сеть. Кто-то начнёт череду поисков решения проблемы и зайдёт в глубокие дебри бесконечных переделок и доработок. И почти никто не обратится за помощью к специалистам, занимающимся непосредственно данной категорией проблем — к дизайн-аудиторам. А зря. Аудит сайтов в целом лишь относительно недавно стал вызывать интерес в нашей стране, появились специалисты в области юзабилити сайтов, продвижения и раскрутки. А вот непосредственно улучшением внешнего вида занимаются лишь единицы, да и то о них мало кто знает.
Разумеется, в крупных и солидных студиях имеются квалифицированные арт-директоры, которые доведут любой сайт до лоска. Но, во-первых, далеко не всегда и везде есть такой человек. Например, сайт был заказан у фрилансера, который сделал всё хорошо, но допустил с точки зрения профессионального дизайна ряд мелких ошибок и недочётов. А во-вторых, даже после усердной работы высококлассного арт-директора вполне может остаться поле деятельности для дизайн-аудитора с намётанным глазом.
В этой статье я хотел бы на конкретном примере известного западного портала разобрать практические методы визуального улучшения сайта.
ВНИМАНИЕ: в статье имеется большое количество крупных изображений.
_________________________________________________________________________________
Итак, за примерами далеко ходить не станем. Возьмём два известных портала крупнейших футбольных ассоциаций: UEFA и FIFA.
Можно поспорить насчёт целесообразности и современности подобного рода оформления; устроить дебаты о том, чья школа дизайна лучше: европеская или американская; развести долгую полемику о старомодности портального стиля дизайна. Мы этого делать не станем. Просто возьмём как данность: раз такие сайты существуют в Сети (а вы найдёте тысячи подобных порталов с весьма известными логотипами в шапках), значит их кто-то делает, получает за это деньги, а множество других людей ежедневно это потребляют. Нам же важно то, что подобные порталы состоят из множества каким-то образом расположенных текстовых блоков, что позволяет проанализировать каждую область отдельно.
Сайт FIFA по сравнению с UEFA выглядит существенно лучше. Дело тут да же не в самом стиле оформления и каких-то наворотах. Просто здесь гораздо меньше неряшливости, ошибок и неточностей в размещении и взаимодействии блоков. Короче говоря, у FIFA видна работа арт-директора. Впрочем, и в данном случае, как говорилось выше, можно найти и устранить немалое число мелких глюков.
А для сайта UEFA попробуем сделать доработку оформления.
Следует заметить, что в дизайн-аудите есть три основных метода:
- Re-color, перекраска. Допустим, нужно сделать весь сайт ярче или мягче, устранить ощущение грязи и тяжеловсности, сместить гамму в более тёплые или холодные цвета и т.п. Обычно этот метод применяется к каким-то отдельным блокам, но может быть применён ко всему сайту в целом.
- Re-layout, перекомпоновка. От перемены мест слагаемых сумма в дизайне нередко меняется. Потому иногда нужно перетасовать блоки, изменить размеры, выровнять колонки, чтобы подогнать макет к более уравновешенному виду. Ибо в противном случае одна колонка может оказаться слишком короткой, тогда как другая будет висеть «простынёй» на несколько экранов.
- Details tuning, тюнинг деталей. Собственно, самый востребованный и важный метод. Здесь выравниваются отступы от буллетов, подгоняется типографика, дорабатываются иконки, логотипы, буллеты, линеечки и прочие элементы дизайна.
Перекраска и перекомпоновка чаще всего не требуются или запрещаются клиентом: он хочет оставить всё как есть (ему нравится цветовая гамма и расположение блоков). В данном случае мы также не станем почти ничего менять, лишь немного подкоректируем цвет в паре мест и самую малость подвигаем блоки. А вот детальным тюнингом займёмся по максимуму.
Портал UEFA видоизменяется чуть ли каждый час, там перестраиваются блоки, меняется информация и т.п. Но нас интересует некое конкретное статичное состояние сайта.
На момент написания статьи внешний вид портала был таким.
Поскольку на сайте UEFA практически отсутствует зелёный, все корректировочные рамки и сноски я буду делать именно этим цветом.
_________________________________________________________________________________
Перекомпоновка блоков
Прежде всего, рассмотрим весь макет целиком в уменьшенном виде. В Photoshop удобно это делать в масштабе 25% — достаточной большой макет сайта умещается на экране, и в этом масштабе текст и графика лучше всего сглаживаются, тогда как в большинстве других масштабов вид получается несколько неряшливым.
Как это ни печально, но этот сайт следовало бы стабилизировать, немного перетасовав блоки в нижней части. Клиента нужно убедить, что в таком виде сайт «заваливается» на правую сторону, ибо на этой стороне есть внушительных размеров пустота, дестабилизирующая всю конструкцию. Есть также нерациональные пустоты и в других местах:
После небольшого ре-лейаута можно получить что-нибудь в таком духе:
Все пустоты заполнены, блоки стабилизированы друг относительно друга. Возможно, сразу не выйдет сделать подобные шаги. Какие-то области крепко связаны друг с другом, и не получится перенести их в другую колонку, ужать или расширить. Вероятно, потребуется добавить какой-то дополнительный блок. Здесь в резерве всегда должны быть наработанные решения. Например, можно предложить клиенту включить блок с опросами (если такого ещё нет) или что-нибудь вроде «Фото дня». Ну или вытащить пяток-другой заголовков с форума, внедрить информеры с других сайтов или просто увеличить число новостей в предыдущем блоке на несколько строк. Куда сложнее убедить клиента отказаться от какого-то блока или ужать его, уменьшить количество ссылок или заголовков.
В любом случае, перекомпоновка блоков важна на самом раннем этапе, ибо позволяет получить более ёмкий и сбалансированный дизайн.
Мне могут возразить любители «пустого места». Дескать, не надо трогать обширные пустоты, всё нормально. Да, «белое пространство» очень важно, и мы ещё вернёмся к этому вопросу. Но эти пустоты всегда должны быть оправданы. Если они ничего не подчёркивают, не служат средством привлечения внимания, а образуются спонтанно из-за недоработок в вёрстке, то это паразитные явления, и от них непременно нужно избавляться. Потому как на небольших экранах при плавном скроллинге рано или поздно обнаруживается какая-то одна-единственная длинная узкая колонка на абсолютно пустом пространстве, и это ничуть не способствует лучшему восприятию информации. К тому же на подобного рода порталах следует экономить место, дорожить пространством и попусту не разбрасываться десятками, а то и сотнями пикселей. Нужно помнить важный постулат: в профессионально выполненном дизайне каждый блок, каждая деталь оправдана и несёт определённую смысловую нагрузку. Даже если это невзрачный кусок белого поля.
В конце, когда будем подводить итоги, попробуем кое-чего добавить и урезать, чтобы этот макет уравновесился.
_________________________________________________________________________________
Межколоночные и межстрочные отступы
Ещё одна ипостась ре-лайаута, которая требует максимального внимания от верстальщика. Как правило, HTML-кодеры пренебрегают величинами вертикальных и горизонтальных отступов, и тогда получаются весьма небрежно скомпонованные блоки.
По личному опыту скажу, что максимально удобными являются отступы, кратные 10 или 5 пикселям. В редких случаях можно использовать величины вроде 12 или 27 точек, но лучше всё же округлять их до ближайших величин (10 или 15, 25 или 30) — так будет куда проще делать расчёты в будущем при вёрстке макета. Дизайнеру следует заранее расставить направляющие, чтобы верно задать удобные для работы расстояния между колонками. Также нужно следить, чтобы отступы текста от рамок были везде одного размера.
На сайте UEFA нас ожидает пёстрый зоопарк разнообразных отступов (между колонками, от краёв до рамок и от рамок до объектов):
В общем, полнейший бардак. Очевидно, что подобная разномастица в значениях отступов (от 1 до 12 и от 15 до 18 встречаются все величины!) бросается в глаза даже непосвящённому посетителю, и неаккуратно выровненная информация хуже воспринимается, плюс остаётся подсознательное ощущение лёгкого дискомфорта. За многие годы существования строгих основ типографики и дизайна текста (спасибо швейцарцам и Чихольду) люди привыкли, что понятие «ровный текст» эквивалентно словам «профессиональный» и «красивый».
Впечатление усугубляется примерно той же самой вакханалией, царящей в горизонтальных отступах. Которые, впрочем, уже выходят из области ре-лайаута, ибо межстрочные расстояния при многоколоночной вёрстке играют несколько иную роль и легко модифицируются, не требуя перевёрстывания всего сайта в целом.
А в случае вот этих неровных вертикалей вывод может быть только один: незамедлительно переделывать всю вёрстку. Придётся изрядно попотеть, приводя в порядок атрибуты в таблицах стилей.
Что следует сделать? Общая ширина макета — 1000 пикселей. Макет разбит на три равновеликие колонки (для возможности перетасовки колонок «на лету») шириной по 320 пикселей. Тогда межколоночный отступ составляет должен составить 10 пикселей: 10+320+10+320+10+320+10=1000.
Нам понадобится четыре вида вертикальных отступов:
- Расстояния между рамками двух колонок, межколоночные отступы. Сейчас они варьируются от 16 до 18 пикселей. Но судя по приведённым расчётам, они должны быть равными 10 точкам. Такими же сделаем отступы текста и графических объектов от рамок, а также от вертикальных границ тёмных плашек.
- Промежутки между фотографиями сделаем в 3 пикселя.
- Отступы в табличных ячейках, расстояния от фотографий до сопутствующего текста — 5 пикселей.
- В определённых случаях можем использовать отбивки в 30, 20 и 15 точек.
Примерно то же самое сделаем и с горизонтальными отступами.
Итак, глобальные изменения внесены, и макет перекомпонован должным образом. Следует обратить пристальное внимание на каждый блок по отдельности.
_________________________________________________________________________________
Верхняя часть шапки
По какой-то причине UEFA не стали размещать свой легко узнаваемый логотип в привычном верхнем левом углу. Очевидно, из-за небольшой высоты самой верхней тёмной плашки решено было ограничиться написанием имени домена.
В увеличенном масштабе хорошо видны артефакты излишнего сжатия JPEG и сильно размытое сглаживание у букв. Очищаем плашку от мусора и перебиваем надпись (шрифт Europe), выставив антиалиасинг на Crisp. Заодно чуть модифицируем кернинг, чтобы надпись выглядела более современно и аккуратно:
Следующий шаг может вызвать ворох споров, потому привожу его как опциональный и необязательный.
В правой части шапки имеется селектор языков. Европейские языки обозначены HTML-текстом (у меня он сглажен, см. цикл предыдущих статей об антиалиасинге), а азиатские — графикой. Причём, иероглифы сделаны пиксельными и существенно крупнее соседнего текста. Нынешние технологии позволяют использовать непосредственно эти символы в Unicode-кодировке прямо в HTML. В крайнем случае можно оставить и графику, но лучше всё же сгладить линии и сделать иероглифы того же размера, что и текст рядом. Кроме того, придётся немного почистить плашку от артефактов JPEG и сдвинуть весь блок правее на 11 пикселей, чтобы вместо нелепого отступа в 31 точку образовалось расстояние 20 пикселей (как у названия домена в левой части):
_________________________________________________________________________________
Меню
Как оказалось, верхняя часть меню (NEWS, PHOTOS и т.п.) сделана обычным HTML-текстом. Тогда как нижняя часть (UEFA CHAMPIONS LEAGUE и т.п.) — графика. Был использовать шрифт Helvetica кеглем 10,5 пунктов и трекингом в 80 единиц. Сохраним эту стилистику и применим к верхнему меню: пусть все пункты будут графическими для единообразия. Выставим вертикальный отступ слева в 20 пикселей. Подгоним и горизонтальные отступы таким образом, чтобы текст не прилипал к верхней границе. Кроме того, расставим вертикальные сепараторы между пунктами меню на расстояниях в 10 пикселей от каждой надписи. Получится вот такой вариант меню:
Далее следует какая-то нелепица. Кнопка Login в таком виде вполне логична, но почему точно в таком же стиле выполнено и поле поиска? Кроме всего прочего, оба этих элемента чуть смещены друг относительно друга по вертикали. Да и стиль выпуклости вышел каким-то неряшливым и старомодным. Исправляем:
_________________________________________________________________________________
Нижняя часть шапки
Здесь можно быо бы всё оставить как есть, но будет весьма любопытно попробовать немного модифицировать и эту часть.
Сначала подкорректируем отступы. Между нижней кромкой меню и этим блоком уменьшим отступ до 5 пикселей. Тёмно-синюю плашку отпустим от верхней кромки блока до 9 пикселей (не 10 потому, что боковые отступы мы считаем теперь вместе с однопиксельной границей, и белый контур вокруг тёмно-синей плашки должен быть равномерным).
Затем подровняем все текстовые блоки: надписи следует сделать более читаемыми, их необходимо отлепить от нижней и верхней кромок
плашки, увеличить интерлиньяж и разбить последний фрагмент на две строки для более сбалансированного вида.
Вот что получилось в итоге:
В левой части макета как раз мы видим логотип UEFA. Однако, он растеризован не очень хорошо, к тому же какой-то мелковатый. Подчищаем артефактную грязь на плашке, находим в поисковике подходящий вариант, инвертируем и вставляем в подобающем размере, не забывая про отступы:
_________________________________________________________________________________
Блок новостей
Ровняем все отступы согласно принятой схеме: между блоками отступ составляет 10 пикселей, а расстояние от фото до сопутствующего текста — 5 пикселей. Более ровно располагаем весь текст, подгоняя кегль и интерлиньяж. Новостной тикер и логотип рядом с ним поднимаем выше и выравниваем по направляющим. Ставим более мелкую и аккуратную иконку RSS. За счёт небольшого подъёма всех этих элементов и увеличения межстрочного интервала в тексте под главной новостью мы избавляемся от паразитной пустоты:
_________________________________________________________________________________
Блок фотогалереи
Для начала следует несколько доработать плашку с заголовком. Все другие подобные плашки гораздо темнее, потому белый текст на них читается куда лучше. А в данном случае (и на некоторых других аналогичных плашках) серый оказывается слишком бледным для того, чтобы заголовок хорошо воспринимался. Поэтому проведём небольшой ре-колор и добавим сочности этому элементу. Также следует увеличить высоту плашки на один пиксель (20 против 19 прежних).
Конечно, выравниваем отступы. Между фотографиями следовало бы поставить по 5 пикселей, но тогда они начинают выглядеть слишком отстранёнными друг от друга, к тому же не влезают в своих текущих размерах в колонку уже сформированной ширины. Потому делаем здесь расстояние в 3 пикселя. Смотрится более органично.
В нижней части блока имеется лёгкий серый градиент. Этот приём используется далеко не на всех блоках, и назначение его сомнительно. Но мы оставляем этот элемент, сделав его фоном для нижних ссылок. До коррекции градиент как бы образовывал рамку в нижней части блока, тогда как вся верхняя часть фотогалереии из-за отсутствия там серого цвета как раз и создавала впечатление безобразного выравнивания относительно плашки с заголовком. Устраняем эту проблему за счёт добавления тонкой серой рамки по всему периметру блока:
_________________________________________________________________________________
Набор текстовых блоков
Дальше в контентной части мы продолжаем делать подобные коррекции.
Для блока с календарём выделяем больше пустого пространства: здесь оно необходимо, чтобы этот небольшой фрагмент не казался слишком задавленным.
Все плашки (синие и серые) выравниваем и делаем высотой в 20 пикселей. Также выравниваем по направляющим все тексты и фотографии. В местах, где есть лёгкий серый градиент, добавляем тонкую рамку. Подбираем более оптимальный вариант интерлиньяжа для обычного текста и для списка ссылок. Делаем все подблочные ссылки (More news и т.п.) с одинаковым размером и типом выравнивания.
В общем, приводим всё к единому стилю.
Для пущей целостности всей области перемещаем блок с логотипами в левую колонку, что позволяет убрать пресловутые паразитные пустоты.
В нижнем блоке также подгоняем все элементы, экономя драгоценные пиксели.
В итоге вся контентная часть становится такой:
_________________________________________________________________________________
Боковая колонка
Первая же проблема обнаруживается при взгляде на заголовки. Все они набраны разными шрифтами, и это режет глаз.
Можно, конечно, оставить всё как есть, но шрифтов у нас и без того достаточно в макете (Europe, Helvetica, Verdana, Arial). На серых плашках оставляем HTML-ный шрифт Verdana, а все другие заголовки исправляем на Helvetica:
В розовой колонке ровняем отступы, смягчаем тёмные плашки под названиями матчей и добавляем светлые плашки под дату. Промежуточные заголовки (FINAL и т.п.) для контраста окрашиваем в красный цвет, ставим строчными и с разрядкой. Делаем кнопочку со стрелкой более чёткой и близкой по стилю к тем кнопкам, что мы поставили в шапке. В образовавшейся пустоте внизу колонки добавляем пару блоков, позаимствованных с внутренних страниц сайта UEFA.
После всех этих манипуляций колонка выглядит более естественно и строго:
Ну а самый низ сайта со множеством ссылок, пожалуй, трогать не стоит — там более-менее всё в порядке.
_________________________________________________________________________________
Заключение
Итак, в итоге получился несколько более сбалансированный макет, в котором все блоки стоят ровно и не генерируют ненужных дырок. Разумеется, все применённые методы вряд ли подходят именно для сайта UEFA, поскольку все смысловые области автоматически генерируются с помощью скриптов, и пока писалась эта статья, внешний вид главной страницы менялся несколько раз. Но на этом конкретном примере (который оказался подходящим с точки зрения обилия мелких недочётов) мы рассмотрели какими способами можно улучшать обычные страницы на подобных сайтах.
Мы добавили дополнительный блок, но при этом сэкономили 140 пикселей по высоте. Вот что получилось в сравнении с тем, что было (уменьшенный масштаб, полная версия ЗДЕСЬ):
В том же масштабе то, что было изначально:
Дизайн-аудит только начинает набирать обороты в Рунете, и хочется верить, что в ближайшем будущем появится больше толковых и грамотных специалистов в этой сфере. Надеюсь, что моя статья будет полезна как новичкам в области дизайна, так и тем, кто серьёзно занимается арт-директорством или дизайн-аудитом.
UPD: На сайте UEFA к этому времени произошли существенные изменения, и теперь многие блоки перекомпанованы более логично, хотя отступы по-прежнему оставляют желать лучшего. Зато исчезли паразитные пустоты, и теперь сайт выглядит несколько лучше (полномасштабный скетч ЗДЕСЬ):
