Питер Флэшнер (Peter Flaschner), основатель и креатив-директор The Blog Studio (theblogstudio.com), написал замечательную статью, которая будет полезна всем начинающим блоггерам. Он написал, а я прочитал и перевожу специально для вас. Нет предела совершенству, особенно если нас за руку к этому самому совершенству ведут такие люди. Далее рассказ будет вестись от первого лица.

Дизайн это, пожалуй, главное условие (после текстового наполнения, конечно) для успешного блога. Когда вы начнете зарабатывать деньги с его помощью, хороший веб-дизайн должен принести огромную пользу. Странно, но многие считают, что это не так. Мне кажется, это происходит из-за того, что кто-то первоначально не так понял значения слова "дизайн". Типичное мнение: "Сайт может быть некрасивым, главное - его наполнение". Но ведь и хороший дизайн никогда никому еще не мешал! Согласитесь, блог с интересным контентом и хорошим дизайном привлечет намного больше посетителей, чем просто с интересными текстами.

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

Так, заканчиваем размазывать кашу по тарелке, давайте "дизайнерить" наш блог. Вот, что нам понадобится: карандаш, бумага и графический редактор (что-нибудь типа Photoshop, Illustrator, Freehand или Gimp).

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

Итак, мы будем создавать дизайн для вымышленного блоггера. Предположим, он (назовем его Лешей) будет словоблудить о часах.

Шаг №1: определяем цель блога (Чего вы пытаетесь достичь с его помощью? Как это сделать?)

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

Шаг №2: определяем свою аудиторию (Какова она? Откуда появляется?)

Аудитория блога собирается из двух групп людей: отъявленных часовых маньяков, которые читают Лешины заметки в поисках новинок в мире часов и прочих событиях тусовки; и обычных людей, которые просто хотят купить часы и зашли на сайт узнать мнение экспертов по разным моделям.

Шаг №3: определяем специфические особенности (Какие функции необходимы сайту, чтобы быстрее достичь цели?)

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

Также необходимо повысить "запоминаемость" сайта для посетителей. Для этого создаём список "Любимых сообщений", а внизу каждого сообщения "полезные ссылки".

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

Шаг №4: рисуем черновик (Черновой набросок, чтобы поэкспериментировать с расположением на странице различных элементов)

Наконец-то начинается самое интересное! Например, я использую для этого замечательную программу OmniGraffle (omnigroup.com/applications/omnigraffle), возрадуйтесь - она работает только на Mac'ах. Как только во мне просыпается сильное желание вставить в дизайн как можно больше графических элементов, я стараюсь держаться подальше от графического редактора. Надо подавлять в себе такие желания. Конечно, блог должен быть привлекательным, но достигаться это должно малой кровью.

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

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

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

1. Движение, действие.
2. Размер.
3. Изображение.
4. Цвет.
5. Стиль текста (шрифт и его размер).
6. Расположение.

Если мы решили, ОТКУДА можем начать читать, то можем и решить, ЧТО будем читать, всего лишь подробнее присмотревшись к странице. Обращаем внимание на группы объектов, их соответствие тематике - чтобы определить, что же важнее прочитать первым.

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

Шаг №5: делайте архив настроения (коллекции изображений, цветов, шрифтов - всего, что вам нравится)

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

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

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

Шаг №6: визуальный дизайн

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

Самая большая ошибка начинающих дизайнеров - не оставлять достаточно места вокруг элементов дизайна. Это называется "белым местом" ("White space"). Но оно не обязательно должно быть белым, просто должно быть свободным от других элементов.

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

Питер ФЛЭШНЕР

Перевод Алексея ХАЛЕЦКОГО,
[email protected]