6 основных этапов разработки сайта

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

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

Обычно рабочий процесс над проектом представляется следующим образом:

• Изучение вопроса;
• Проектирование, разработка концепции;
• Разработка дизайна;
• Создание сайта;
• Запуск сайта;
• Поддержка сайта;

В качестве источника вдохновения была использована эта статья. Давайте рассмотрим каждый этап подробнее.

Изучение вопроса

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

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

Общее проектирование, макетирование

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

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

Разработка дизайна сайта

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

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

Обязательно утвердите готовый дизайн с заказчиком перед тем перейдете к следующему этапу. Потом возвращаться назад и переделывать будет сложнее (более трудоемко). Обязательно нужно обратить внимания заказчика на этот нюанс — представьте сами, что вы выполнили все работы по кодингу или установке cms, а тут клиент вдруг передумал насчет дизайна. Такое, конечно, бывает, но следует свести риски к минимуму.

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

На этом этапе нам нужно «картинку» (детализированный дизайн) превратить в живой сайт. Этот этап у разных веб-мастеров существенно варьируется. Все зависит от того как, на основе чего и для какой CMS (если она предусмотрена) вы пишите код. У опытных мастеров обычно уже есть заготовленные «болванки» HTML/CSS, поэтому после «нарезки» нужных элементов в Photoshop, процесс разметки может занять не так уж и много времени. Не стоит при этом забывать о красивой и правильной HTML верстке.

После написания, отладки, тестирования в различных браузерах, валидации и исправления ошибок, можно переходить к следующему этапу. Кстати, после этого этапа лично я также предоставляю результат работы заказчику для утверждения, если сайт разрабатывается на cms typo3 где необходимо подключать (адаптировать) созданный HTML в админке. Если говорить о вордпресс, то там, скорее всего, лучше сразу создавать шаблон без «предварительной верстки».

Запуск сайта

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

Поддержка сайта

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

P.S. Постовой. Приглашаем посетить проект АЙК Обнинск — информационный портал о жизни и новостях Обнинска.
Элитная и качественная косметика и парфюмерия в интернет магазине MakeUp — бесплатная доставка по Украине.