Когда пора «фотошопить»?

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

Where design really fits
http://www.wpdfd.com/issues/87/where_design_really_fits/

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

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

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


Неадекватный дизайн

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

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

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

Процесс дизайна

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

Планирование

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

Построение содержания

    После планирования, нужно собрать всю информацию. Это не значит, что надо каждое слово и факт проверять, а просто знать, где и какая информация будет расположена.

Дизайн

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

Разработка

    После утверждения макета, его надо превратить в XHTML/CSS/PHP/MySQL и во все то, что потребуется сайту. Обычно разработка это как таковое кодирование сайта со всеми этими сложными внутренними штуками.

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

    Таким образом, следовать вышеописанной схеме важно в профессиональном веб-дизайне. Давайте рассмотри все подробнее.


Шаг 1: планирование

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

Какую вы преследуете цель, создавая сайт?

    Вы что-то продаете? Что-то хотите рассказать? В чем-то убедить? Быть на связи?

Кто ваши посетители?

    Или другими словами: кто ваша целевая аудитория? Можно сказать конкретно «заказчики публикаций обзоров ресторанов» или размыто – «студенты».

Что должны делать ваши посетители?

    Обычно, если хотят, чтобы на сайт шли пользователи, то от последних что-то требуется. Например, «купить продукт», «подписаться на рассылку», или «научиться делать хорошие сайты». Это важный вопрос, будьте уверены, что знаете четкий ответ на него.

Почему они должны это сделать?

    Взгляните на сайт с точки зрения пользователя. Почему сайт должен быть ему интересен? Что в нем интересного для пользователя?

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

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

  • цвета
  • разметку (layout)
  • шрифты
  • размер текста

    Цвета? Разметка? Шрифты? Ну вот! Это уже похоже на веб-дизайн! Если вы знаете, что ваш будущий сайт будет рассказывать автотуристам-новичкам о безопасном поведении в лесу, то разметка сайта должна гарантировать читаемый и понятный текст. Поскольку содержание сайта будет представлено в основном текстом и иллюстрациями, скорее всего вы отдадите тексту много места и будете использовать шрифт, который хорошо читается на экране и хорошо форматируется с помощью CSS (Arial можно назвать стандартом для таких целей). Сайт у вас про дикую природу, так что цвета, возможно, будут напоминать дерево глубиной зеленого; это будут песочные и земляные оттенки, темно-коричневые цвета.

    Но не порите горячку и не спешите запускать Фотошоп уже сейчас. Еще не все приготовлено для обрисовки и раскраски. Далее надо собрать и обработать все содержание вашего будущего сайта.


