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

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

Потерять доверие, – значит, потерять потенциального клиента.

Как исправить?

Внимательно следить за рекламными объявлениями и проверять их текст. Обещанное должно быть на сайте.

Выводы:

Нужно сделать сайт по продающей схеме, которая включает в себя следующее:

1. Обязательная страница захвата контактов на сайте.

2. Грамотно настроенный трафик.

3. Догоняющая реклама, превращение «холодных» контактов в потенциальных покупателей.

4. Направление клиентов на сайт, продающий товар.

5. Обработка звонков, исполнение заказов.

6. Анализ работы сайта и всех механизмов продаж.

Только грамотное проектирование, хороший дизайн и соблюдение этих правил поможет конверсии увеличиться с 1-2 % до 50-70%!

3. Чек лист на продающий сайт

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

Чек лист для проверки лэндинга:

1. Нет лишних элементов на сайте: чужих баннеров, ссылок, ненужных элементов дизайна или лишнего текста. Используется минималистический «плоский» дизайн.

2. Есть понятное меню и простая навигация по сайту.

3. Необходимые контакты легко найти.

4. В шапке сайта есть логотип и дескриптор (краткое описание деятельности фирмы).

5. На баннере или слайдере есть оффер (заголовок с акцией и дедлайном).

6. На первом экране присутствуют активные кнопки: «Заказать», «Купить», «Узнать подробнее», «Перейти в каталог» и т.д.

7. На сайте есть форма заявки, обратного звонка, он-лайн консультант.

8. Для лэндинга: весь сайт продает одну услугу или товар.

9. На сайте присутствуют качественные фото товара с подробным описанием и характеристиками.

10. Товар легко купить или заказать.

11. Есть экраны, «закрывающие» возражение клиента.

12. Есть экраны социальных доказательств (отзывы, сертификаты и т.д.).

13. Есть гарантии.

14. Есть модуль демонстрирующий результаты после применения товара или услуги, или модуль «До/После».

15. На сайте присутствует призыв к активным действиям.

16. На сайте есть автоворонка с бонусом.

17. Есть модуль «Тарифы» или прайс.

18. Контакты и карта проезда есть внизу сайта.

19. Подвал с реквизитами юрлица.

Для других типов сайтов продающие элементы могут немного отличаться, например, для проверки сайта интернет-магазина используйте этот чек лист:

Чек лист для интернет-магазина:

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

1. Акция в баннере на первом экране.

2. Товарная галерея (топ товаров, новинки, популярные товары и т.д.)

3. Качественные фото товаров с ценами и скидками.

4. Каталог структурирован: товары разбиты на категории.

5. На сайте присутствуют фильтры каталога и поиск товаров.

6. Есть модуль «Автоматический подбор похожих товаров».

7. После каталога есть модуль «Доставка и оплата».

8. Прописаны гарантии качества.

9. Простая корзина, понятная страница оформления заказа.

10. Сохраняется история заказов.

11. Детально расписаны сроки сбора заказа и доставки.

12. На сайте есть сертификаты товаров.

13. В конце сайта присутствуют контакты, адреса и фото магазинов (если они есть).

14. Сайт имеет разметку для SEO оптимизация: ключевые слова, заголовки, метатеги.

Чек лист для корпоративного сайта:

1. Присутствует оригинальный дизайн сайта в фирменных цветах и с использованием логотипа, фирменного шрифта.

2. Есть качественные фотографии производства, помещений, фото сотрудников, с указанием должностей.

3. Сертификаты, дипломы, разрешения, лицензии, благодарственные письма, отзывы.

4. Разветвленный модуль «О компании»: История компании, Рассказ о компании: миссия, философия, продукт, Сотрудники, Схема работы, Регионы работы.

5. Новости, блог.

6. Модуль «Наши работы» или «Портфолио».

7. Модуль «Контакты» и карта проезда. Фото офиса снаружи. Виртуальный гид по офису или производству.

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

Глава 3. Типы сайтов

Звонит клиент (девушка-офис менеджер) в веб-студию:

– Здравствуйте, нам директор сказал, что нам нужен сайт, вы же этим занимаетесь?

– Да, конечно…

– Хорошо, только вот у нас бюджет маленький, поэтому нам не нужен дорогой сайт, можно даже чёрно-белый…

Анекдот из сети Интернет

В этой главе:

1. Контент и функционал сайта

2. Классификация сайтов по технологии создания

3. Классификация сайтов по назначению

1. Контент и функционал сайта

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

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

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

Функционал сайта – это набор различных опций, которые решают определенные задачи пользователей для удобной работы с веб-ресурсом. Базовый функционал определяется разработчиком CMS (движка сайта). Он содержит все базовые возможности, которые должны присутствовать на каждом проекте.

