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

Вступление

О профессии «Веб-дизайнер»

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

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

Продающий сайт

Между сайтом визиткой и сайтом, продающим товары и услуги, существует огромная разница. От того, как сайт спроектирован, какие модули и в каком порядке в нём используются; от того, как грамотно сделан дизайн, какой задуман функционал, – зависит, будет ли сайт приносить прибыль владельцу или нет.

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

Разработке именно таких сайтов и посвящена данная книга. Изучив её, вы самостоятельно освоите профессию «Веб-дизайнер продающих сайтов». Эта книга легко и понятно проведёт вас по всем этапам создания продающего сайта. Самостоятельно разработав несколько дизайнов сайтов, вы можете уверенно претендовать на вполне достойную зарплату в офисе или выйти с предложением своих услуг на биржи фриланса.

Этот учебник появился как книжный вариант курса по веб-дизайну, по которому успешно обучалось более 1000 учеников. Ученики просили автора курса (автор курса и учебника – Ирина Никулина – примечание редактора) создать печатную версию своей уникальной методики обучения, чтобы не потерять нужные знания. Эта уникальная книга впервые объединила в себе все практические знания о создании дизайна страниц сайта. Она написана сертифицированным специалистом с опытом создания сайтов более 15 лет.

Учебник для многих учеников стал настольной книгой по веб-дизайну!

Зарплата веб-дизайнера

Создавая продающие сайты, вы сможет рассчитывать на зарплату от 80 000 до 190 000 рублей в зависимости от региона проживания и вашего портфолио. О том, как создать стильное портфолио, – вы узнаете в конце книги.

Посмотрите скриншот с сайта работы, – это средние зарплаты специалистов веб-дизайна в Московской области.

Рис.1. Скриншот вакансии веб-дизайнер на сайте hh.ru

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

Стоимость разработки корпоративного сайта начинается от 60 000 рублей в регионах и от 100 000 рублей в крупных городах. Иногда стоимость большого интернет-проекта может доходить до нескольких миллионов за один сайт (пример: сайт аэропорта еще десять лет назад стоил четыре миллиона, тогда за эту сумму тогда можно было купить дом на юге). Сейчас сопровождение крупных сайтов стоит от 100 000 до 500 000 рублей       в месяц!

Поэтому, веб-дизайнер – это всегда престижная и востребованная работа с хорошими перспективами. Для примера: дизайнер логотипов очень редко зарабатывает 100 000 рублей за логотип (средняя цена разработки логотипа – 5 000-15 000 руб.). А вот веб-дизайнер – это специалист совсем другого уровня! К тому же он может не только создавать веб-дизайн страниц сайтов, но и осуществлять дополнительные работы, такие как: разработка логотипа для сайта, дизайн веб-баннеров, продвижение сайта, создание сайта на конструкторе.

Рис.2. Веб-дизайнер за работой

Плюсы и минусы профессии «Веб-дизайнер»:

Плюсы:

– стабильная высокая зарплата,

– возможность легко найти работу,

– возможность роста и карьеры (начальник отдела, руководитель фирмы, директор предприятия),

– интересная работа, получение новых знаний, развитие, самосовершенствование,

– уважительное отношение клиентов,

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

– возможность работать дистанционно, удаленно.

Минусы:

– сидячая работа, напряжение зрения,

– нужна хорошая база знаний, понимание, что такое продающий сайт,

– требуется терпение и усидчивость при доработке проекта,

– необходимость быстро работать и успевать в сроки,

– умение работать в растровых редакторах,

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

Что входит в обязанности веб-дизайнера:

1. Умение грамотно заполнить техническое задание на сайт.

2. Создание прототипа сайта.

3. Доработка прототипа и утверждение у клиента.

4. Создание дизайна первой страницы и остальных страниц сайта.

5. Создание дизайна мобильной версии сайта.

6. Умение обработать фотографии для сайта, провести кадрирование, тоновую и цветовую коррекцию, монтаж и коллаж фото.

7. Нарезка сайта на фрагменты для вёрстки.

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

Желательные знания и умения веб-дизайнера:

– умение работать со шрифтами, цветами, а также иными структурными элементами дизайна;

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