Шаг 2: Построение содержания

    В интернете гуляет одно выражение, которым часто бросаются дизайнеры: «Содержание это всё» («content is king»). Это верно для многих сайтов в Сети. Все сайты хотят быть посещаемыми и одна из основных дорог для посетителей на эти сайты ведет через поисковые запросы. Поисковые машины часто перепроверяют свои базы данных с целью поиска новой, свежей, понятной и оригинальной информации. Сайты с хорошим содержанием награждаются поисковиками высоким рейтингом, а значит, на них чаще ходят.

    Получается, что построение содержания сайта это важный шаг в веб-дизайне. Ответы, которые Вы получили на первом этапе «Планирование», должны помочь вам понять, построением какой информации вам надо заняться. Если ваша цель продать музыку и бытовую технику, и ваша целевая аудитория состоит из студентов, которые хотят приобрести iPod или цифровой фотоаппарат, то нужно написать беззаботный текст, понятный каждому, без «воды», мысленно стоит придерживаться определенного «стиля жизни», который подойдет для подобных продаж.

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

    В конечном счёте, самое главное в этом шаге — записать все ваши идеи на бумаге или в компьютере. Это не значит, что надо писать рекламные тексты для музыки или готовые медицинские статьи. Для начала, просто вкратце оформите все свои мысли. Просто будьте уверены, что записали всё.

    Собрав все содержание сайта в одном месте, к которому всегда имеете доступ, займитесь разработкой карты сайта (sitemap). Это последнее на данном этапе перед запуском Фотошопа. Можно, конечно, нарисовать все на компьютере, как я сделал ниже, но лучше – карандашом на бумаге.

    Давайте посмотрим на карту интернет-магазина музыки и электронной бытовой техники, о котором мы говорили раньше.

    Мы видим, что «Главная страница» соединена с четырьмя другими: «Точки продаж», «Музыка», «Техника» и «Связь». Разделы «Музыка» и «Техника» соединены далее с другими подкатегориями. На странице «Музыка» можно выбрать жанр, а страница «Техника» позволяет оценить ассортимент электроприборов.

    При разработке карты сайта, помните про правило 3-ёх кликов. Все просто: 3 клика это максимум что должен сделать посетитель, чтобы достичь любой цели. В нашем примере, если посетитель хочет узнать расположение точек продаж, то ему нужно сделать всего один клик на главной странице сайта. Если гость хочет просмотреть рок-композиции, то до них ему всего два клика: «Музыка» на главной и «Рок» на следующей.

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

    И вот, когда мы все спланировали выстроили схему содержания сайта, давайте рисовать!


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

    Многие дизайнеры пропускают первые два шага и перепрыгивают сразу сюда. Если вы оказались тут проделав кучу операций, описанных выше, то вы на верном пути!

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

    Вам понадобится сетка разметки для промежуточных страниц. Промежуточные это те, которые просто перебрасывают пользователя к каким-то более важным вещам. В примере выше, промежуточными будут называться страницы «Музыка» и «Техника». Страница «Музыка» не должна быть большой и будет содержать только ссылки на жанры (Кантри, Поп, Классика и Рок). То же и со страницей «Техника»: она будет маленькая, на ней может быть немного текста и ссылки на более важные вещи, такие как DVD-плееры, Телевизоры, MP3-плееры, и Фото-камеры. Сетки этих страниц не должны сильно отличаться от всего сайта и, в то же время, им следует быть достаточно простыми, чтобы пользователь проводил там минимум времени.

    Возможно то, что вы сейчас прочитаете вас не сильно обрадует, но все же: Фотошоп запускать еще рано. Вместо него возьмите лист бумаги и накидайте разметку сайта. Это хорошая практика: набросать несколько разных сеток, чтобы увидеть как они, хотя бы примерно, подходят или не подходят вашему будущему сайту. Заниматься этим же в Фотошопе не экономично во времени, так как не факт, что вы нарисуете то, что надо. Гораздо легче прикинуть все на бумаге, чтобы понять в каком направлении стоит двигаться.

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

    Вы знаете, что Apple — та самая компания, которая разработала iPhone, iPod, iPad, iMac и Macbook’и — использует процесс дизайна, который они называют «10-3-1»? Это правда. В 2008 году, когда я принимал участие в South By Southwest Interactive Festival, я посетил там презентацию Michael Lopp’а, старшего управляющего техническими разработками Apple, на которой он чуть-чуть обмолвился об этом в комнате, битком набитой дизайнерами.

    Вот как это работает. Дизайнеры Apple должны следовать правилу «10-3-1», что означает, что им дается полная творческая свобода и результатом работы должны стать 10 добротных дизайнов чего-либо. Это может быть и сайт, и какой-то продукт или все что угодно. После этого, им предстоит пройти через боль и страдания исключения 7-и дизайнов, оставляя 3 действительно самых удачных и продолжать работать с ними.

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

    Результаты последних лет Apple говорят о том, что эта стратегия очень подходит для них, а их продукты несут успех. Если Вы тоже хотите создавать успешные дизайны, то сейчас — в третьем этапе «Дизайн» — не жалейте времени продумать все до конца, используя знания полученные из этапа «Планирование» и схему работы сайта из этапа «Построение содержания».

    Будьте уверены в том, что сделали все, что хотели. Когда все будет готово — обратного пути уже нет.


Шаг 4: программная разработка

    Когда дизайн утвержден (вами самим или клиентом), можно приступать к его разработке. В зависимости от требований, разработка может включать глубокую работу на PHP и MySQL (backend programming), или все можно реализовать простым HTML и CSS. В любом случае это и есть кодирование.

    Некоторые дизайнеры имеют поверхностные знания об XHTML и CSS и они обычно имеют напарника-программиста или нанимают его. Есть и те, кто владеет навыками разработки всего цикла: разработки дизайна и кодирования, но таких — меньшинство.

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


Как видите …

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

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

перевод: Рехимкулов Ринат

Реклама

Когда пора «фотошопить»?: 2 комментария

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

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s