КАК МЫ СОЗДАЁМ ДИЗАЙН САЙТОВ

За 7 лет работы в результате эволюции мы приблизились к наиболее эффективному процессу создания сайтов. Без ложной скромности можем сказать, что делаем свою работу хорошо. У нас получаются сайты, которые не просто радуют глаз, а действительно приносят своим владельцам новых клиентов. Залог успеха любого производственного процесса - слаженный коллектив узконаправленных специалистов и правильное распределение задач между ними (об этом мы уже писали в статье “Как делаются сайты”).

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

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

1. Анализ всех нюансов бизнеса заказчика, конкурентов и потребностей его целевой аудитории;
2. Разработка прототипов страниц сайта и их утверждение;
3. Создание дизайна сайта на основе прототипа.

Давайте опишем эти этапы поподробнее.

1. Анализ и составление структуры сайта

Когда заказчик приходит для обсуждения будущего сайта, у него есть собственное вѝдение проекта. Иногда это приблизительный образ сайта с некоторыми предпочтениями к дизайну. Такие заказчики могут показать пример сайта и попросить сделать “в том же духе”. А иногда, полностью возлагают всю работу по оформлению сайта на наше усмотрение. Редко, когда заказчик способен в подробностях расписать всю структуру сайта и дать полноценные материалы для графического оформления. И это нормально. Направить и сориентировать клиента - это наша задача.

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

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

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

Знание о том, какие именно данные будут размещены на сайте, поможет составить наиболее оптимальное меню сайта и структурную модель всех разделов и подразделов. Подробности этой работы заслуживают отдельной статьи.

2. Создание прототипа сайта

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

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

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

Прототипы мы делаем в оффлайн-редакторе Axure RP, который с помощью удобного инструментария позволяет создавать интерактивные концепты страниц сайта с возможностью навигации.

3. Создание дизайна сайта

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

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

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

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

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

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

По итогам этой работы, дизайнер создаёт полноценный дизайн-макет, готовый для презентации заказчику.

P.S. тот прототип сайта руками нашего дизайнера превратился вот в такой дизайн-макет, который полностью устроил нашего заказчика :). Вскоре сайт будет готов к приёму посетителей.