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

• Страницы сообщения (например, сообщения об ошибке).

• Страницы содержания блога.

• Страницы настройки параметров.

• Страницы календаря.

• Шаблона для сообщений электронной почты.

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

Начало работы

Понимание требований

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

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

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

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

С. 57–60: Наш проект основан на четырех моделях страниц: статья, информационная страница, страница личных данных пользователя и главная (домашняя) страница

Область просмотра

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

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

Итак, первое ограничение – наш дизайн должен помещаться на экране с разрешением 1024 х 768.

Естественно, размер 1024 х 768 пикселов не обязательно означает, что в вашем распоряжении будет вся эта область. Доступное место уменьшается за счет элементов пользовательского интерфейса, например, меню, поэтому в большинстве браузеров область просмотра оказывается меньше общей площади экрана примерно на 20 %. Кроме того, необходимо учитывать и небольшие поля слева и справа, поэтому доступная область просмотра становится еще меньше.

1024 х 768 – это стандартное разрешение экрана. Оно будет одним из ограничений нашего проекта

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

Учитывая поля на левой и правой сторонах браузера, получаем доступную «активную» область экрана примерно 960 х 650 пикселов

Рекламный блок

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

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

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