Создание дизайна сайта
Кратко создание дизайна сайта можно описать так:
- Техзадание на сайт, включая дизайн, в том числе – требования к браузерам, под которые будет создаваться решение;
- Скетчи, наброски, обсуждение концепции, согласование общего вида будущего сайта;
- Создание дизайнерского решения;
- Верстка созданного решения – шаблон сайта;
- Применение шаблона к программной части, отладка.
Договоримся о терминологии
Дизайн сайта – наверное, наиболее распространенный термин и для отрасли по «сайтостроению», и для профессии, и собственно для самого процесса создания того или иного веб-ресурса.
Термин «дизайн» на языке оригинала (английском) – это не только «внешний вид» – то, что мы обычно понимаем под этим словом, но еще и процесс, работа. И вообще слово design может служить глаголом в значении «создавать», «творить», «облекать в форму». Однако, в повседневной жизни за термином «дизайн сайта» прочно закрепился несколько иной смысл – более практичный и утилитарный. А именно – графическое оформление для сайта.
Здесь сразу необходимо сказать пару слов о разнице понятий «дизайн» и «шаблон» сайта. Опять таки, устоявшийся термин «дизайн сайта», как правило, в сознании неспециалистов означает все, что связано с внешностью – т.е. люди разделают «начинку», программную часть и внешнюю часть, оформление. А ведь это не совсем верно, некоторые части оформления имеют прямое отношение к управляющей системе и создаются далеко не дизайнерами. И еще – есть такой термин как «шаблон сайта», который и вовсе поначалу пугает большинство клиентов.
В данной статье мы постараемся сделать непонятное понятным и четко разделить дизайн сайта как процесс и как графическое решение, после чего объяснить: что такое шаблон сайта и чем же он отличается от общего понятия «дизайн». А еще – рассказать, как мы создаем графические решения для сайтов, иллюстрации, открытки и какие методы и техники мы для этого используем. Итак, дизайн сайта – от простого к сложному.
Дизайн сайта как процесс: работа, графические решения, юзабилити
Это деятельность по созданию дизайнерского решения (оформления) будущего сайта. Часто совмещается с дизайном интерфейса (юзабилити).
В идеале, над графическим решением должно работать несколько людей, как со стороны студии, так и со стороны заказчика. Замысел, идея, концепт дизайна возникает, как правило, у заказчика; в идеале он должен быть согласован и неоднократно обсужден внутри компании заказчика и с арт-директором или руководителем веб-студии, которой поручен проект.
После этого могут создаваться скетчи, в идеале это должен делать человек с художественным образованием, который способен быстро, буквально на встрече рисовать «в карандаше» наброски будущего интерфейса сайта и отдельных его элементов. Техническую работу по созданию сайта – собственно отрисовку образов, элементов интерфейса, создание коллажей, и, в конечном итоге – сборку готовой картинки, производит веб-дизайнер.
Веб-дизайнер не является разработчиком, он ничего не знает о программировании, об интеграции с платежными системами, это – творческая личность. Эту личность надо постоянно мотивировать, спорить с ней и часто – даже уговаривать сделать то, что нужно для бизнеса.
Впрочем, иногда мнение дизайнера действительно несет в себе много полезного, так как он профессионально владеет программами по обработке графики; он сделал, как правило, достаточное количество работ (словом – владеет инструментарием) и может подсказать много полезного для оформления будущего сайта и как можно реализовать требуемый уровень функциональности и стиль оформления.
Промежуточный и конечный результаты работы дизайнера
Промежуточный результат дизайнерской работы – это согласованное и утвержденное графическое решение для будущего сайта. Что это такое? Дизайн (графическое решение) – это набор нескольких графических файлов в высоком разрешении или в векторном формате, в котором все графические элементы (иконки, картинки, логотипы и т.п.) сохранены в виде отдельных объектов или слоев. Что это значит для заказчика?
Это означает, что создание дизайна сайта – это подготовка своеобразного полуфабриката для дальнейшей работы. Полуфабриката, который с одной стороны можно показать руководителю со словами «вот так будет выглядеть наш сайт»; с другой стороны информацию из этого полуфабриката можно использовать при создании фирменного стиля компании. Поэтому мы рекомендуем всем нашим клиентам сохранять подготовленные для них дизайны – они могут пригодиться в будущем.
И третье, что надо понимать относительно дизайна сайта, как графического решения – это то, что непосредственно дизайн на сайт «натянуть» нельзя. В том смысле, что для использования дизайна необходимо произвести несколько манипуляций, которые делает уже не дизайнер, а человек совсем другой специальности – верстальщик.
Как web-дизайн превращается в шаблон сайта
Итак, мы разобрались, что же такое дизайн сайта в смысле деятельности и в смысле промежуточного результата работы над оформлением веб-сайта. Теперь необходимо еще сказать пару слов о шаблоне сайта. После того, как создан и утвержден готовый «дизайн» (см. выше), его превращают в шаблон, или верстают. Как правило, эту работу делает специально обученный человек, хорошо знакомый с веб-версткой. Иногда функции верстальщика выполняет веб-программист, иногда эти роли разведены.
По большей части от опытности и набора знаний того человека, который верстает шаблон и зависит конечный результат работ, т.е. то, как сайт будет выглядет на экране разных пользователей. При верстке важно учитывать особенности распространенных веб-браузеров и обеспечить корректное отображение (в идеале – идентичное) и четкую работу всех программных компонентов.
К слову, особые требования заказчика о корректной верстке для архаичных браузеров типа Internet Explorer 6.0 стоит обговаривать отдельно, при заключении договора и подготовке техзадания. Некоторые из решений под старые браузеры просто невозможно применить, иные приходится делать с большими трудозатратами.
Опытные студии всегда проговаривают подобные требования к верстке, чтобы исключить недопонимание с клиентом при приемке результатов работ. К слову, для простых сайтов или при скромных бюджетах часто используются готовые шаблоны, которые можно найти массово на специальных ресурсах в сети или приобрести за небольшую плату. Минус таких решений – это их неуникальность, так же, как правило, слабая адаптированность к русскому языке и типографике.
Кроме того, часто шаблоны создаются на основе других шаблонных решений – фильтров, наборов графики («темплейтов»), кистей Photoshop и т.п. В общем – для нормального коммерческого веб-проекта создание дизайна на основе готового шаблона – не очень хорошая идея.