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

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

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

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

И только после того, как создана мобильная версия дизайна сайта – его передают для дальнейшей работы программистам.

Рис.35. Дизайн модуля «Оплата» в мобильной версии

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

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

В любом случае, при передаче веб-дизайна в разработку сайта, необходимо соблюсти некоторые правила:

– Удалить из файла с веб-дизайном всё лишние (скрытые и пустые слои, черновые слои и т.д.).

– Сохранить дизайн сайта в формате PSD (родной формат программы Фотошоп), с разрешением 72 dpi, в цветовой модели (режиме цвета) RGB.

– Сделать предварительную «нарезку» сайта на фрагменты. Для этого в программе Adobe Photoshop есть инструмент, который называется «Раскройка».

Рис.36. Нарезка веб-дизайна на фрагменты

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

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

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

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

Заполнение сайта материалами

После того, как верстальщик и программист сделали сайт, наступает этап заполнения контента, то есть, заливки на сайт товаров из каталога, текста, статей, фотографий, видеороликов, файлов для скачивания и т.д.

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

На этом же этапе на сайт размещаются СЕО-фразы (ключевые слова), соответствующие статьям на сайте.

Ключевые слова размещаются на сайте в специальных тегах:

– В тегах заголовка.

– В тегах мета описания.

– Мета-теги ключевых слов.

– В подзаголовках.

– В содержание страницы.

– В тексте ссылки.

– В Breadcrumbs. «Хлебные крошки» (breadcrumbs) – это элемент навигации на сайте или в программе. Он отображает маршрут от стартового элемента до места пребывания пользователя и позволяет легко вернуться к предыдущим разделам.

– В атрибутах (тэгах) ALT и TITLE.

– В именах встроенных файлов.

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

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

И вот, когда всё готово и проверено, – происходит запуск сайта. До этого сайт может работать на временном (рабочем) домене, открытом только для тех, кто работает над сайтом и для заказчика.

Во время запуска сайта он становится доступен для всех по основному доменному имени клиента.

После запуска сайта может осуществиться ещё одна проверка правильности ссылок и наличия ошибок. В течение нескольких недель идет «докрутка» сайта, исправление неточностей и ошибок.

8. Продвижение сайта

Следующим этапом после запуска бывает продвижение сайта.

Самым быстрым, но не всегда эффективным способом является контекстная реклама, настроенная и запущенная через ЯндексДирект.

Более эффективным, но медленным и затратным способом является продвижение сайта в топ поисковых систем через СЕО-статьи на сайте.

Продвижением сайта веб-дизайнер не занимается, это не входит в его обязанности.

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

Глава 5. Техническое задание на разработку сайта

Люди, работающие в сфере услуг, должны иметь право подраться с одним клиентом в день.

Мудрая мысль из сети Интернет

В этой главе:

1. Определение

2. Польза технического задания

3. Разделы технического задания

4. Ошибки техзадания

1. Определение

Техническое задание – это документ, в котором зафиксированы требования заказчика к сайту, в том числе: имя домена, тариф хостинга, фирменные цвета, стиль дизайна, структура сайта, список модулей на первой странице, примеры понравившихся сайтов, функционал сайта, особенности контента и т.д.

Никогда не беритесь делать сайт без технического задания!

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

2. Польза технического задания (ТЗ)

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

Польза техзадания для разработчика сайта:

1. Быстрое понимание поставленных задач. По техзаданию веб-дизайнер понимает, какой тип сайта хочет клиент, какие он ставит цели после реализации сайта и прочие необходимые детали работы. Главная задача: понять и услышать клиента.

2. Подстраховка исполнителя. Иногда попадаются заказчики, которые хотят поменять задачи, когда уже половина работы сделана. Если вы согласовали и подписали ТЗ, так не получится: изменение требований в техзадании оплачивается отдельно. Можно даже составить новый договор. В случае таких «неопределившихся клиентов» необходимо брать оплату вперед за каждый этап работы. Подписав ТЗ, клиент не может уменьшать стоимость работы.

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

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

5. Ускорение работы веб-дизайнера. В грамотном ТЗ должны быть указаны: фирменные цвета, примеры понравившихся сайтов, структура сайта, необходимый функционал сайта, его цели и задачи. Когда это все наглядно прописано, веб-дизайнеру значительно проще и быстрее создать дизайн страниц.

6. Сохранение контактов. ТЗ обязательно содержит в себе контактные телефоны, так что исполнитель никогда не потеряет ФИО и контакты заказчика.

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

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

На самом деле опытный веб-дизайнер найдет еще множество плюсов в грамотном техническом задании. На рис. 37 вы видите примерное техзадание на сайт. Это ТЗ можно дополнить по своему усмотрению. Так же вы сможете бесплатно скачать его по ссылке в конце главы.