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

Разработать основные шаблоны страниц для онлайн-журнала, целевая аудитория – дизайнеры. Сайт объединяет статьи и функции социального общения, как это следует из моделей (см. с. 57–60). Шаблоны должны соответствовать минимальному разрешению экрана 1024 х 768 пикселов с активной областью 960 х 650 пикселов. На странице должен располагаться стандартный рекламный блок размером 336 х 280 пикселов. Готовый проект должен соответствовать продуманному и спокойному образу бренда Designery.us; логотип должен находиться на видном месте. Необходимо использовать красный, черный и белый цвета.

Дизайн всех страниц начинается с карандашных набросков

Создание наброска

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

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

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

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

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

Создание сетки

Создание колоночной сетки (юниты)

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

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

Разделение страницы на три равные колонки не подходит для нашего рекламного блока

Четыре колонки также не подходят, потому что рекламный блок займет слишком много места в ширину