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

• Название: Как спроектировать современный сайт
• Автор: Чои Вин
• Жанр: Интернет
• Год: 2011
• ISBN: 978-5-459-00579-0

Проектирование интернет-сайтов на базе сеток – бесценный инструмент для организации веб-страниц и создания привлекательных веб-интерфейсов, помогающий разрабатывать по-настоящему современные, сложные и вместе с тем изящные интернет-проекты. Эта книга позволит вам в совершенстве овладеть искусством проектирования сайтов с помощью сетки. Здесь изложены основы теории сеток и главные принципы работы, также вы найдете множество упражнений, посвященных практической реализации этих идей. Книга ориентирована на опытного читателя, уже обладающего навыками использования технологий HTML, CSS и JavaScript для создания веб-страниц. Если вы профессионально занимаетесь веб-дизайном, руководите разработкой интернет-проектов и интересуетесь вопросами юзабилити и дизайна веб-интерфейсов, эта книга – для вас.

---

Изменение стиля общения

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

В свой книге «Glut: Mastering Information Through the Ages» дизайнер Алекс Райт рассматривает возникновение письменности как ранней формы метода фиксации простых договорных соглашений, ранее скреплявшихся только устной договоренностью двоих людей. Таким образом, письменность благодаря своему объективному характеру выступает в качестве альтернативы человеческому общению, носящему гораздо более субъективный характер. С появлением письменности возникли законы и власть. Именно поэтому данный метод коммуникации стал преобладать над менее регламентированной, но более аргументативной природой простых бесед.

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

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

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

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

Более важной здесь является мысль о том, что ни один из подходов никогда не вытеснял другой: с приходом письменности и «бумажных» договоров устные соглашения никуда не исчезли, письмо просто дополнило их. По своей природе письменный договор основывается на традиции устных соглашений. Народные предания и легенды продвигали идеи Римской империи, дух ее власти и законы в неменьшей степени, чем печатное слово. Книгопечатание стало успешным благодаря воспроизведению устной речи. Персональный компьютер в течение многих лет использовал возможности больших ЭВМ благодаря обширным сетям, но сама идея строго охраняемых компьютерных серверов по-прежнему актуальна.

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

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

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

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

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

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

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

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

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

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

Этапы

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

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

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

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

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

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

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

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

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

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