При обучении профессии "веб-дизайнер" будущих дизайнеров учат пользоваться инструментами (в основном, Photoshop), не больше. Вы знаете чем, но не знаешь как... Как Вы поступите? Посмотрите как это делают другие. Так обычно и происходит. Дизайнер находит симпатичный макет, возможно не один, и перерисовывает его.
"Ну и что в этом страшного?", спросите Вы. Ну конечно ничего, если это будет работать. Насколько эти красивые макеты будут похожи на оригинал - это уже зависит от опыта дизайнера. Некоторые макеты просто невозможно нормально сверстать, не прибегая к костылям (часто такие макеты встречаются среди очень молодых дизайнеров, или графических дизайнеров, которые пришли из смежных областей, например, из полиграфии). А эти "костыли" потом вставляют палки в колеса верстальщиков, программистов, специалистов по продвижению и пр. Вы мне не верите? Спросите любого из вышеперечисленных мною специалистов :)
Ну а еще есть пользователи... И давайте будем откровенными, вы сайт не для себя делаете, а для них. Они должны зайти в ваш магазин, блог, на ваш корпоративный портал и найти там все, что им нужно... быстро и не прибегая к усилиям. И самое парадоксальное, это то, что страшненький (или сайт вообще с отсутствием дизайна), но очень хорошо продуманный, приносит больше прибыли, чем очень красивый, но не удобный.
И тут в игру вступает удобство интерфейса (юзабилити) и User Experience (UX, опыт взаимодействия пользователя).
При создании дизайна сайта я не перерисовываю уже существующий шаблон, а делаю его полностью с нуля с учетом задач, которые стоят перед ресурсом клиента.
Этапы работы:
-
Карта сайта
Создание карты существующего сайта для оценки ситуации и объема работ или создание карты со слов клиента, если сайта еще не существует.
-
Анализ ниши и конкурентов
Анализ ниши и анализ сайтов конкурентов в поисковиках Google и Yandex по региону заказчика. Я смотрю как другие преподносят товар/услуги, какие маркетинговые инструменты используют, вношу изменения в карту сайта, при необходимости. При разработке сайта
я погружаюсь в вашу специфику насколько это необходимо для работы. Читаю справочные статьи, форумы, чтобы понять что сейчас интересует Ваших клиентов.
-
Портрет целевой аудитории
Создание портрета ЦА или портрета потенциального покупателя/заказчика Ваших товаров и услуг. Эта информация помогает лучше сформировать понимание какую информацию в какой последовательности необходимо подавать.
-
Прототипирование
Прототип — это схематичное изображение блоков и элементов сайта (вот тут у нас баннер, а тут кнопочка, а тут видео). Он не является финишным (картинки, видео отображаются просто иконками, а текст может быть заменен просто «рыбой»), но он помогает определиться
с визуальным рядом. Вы сможете более точно определить взаимодействие ваших услуг/товаров в интерфейсе, понять как поданная информация воспринимается. Это экономичный способ понимания каким должен в итоге получиться сайт. Этот способ помогает сосредоточиться
на главном и не упустить важное за красивыми картинками. Также этот этап помогает сэкономить время и деньги на пересогласованиях макетов. После качественной работы с прототипами меняются только цвета и картинки, не возникает ситуации, что дизайнер
несколько раз делает «вообще не то». На этом этапе закладываются все маркетинговые задачи и видна их реализация.
-
Финишная (чистовая) отрисовка макета/UI-дизайн (user interface design).
И вот только сейчас мы дошли до UI (user interface). Это уже высокодетализированное изображение Вашего сайта с небольшим интерактивом, если требуется (3-7 страниц в зависимости от проекта). Дизайн отрисовывается для ноутбука (максимальная ширина 1366 px), планшета (768 px), телефона (320px). Создание мобильной версии происходит не для всех страниц сайта, а только для главной, для витрины и карточки товара (если работа идет над интернет-магазином), либо только для главной. По согласованию с клиентом (за дополнительную плату) проработать мобильную версию возможно для любой страницы. Получившийся дизайн будет максимально похож на готовый сайт, т. к. он разрабатывается с учетом технологий верстки. По желанию заказчика
предоставляются макеты в формате Adobe Illustrator или сайт верстается непосредственно мной.
-
Верстка.
Преобразование макета (картинки) сайта в работающий код веб-страницы HTML и CSS. После этого сайт можно интегрировать в CMS или публиковать как есть (интеграция производится программистом).