Урок №1

Введение в профессию
Конспект

Этапы создания сайтов 1

Погружение 1
Эскиз сайта 2
Прототип сайта 2
Концепция дизайна 3
Создание дизайн-макета 3
Техническая реализация 3
Выводы 4

Этапы создания сайтов

Над разработкой и запуском сайта работают несколько человек. Давайте разберемся,
из каких этапов состоит процесс создания сайта и какие специалисты принимают в
этом участие.

Погружение
На этом этапе работу выполняет веб-дизайнер (или project-менеджер, если
разработкой сайта занимается веб-студия). Он общается с заказчиком и пытается
узнать у него как можно больше информации о будущем проекте:
- цель создания сайта
- целевую аудиторию заказчика
- продукт/компанию или услугу, которая будет описываться на сайте и т.д.
На этом этапе дизайнер должен понять, какого типа сайт необходимо создавать, а
также должен запросить у заказчика как можно больше контента для проекта
(фотографии продукта/команды, тексты для сайта, заголовки и т.д.). Чем больше
информации вы сможете собрать от заказчика, тем проще вам будет работать над
макетом и понимать, для чего он вообще создается.
Список основных вопросов, которые стоит задавать заказчику, собирается в бриф –
это техническое задание на разработку сайта.

Есть несколько вариантов первого общения с заказчиком:

1. Личная встреча. На такой встрече всегда проще обсуждать тонкости и основные
вопросы. При личной встрече советуем вам всегда иметь под рукой записную книжку и
ноутбук, чтобы вы могли показать заказчику на реальных примерах сайты, которые
вам импонируют по дизайну.
2. Скайп-встреча. Также очень хороший вариант диалога, ведь вы можете наладить
контакт и сразу задать все необходимые вам вопросы.
3. Переписка по почте/скайпу/социальным сетям. Этим способом лучше пользоваться,
когда проект уже обсужден, и вам необходимо решать уже небольшие подзадачи. Хотя
с другой стороны, переписка - этот тот способ, который фиксирует все диалоги “на
бумаге” и вы можете отследить и вспомнить все, что вам сказал заказчик.

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

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

Прототип – это отличный инструмент согласования работы с заказчиков; это дизайн

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

Чаще всего прототипы делают в специализированных ресурсах, которые называются

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

Прототип показывается заказчику для того, чтобы утвердить будущую структуру

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

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

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

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

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

Техническая реализация
После создания макета и его утверждения дизайнер передает макет заказчику или
верстальщику для дальнейшей разработки.
Верстальщик, веб-программист (front-end и back-end) – специалист, выполняющий
верстку сайтов с использованием знаний html, css, языка Java Script и т.д. Это тот
человек, который превращает статичный макет, созданный дизайнером, в
работающий сайт, размещенный на определенном доменном имени.

Если вы работаете со своим верстальщиком, то постарайтесь принимать участие в

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

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