Все, что я делал прошлый месяц — это искал, натыкался, отмечал, делал закладки и анализировал, находясь в поисках пятнадцати образцов прекрасной веб-типографии. Я выбрал именно их, потому что они очень умело используют шрифты. Некоторые образцы копируют типографию печати, в то время как другие — комбинируют веб-технологии, остроумный CSS и восхитительный HTML, в результате чего их страницы не только доставляют эстетическое удовольствие, но их также удобно читать, они имеют дружественный интерфейс и легкую навигацию.

1. A List Apart — для тех, кто делает сайты

2. Shaun Inman — профессиональный дизайнер и программист

3. FontShop — мастерская шрифтов

4. Jesús Rodríguez Velasco — блог профессора университета Калифорнии в Беркли

5. BearSkinRug Shop — профессиональный иллюстратор Кевин Корнелл (Kevin Cornell)

6. Design View — специалист в области технологий дизайна Энди Ратледж (Andy Rutledge)

7. Rikcat Industries — директор по дизайну Рик Кэтлоу (Rik Catlow)

8. Quipsologies — новости и креативные заметки

9. Design Snips — выставка веб-дизайна

10. Red Interactive Agency — веб-маркетинг и разработка

11. The Big Noob — сделано новичками и для новичков (noob — новичок)

12. Design Can Change — дизайнеры против изменения климата

13. Process Type Foundry — они делают гарнитуры

14. Finch- интерактивное агентство и графический дизайн

15. SR28 — веб-дизайнер и иллюстратор Саймон Рейнольдс (Simon Reynolds)

Миф о том, что зона выше сгиба – лучше

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

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

Прежде всего, определение: слово «сгиб» имеет много разных значений, даже в области дизайна. Самое распространенное применение этого термина относится к газетной верстке. Из-за больших физических размеров широкополосной газеты, ее сгибают. Все «крупные» материалы номера помещаются на первую страницу газеты, потому что это лучшее место. Для того, чтобы посмотреть другие материалы номера, читателям приходится переворачивать (или разворачивать) газету, поэтому существует вероятность, что кто-то что-то пропустит. В мире веб-дизайна термин «сгиб» означает нижнюю границу контента, отображаемого в браузере. Для просмотра материала, который расположен за этой линией, пользователям придется прибегнуть к прокрутке. Эту линию также называют «линией прокрутки».

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

Было время, когда вертикальная прокрутка запрещалась в компании AOL. Статьи, списки и иной контент, который приходилось бы скроллировать, размещался в полях бегущего текста или в оконных списках, пользование которыми не составляло труда для наших пользователей. Наши страницы, основанные на наших собственных технологиях, разрабатывались так, чтобы помещаться в клиентском приложении, и одним из самых строгих указаний было указание делать так, чтобы рабочая поверхность самого приложения не прокручивалась. Страницы с контентом держались в центре интерфейса приложения и отодвигались от полосы прокрутки так далеко, чтобы пользователь не замечал, если полоса появлялась. Даже если страницы обрезалась, как диктуют сегодняшние лучшие методы, это было настолько необычно для наших пользователей, что они думали, что приложение «сломалось». Нам приходилась прививать немыслимую дисциплину во всех отделах организации, занимающихся производством этих страниц — отделы по созданию контента, дизайна и разработки, для обеспечения того, чтобы контент обязательно помещался на этих маленьких страницах.

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

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

Но, даже несмотря на более крупные размеры наших новых страниц, нам все равно приходилось размещать длинные списки над сгибом — списки, которые невозможно было вместить. Всего было слишком много для такого ограниченного вертикального пространства.
Например, чтобы реклама считалась ценной и эффективной, ее определенная часть должна отображаться выше сгиба 1024×768. Брендинг должен быть выше сгиба. Навигация должна быть выше сгиба — или, по крайней мере, начало списка пунктов навигации. (Если список хорошо организован и правильно отображается, то его просмотр должен был поспособствовать тому, чтобы пользователи переходили к нижней части страницы.) Крупный контент (основной контент сайта) должен начинаться над сгибом. Некоторые ребята из области маркетинга считают, что фактическое количество информационных единиц и звеньев над сгибом является стратегическим дифференциатором, имеющим большое значение для достижения успеха в бизнесе. Учитывая ограниченность вертикальной «жилой площади», желание впихнуть туда множество рекламных блоков и функциональные возможности, описанные выше, открытый дизайн становился невозможным.
А почему? Потому, что люди думают, что прокруткой никто не пользуется. Джейкоб Нильсен написал о возрастающем принятии и понимании прокрутки еще в 1997 г., однако, спустя 10 лет, мы все равно слышим истории о том, что пользователи не прокручивают.
Тут мы постепенно переходим к исследованию, разоблачающему этот миф. И прекрасным примером этого нам послужит отчет, доступный на ClickTale.com. В этом отчете исследователи при помощи собственного ПО измерили пользовательскую активность на 120 000 страницах. В результате они получили информацию о вертикальной высоте страниц и о точках, до которых пользователи их прокручивают. Выяснилось, что к скроллингу прибегают 76% пользователей, и бОльшая их часть прокручивает страницу до самого низа, независимо от высоты экрана. Даже самые длинные страницы прокручиваются до самого дна. Единственное, о чем в исследовании не упоминается, это сколько времени пользователи проводят внизу, поэтому кто-то может возразить, что они просто прокручивали, не уделяя никакого внимания тем вещам, что там расположены.
Здесь начинается самое интересное

