Ваш город Сиэтл
+7 4832590 366

Руководство по работе с web-дизайнером

2015-07-30


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

ВВОДНАЯ ЧАСТЬ

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

Ответственность заказчика:
1) Внятно и однозначно изложить суть идеи.
2) Самостоятельно разработать контент и название блоков.
3) Самостоятельно продумать дизайн страниц.
4) Разработать структурность страниц.
5) Продумать приоритет блоков на странице.
6) Обеспечить обратную связь.

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

ТЗ ДИЗАЙНЕРА

Идея

Идея. Кратко, в несколько предложений, необходимо описать суть вашей задачи. Не пытайтесь писать сложно и витиевато, главное, чтобы было понятно. Дополнительно постарайтесь ответить на следующие вопросы:
1) Кто целевая аудитория данного проекта/сайта?
2) С каких устройств будут пользоваться данным ресурсом/сайтом (мобильные устройства, ПК и прочие)?
3) Какие ощущения вы хотите вызвать у пользователей данного сайта/ресурса?

Пример: мы собираемся переработать дизайн имеющегося сайта, но с помощью новой концепции хотели бы расширить расчётную целевую аудиторию. Таким образом, дизайн должен быть концептуальным, чистым, без лишней информационно-графической наполняющей и отражать основные направления нашего бизнеса: направление № 1, направление № 2, направление № 3 и так далее. Идея сайта заключается в возможности скомбинировать функционал продающего сайта, информационного портала на смежные темы (типа блога) и информационного раздела для наших текущих клиентов. Мы хотим охватить как можно большую целевую аудиторию от 13 до 65 лет как мужчин, так и женщин. Дизайн должен позволять работать пользователям с сайтом на мобильных устройствах.

Структурные модели страниц

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

1) Заказчик подробно, структурно и графически проработал структурную схему сайта.
2) У дизайнера не возникает вопросов, связанных с приоритетностью тех или иных блоков.
3) У дизайнера не возникает вопросов, связанных с территориальным размещением необходимых блоков.
4) Дизайнер имеет возможность более глубоко проникнуться идеей проекта, что отсечёт большую массу вопросов, связанных с дизайном.

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

Инструменты создания блок-схемы

Инструментов для создания структурных таблиц сайта вполне достаточно: различные графические редакторы, MS Office, OpenOffice, LibreOffice. Несколько ссылок на ресурсы для создания структурных таблиц сайта:
1) moqups.com
2) ninjamock.com

Палитра цветов

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


Любую графическую информацию лучше передавать графически, иначе это превращается в «Угадай мелодию», причём мелодию вам показывают на пальцах.
Как вариант поиска идеи реализации цветовой схемы — поиск в Интернете фотографии, которая, по мнению заказчика, отвечает его требованиям.
Замечательный ресурс для решения данной задачи: www.color.romanuke.com.

Примеры сайтов сходных под дизайнерской идеи

Не лишним будет собрать подборку сайтов, дизайн которых заказчик хотел бы посоветовать в качестве вдохновения дизайнеру с описанием ключевых моментов дизайна. Аналогичным образом дело обстоит с подшивкой «плохих» сайтов.
Пример: ebay.com — нравится простота конструкции дизайна, создаёт впечатление, что покупать здесь действительно легко и безопасно, не нравится перегруженность текстово-графической информацией и её неструктурированность; mail.ru — нравится лёгкостью доступа к основным элементам функционала сайта, не нравится реклама на сайте и плохая структурированность информационных блоков: глаза разбегаются и вкупе ничего не понятно; intel.ru — не нравится система навигации на сайте: сложно найти нужную информацию.

 

ВНЕСЕНИЕ ПОПРАВОК

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

ДИЗАЙН ГОТОВ - ЧТО ДАЛЬШЕ?

Реализованный дизайн проекта/сайта — старт всей основной работы. Данным макетом предстоит пользоваться верстальщику, программисту, другому дизайнеру, заказчику. Стоит предусмотреть этот фактор и выполнить макет дизайна сайта/проекта в удобной форме для всех.
Вы сможете получить удобный в работе реализованный макет дизайна проекта/сайта, опираясь на следующие требования:
1) Макет должен быть выполнен в оригинальном разрешении/размере.
2) Все элементы макета должны быть легко доступны, дабы предоставить возможность легко и просто вытащить нужный элемент в отдельности.
3) Помимо макета сайта заказчик имеет право требовать от дизайнера набор шрифтов, которыми он пользовался.
4) Сверьте итоговой дизайн с утверждённой структурной моделью проекта/сайта.
5) Убедитесь в наличии нескольких графических изображений активных элементов дизайна, если таковые необходимы.

  

СОВЕТЫ НА ПОСЛЕДОК

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


А теперь доля юмора! Короткое тематическое видео, наполненное символизмом:

 

 

 

 

 

 

Лучший способ сказать автору «СПАСИБО» - рассказать друзьям или поделиться ссылкой!