– навык делать понятный и удобный функционал, продумывать UI/UX;

– уметь работать с растровым редактором Adobe Photoshop и векторным редактором CorelDRAW (иногда приходится исправлять логотип клиента или создавать векторные элементы дизайна).

– быть компетентным в работы с версткой на HTML и CSS;

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

– иметь чувство стиля; следить за трендами веб-дизайна и применять их в своей работе;

– приветствуется умение создавать анимационные веб-баннеры;

– наличие таких качеств характера, как: терпение, усидчивость, коммуникабельность, воображение, внимательность к деталям, аналитические способности, ответственность;

– грамотная речь, навыки общения с клиентами, умение составлять техническое задание и работать в команде;

– приветствуется знание основ продвижения сайта.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Все специальные термины, используемые в этой книге, расшифрованы в Приложении, дополнение 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. Виртуальный тур по офису компании

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

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

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

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

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

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

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

+ Модуль «Наши преимущества».

+ Наличие лид-магнитов с выгодой (например: «оставьте заявку на обучение и получите в подарок бесплатные уроки»).

Рис.5. Чат с оператором (онлайн консультант)

+ Выгода, выраженная в цифрах.

+ Контакты для связи: телефон, e-mail и WhatsApp.

+ Кликабельные элементы при наведении мышки подсвечиваются.

+ Дизайн сайта минималистичный.

+ Расположение элементов сайта (например, логотипа и кнопки «Контакты») привычны для посетителя сайта и находятся в стандартных местах.

+ Есть подсказки и навигация сайта.

+ Тексты на сайте разделены на абзацы и параграфы, нет длинных «простыней» текстов, тексты сопровождаются схемами, диаграммами и фотографиями.

+ Сайт имеет мобильную версию.

Рис.6. Лид-магнит на сайте онлайн школы

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

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

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

Проектирование – это первый и очень важный этап создания продающего сайта.

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

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

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

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

Этапы проектирования:

1. Определение целей и задач сайта.

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

3. Непосредственно создание структуры сайта.

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

5. Утверждение прототипа.

Под проектированием сайта имеется в виду следующая работа веб-дизайнера:

– создание внешней структуры сайта (страницы сайта),

– разработка внутренней структуры первой страницы сайта (количество и последовательность модулей на Главной странице),

– в том числе включение на первую страницу нужной последовательности продающих модулей,

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

– добавление модулей, побуждающих к активному действию,

– создание простой и понятной витрины сайта и удобной корзины,

– расположение на сайте легко читаемого контента,

– добавление виджетов и чатов, ссылок на соцсети, и многого другого, исходя из задач и целей сайта.

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

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

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

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

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

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

Возможные цели лендинга:

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

Получить контакты. Такие лендинги ещё называют «автоворонками». Посетитель сайта бесплатно получает какой-то ценный контент в обмен на e-mail или номер его телефона. Далее менеджеры сайта превращают пользователя в потенциального клиента с помощью рассылок, SMS-сообщений или звонков.

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

Именно от правильно сформулированной цели будет зависеть всё: структура страницы, её дизайн, форма подачи информации, и оформление модулей, набор модулей и т.д.

Цели многостраничных сайтов:

– Укрепить бренд.

– Увеличить продажи.

– Привлечь внимание аудитории.

– Сократить издержки по привлечению новых посетителей.

– Увеличить средний чек.

– Удерживать старых клиентов с меньшими затратами.

– Рекламировать новый продукт.

– Оповестить об открытии фирмы.

– Просветительские цели (некоммерческие).

Цели корпоративных сайтов:

– Создать положительный имидж компании.

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

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

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

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

– Пробудить интерес к деятельности (например, создать ограниченный доступ к информации).

Цели сайтов некоммерческих организаций:

– Оповестить общественность о своих действиях, проведенных мероприятиях.

– Делиться информацией о продуктах или услугах.

– Привлечь новых пользователей.

– Повысить узнаваемость некоммерческой организации в онлайн-сообществе.

– Привлечь внимание к благотворительному проекту.

– Найти спонсоров.

Как видите, целей создания сайта может быть довольно много, но самое главное: не распыляйтесь на все сразу, для одного сайта надо выбрать одну цель, не более.