Как спроектировать современный сайт

Вин Чои

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

Глава 3. Процесс

Дальнейший материал этой книги

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

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

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

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

Этапы

Давайте перечислим основные этапы поиска решения на основе сетки:

1. Проведение исследований и выявление существующих ограничений.

2. Техническое задание.

3. Подготовительный дизайн:

• карандашные эскизы;

• блоки, колонки, предварительные расчеты;

• эскизы страниц.

4. Компоненты.

5. Создание (код).

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

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

Исследования и ограничения

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

может быть решена? Как будет использоваться решение? И даже: Почему решение необходимо?

И найти на них ответы.

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

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

Для решения почти каждой дизайнерской задачи необходим этап тщательного изучения, предшествующий поиску решения. Без четкого понимания поставленной задачи любая дизайнерская работа – включая создание сетки – делается впустую. Гораздо продуктивнее начать проект с исследования, чем переходить непосредственно к дизайну.

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

Какие разновидности ограничений должен учитывать дизайнер? Их можно разделить на три основные категории.

 Технические ограничения определяют дизайнерское решение. К ним относятся разрешение экрана

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

 Коммерческие ограничения определяют задачу, которую необходимо решить. Чего мы должны добиться в результате? Должен ли наш проект увеличить количество посетителей, продолжительность их нахождения на страницах сайта, количество переходов по рекламным объявлениям либо количества покупок, сделанных на сайте, – эти цели являются наиболее важными при поиске любого дизайнерского решения. Дизайнер должен обязательно учитывать задачи брендинга, позиционирования и маркетинга. Наконец, он обязан оценить затраты на поддержание своего проекта в дальнейшем: кто будет работать с созданной им сеткой и какие навыки для этого необходимы.

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

Естественно, дизайнеры будут жаловаться на неудобство ограничений, с которыми они должны мириться. Если бы эти ограничения отсутствовали, решение было бы гораздо проще найти или оно было бы более изящным. Однако не все так ужасно: эти ограничения могут усложнить задачу, но они также могут упростить создание дизайна. Сетки являются комплексным решением и становятся эффективнее, если строятся на основе одного-двух обязательных ограничений, которые нельзя изменить просто так в процессе работы. Дополнительные ограничения могут непосредственно влиять на пропорции сетки, размеры блоков, колонок и областей. Может показаться, что такие ограничения препятствуют свободе выбора дизайнера, но дизайнер при этом часто становится еще более изобретательным. Чем проще проблема, чем меньше ограничений, тем менее вероятно, что дизайнер интуитивно придет к логическому решению, отличающему успешный дизайн. Выполнение обязательных требований может помочь дизайнеру в работе. Соблюдение определенных пропорций, технические ограничения, рекламный блок или какой-либо иной фактор, который дизайнер должен учитывать, а не менять условия под свои потребности, – все это может оказаться весьма полезным.