10 августа 2009

Секреты хорошего веб-дизайна

Статьи

Статью перевела и составила Окорокова Валерия.

Учиться делать красивый веб-дизайн мы будем сегодня на примере сайта A List Apart. И речь пойдёт не об использовании графики и т.п., а об общем построении сайта – о его структуре, о пустом пространстве и конечно о типографике.

Так сложилось, что веб-типографика несколько отличается от привычной нам полиграфической. Все-таки Интернет представляет собой несколько иную среду, со своими сильными и слабыми сторонами. Попытка точно воспроизвести здесь типографику печатных изданий является довольно бессмысленным мероприятием. Уже отпечатанную страницу мы не в состоянии изменить , мы не можем контролировать ни размер шрифта, ни формат самого листа. В этом плане on-line пользователь имеет больше власти, больше влияния Он может изменить размер страницы (окна браузера), и даже изменять размер шрифта по умолчанию. Плюс ко всему следует упомянуть, что и разные браузеры обладают разными возможностями работы с веб-страницами, а также и мониторы бываю разных размеров и с разным разрешением экрана. И, в итоге, мы понимаем, что к обычной печатной странице и веб-странице применимы различные требования. Однако, несмотря на эти различия, критерии оценки удачной типографики распространяются на обе эти среды.

Ну что ж, давайте перейдем непосредственно к сайту A List Apart.

Главная страница
alistapart1
Страница со статьёй
alistapart2
Этот сайт не просто замечательный ресурс, с хорошо написанными статьями, но он еще и имеет вид журнала (ну или классической газеты) – как в своем дизайне, так и в своей типографике (он даже имеет свой номер выпуска!).

Пустое пространство

Итак, первый плюс этого сайта – “Белое пространство” или так называемый «Воздух». Несмотря на то, что страницы заполнены огромным количеством информации, они не выглядят переполненными. Но так что же такое «воздух»?
«Воздух» или «Белое пространство» – это пространство между некими элементами композиции. В частности, пространство между основными, крупными элементами – «макро воздух»

alistapart5
И соответственно, «микро воздух» – пустоты между деталями: пунктами списков, надписями, изображениями или между словами и буквами.
alistapart6
Зачастую материалы на странице располагаются очень плотно, что может вызвать большие трудности при чтении. Но иногда трудно добавить «воздух», если его появление ничем не мотивировано. Приходится сталкиваться с необходимостью перехода на более легкий для чтения шрифт вкупе с микро воздухом между строками и буквами. Можно немного уменьшить кегль и увеличил интерлиньяж. Все эти изменения на микро уровне добавляют воздух в материалы страницы. Эта работы очень тонкая, но в итоге увеличивается читабельность, упрощается общее восприятие блоков, а количество информации остается прежним.

Хорошая типография как хлеб, которым восхищаются, оценивают, и режут на части перед употреблением. – Robert Bringhurst

Глядя на данный сайт, мы чувствуем, что все здесь находится на своем месте, он смотрится гармонично. Шрифт здесь используется в качестве средства иерархии, как способ дифференцировать элементы на странице. Логотип расположен в наиболее выгодной позиции, вверху слева, а главное меню, находящееся в верхней, отличаются от других элементов по размеру ,визуальному весу и стилю.

Кернинг (расстояние между буквами в слове)

alistapart3
Всем “шапкам” нередко идет на пользу небольшой кернинг, как в приведенном выше примере. В данной надписи используемый кернинг равен 0.33em (эквивалентно 3px).
Кернинг также активно используется в названиях и подзаголовках. Но есть небольшое предостережение: никогда не стоит применять кернинг в нижнем регистре, и никогда, никогда, никогда не использовать отрицательный кернинг. (Вообще всё это спорно, но шрифтовики люди с принципами.)

Сетка

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

alistapart4
Обратите внимание, каким образом черный значок (вверху слева) поддерживается сеткой, и на то, как верхняя часть буквы “А” в логотипе попадает в линию разделения даты и основного текста. Эти конечно мелкие детали, но именно последовательное внимание к деталям и обеспечивает хороший дизайн в целом.

Список литературы:
I love Typography – 15 Excellent Examples of Web Typography P.2
A List Apart – Whitespace

Интересное на эту тему:
Гид по веб-типографике
15 примеров отличной веб-типографики
Правила удобочитаемости

Знаете, что ещё добавить к этой статье?

Рубрики: ,

[ Написать комментарий ]

Написать комментарий