Дизайн сайта: профессиональный подход

Дуглас Бауман (Douglas Bowman) - известный американский дизайнер. Среди его заказчиков - большие фирмы, в том числе Google, для которой он занимался оформлением портала blogger.com. В этой статье Дуглас рассказывает как протекала его работа над дизайном для проекта CSS Zen Garden. Несмотря на то, что процесс описан на примере конкретного сайта, статья будет полезна при создании проектов любой сложности.

Dmitry Nikolaev

Без фокусов

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

Как я уже рассказывал ранее, в соответствующей теме о моей работе для CSS Zen Garden, я подумал, что будет интересно рассказать, какие шаги были мною предприняты при проектировании дизайна Golden Mean. Процесс разработки дизайна для Zen Garden не было настоящим полномасштабным проектом, и вряд ли подходит для разработки дизайна по контракту с заказчиком. Но после того как большая половина работы была уже позади, я заметил, что те же самые шаги используются и в больших проектах. Итак, мои шаги по созданию проекта для Zen Garden можно разбить на следующие этапы:

Исследование

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

Для проектирования Zen Garden я начал свой путь с изучения содержания (текста) самой страницы и поиска типовых решений. Я распределил разделы страницы в различные блоки и указал важность каждого из них. Я также провел время думая о целях проекта, наряду с идеями и концепциями Дэйв Ши (Dave Shea). Цель этого проекта заключается не в том ,чтобы показать какие-либо хитрости использования CSS. Вместо этого основная цель - показать красоту и гибкость при проектировании на CSS, осознать все его возможности как средства, для создания хорошо разработанных, эстетических, доступных и хорошо структурированных страниц.

Анализ

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

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

Идеи

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

Эскизы

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

Типографика

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

В конце концов, я остановился на шрифте Morpheus из-за его красивых отображений символов. Уникальность M и N, готический стиль A и U, дополнения K и R… В дополнение ко всему заголовки получаются в средневековом стиле, в то же время отличный от Sans-serif.

Изображения

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

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

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

Композиция

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


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

Осуществление замыслов

Я уже рассказывал о некоторых вопросах, с которыми сталкивался при строительстве CSS для Zen Garden. (см. записи для более подробной информации). Для начала я спроектировал CSS на более высоком уровне, с упором на форму всей структуры и крупных регионов. Затем я достаточно подробно описывал каждый элемент на странице по порядку: сверху - вниз.

После того как я создал CSS и проверил как выглядит дизайн в различных браузерах, внешне проект изменился, но не слишком сильно. Некоторые детали пришлось принести в жертву, некоторые позволили что-то улучшить. Я расширил исходное изображение фона слева и справа, т.к. я не смог расположить заголовок так как было задумано вначале. Информация о вертикальном выравнивании была заполнена только после того как были размещены все блоки на странице. Все изменения касаемые CSS и дизайна стали возможны потому что я явлюсь не только автором таблицы стилей, но и автором всего дизайна. Я могу где-то что-то изменить, прижать, согнуть по мере необходимости. Это единство мысли на заключительной стадии процесса является весомым основанием к тому, чтобы ответственным за разработку CSS/HTML был сам дизайнер.

И в заключение

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

Оригинал статьи: http://stopdesign.com/articles/design_process/