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

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

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

---

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Эскизы

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

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

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

Терминология

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

В некоторых изданиях используются термины, отсутствующие в других (например, области, поля). Давайте перечислим несколько наиболее общих терминов, которые помогут нам облегчить практическую работу с сетками.

Юнит

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

Колонка

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

16 блоков

8 колонок

3 блока

2 области

Блок

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

Базовая сетка основана на невидимых линиях, на которых расположены буквы

Область

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

Базовая сетка

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