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

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

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

Глава 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).

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

Конец ознакомительного фрагмента.