Я просмотрела отчеты по некоторым сайтам AOL и выяснила, что объекты, расположенные внизу, широко используются. Пожалуй, лучшим примером послужит сайт, посвященный сплетням о знаменитостях TMZ.com. Объектом, получившим наибольшее количество кликов, оказалась ссылка, расположенная в самом низу главной страницы, и ведущая на следующую страницу. Заметьте, что длина главной страницы TMZ.com зачастую достигает 15 000 пикселей, что подтверждает результаты исследования ClickTale — отношение к прокрутке не зависит от высоты экрана. Пользователи так увлекались контентом сайта, что следовали до самого конца страницы, где их ждала ссылка на следующую страницу.
Может быть, сайт о сплетнях про знаменитости и не самый лучший пример. Все-таки, не все из нас занимаются дизайном такого соблазнительного контента, как проступки красивых людей. Поэтому, давайте взглянем на что-нибудь поскучнее.
Например, AOL News Daily Pulse. Внизу страницы вы увидите опросы со счетчиками проголосовавших, каждый из которых превышает 300 000. Это значит, что эти ребята не только прокрутили более 2 000 пикселей до конца страницы, но и потратили время, чтобы проголосовать. Сотни тысяч людей, принявших участие в опросах внизу страницы — это можно считать успехом.

Вы можете возразить, что все эти страницы выполнены в формате блога. Наверное, блоги более способствуют прокрутке, чем другие типы страниц. Меня это не убеждает, так как блог относится к сайтам, на которых новейший контент размещается сверху, но это может быть правдой. Однако, просматривая страницы, выполненные не в формате блога, мы наблюдаем такую же тенденцию. На главной странице AOL Money & Finance пользователи находят и используют модули последних котировок и портфелей ценных бумаг, даже когда они располагаются намного ниже сгиба 1024×768.
Другой пример: на сайте AOL Money & Finance есть фотогалерея под названием Top Tax Tips. Несмотря на то, что ее длина составляет почти 2 500 пикселей, она получает от 200 тыс. до 400 тыс. просмотров в зависимости от положения страницы Taxes.
Очевидно, что это уже становится менее важным — где оказывается объект по отношению к сгибу. Пользователи пользуются прокруткой, чтобы найти то, что они хотят, и находят это. Все дело в самом контенте — если он того стОит, то пользователи пойдут за ним куда угодно.

Когда сгиб имеет значение?

Основное правило для всех сайтов заключается в том, что пользователи должны понимать о чем сайт, только из той информации, которая располагается над сгибом. Если им придется прокручивать страницу, чтобы только узнать о чем сайт, то успех маловероятен.
Функционал, имеющий важное значение для стратегии вашего бизнеса, должен оставаться (или, как минимум, начинаться) над сгибом. Например, если успех вашего дела зависит от того, найдут ли пользователи определенный объект (например кинотеатры), то виджет, позволяющий совершить эту операцию, конечно же должен располагаться над сгибом.
Высота экрана и сгиб имеют значение в приложениях, особенно в «скорострельных», где пользователи вводят переменные и изменяют режимы отображения информации. Ввод и вывод должны располагаться достаточно близко друг от друга. Например, котировки акций: пользователь может пожелать вывести сразу четыре или пять котировок подряд, поэтому крайне важно, чтобы поле ввода и основанная информация по котировкам оставались над сгибом при каждом вводе. Представьте, как это неудобно, если страницу придется прокручивать, чтобы найти поле для ввода каждой желаемой котировки.
Где сгиб?

