Книга Настольная книга веб-дизайнера. Практический курс по веб-дизайну и проектированию сайтов - Ирина Анатольевна Никулина

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

В этом учебнике вы узнаете:

– Что такое конверсия сайтов и как спроектировать продающий сайт по определенной схеме.

– Как проверить созданный дизайн сайта по чек-листу на ошибки.

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

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

– Как грамотно заполнить техническое задание.

– Зачем нужен анализ темы и направления сайта.

– Как сделать анализ конкурентов.

– Как создать базу образцов успешных сайтов.

– Почему надо соблюдать права других дизайнеров и разработчиков сайтов.

– Как правильно зарегистрировать доменное имя и арендовать хостинговую площадку.

– Зачем нужен сертификат безопасности для сайта.

– Что такое внешняя и внутренняя структура сайта.

– Как располагаются модули продающего сайта.

– Кто формулирует УТП.

– Как создать прототип и быстро утвердить его у клиента.

– Как грамотно сделать веб-дизайн по утвержденному прототипу.

– Как создать веб-дизайн мобильной версии.

– Как сделать нарезку сайта и сохранить дизайна сайта.

– Как правильно сделать портфолио дизайнера.

– Зачем нужны конструкторы сайтов, и как веб-дизайнеру ими пользоваться.

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

Учебник рассчитан на начинающих веб-дизайнеров: на новичков, начинающих учиться с нуля и на специалистов, которые хотят повысить свой уровень знаний.

Все специальные термины, используемые в этой книге, расшифрованы в Приложении, дополнение 4. Словарь терминов.

Обучение работе в программе в Adobe Photoshop в данный учебник не входит, но вы можете приобрести книгу «Интерактивный учебник Adobe Photoshop», (автор Ирина Никулина), с ним вы легко освоите растровый редактор Photoshop, к тому же в этом учебнике будут ссылки на бесплатные видеоуроки (30 видеоуроков). Ищите учебник на Литрес или на сайте автора imagika.ru.

Об авторе:

Никулина Ирина Анатольевна

Рис. 3. Никулина Ирина, автор учебника с изданным учебником для вузов

Руководитель. Директор рекламного агентства с 2007 года. С нуля создала своё успешное рекламное агентство и веб-студию с доходом от 200 000 р. в месяц.

Специалист. Веб-дизайнер и разработчик сайтов с 2007 г. (более 1000 проектов).

Преподаватель Кубанского государственного университета, курсов дизайна и графики, основатель он-лайн школы Вебакадемия.рф. Более 1500 учеников за последние 5 лет.

98 % учеников работают в сфере дизайна и веб-дизайна.

Стаж преподавания программ (CorelDRAW, Adobe Photoshop), курса «Веб-дизайн» и курса «Продвижение сайтов» – 18 лет!

Писатель. Автор учебника для вузов «Вёрстка, дизайн и допечатная подготовка в полиграфическом процессе», издан в 2010 г. в КубГу. По нему до сих пор успешно занимаются студенты университета. Автор учебников по программам Adobe Photoshop и CorelDRAW, книги «Логотип на миллион», книги о фрилансе «Работай и кайфуй! Полное пошаговое руководство по фрилансу» и книги об интернет-рекламе «Уволь директолога! и настрой рекламу сам».

Сертификаты. Сертифицированный специалист по продвижению сайтов Яндекс.Директ.

Сертифицированный специалист Adobe Photoshop.

Глава 1. Конверсия сайтов. Проектирование продающих сайтов. Схема продающего сайта

Сайт – это бизнес-инструмент. Он помогает достичь цели и задач компании – масштабировать дело, сформировать положительный имидж или увеличить продажи.

Цитата с сайта lpmotor.

В этой главе:

1. Конверсия сайта

2. Модули сайта, повышающие конверсию

3. Проектирование сайта

4. Цели создания сайта

5. Баннер на первом экране

6. Схема продающего сайта

1. Конверсия сайта

Определение конверсии сайта

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

Определение из Википедии.

Например, по рекламной ссылке на сайт перешло 100 человек, из них 5 человек заказали товар, значит конверсия сайта – 5%. Если из ста человек, просмотревших сайт, 99 человек заказали товар или услугу, значит конверсия сайта – 99%.

5-10% – это обычный показатель конверсии, а вот 99% – очень высокий, и в реальности он бывает крайне редко. Обычно конверсию сайта повышают с 1-5% до 20%, и это уже считается отличным показателем.

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

2. Модули сайта, повышающие конверсию

Список модулей и отдельных элементов сайта, которые увеличивают количество продаж на сайте:

+ Яркие и динамичные баннеры с акцией и УТП.

+ Виджеты и ленты рекомендаций.

+ Социальные доказательства (реальные отзывы, гарантии, сертификаты на товары или услуги).

+ Дед-лайн (таймер отсчета окончания времени для акции).

+ Призыв к действию («купите, закажите, оставьте контакты, получите подарок или скидку» и т.д.).

+ Формы заказа и формы обратной связи.

+ Витрина товаров на первой странице.

+ Удобная и понятная корзина товаров.

+ Удобный фильтр товаров, модуль «С этим товаром покупают», «Просмотренные товары».

+ Простой понятный интерфейс всего сайта.

+ Промо-статьи.

+ Оригинальные фотографии товара высокого качества, в дизайнерской обработке, в разных ракурсах (не с фотостоков!).

+ Видео товара или услуг (видеопрезентации хорошего качества).

+ Фото или виртуальный тур по офису компании.

+ Фотографии команды (сотрудников) и директора компании.

+ Инфографика, схема работы или схематичное изображение как заказать товар.

+ Кликабельные превью товара (возможность увеличить маленькое фото или переход на подробную страницу товара).

+ Наличие цен возле товара, топ товаров, новинки и т.д.

+ Наличие промокодов у посетителей сайта.

+ Онлайн чат с оператором (нужно показать этот чат на веб-дизайне).

+ Информация о партнерах или клиентах компании (модули «С кем мы работаем», «Партнеры»).

Рис.4. Виртуальный тур по офису компании

+ Кейсы с описанием результатов.

+ В разделе «О компании» в двух-трёх предложениях указано то, чем компания гордится.

+ Есть ответы на типовые возражения и страхи клиентов.

+ На сайте опубликованы реквизиты организации (обычно внизу, в «Подвале» сайта).

+ Поп-ап окно «Не уходите с пустыми руками».

+ На сайте есть сервис «обратного звонка».

+ Наличие квиз-теста.

+ Модуль «Наши