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

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

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

Этапы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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