Это, наверное, основная проблема. Метод дизайна, при котором применяется обрезающие изображения или текст, сработает, только если вам известно местонахождение сгиба. О том, как место сгиба нерегулярно, написано много. И опять очень четкую картину представляет сайт ClickTale. Во время того же исследования прокруток страниц фиксировалась информация и относительно их сгибов на основании используемого разрешения экрана и браузера. Это очень печально, но единая точка наивысшей концентрации места расположения сгиба (около 600 пикселей) соответствует лишь менее чем 10% всех пользователей. Эта величина соответствует экранному разрешению 1024×768. Браузеры забирают различную долю вертикальной площади под свои интерфейсы (панели инструментов, адресные строки, и т.д.). Каждый браузер слегка отличается размером, поэтому не у всех пользователей с разрешением 1024×768 сгиб появится в одном и том же месте. Исследование показало, что самыми распространенными точками сгиба являются 570, 590 и 600 пикселей — видимо в зависимости от браузера, работающего при разрешении 1024×768. Но общий разбег местоположений сгиба варьируется настолько, что даже эти три точки составляют менее 26% всех посещений. Что это значит? Если вы выберете определенное место для сгиба при разработке дизайна, то в лучшем случае сгиб появится там, где должен, лишь у 10% посетителей.
Так что же нам делать?

Прекратите волноваться по поводу сгиба. Не топите свои лучшие методы, но прекратите впихивать все выше определенной точки. Этим вы никому не поможете. Сделайте свой дизайн открытым и дайте пользователям визуальное пространство, чтобы они могли «дышать» свободно. Если ваш контент интересен, то они дочитают до конца.
Рекламодатели в настоящее время хотят, чтобы их реклама размещалась выше сгиба, и так будет продолжаться еще какое-то время, пока не начнется отлив. Но уже совершенно ясно, что остальная часть страницы так же ценна — а может даже ценнее — для контекстной рекламы. Что касается меня, то я бы, забыв о верхушке, разместила свою рекламу в самом низу страницы TMZ..
Лучший урок, который можно вынести из всего этого — если вы применяете визуальные подсказки (обрезающие изображения и текст) и ваш контент интересен, пользователи будут прокручивать страницу, чтобы посмотреть все. Следующим великим рубежом веб-дизайна должна стать нижняя область страницы. Вы сделали свою работу, а пользователь прокрутил страницу до самого конца, потому что был увлечен контентом. А что дальше? Разве футер это все что мы можем ему предложить? Если мы уже знаем, что они там, почему бы не дать им что-либо еще? Можно разместить что-нибудь контекстное, или естественный переход к другой части сайта, или что-нибудь интерактивное (опрос) — все это они бы неплохо встретили, а главное — использовали.

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

Однако, классические решения могут быть скучными. Что действительно привлекает пользователей, так это креативный подход. Поэтому дизайнерам приходится рисковать, применяя необычные и инновационные решения. Как бы то ни было, между стандартами и креативом лежит огромное поле для экспериментов, их мы и рассмотрим. Мы соберем и исследуем новые подходы к дизайну страниц специально для вас.

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

(Внимание! Много картинок.)

1. Динамические, интерактивные, стильные

Видимо, Лео Бернетт (Leo Burnett) предпочитает работать карандашами, по крайней мере, на стадии эскиза. На сайте LeoBurnett.ca, основанного на технологии flash, карандаш используется в качестве курсора. Элементы навигации выполнены в 3D. Красиво, интерактивно, удобно.

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

Flash-навигация на Yammat.com держится на эластичных лентах. Кликните на ссылку, и вся страница приходит в движение. Фоновое изображение меняется при каждом обновлении страницы.

Интерактивное вертикальное меню навигации. На сайте SectionSeven.com разделы можно перелистывать как книжные страницы.

Не только пользователи могут играть сайтами, но и сайты могут играть пользователями. Навигационное меню сайта Flaboy.com перехватывает курсор и предлагает точки перехода — автоматически. Прекрасная задумка, прекрасная реализация.

Навигационное меню может быть вычурным. И сайт MHQ.nl это подтверждает.

2. Смотрим сайты по-новому

А как насчет просмотра сайта без необходимости кликать на ссылки? Интересный подход. Дизайнеры экспериментируют.

3. Расширенный дизайн интерфейса

Джейсон Хикнер (Jason Hickner) предлагает скользящую навигацию с отличной типографией и продуманным динамическим взаимодействием.

4. Другая перспектива

Необычную перспективу предлагает сайт Дэвора Ванейжки (Davor Vaneijk). Пользователи видят навигационное меню, основанное на иконках, под острым углом.

Аналогичный подход в исполнении Мэтью Бэдимона (Mathieu Badimon).

Лэнс Ваймэн (Lance Wyman) представляет свою работу в форме спирали. Последние произведения располагаются на внешней стороне. Навигационное меню предоставляет более детальный выбор. Реализовано на flash.

5. Визуальная коммуникация

Стартовая страница проекта «One Laptop per Child» (каждому ребенку по лэптопу) — не просто заставка. Изображения ведут на различные разделы сайта. Меню навигации выполнено с применением иконок. Нестандартная, но интересная концепция.

6. Сила визуальных элементов

