Ирина Никулина – Настольная книга веб-дизайнера. Практический курс по веб-дизайну и проектированию сайтов (страница 12)

3. Веб-дизайн страниц

4. Дизайн мобильной версии

5. Подготовка дизайна сайта к вёрстке

6. Вёрстка и реализация сайта, наполнение контентом

7. Запуск сайта

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

Создание сайта – на самом деле очень трудоёмкий процесс, в котором принимают участие не только веб-дизайнеры и программисты, но и другие специалисты. Над сайтом трудятся: интернет-маркетологи, веб-дизайнеры, программисты, верстальщики, тестировщики, копирайтеры, контент-менеджеры и другие специалисты.

Этапы разработки сайта:

1. Консультация со специалистом. Покупка домена.

2. Составление технического задания на сайт.

3. Изучение темы.

4. Анализ сайтов конкурентов.

5. Создание базы образцов сайтов (ссылки, скриншоты и дизайн целиком).

6. Составление структуры сайта (внутренней и внешней).

7. Прототип сайта.

8. Веб-дизайн.

9. Подготовка дизайна сайта к вёрстке.

10. Вёрстка сайта на конструкторе или передача веб-дизайна программисту.

11. Наполнение сайта контентом.

12. Проверка сайта на ошибки, запуск сайта.

1. Предварительные этапы

Консультация

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

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

Сбор семантики для SEO

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

Приобретение доменного имени

Что нужно от заказчика в первую очередь, еще до разработки прототипа и сайта:

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

Разработчик сайта проверяет незанятые (свободные) доменные имена на сайте хостинга, например, webnames.ru. Из нескольких свободных имен клиент выбирает то, что более всего ему нравится, после этого разработчик сайта оформляет на него домен, в анкете домена прописав контактные данные своего клиента.

Оформление доменного имени производится на персону заказчика (физлицо) или на фирму клиента (юрлицо). Ни в коем случае не следует разработчику оформлять домен на своё лицо и потом вымогать у клиента деньги за его продление. Это в целом унижает профессию «Разработчик сайтов».

Рис.29. Проверка домена перед регистрацией

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

Проверить владельца домена можно на общедоступном сервисе проверки доменных имён whois.ru. См. рис. 31.

Рис. 30. Анкета владельца домена

Любой человек может самостоятельно проверить, кому принадлежит домен, где зарегистрирован, сервер сайта, кто регистратор, когда заканчивается срок его регистрации. Это общедоступные сведения. Иногда можно скрыть фамилию владельца, если это частное лицо.

Рис.31. Проверка сведений о домене

Таким образом, заказчик всегда может посмотреть, кто владеет доменом его фирмы.

Составление технического задания (брифа)

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

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

После заполнения технического задания идет обсуждение деталей будущего сайта с заказчиком. Когда все вопросы решены (в том числе и по оплате работы), – следует подписание договора с двух сторон: со стороны разработчика сайта и его заказчика. Техническое задание является неотъемлемой частью договора.

Оплата идет в соответствии с договором: это может быть предварительная полная оплата, частичная предоплата и пост-оплата по факту создания сайта. Чаще всего используется вариант оплаты: 50% до начала работ, 50% – после.

Изучение темы и анализ сайтов конкурентов

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

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

Составление структуры сайта (внутренней и внешней)

На основании технического задания и базы образцов создается внешняя структура сайта (список страниц и ссылки) и внутренняя структура первой страницы (список модулей сайта). Структура может быть создана в виде документа MS Word или схемы, созданной в растровом редакторе, и представлена клиенту на утверждение.

Рис.32. Структура сайта учебного центра.

2. Прототип

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

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

Правила и особенности создания прототипа сайта вы узнаете в следующих главах.

Рис.33. Прототип сайта учебного центра

3. Веб-дизайн страниц сайта

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

Рис.34. Сайт, созданный без веб-дизайна

Веб-дизайн (от англ. web design) – отрасль веб-разработки и разновидность дизайна, в задачи которой входит проектирование пользовательских веб-интерфейсов для сайтов или веб-приложений.

Веб-дизайнеры делают следующие необходимые для сайта работы:

– проектируют логическую структуру веб-страниц;

– продумывают наиболее удобные решения подачи информации;

– занимаются художественным оформлением веб-проекта.

Конечным результатом веб-дизайна является макет сайта, созданный в растровом редакторе (как правило, в формате PSD), представляющий собой будущий внешний вид страниц сайта. Файл является многослойным, где почти каждая деталь дизайна – это отдельный слой, за счёт чего может легко выполняться доработка, замена, перекомпоновка и другие задачи.

4. Дизайн мобильной версии

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