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

Ирина Никулина, 2023

Хотите престижную работу от 100 000 р. в месяц? На разработке сайтов можно заработать и больше! Эта книга научит вас тонкостям веб-дизайна и проектированию сайтов. Учебник включает в себя все этапы работы веб-дизайнера: начиная с проектирования и заканчивая реализацией сайта. Книга посвящена описанию этапов разработки сайтов: прототипированию, дизайну веб-страниц, нарезке, дизайну мобильной версии и запуску сайта. Также вы узнаете: как сделать продающий сайт, как правильно заполнить техзадание и создать базу образцов, как собрать семантическое ядро, купить хостинг и домен, какой конструктор сайтов выбрать. Вы легко создадите первую страницу сайта, состоящую из: хедера, слайдера, преимуществ, модуля «О компании», каталога товаров, схемы работы, отзывов, фотогалереи и футера. Кроме того, вы узнаете, как создать портфолио дизайнера и сколько можно заработать на своих знаниях. Это – ваша настольная книга по веб-дизайну! Для начинающих специалистов.

Глава 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-сообщений или звонков.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Очень важно при проектировании сайта в деталях описать первый экран сайта. Именно с первого экрана начинается просмотр сайта, и именно от того, как там подана информация, зависит, — останется ли посетитель сайта или перейдёт на другой сайт.

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

Если он не находит ответа на свой вопрос, — он уходит с сайта к конкурентам. Поэтому спроектировать первый экран нужно правильно, чтобы удержать посетителя сайта.

Запомните: всего несколько секунд человек оценивает сайт по первому экрану и решает, — остаться на нём (чтобы сделать заказ) или перейти к конкуренту.

Рис.8. Первый экран сайта

На первом экране сайта, как правило, находится:

— шапка сайта (логотип, контакты, кнопка «Заказать звонок»),

— меню сайта,

— статичный баннер с оффером (предложением товаров или услуг), или слайдер (смена кадров),

— краткие преимущества,

— форма обратной связи,

— кнопка «Заказать» или кнопка «Подробнее».

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

— Чётко и ясно (по возможности кратко) описать, что именно предлагает сайт. Например, «купить туристический рюкзак». Если человек в поисковой системе набрал такой запрос: «купить туристический рюкзак» и открыл сайт, на котором точно такое же предложение в слайдере сайта, то это стопроцентное совпадение предложения с запросом. Это увеличивает конверсию сайта на 20-30%.

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

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

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

На самом деле именно заказчик должен сформировать хорошее УТП, но не всегда руководители фирм могут составить хорошее предложение, так что часто формулировка УТП ложится на плечи именно проектировщика сайта.

Рис.9. Пример хорошего УТП в баннере сайта

Как ещё увеличить конверсию баннера:

— Поставить на баннере кнопку «Заказать», «Перейти в каталог», «Оставить заявку» или призыв к действиям в виде формы обратной связи (формы заявки).

— Установить акцию и дедлайн (ограничение времени для акции, например: «Купите рюкзак со скидкой 50% только до 25 июля!»).

— Расположить красочное фото в баннере, отображающее товар или суть услуги, которую предлагает сайт.

— Добавить товары-«локомотивы», которые создают спрос за счёт низкой цены.

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

— Добавить основные преимущества товара (не более 4-5 преимуществ). Например: бесплатная доставка, бесплатная установка, в подарок второй товар и т.д.

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

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

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

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

Продающие сайты имеют примерно одинаковую внутреннюю структуру (расположение модулей на первой странице). То есть, создавая веб-дизайн сайта, не нужно «изобретать велосипед», а нужно лишь иметь перед глазами определённую схему и дополнить её в соответствии с темой сайта. Эта схема может быть удобно представлена в виде картинки или в виде списка модулей.

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

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

Основные элементы (модули) продающего сайта:

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

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

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

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

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

О компании или команда. В этом модуле приводятся фотографии директора и конкретных сотрудников компании с описанием их должности, что значительно повышает лояльность аудитории сайта. В случае образовательного сайта — фотографии преподавателей, или на сайте писателя — его портрет и заслуги. См. рис.10.

Рис.10. Модуль сайта «Об авторе»

Социальные доказательства (реальные отзывы со ссылкой на соцсети, видеоотзывы и т.д.). В качестве дополнительного убеждения может быть модуль «Сертификаты, лицензии, дипломы, свидетельства».

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

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

Для сайтов, продающих услуги, обязательно наличие модуля: «Схема работы с нами» (или «Этапы работы»).

Призыв купить или заказать с формой обратной связи. (Например: «Купите книгу сейчас, заполнив форму», или: «Остались вопросы, — оставьте свои данные, и мы вам перезвоним»).

Контакты с интерактивной картой и ссылки на соцсети.

Ниже, на рис. 11 эти же модули представлены в виде общей схемы продающего сайта.

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

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

Делать такую схему можно:

— вручную, нарисовав на листке бумаги;

— в электронном виде, например, в программе MS Word;

— в растровом редакторе

— в онлайн сервисах для создания прототипов (например, wireframe.cc).

Если вы подробно нарисуете эту схему в программе Adobe Photoshop, то это будет ваш черновой прототип сайта (прототип первой страницы).