Для посетителей сайта это:

– Меню.

– Сайдбары.

– Постраничная навигация.

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

– Подписка на RSS-ленту.

– Кнопка заказа звонка.

– Поиск по сайту и прочие элементы.

Для администратора сайта:

– Возможность регистрации и входа в административную панель.

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

– Обычные настройки профиля (логин, пароль, аватарка).

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

– Настройка урлов (URL).

– Возможность обновления и добавления модулей, плагинов и тем.

– Работа с медиафайлами (фото, видео).

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

Расширенный функционал сайта

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

Для посетителей сайта это:

– Галерея, слайдеры, аккордеоны, вкладки.

– Расширенные возможности меню и сайдбаров.

– Содержание постов.

– Возможность поделиться или подписаться в социальных сетях.

– Расширенная система комментирования (можно добавлять фото, видео, подписка на уведомления и так далее).

– Система рейтинга записей и комментаторов.

– Форумы, интернет-магазины.

– Онлайн чат, калькулятор, счетчик, календарь.

– Карта сайта.

– Опросы, квизы.

– Онлайн-консультант.

Для администраторов сайта:

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

– Расширенный редактор (добавление шорткодов, таблиц и так далее).

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

– Защита сайта (файервол, ограничение роли пользователя, создание бэкапов и так далее).

– Удобное редактирование метаданных записей (прямо в административной части сайта можно прописать title, description, данные для микроразметки).

– Добавление пользовательских типов записей и так далее.

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

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

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

2. Классификация сайтов по технологии создания

Если вы интересовались разработкой сайтов или веб-дизайном, то наверняка слышали, что сайты создаются разными способами (при помощи разных технологий). Старые технологии отступают и дают место новым. На данный момент лидирующими технологиями считаются системы управления сайтами, например, такие, как: WordPress, 1C-Битрик, NetCat, Drupal. Сайты в этих системах «написаны» на языке программирования PHP. Также обороты набирают популярные сейчас конструкторы сайтов и технологии, позволяющие создать сайт простому пользователю ПК, без дизайнеров и программистов.

Классификация веб-сайтов по технологии создания:

1. Технология CMS.

Язык: PHP (язык программирования сайтов).

Определение:

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

CMS обычно состоит из двух основных компонентов:

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

б) приложение доставки контента, которое компилирует контент и обновляет веб-сайт.

 (Определение из Википедии)

Иными словами, CMS (Content Management System) – это система управления контентом. По-простому – «движок» сайта, который позволяет управлять содержимым сайта.

Пять наиболее популярных CMS:

WordPress (сайт wordpress.com)

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

Стоимость: бесплатно. Есть дополнительные платные модули (плагины), например, для интернет-магазина в ВордПрессе используется модуль e-Commerce или WooCommerce.

Язык интерфейса: 19 языков, включая русский, английский, испанский и др.

Интеграции: более 50 тысяч. Самые популярные: Google Analytics, Unisender, все социальные сети, Мой Склад, СДЭК, ИнвойсБокс, Roistat, Битрикс24, Carrot quest и т.д.

Рис. 21. Редактирование страницы в WordPress в административной части сайта

Плюсы WordPress

1. Удобно сделан под блоги, но можно адаптировать под любой сайт.

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

3. Легкая и быстрая установка «движка» для программиста. На некоторых сайтах хостинга эта система уже предустановлена.

4. Открытый код. Возможность легкого обслуживания разными программистами.

5. Наличие большого количества плагинов в дополнение.

6. Надежность и удобство обслуживания.

7. Наличие бесплатных и платных шаблонов дизайна под этот «движок».

8. Задача оптимизации под поисковые системы решается с помощью установки плагинов. Они помогут формировать ЧПУ (человекопонятный URL), заполнять метатеги, формировать микроразметку, создавать карту сайта и многое другое.

Joomla (сайт joomla.org).

Широкий функционал Joomla реализует простой сайт-визитку, блог или интернет-магазин. Систему выбирают новички-программисты за возможность легко запустить сайт.

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

Язык интерфейса: по умолчанию английский с возможностью установить другие языки.

Интеграции: RetailCRM, Битрикс24, amoCRM, Мой Cклад, 1С, Robokassa, Carrot quest.

Плюсы:

1. Имеет встроенную систему отладки ошибок: система пришлет отчёт о некорректной работе.

2. Есть встроенная почтовая система для приватных диалогов с пользователями.

3. Ускоренная загрузка страниц за счёт кеширования контента.

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

Большим минусом является устаревший интерфейс этого «движка» и порой недостаточная функциональность.

OpenCart (сайт: opencart-russia.ru)