Сайт 73dpi.net выражает свою мысль изображениями, а не словами. Работы представлены друг за другом без описаний и комментариев.

Basism показывает свои работы в хорошо структурированной сетке. Описания скрыты, но появляются при наведении курсора. Решение, основанное на flash.

7. Огромные облака тегов

Search the Beat — музыкальный поисковый движок, экспериментирует с огромными облаками тегов. На стартовой странице размещено около 150 кб текста.

К разговору о тегах: агентство Wieden+Kennedy пользуется ими для представления своих клиентов согласно их «весу» и авторитету. Очевидно, клиентов много. Для перемещения по названиям можно воспользоваться шкалой. Основано на flash, и имеет свои недостатки в области юзабилити. Интересная концепция не обязательно должна быть вычурной.

8. Динамическое взаимодействие и искусство

Для показа своих работ Vault49 применяет flash. Страница делится на 6 частей, перемещаясь по которым, пользователь видит результаты, как фоновые изображения. Несмотря на интересную идею, на сайте присутствуют раздражающие выскакивающие окна. Firefox их блокирует.

Cappen.com достигает удобства при помощи иллюстраций, произведений искусства и продуманной структуры.

9. Интерактивно и удобно

Магазин на одной странице — Shopcomposition.com предлагает решение в стиле «первый и последний». Все товары можно найти и посмотреть прямо с главной страницы.

10. Типография в действии

Очень необычно, но примечательно. Пользователи даже могут поиграть с полосками текста, если те связаны, что не всегда так. Не сказать, что информативно, но вполне необычно. Есть возможности для развития, особенно если задействовать flash.

Просто образец хорошего решения на основе типографии. Для тех, кто ценит красоту текста. Недостаток: при отключении стиля меню навигации просто исчезает.

Похожую идею, но на flash, реализовал Нейл Дюрден (Neil Duerden)

11. Эффект маркера

Возьмем, к примеру, сайт Энди Ратледжа (Andy Rutledge). Он представляет длинные отрывки текста, как заголовки. Иногда для привлекательного дизайна достаточно лишь трех цветов. Эффект маркера в действии.

Подобный эффект применяется и на сайте Mostardesign. Все основывается на фоновом изображении и выделенном контенте.

Иоган МаКейб (Eoghan Mccabe) удивляет своих посетителей интересным эффектом, проявляющимся при наведении курсора. Если курсор не наведен на текст, страница выглядит достаточно скучно. Важное подкрашивается зеленым маркером. Размер шрифта определенно слишком велик.

12. Экспериментируйте

Шон Инман (Shaun Inman) экспериментирует с цветами и насыщенностью, демонстрируя, таким образом, новизну (и, вероятно, относительную важность) контента. Каждый день года связан с определенным цветом. Зима начинается с синего, меняющегося на зеленый весной. Лето переходит в желтый, а осень — в красно-оранжевый. Со временем цвета затемняются.

На сайте AListApart.com каждый новый выпуск имеет свою цветовую схему. Представьте: «Красный и зеленый на Рождество. А когда нам, наконец, напишет Якоб Нильсен, мы подчеркнем ссылки синим».

13. Дайте пользователям возможность исследовать

Rinzen предлагает стартовую страницу для исследователей. Навигационное меню состоит из десятков цветных пикселей, каждый из которых ведет в определенный раздел. Всплывающие подсказки вверху страницы укажут, куда ведет пиксель.

На сайте Mstudio элементы навигации также придется исследовать. Разделы представлены как трехмерные страницы.

Catalogtree, вероятно, предлагает самое странное меню навигации из когда-либо созданных. Небольшая анимация слева от алфавита (там набирается текст) предлагает пользователям ввести кодовые символы и цифры. После подтверждения ввода клавишей «Enter» загружается новая страница.

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

Стартовая страница сайта Post Typography представляет собой заставку, по которой можно получить представление об основной теме сайта — типографии.

Внутренние страницы похожи на собрание кнопок. Да, это и есть ссылки.

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

14. Минимализм и внимание к мелким деталям

Небольшой, но с огромным вниманием к мельчайшим деталям — The Tangerine Tree. На самом деле, можно было сделать и покрупнее.

15. Неординарные решения

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

Хотите, верьте, хотите — нет, но это — блог. Страница не только выглядит как блокнот Windows, но и так же работает. Меню навигации выпадает сверху.

Полный список шестнадцатеричных кодов цветов для HTML

Стандарт HTML 3.2 определяет 16 цветов, которые можно указывать по названию в документах HTML и CSS. Но не волнуйтесь, в HTML можно использовать больше, чем 16 цветов… Вам лишь надо знать шестнадцатеричный код цвета, а мы сделали таблицу кодов большинства необходимых цветов на одной странице.