Готовая и бесплатная CMS для интернет-магазинов. Имеет множество дополнительных расширений и плагинов: от приёма электронных платежей до интеграции с курьерскими службами.

Стоимость: бесплатно.

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

Интеграции: Google Analytics, Carrot quest, Топвизор, Roistat, Планфикс, amoCRM, Битрикс24, Telegram, Робокасса, Яндекс. Доставка, Ю-Money.

Плюсы:

1. Есть встроенные модули работы с товарами: упаковка, налоговая ставка, сопутствующие и недавно просмотренные товары, применение вариантов скидок и способов доставки, модерация, работа с отзывами.

2. Содержит более тысячи шаблонов для быстрого запуска интернет-магазина.

3. Есть встроенный редактор и SEO-модуль для ведения блога: добавление Title и Description, ключевых фраз, формирование ЧПУ.

4. Быстро работает с каталогом до 30 000 товаров.

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

1С-Битрикс (сайт: 1c-bitrix.ru)

CMS от разработчиков самой популярной CRM в России. Возможности движка меняются в зависимости от тарифного плана, эта система подойдет и малому бизнесу и крупному интернет-магазину. 1С-Битрикс отличается высокой безопасностью и сложным интерфейсом.

Стоимость: платная лицензия от 6 200 рублей в месяц.

Язык интерфейса: более 10 языков, включая английский, русский, украинский.

Интеграции: платежные системы, службы доставки, соцсети и другие сервисы, среди которых Roistat, Carrot quest, Битрикс24, Мегаплан, Планфикс, Мой склад, amoCRM, Zadarma, 1C, Робокасса, Ю-Касса, Sipuni, Tilda. Roistat, Carrot quest, Битрикс24, Мегаплан, Планфикс, Мой склад, amoCRM, Zadarma, 1C, Робокасса, Ю-Касса, Sipuni, Tilda.

Из плюсов:

1. Интеграция с продуктами 1С.

2. Русскоязычная система.

3. Есть много готовых шаблонов дизайна.

4. Безопасность и высокая степень защиты от вирусов.

Минусы:

– высокая цена,

– дорогой хостинг

– сложный интерфейс.

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

Рис. 22. Редактирование страницы в 1С-Битрикс в административной части сайта

Drupal (сайт: drupal.org)

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

Стоимость: бесплатно.

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

Интеграции: RetailCRM, Roistat, Carrot quest, amoCRM, Битрикс24, Мегаплан, Мой Склад, 1С, Ю-Касса, Робокасса.

Плюсы:

1. Присутствует высокая безопасность открытого кода: сайты на Drupal проектируются органами государственной власти Европы и США.

2. Распространена в мировой практике сайтостроения: специалистов по работе с этой CMS много.

3. Высокая скорость движка Drupal подходит для сложных проектов с большим числом товаров.

4. Гибкость открытого кода позволяет реализовать практически любые задачи с помощью разработчиков.

Минусы:

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

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

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

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

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

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

Несмотря на минусы, система CMS на данный момент остается самой передовой и востребованной для создания профессиональных сайтов.

2. Технология конструкторов сайта

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

Конструктор сайта – это программное обеспечение, система для создания веб-страниц без знания языков программирования и веб-дизайна. Она может быть представлена на отельном сервисе, например: lpmotor, Тильда и т.д. Или может предоставляться бесплатно на сайте хостинга, когда оплачена услуга хостинга (такую услугу представляет, например, хостинг Timeweb).

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

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

Рис. 23. Список страниц сайта на конструкторе сайтов

Минусом сайтов на конструкторе является невозможность продвигать такой сайт через СЕО (по ключевым словам). Поисковые системы не ранжируют или плохо ранжируют такие сайты, отдавая предпочтение сайтам на «движках».

Зачем веб-дизайнеру конструктор сайтов

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

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

Рис.24. Интеграция конструктора сайтов с платежными системами

Конструктор сайтов ЛП-мотор предлагает создать сайт бесплатно (пробная версия) с квизом, интернет-магазином, корзиной товаров и доставкой. В дальнейшем сайт можно оплачивать помесячно или за год по тарифам конструктора, начиная от 690 руб. в месяц (тариф для одного сайта).

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

Рис.25. Чат с оператором на конструкторе сайтов ЛП-мотор

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

3. Простые HTML-сайты

Эти сайты создаются не на движках и не с помощью языка программирования PHP, а при помощи языка разметки, который называется HTML.

HTML – это (от англ. HyperText Markup Language – «язык гипертекстовой разметки») – стандартизированный язык гипертекстовой разметки документов для просмотра веб-страниц в браузере.

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

Рис.26. Редактирование сайта HTML в программе Adobe Dreamweaver

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