БЛОГ - часть 1

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

Расценки агентств на создание «продающего» сайта колеблются в пределах 40-50 тыс. руб. и никакой гарантии, что сайт будет продавать, нет – да и быть не может.

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

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

Сейчас расскажу об этом более подробно.
Для того, чтобы начать продвижение своего бизнеса в Интернете без крупных денежных вложений – понадобятся 3 вещи:

• Сайт – площадка, где будут представлены твои товары или услуги. И с которой можно продавать и рассказать о своем бизнесе;

• Группа в ВК – для информирования о своем бизнесе потенциальных клиентов. Его продвижении с помощью таргетированной рекламы. Продаж и обмене сообщениями.

• Создание рекламных флаеров – для размещения на сайте и в группах в соц.сетях. Они необходимы для информирования о предлагаемых товарах или услугах. А также для продвижении группы и сайта – с их помощью уникальность публикуемого контента будет равна 100 %.

В следующих статьях рассмотрим подробно, что и как нужно сделать для этого.

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

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

И говорю я о следующем.
Можно воспользоваться тремя графическими редакторами. Рассмотрим их по порядку:

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

Canva.com – отличный сервис для создания графики. Есть панель «элементы» с помощью которой можно создавать сложные коллажи, плакаты, презентации, посты для Facebook и любых соцсетей. Требует навыков пользования.

Хорошая новость – в программе есть Руководство по обучению, где поэтапно рассказано обо всех возможностях сервиса. Стоит только захотеть – и всему научишься. Большая часть возможностей сервиса бесплатная – их достаточно для создания любой графики

Crello.com – этот сервис позволяет придумать и воплотить в жизнь практически любой дизайнерский проект. Это профессиональная программа для дизайнеров и верстальщиков сайтов. Множество готовых шаблонов на все случаи жизни. Их можно адаптировать под свои нужды. И это требует навыков и опыта обращения с сервисом.
Есть модуль обучения. Программа очень мощная и требует навыков работы с дизайн проектами. Рекомендую освоить программы по порядку – тогда с Crello серьезных трудностей не возникнет.

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

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

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

Создать группу довольно просто:

1. Щелкаем в панели справа меню «Группы»;

2. В открывшемся окне в верхнем правом углу выбираем меню «Создать сообщество»;

3. Выбираем тип сообщества, который больше всего соответствует вашим целям – например, «Бизнес» или «Бренд или организация» и задаем параметры в открывшемся меню настроек;

4. Пишем название сообщества, выбираем тематику и добавляем свой сайт (если есть) и щелкаем создать сообщество

5. Все готово – группа создана. Дальше требуется ее настроить.

6. Жмем кнопочку «Настройки» и в открывшемся окне настраиваем требуемые характеристики Вашей группы, Разделы, которые будут видны посетителям и администрации группы, Добавляем ссылки на другие группы (если они есть) и свои сайты (если есть), назначаем администрацию группы, контактных лиц и получателей денежных переводов.

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

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

9. Вот и все – Ваша группа готова – теперь нужно продвинуть ее.

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

Кроме того, рекламные баннеры группы можно продвигать и для всеобщего обозрения за счет создания и настройки таргетированной рекламы в ВК или ОК. Реклама платная и она дешевле той, которую предлагают «рекламщики» из соцсетей.

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

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

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

1) Миниатюра – размер 200 x 200 пикс.
При выполнении миниатюры следует помнить, что она примет круглый вид, поэтому основную картинку и надпись следует разместить ближе к центру квадратного изображения, чтобы они хорошо были видны.

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

2) Обложка – размер 1590 x 400 пикс.
Чтобы загрузить обложку, нужно перейти в Управление сообществом - блок Основная информация - Обложка сообщества - Загрузить. По сути это картинка и все. На сегодняшний день обложка видна на мобильных устройствах, в приложениях и клиентах.

Закономерный вопрос – что расположить на обложке и миниатюре? Мудрить не стоить – выберите картинку, которая больше всего подходит к тематике группы и расположите ее на выбранном фоне.

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

О настройке основных разделов группы, автор расскажет в следующей статье

Для того, чтобы настроить группу следует зайти в панель «Управление сообществом» и по порядку настроить группу:

В разделе «Настройки» - справой стороны на панели можно настроить

1. Основная информация:

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

- Описание сообщества – расскажите, что это за группа – четко и без «воды» - только суть. Чем вы занимаетесь – об этом и напишите;

- Тип группы – Частная, Закрытая или Открытая – тут же есть и их описание. Выберите тот тип, который вы сочтете нужным. Лучше всего выбрать «открытую» группу – в нее могут вступать все желающие;

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

- Адрес страницы – можно указать короткий адрес с помощь слов, написанных английским шрифтом. В этом случае панель создания наклейки для вашей группы. Нажмите на ссылку «Здесь» и перейдет в раздел наклеек, где сможете создать ее.

2. Кнопка действия

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

3. Дополнительная информация

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

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

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

- Местоположение – страна и город, в котором вы осуществляете свою деятельность.

- Импорт RSS – автоматическая настройка публикаций с вашего сайта через RSS-канал в вашу группу в ВК. Достаточно нажать «включить», добавить фид своего сайта – т.е. ссылку на него и выбрать формат публикации.

- Экспорт в Twitter – экспорт ваших публикаций в Twitter. Для этого у вас должна быть регистрация в нем.

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

О способах продвижения группы в ВК, автор расскажет в следующей статье

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

1. Определите цель создания группы.
Т.е. какую пользу вы хотите получить от нее. Вот три основные цели создания групп в соцсетях:

- Продажа товаров или услуг через группу. Т.е. группа нужна для получения заявок и реализации продукции. Объем продаж – главный критерий эффективности такой группы;

- Заработок на самой группе по средствам рекламы и репостов. Важно количество подписчиков, лайков, посещений группы и комментариев к публикациям;

- Блог – это хобби, рассказ о творчестве или своих интересах. Публикуйте и рассказывайте, что вас лично интересует.

2. Составьте план продвижения
Т.е. что вы будете делать на практике для раскрутки группы. Он состоит:

- Ваша целевая аудитория – на кого будут рассчитаны публикации и реклама сообщества;

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

- Контент – из чего он будет состоять: Статьи, Рекламные баннеры, Ссылки на сайт или публикации, Обмен ссылками, Репосты и т.п. Что публикуете, когда и в каком объеме;

- Проведение мероприятий – опросы, конкурсы и т.п. Будите ли вы их проводить и в каком объеме.

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

И таргетированная реклама – т.е. нацеленная на вашу целевую аудиторию. Это платная реклама в ВК и ее нужно уметь настроить. Об этом расскажем позже.

3. Действуйте!
Воплощайте свой план в жизнь. Публикуйте посты, рекламные баннеры, обменивайтесь репостами и лаками, рассылайте приглашения. Группа сама не раскрутиться и клиенты просто так не придут. Действуйте и результат будет!

4. Оценка эффективности
Воспользуйтесь статистикой сообщества – на правой панели управления группы есть раздел «Статистика», где можно посмотреть данные о посещаемости вашей группы. 4 вида действий для анализа:

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

Отслеживайте статистику и корректируйте план продвижения. Изучите, что вызывает больше откликов, а на что реакции нет. И корректируйте план.
Это кропотливая работа. Результаты будут, если действовать. Так что все в ваших руках.

О том, как настроить таргетированную рекламу, сколько это будет стоить и какой способ таргетинга выбрать, автор расскажет в следующей статье

Рассмотрим поэтапно, как это сделать:

1. Определить целевую аудиторию
Воспользуйтесь вкладкой «Аудитория» в левом меню. В нем есть данные из Яндекс.Метрики или Google Analytics. Если информации нет, то постройте гипотезу – кто будет Вашим потенциальным клиентом.

2. Решите, что Вы будете рекламировать
Есть 2 варианта: Сообщество в ВК (ваша группа) или Ваш сайт

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

• СРС – оплата за клик;
• CTR- кликабельность (число кликов / число показов);
• СРМ – оплата за показы (за 1000 показов – стандарт ВК);
• CR – коэффициент конверсии

Бюджет рассчитывают по формулам:

• Б = СРМ (стоимость 1000 показов) / 1000 * Число показов;
• Б = СРС (стоимость за клик) * Число кликов

4. Задайте стоимость рекламы
Настройки аудитории влияют на стоимость рекламы. Изменение одной приводит к изменению итоговой суммы. ВК показывает охват целевой аудитории по Вашим параметрам, и рекомендуемую цену в правом углу рекламного кабинета. Указывается нижняя и верхняя граница охвата и стоимость за клик или переход.

Начните с низкой ставки — с 30%. Эффективно использовать как тест настроек рекламы. В ВК работает аукцион первой цены — списывается сумма, которую вы установили в качестве ставки.

5. Выберите вариант оплаты: за клики или переходы
Настраиваете тергетинг впервые – выбирайте оплату за клики, это значит, что платить будете только за переход по рекламному объявлению. При оплате за 1000 показов и неверной настройке параметров таргетинга есть риск слить бюджет в холостую.

Обязательно! Установите лимиты по рекламным объявлениям. Это страхует от дополнительный списаний средств и помогает контролировать бюджет.

О том, как настроить работать с рекламным кабинетом, автор расскажет в следующей статье

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

1. Заходим в рекламный кабинет
Кликнете по кнопке «Реклама сообщества» в левом меню группы и перейдете в рекламный кабинет, где откроется вкладка «Создать сообщение»

Отклоните, щелкнув на крестик вверху. Появится баннер о создании рекламного объявления. Нажмите ссылку «здесь» и перейдете в Рекламный кабинет. Кликните в левом меню «Таргетинг» и получите доступ к рекламным объявлениям.

2. Создаем новое объявление
В ВК 7 видов рекламных объявлений. Рассмотрим 3: Сообщество, Запись с кнопкой и Внешний сайт.

а) Реклама сообщества
Щелкните на значке и откроются параметы настройки. Выбираем формат рекламного объявления:

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

- Большое изображение – для привлечения внимания аудитории. Добавляем заголовок и сообщение готово. Цель – привлечь внимание к группе.

- Продвижение сообщества – на баннере указано число участников группы и призыв вступить в сообщество. Заголовок – название группы. Подходит для привлечения подписчиков в сообщество.

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

Добавляем изображение. Пишем заголовок. Текст объявления. Призыв к действию. И настраиваем кнопку.

Реклама Внешний сайт
Укажите в строке ссылку на сайт, куда перейдут посетители. Домен появится автоматически. Жмем «Продолжить» и создаем объявление. Создать можно в двух форматах: Изображение и текст и Большое изображение. Посетитель будет переходить на сайт кликнув по картинке.

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

Чтобы рекламный баннер привлек внимание, следуем 10 правилам:

1. Изображение – располагаем вверху или справа. Цель – привлечь внимание аудитории и заставить прочитать заголовок. Выбираем броское изображение, чтобы читатель остановился на нем.

2. Заголовок служит для того, чтобы привлечь внимание аудитории. Придумайте броский заголовок по тематике объявления. Заголовок читают на 80 % чаще других элементов баннера. Сделайте короткий заголовок и опишите, что предлагаете

3. Подзаголовок дополняет и разъясняет заголовок. Объясняйте, для кого предназначен продукт

4. Добавьте подпись под изображение – подпись читают на 20 % чаще, чем текст.

5. Тест баннера разъяснеет торговое предложение. Пишем детали, без «воды» - только то, что предлагаете в лаконичной манере

6. Разбиваем текст на параграфы, чтобы было легко прочесть текст и он не казался слитным и единым.

7. Добавляем логотип, чтобы заявить о сообществе

8. Ставим цену на продукт, чтобы посетитель не забыл о чем сказано в рекламном баннере

9. Оставляем контактную информацию, чтобы посетитель мог среагировать на рекламный баннер

10. Смотрим макет баннера. Не перегружаем его информацией, цветом и шрифтами. Оставляем белое пространство для удобства восприятия. 2 Цвета – основной и для выделения Заголовков. 2 шрифта – для заголовка и подзаголовка и для основного текста.

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

О том, как настроить параметры таргентинга, автор расскажет в следующей статье

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

1. Выбираем тематику и возрастные ограничения
Раздел настраивается для модераторов ВК. Выбираем из выпадающего списка тематику объявления и добавляем возрастные ограничения, если требуется отсечь целевую аудиторию. Если вы рекламируете ремонт автомобилей, то укажите 18+, так как владеть транспортом может лицо, достигшее 18-и лет.

Вводим настройки аудитории, которой будет показано рекламное объявление.

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

3. Демография
Выбираем пол, возраст, день рождения, семейное положение целевой аудитории. Данные берем со страниц пользователей. Или настраиваем, основываясь на гипотезе – кто будет Вашим потенциальным клиентом.

4. Интересы
Чем больше строчек заполним, тем уже будет аудитория. Заполняем строчки в соответствие с гипотезой о портрете потенциального клиента.

Обязательно заполняем строку «Интересы и поведение». Выбираем из выпадающего списка ту, которая повторяет тематику рекламного объявления. Категория в ВК формируется на основе переходов пользователя в группы в ВК и внешние сайты.

«Сообщества» - выбираем те, участниками которых является потенциальный клиент. Изучите сообщество, которое хотите добавить. Число участников и время последней публикации. Если пабликов не было три месяца, добавлять сообщество не стоит.

5. Образование и работа
Параметр служит для сужения целевой аудитории. Заполняем, если рекламное сообщение нацелено на узкий круг пользователей.

6. Дополнительные параметры
Разрешают задать Устройства, операционные системы и используемые браузеры. Выбираем из выпадающего списка.

«Ретаргетинг» - показывает рекламные объявления пользователям, которые уже знакомы с продуктом или посещали сайт ранее. Посетитель зашел на сайт из контекстной рекламы, посмотрел продукт, но не купил. Ретаргетинг догоняет пользователя в ВК и помогает увеличить конверсию на сайте.

Для настройки ретаргетинга генерируем код - пиксель ретаргетинга, и вставляем его на сайт.
Другие параметры служат для сужения целевой аудитории на основе устройств или браузеров, с которых пользователь заходит в ВК. Параметр настраивается на основе портрета вашего потенциального клиента.

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

8. Настройки цены и расположения
Выбираем способ оплаты за 1000 показав или за переходы. Рекламную площадку – ВК и сайты партнеры.

Стоимость перехода - в ВК работает аукцион первой цены — списывается ровно та сумма, которую вы установили в качестве ставки. Устанавливаем низку ставку – 20 руб. за переход и тестируем рекламное объявление.

Вводим название рекламной кампании.

Знакомимся с Правилами размещения рекламных объявление по ссылке внизу

Жмем «Создать объявление» и готово. Ваша реклама начинает работать

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

Набрать подписчиков в группу можно платно или бесплатно. Платно быстрее и стоит денег. В Интернет легко найти сайты, которые накручивают подписчиков в группы. Стоимость – 30 - 100 руб. за 100 человек.

В статье авторы расскажут, как бесплатно набрать подписчиков в сообщество:

1. Рассылать приглашения друзьям
Заведите несколько аккаутнтов. Зарегистрируйтесь в ВК с разных номеров телефонов и наберите друзей. И рассылайте им приглашения в группу. Можно не больше 40 приглашений в день. Группа будет расти медленно. А участники будут живые люди, а не боты

2. Реклама сообщества
В ВК много групп по взаимному пиару. В названии слова «Взаимный пиар», «Бесплатные объявления» и т.п. В них открытая стена. Публикуйте баннеры с призывом вступить в группу или рекламировать продукцию. Группы легко найти в поиске в ВК

3. Обмен группами
В ВК созданы группы для обмена группами. В названии слова «Взаимное вступление» и т.п. Подавайте объявление об обмене группами для желающих и найти тех, кто это предлагает. Написать в личку и обменяться группами.

4. Сервисы по накрутке подписчиков (бесплатные)
BIGLike, BossLike – популярные сервисы. Зарегистрируйтесь на сервисе. Выполняйте задания и получайте баллы. Баллы выставляйте в свое задание – вступить в группу. Сервис будет находить людей, которые выполнят задание и получат баллы для себя. А вы получите участников в группу.

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

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

В XXI веке человек ищет информацию в интернете. Сайт – площадка в интернете, на которой владелец располагает информацию о бизнесе и доносит до клиентов.

На сайте располагают:

- Информацию о кампании;
- Продукцию или услуги фирмы (ИП);
- Схему работу;
- Стоимость
- Контактная информация

Сайт не только рассказывает – сайт показывает с помощью видео и фотографий продукцию или услуги кампании. Показать – лучше, чем рассказать!

В зависимости от целей создания и решаемых задач, выделим 5 видов сайтов:

1. Промо страница (Лендинг Пейдж) - одностраничный сайт – созданный с единственной целью – продавать. Эффективен чтобы продать один вид товара или однотипную услугу;

2. Интернет-Магазин – одно-много страничный сайт для торговли товарами. На сайте расположены карточки с выкладкой товарной номенклатуры. Эффективен для торговли ассортиментом товаров;

3. Сайт Услуг - одно-много страничный сайт для предложения услуг. На сайте представлен список услуг, схема работы и гарантии. Эффективен для получения заказов клиентов на предлагаемые услуги;

4. Сайт Визитка - одностраничный сайт, который знакомит клиентов с работой фирмы (ИП). На сайте информация о фирме – как на визитке. Эффективен для информирования о фирме (ИП), установления контактов и получения заказов;

5. Информационный сайт (Инфо Сайт) - одно-много страничный сайт для представления кампании аудитории. Сайт не коммерческий. Цель создания – ознакомить посетителей с работой кампании и показать в выгодном свете. Эффективен для продвижения бизнеса или мероприятия, размещения вакансий или сбора подписчиков.

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

В следующей статье, автор расскажет о промо странице – Лендинг Пейдж. Зачем нужна, какие задачи решает и для какого бизнеса подходит.

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

Промостраница оформляется ярко и красочно, чтобы привлечь внимание аудитории.

Контент сайта выполнен по схеме:
- Показываем, что на сайте – товар или услуга;
- Для кого предназначается товар или услуга;
- Говорим о пользе продукта;
- Доказываем полезность;
- Кто продает;
- Зачем посетителю покупать товар или услугу
- Предлагаем совершить покупку или сделать заказ

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

На сайт устанавливают счетчики посещаемости для отслеживания трафика. Кнопка действия: «Заказать товар», «Заказать звонок», «Начать пользоваться» и т.п.

Промостраница - красочный и привлекательный сайт для продвижения товара или услуги

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

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

Интернет-Магазин создаю по схеме:

• Кто продает;
• Товарная номенклатура;
• Реклама фирмы или бренда;
• Карточки с выкладкой товара – главный элемент Интернет-Магазина;
• Раскрывающийся попап, на котором представлено описание товара, характеристики, ГОСТ или ТУ и стоимость;
• Кнопка «Купить»;
• Корзина для оправки товара и подтверждения;
• Схема доставки товара, варианты и способы оплаты
• Контактная информация

Интернет-Магазин подходит для торговли товарами любого назначения и ассортимента. В качестве дополнительного инструмента продажи товаров из магазина в реале. Для оптовой торговли.

Интернет-Магазин – торговая площадь в сети для предпринимателей, которые продают продукцию через Интернет. Он в разы дешевле, чем магазин в реале и подходит для начинающих предпринимателей.

В следующей статье, автор расскажет о Сайте Услуг. Зачем нужен, какие задачи решает и для какого бизнеса подходит.

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

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

Сайт услуг создаем по схеме:

• Услуги, которые предлагаете;
• Какую пользу принесут клиенту;
• Кто предлагает услуги;
• Схема сотрудничества и цена;
• Гарантии;
• Кнопка «заказать услугу»;
• Ответы на вопросы клиентов;
• Контактная информация

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

По сути – это тот же интенет-магазин, в котором вместо товаров расположены услуги. Сайт Услуг предусматривает промо страницу и блог – еще один способом продвижения сайта и бизнеса.

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

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

Сайт-визитка выполняет такие же функции, как и визитка в реале – отсюда и название – кратко по существу представляет бизнес или человека в Интернете

На сайте представлен:

• Что продаете, логотип и рекламный слоган;
• Краткий рассказ о бизнесе;
• Товары или услуги;
• Преимущества;
• Отзывы клиентов;
• Кнопка «заказать»;
• Контактная информация – время работы, номера телефонов и эл. почта

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

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

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

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

Сайт услуг создаем по схеме:

• Рассказ об организации или мероприятии, структуре и организаторах;
• Виды деятельности и руководящий состав;
• Блог для размещения статей;
• Страница с вакансиями;
• Контактная информация и время работы.

Инфосайт - для оповещения заинтересованных лиц о предприятии и поиске аудитории для приглашения на мероприятие.

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

В следующей статье, автор расскажет как создают сайты. Что такое HTML и конструкторы сайтов. Зачем нужны, преимущества и недостатки.

Рассмотрим 2 способа сверстать сайт с точки зрения техники выполнения:

• HTML-сайты
• Конструкторы сайтов

Преимущества и недостатки означенных сайтов

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

Преимущества: Минимальная нагрузка на сервер. Загрузка сайта за доли секунды.

Недостатки: Создание новых страниц и дополнение контента доставляет проблемы - требуются навыки программирования и верстки. Или придется обращаться к программисты и платить за работу – т.е. нести дополнительные затраты.

2. Конструктор и СMS – система управления сайтом.
На основе CMS появились конструкторы сайтов, где возможно создать сайт на основе готовых шаблонов или отдельных блоков.

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

И экономить на этом средства, которые придется платить программисту, если сайт выполнен в HTML-формате.

Перечислим главные преимущества Конструкторов:

• Конструировать сайт и вносить изменения без навыков программирования. Делать это используя шаблоны, когда нет нужды каждый раз переписывать HTML-коды для каждой страницы;

• Интерфейс конструктора устроен так, что разработчик выполнит сайт самостоятельно (требуются минимальные навыки в верстке сайтов и дизайне);

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

• Экономия времени и средств – Конструктор выполняет технические процессы самостоятельно и разработчик только придумывает дизайн и наполняет сайт контентом. Не надо платить программисту по HTML-программированию;

• Быстро, одни кликом, удалять спам с сайта

В следующей статье, автор проведет обзор зарубежных и российских конструкторов сайтов. Какие сайты на них создают, преимущества и недостатки

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

Так появились шаблоны на которых менялся только контент. Число шаблонов росло и программисты объединили шаблоны по тема, чтобы можно было разместить контент и создать сайт самостоятельно каждому, кто не владеет навыков ВЕБ-программирования – таким образом появились CMS и конструкторы сайтов

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

Расскажем о тех, на которые стоит обратить внимание:

1. WordPress – CMS номер один в мире по числу созданных сайтов. На бесплатном тарифе подойдет для создания личного блога или информационного сайта.

Для коммерческих сайтов бесплатный тариф не подойдет – функционал очень ограничен. Использование полного набора возможностей CMS и шаблонов требует навыков дизайна и оплаты 1500 руб./ месяц.

2. Тильда – конструктор для творческих людей, на котором можно создать красочный и привлекательный сайт. Предоставляет бесплатный период 14 дней с полным доступом к функционалу. Более 140 готовых блоков и 180 готовых шаблонов.

Программа обучения и блог, где есть информация по созданию сайта, дизайну и СЕО. Предоставляет домен 2-го уровня и хостинг для сайта бесплатно.

3. А-5 – Российская копия Wix. Предоставляет домен 3-го уровня и хостинг для сайта бесплатно. Конструктор бесплатный, за исключением интернет-магазинов и некоторых узлов (модулей), за которые нужно платить.

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

4. Битрикс-24 – сайт верстается с помощью готовых блоков или шаблона. Отдельные функции создания сайт и создания интернет магазина.

Конструктор бесплатный. Разрешает бесплатно подключить виджеты, чаты и набор библиотек и готовых шаблонов. Автоматически подключает сайт к CRM-Битрикс-24.

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

В следующих статьях, автор рассмотрит российские конструкторы сайтов: Тильда и Битрикс-24. Что можно создать, преимущества и недостатки.

Представляем краткий анализ Битрикс-24, чтобы получить представление о работе, функционировании и стоимости конструктора.

Битрикс-24 – CRM – система управления работой с клиентами. Создаете бесплатно Битрикс-24 и получите доступ к созданию сайта и интернет магазина. Функции отдельные и не зависят одна от другой. На одном Битрикс-24 создаете как сайт, так и интернет магазин.

Сайт и интернет магазин верстаем на готовом шаблоне сайта, выбрав из 40 вариантов. Наполняем собственным контентом и графикой и сайт готов. Если шаблон не решает поставленных перед сайтом задач, то Битрикс-24 предоставляет готовые блок, которые можно добавлять на сайт.

Готовых блоков в конструкторе больше 150 штук, которые разбиты по темам для удобства конструирования. Выбираем блок, который подходит для сайта и вставляем в шаблон.

В Битрикс-24 установлен набор Приложений для создания сайтов: виджеты, готовые шаблоны и набор блоков. Чтобы воспользоваться – установите из правого меню «Приложения»

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

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

На Битрикс-24 создают функциональные сайты, которые индексируют поисковики и продвигают вебмастерские. Требуется создать сайт быстро и бесплатно – выбирайте Битрикс-24.

Недостатки:

• Обучающая программа касается основ верстки;
• Нет разбора правил верстки и дизайна сайтов – придется осваивать самостоятельно;
• Сайт загружается медленнее сайта на Тильде;
• Управление сбором заявок и обратная связь через CRM-Битрикс-24 – потребуется изучить правила и основы работы с CRM.

В следующей статье рассмотрим, как создать сайт на Тильда. Что изучить и как применить на практике, чтобы создать сайт самостоятельно.

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

Для верстки выбираем готовый шаблон сайта и наполняем контентом. Конструктор предоставляет 180 вариантов шаблонов.

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

Если не нашли подходящий под тематику сайта шаблон, то применяем Блок Zero – пустой мокап, в котором создают шаблон по собственному усмотрению.

Настройка СЕО:

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

Автоматическая регистрация в вебмастерских – нажмите кнопку регистрации или вручную – вводим в поле HEAD мета-код вебмастерской для подтверждения права собственности на сайт.

Встроенная система аналитики, которая детально отслеживает трафик сайта и конверсию. Данные выдает в виде таблиц и графиков, чтобы четко показать посещаемость и целевые действия на сайте. Если ее недостаточно, то подключите счетчики Яндекс Метрика и Гугл Аналитикс.

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

На сайте Тильда представлен обучающий курс по верстке и созданию сайтов. Создатели Тильды обучают создавать сайты, верстать страницы и настраивать СЕО. Писать тексты, подбирать изображения и шрифты. Продвигать и раскручивать бизнес. Дизайну в веб-пространстве, ошибкам в верстке и что изучить, чтобы создавать сайты.

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

Авторы рассказали о видах сайтов, предназначении и полезности для бизнеса. Познакомили с конструкторами сайтов и рассмотрели лидеров – Тильда и Битрикс-24.

В следующих статьях рассмотрим как создать сайт на Тильда или Битрикс-24. Что изучить и как применить на практике, чтобы создать сайт самостоятельно.

Когда авторы блога создавали первый сайт, то совершили множество ошибок. Ошибки касались визуального оформления сайта. Итог – сайт получился «ляпистым», перегруженным шрифтами, цветом и стилями.

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

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

2. Иконки
Миникартинки для визуального оформления, подчеркивания и удобства поиска контента на сайте. Как создать самостоятельно. Где найти бесплатные.

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

4. Контраст
Сочетание цветов. Какие цвета между собой удачно сочетаются, а какие нет. Видимость текста одного цвета на фоне другого.

5. Визуальная иерархия
С помощью визуальной иерархии автор показывает посетителю, какая часть текста главная, а какая второстепенная. Выделяет заголовки, подзаголовки и текст, который заслуживает внимания читателя.

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

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

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

Без картинок сайта нет. Один сплошной текст читать не будут. Думаю, это понятно каждому. Поэтому следует позаботиться о качественной и привлекательной графике для сайта.

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

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

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

Переходим к картинкам:

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

Не хотите фотографировать – найди бесплатные фото с лицензией СС0 - Creative Commons Zero - в Интернете. Подбирайте графику на этих сайтах – не нарушайте авторских прав.

Рекомендуем подборку сайтов, где размещены бесплатные изображения с лицензией Creative Commons Zero:

- Creative Commons;
- Flickr;
- Unsplash;
- Pixabay

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

Графика важна – не ленитесь, сфотографируйте или найдите подходящие под тематику сайта картинки. От них зависит, как воспримут сайт и контент.

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

Иконки – миникартинки на сайте. Оригинальные иконки подчеркнуть стиль сайта и сделают запоминающимся для клиентов. Не упускайте возможность сделать сайт запоминающимся с помощью иконок.

Иконки на сайте выполняют функции:

1. Привлекают внимания к контенту.
2. Выделяют список услуг
3. Обозначают категории товаров
4. Показывают схему и этапы сотрудничества
5. Выполняют роль маячка при поиске нужной части текста
6. В качестве кнопки

Иконки можно найти в Интернете – забив в поисковой строке «бесплатные иконки». И выбрать нужные. В сети есть бесплатные иконки по каждой тематике. Выбирайте иконки с лицензией СС0 - Creative Commons Zero, чтобы не нарушать авторские права.

Сделайте сами иконки. Выполнить можно в любом графическом редакторе. Или найдите в Интернете специализированные программы для создания/рисования иконок. И создавайте иконки.

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

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

Выбор шрифтов и сочетание насыщенности строится на правиле читабельности. Читабельность – легко или трудно читать текст.

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

1. Размер и расположение текста

Размер текста – минимум 20 рх. Если сделаете меньше – текст не будут читать.
Стандартная ширина дизайна сайта – 1200 рх или 12 колонок. Текст располагайте с отступом от левого края в 2 колонки и шириной в 8 колонок. Заголовок – 10 колонок и 1 колонка отступ. Визуально заголовок и текст будут располагаться по центру. Удобно читать – нет нужды переводить взгляд по всей ширине экрана

2. Соотношения размера заголовка и текста

Заголовок – главный. Его размер превышает подзаголовок и текст. Сочетание: Заголовок – 48. Подзаголовок – 30. Текст – 22. Заголовок в двое больше по размеру, чем текст.

3. Насыщенность

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

4. Сочетание шрифтов.

Для заголовков и текста используем антиквенные и гротескные шрифты. Антиквенные – с засечками. Гротескные – без них. Между такими шрифтами наибольшее отличие и контраст. Шрифты с засечками – фигурные и аккуратные. Хорошо подойдут для написания заголовков. Шрифты без засечек – для написания текста.

Удачное сочетания шрифтов – Заголовок и текст: PT Sherif – PT Sans.

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

5. Курсив

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

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

Зачем нужны цвета и подбор контрастности? – спросите вы. Ответ простой – чтобы подчеркнуть собственный стиль. И сделать сайт удобным и читабельным для посетителей.

5 правил при выборе цветовой гаммы и контраста:

1. Простота – залог читаемости
90 % контента – черный и белый цвета. 10 % - цвет подчеркивания (акцента). Используйте в качестве акцента – фирменный цвет фирмы. На практике это значит, что при создании контента используем три цвета: Белый, Черный и Фирменный цвета

2. Замените черный цвет текста - (# 00000) на темно-серый – (#333333)
Темно-серый цвет обладает лучшей читабельностью и вызывает меньшее напряжение глаз человека при чтении. Замените черный цвет на темно-серый при написании текста. Посетителям сайта удобнее читать контент и их глаза меньше устанут

3. Фон темный – текст светлый. Фон светлый – текст темный.
Используйте противоположные цвета: Красный и Белый, Желтый и Темно-серый, Оранжевый и Синий и т.д.

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

5. Меньше цветов (черный, белый и акцент). Больше контраста (противоположные цвета на цветовой палитре). Меньше шрифтов (2 шрифта)

В следующей статье, автор расскажет о визуальной иерархии сайта. Что такое визуальная иерархия и зачем нужна. Как с помощью визуальной иерархии подчеркнуть важность подачи элементов контента.

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

В-первую очередь подготовьте контент сайта. Текст пишем в текстовом редакторе. Только потом переносим его сайт.

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

Иерархия «Перевернутой пирамиды»:

1. Выводы пишем сразу – в первых 2-х абзацах. Потом даем разъяснения
2. Главная информация – Что? Сколько? Где? Когда? Зачем? – в начале блока
3. Затем важные детали разъяснения
4. В концовке – второстепенные детали

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

В визуальной иерархии существую три уровня. Уровни служат для определения структуры контента на сайте:

1. Заголовки
Главные элемент контента. Заголовки бросаются в глаза и сразу же привлекают внимание. Клиенты читают в первую очередь заголовки. Самую важную информацию – в заголовок. Заголовок выделят самым крупным шрифтом. Минимум – 48 рх.

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

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

Кроме размера, главные элементы визуальной иерархии рекомендуется выделять цветом. О правилах подбора цветовой гаммы, авторы рассказали в предыдущей статье. Напомним, на сайте используем три цвета: Черный, Белый и Цвет для акцента (на выбор)

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

Что такое «белое пространство»? – Незаполненное текстом или изображениями пространство сайта.

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

Белое пространство может быть любого цвета или состоять из фонового изображения.

Микро-пространство – отступ между строками в тексте или абзацами. Влияет на читабельность текста.

Напомним:
1) Шрифт для текста – минимум 20 рх. Межстрочное расстояние – 1.55.
2) Основной текст располагаем в 8 колонок
3) Между абзацами в тексте пробел минимум в одну строку.

Не мельтешите! Не пытайтесь написать как можно больше мелким шрифтом. Читать не будут, а вы напрасно потратите время и силы на написание и верстку нечитабельной информации.

Макро-пространство – расстояние между элементами контента и пространство окружающее сами элементы. Влияет на воспринимаемость сайта и удобство просмотра.

Контрформа или белое пространство, помогает сориентировать клиента на сайте и сфокусировать внимание на главных элементах контента:

1) Черный цвет, белый цвет и Цвет акцента.
Выделенные цветом акцента элементы бросаются в глаза и сразу привлекают внимание посетителя
2) Одна мысль – один блок или слайд. Больше не надо. Скажете на следующем блоке.
3) Не экономьте на пространстве.

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

Бело пространство служит тому, чтобы на пустом фоне увидели и прочитали то, о чем идет речь на сайте. Контраст между белым и заполненным.

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

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

Чтобы создать качественный сайт, следует выполнить набор предварительных действий. И только после выполнения приступать к верстке сайта. Рассмотрим данные этапы:

1. Цель и структура сайта
Первое, что нужно определить – цель создания сайта. Цель всегда только одна. Тип сайта зависит от цели создания. Для каждой цели – определенный тип сайта. Например: если цель продать продукт – подойдет лендинг. Для продвижения бизнеса – инфосайт или лендинг и т.д.

Написать на бумаге структуру сайта. Одна страница или несколько. Если сайт одностраничный лендинг, то число подразделов. Подробнее расскажу в следующей статье

2. Анализ сайтов конкурентов
Не ленитесь – посмотрите сайты конкурентов. Загуглите тему и изучите сайты, которые выдаст поисковик. Изучите, как конкуренты преподносят контент, как описывают проблему и какие решения предлагают.

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

Мыслите экранами – тем, что посетитель видит на мониторе. Задача – нарисовать на бумаге то, что потом посетитель увидит на сайте. Схематично. Подробнее расскажу, как рисовать прототип сайта в следующей статье

4. Определяем целевую аудиторию
Кто потребитель продукции? Какую пользу получает от потребления? Что именно продаете – т.е. какие проблемы людей решаете? Почему продукт хороший? Чьи проблемы продукт решает?

Ответьте на эти вопросы и увидите, кто потенциальный потребитель продукции. Для этих людей и пишите текст сайта

5. Пишем текст сайта
Напишите на бумаге текст контента. Основные положение – о чем будете говорить. Потом распишите подробно в текстовом редакторе, например, MS Word. Редактировать текст в Ворд проще, чем на сайте.

6. Разрабатываем дизайн сайта
До начала верстки решите, какие цвета будете использовать – основные и цвет акцента. Выберите 2 шрифта. И подберите графику. У вас уже есть прототип – положите лист с прототипом перед собой и посмотрите, где будут расположены заголовки и текст, а где изображения. Воспользуйтесь шаблонами конструктора, в котором верстаете сайт.

7. Навигация сайта
Разработайте навигацию сайта – т.е. меню и ссылки в контенте, по которым посетитель может перейти на страницы или блоки сайта. Главное правило: меню должно быть удобным для посетителя. Подробнее о навигации поговорим в заключительной статье раздела.

В следующих статьях рассмотрим, цель и структуру сайта. Что это такое, зачем нужны и как выполнить на практике.

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

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

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

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

Например: Помочь женщинам купить сумку из натуральной кожи, стильную и качественную

3. Напишите на бумаге цель создания сайта

На практике – какую пользу хотите получить от создания сайта. Цель только одна – и она главная. Если хотите продавать, то так и пишите – сайт должен продавать продукцию.

Не надо писать несколько целей! Продавать продукцию – это одна цель, продвигать бизнес – другая цель, а приносить прибыль – цель третья. И это цели разные.

Например: Создать лендинг-пейдж по продаже сумок собственного производства. Стильный женские сумочки из натуральной кожи. Производим сами в собственной мастерской с 2010 г. Гарантируем высокое качество. Купите сумочку.

4. Разрабатываем структуру сайта
Сделать несложно – напишите на бумаге в виде списка темы, которые хотите раскрыть – вот и получилась структура сайта. Заголовки тем будут страницами или подразделами лендинга.

Например:
1) Стильный женские сумочки из натуральной кожи
2) Для дам со вкусом, которые ценят индивидуальность и качество
3) Шьем в собственной мастерской с 2010 г.
4) Качество супер – проверяем лично. За работу отвечаем репутацией
5) Посмотрите наши изделия
6) Понравилось? – купите сумочку.

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

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

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

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

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

- Главная страница.
Что там расположено. Как устроен первый экран: картинка, оффер, кнопка или форма. По одежке встречают – не забывайте это. Смотрите, анализируйте и изучайте. А потом создайте первый экран на своем сайте. Задача картинки привлечь внимание к Заголовку. А Заголовка - сразу сказать, что предлагаете и для кого.

- Разделы сайта
Посмотри, какие разделы на сайтах конкурентов. Разделы – то, о чем хотят рассказать клиентам. Изучите и решите, что вы расскажите клиентам.

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

- Текст сайта
О чем написано и сколько места занимает. Какой шрифт использован. Как текст сочетается с графикой и расположен относительно картинок. Что из написанного прочитали вы. Это важно! Чем больше текста – тем меньше прочитают.

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

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

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

Целевая аудитория – конкретные люди, которым будет интересно данное предложение

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

Схема работы сайта состоит из трех этапов:
- Зашел на сайт;
- Понял о чем речь;
- Сделал целевое действие

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

Для этого нужно ответить на 3 вопроса:

1. Что продаете?
Сайт и контент создается под конкретное предложение. Что предлагаете – то и пишите. Меньше «воды» - больше конкретики. Продаете услуги по тонировке автомобилей – так и пишите. Не нужно красиво и расплывчато описывать их. Прямо и в лоб

2. Что ИМЕННО продаете?
Люди покупают не продукты или услуги. Люди покупают - либо пользу либо избавление от проблем. На практике – покупаю не сколько дрель, сколько возможность сверлить отверстия. Об этом и пишем. Тонировка – сделает автомобиль красивым и скроет салон от назойливых глаз.

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

Чтобы узнать свою целевую аудиторию – нужно понять ее потребности. И выделить узкий круг покупателей продукции. Задача – отсечь тех, кому продукт не интересен. Трафик сайта будет ниже, зато конверсия – выше.

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

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

Памятка:

1) Текст пишем раньше, чем начинаем верстать сайт
Сначала пишем текст. Пишем в тетради или на компьютере. Раньше, чем верстаем сайт. Готовый текст – шпаргалка при заполнении сайта контентом

2) Пишем в текстовом редакторе
Текст пишем в текстовом редакторе – MS Word или WordPad. В текстовых редакторах быстрее редактировать текст, чем при верстке сайта: копировать, вырезать и перемещать. Кроме того, в редакторе текст быстрее скопировать перенести на сайт, чем написать в редакторе контента при верстке в Конструкторе сайта

3) Ставим цель написания сообщения
У каждого текста ставим цель – зачем пишите? Что хотите сказать текстом, что клиент узнает, сделает или как изменит восприятие. Пишем на языке клиента – а клиент хочет получить выгоду или пользу. Об этом и пишем. Цель – помочь клиенту узнать, что…? Выбрать…? Сделать…? И т.п.

4) Иллюстрируем то, что можно

Текст – основа коммуникации, но никогда не заменит фотографий или рисунков. «Лучше один раз увидеть, чем сто раз прочитать». Добавляем к тесту фотографии и рисунки. Усиливаем эффект текста графикой. Иллюстрируем то, что можно проиллюстрировать. Показывайте, а не пишите

5) Упрощаем текст
Клиенты ищут на сайте информацию – читать много не будут. Кратко расскажите о пользе, которую клиент получит. Используем разговорную речь – как думаете, так и пишите. Разговорный – значит понятный, воспринимается лучше «заумного» текста

6) Оформляем текст красиво и удобно для чтения
В Тильда ест встроенный редактор разметки страницы. Открываем раздел «Настройки» и выбираем ширину блока и отступ. Размер текста, цвет и шрифты. Текст пишем в одном стиле. Наибольший кегль у заголовков, потом идут подзаголовки и минимальный размер у текстовых сообщений

В следующей статье автор познакомит с основами копирайта. Расскажет принципы и правила написания продающего текста.

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

1. Заголовок
80 % успеха – это заголовок. Заголовок пишут, чтобы привлечь внимания. И чтобы читатель прочитал подзаголовок или вступление.

2. Вступление
Или подзаголовок. Кратко, в 2 – 3 строчки, раскрывает то, о чем пойдет речь в тексте. Его задача заинтересовать и побудить клиента прочитать текст.

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

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

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

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

5. Оффер
Предложение, от которого нельзя отказаться. Напишите главное преимущество продукта или услуги. Что это такое и какую пользу приносит. Или от каких проблем избавит. Добавьте цифры – на сколько облегчит жизнь и т.п.

6. Доказываем, что предложение выгодное
Можно использовать сравнения. Цифровые показатели. Прямое указание на достоинства продукта. Обязательно скажите, что решение простое и не потребует усилий со стороны клиента

7. Называем цену

Правило 1: Если цена высокая – сначала даем объяснение цены. Рассказываем, что клиент получит за деньги. И в конце цену

Правило 2: Если цена низкая – называем ее сразу. Можно использовать в качестве главного преимущества продукта или услуги. Потом можно разъяснить причину низкой цены.

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

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

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

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

3. Отзывы
Важно правильно использовать и оформить отзывы. Отзывы служат 2 целям:
- Закрывают возможные возражения клиентов
- Повышают доверие к продукции и фирме

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

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

5. Признание недостатков
В мире нет ничего идеального. Если будете говорить, что продукт идеален, то вам не поверять. А честность – это капитал, которые привлекает. Признайте недостатки продукта и превратите их в достоинства.

6. Гарантии
Гарантии подходят когда планируете долгосрочные отношения с клиентами. Вот 4 типа гарантий, которые можно упомянуть на сайте:

- Эмоциональные гарантии – когда обещаете клиенту заряд позитивных эмоций;
- Гарантии ожиданий – клиент получит то, что он ждет получить и это гарантируется возвратом денег в случае не соответствия предложенного товара или услуги;
- Гарантия результата – обещание оговоренных результатов. Если их нет – возврат денег;
- Абсолютная гарантия – дается на определенный срок. Если в течении 30 дней что-то не понравится – вернем деньги или заменим продукт и т.п.

7. Призыв к действию
Если в оконцовке текста не сайте или рекламном сообщении нет призыва совершить какое-либо действие – его и не совершат. Человек и пальцем не пошевелит, если не сказать что нужно сделать. Говорите – «позвоните» или «закажите» - иначе клиент забудет о продукте через 10 мин.

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

9. Постскриптум
Это элемент может значительно повысить отклик. Исследования показали, что постскриптуму привлекают внимание и клиенты читают, что в них написано.

В постскриптуме можно добавить информацию:
– о дополнительных выгодах;
– дать обещание;
– добавить ограничения;
– дать гарантии;
– предложить бонусы или скидки

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

В следующей статье автор расскажет об основных ошибках, которые допускают при написании текстового контента и контента сайта

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

Рассмотрим 4 типичных ошибки, которые совершают при создании сайтов или выполнении рекламных баннеров:

1. Рассеивание внимания
Современный человек живет в быстром ритме. Страницы в Интернете пролистывает тоже быстро. Пример – как часто зритель переключает каналы ТВ. Концентрация слабая.

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

Удачная картинка + эффектный заголовок лучше других привлекают внимание. Заставляют остановится и сконцентрировать внимание на сообщении. Есть 5 сек. Чтобы привлечь внимание – не смогли и клиент ушел. Помните об этом

2. Культ креативности
Суть в том, что создавать привлекательный, оригинальный или творческий сайт и баннер – значит получить множество лайков и репостов. О таком сайте могут говорить и показывать. Даже восхищаться. Только покупать не будут!

Цель создания сайта – продать товар или услугу.

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

3. Использование шаблонов
Копирование того, что есть у конкурентов, использование избитых слоганов и офферов не дадут результат. Офферы, типа «Самые низкие цены», «С нами надежно», «Лучшее качество», «Цены приятно удивять» и т.д. приелись. Такие офферы абстрактны – в них нет конкретики. Ни о чем не говорят и безрезультатно занимают место на сайте.

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

4. Говорить о себе
Посмотрите на сайты или рекламные баннеры. Многие говорят о собственной крутизне – «Зачем работать с нами», «Наши преимущества», «Мы ставим перед собой цели» и т.д.

Всем наплевать на то, какие вы есть. Человек думает о себе любимом. Ищет свою выгоду или пользу для себя. И его мало интересуют преимущества других или цели, которые поставлены не им самим.

Вывод: Говорите на языке клиента. Рассказывайте какую выгоду получит клиент покупая продукт или заказывая услугу. В чем польза для клиента. Иначе клиент пройдет мимо.

Запомните ошибки, о которых рассказали авторы блога. И начните замечать – вдруг вы делаете одну из них прямо сейчас? И прекратите это делать. Говорите с клиентом в его мире – мире выгоды и пользы для него самого.

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

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

Чтобы создать грамотный дизайн сайта, следует:

1) Изучите список типов шаблонов конструктора.
Посмотрите, какие соответствуют тематике сайта. Выберите и адаптируйте под собственный контент.

Шаблонами пользоваться удобно. Шаблон можно изменить, добавить или убавить контент или удалить, если исчезла надобность. Быстрый, удобный и эффективный способ создания дизайна сайта

2) Изучите сайты конкурентов.
Посмотрите, какие решения есть у них, чтобы показать продукт или услугу клиентам. Изучайте сайты, приобретайте «насмотренность» и решение как будет выглядеть собственный сайт придет само по себе.

3) Главное внимание – первому блоку – Обложке сайта
По ней встречают, как по одежке. Качественное изображение + запоминающийся и цепляющий заголовок – обязательно привлекут внимание потенциальных клиентов.

4) Логотип сайта
Логотип располагают в меню сайта. Не заморачивайтесь особо с разработкой логотипа. Визуальное впечатление, удобство пользования и читабельность сайта важнее логотипа.

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

5) Шрифт
Сайт держится на контенте. Как подбирать и использовать шрифтовые пары, автор рассказал в одной из предыдущих статей. Напомним, что шрифтов должно быть не больше двух: С засечками для заголовков и подзаголовков. Без засечек – для основного текста.

6) Стиль и аккуратность сайта
Пир подборе блоков и расположении контента следите, чтобы отступы между блоками сайта были одинаковы, выровняйте отступы с краев сайта. Заголовки и подзаголовки должны быть единообразными – по стилю выполнения и размеру шрифта.

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

7) Цвет и контраст
Черный текст (или #333333) на белом фоне. Для заголовков – применяем фирменный цвет. Фирменный цвет подойдет в качестве цвета акцента. Меньше цветов и больше контраста.

8) Будьте аскетичными
Сделайте простой сайт. Расскажите и покажате что и для кого предлагаете. Какую пользу принесет продукт или услуга потребителю. Сделайте выгодное предложение. Не мудрите с сайтом - Чем проще сайт задумаете, тем меньше ошибок сделаете при разработке дизайна и верстке. Стильный сайт – то, что вам нужно.

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

Создать эскиз сайта необходимо и полезно по 3-м причинам:

1. Первая – визуально увидеть, что и как будет расположено на сайте.
На листе бумаге сразу видно сайт полностью целиком. Можно увидеть недочеты или перегруженность сайта элементами и блоками. И исправить ошибки

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

3. Третья, - с помощью прототипа – верстать быстрее и удобней.
Нет нужды подбирать блоки и смотреть, как выглядят и сочетаются между собой. Берем лист бумаги с эскизом и как по шпаргалке верстаем сайт.

Как создать эскиз сайта:

1. Берем альбомный лист бумаги формата А4 и два карандаша – простой и цветной для заметок.

2. Эскиз выполняем в виде блоков, на которых будет расположен контент.
Один блок – один экран монитора. То, что будет расположено в блоке – то увидит посетитель на экране.

3. Мыслите блоками или экранами.
Одна мысль – один экран. То, что хотите показать на сайте. Сайт и презентация, по сути, создаются одинаково.

4. Рисуем блоки.
Один за другим, в той последовательности, как решили расположить на сайте. Пригодится написанный текст контента. Он поможет представить где и как следует отобразить заголовки, подзаголовки и текст. Куда добавить графику.

5. Для рисования контента блоков воспользуемся базовым набором графических элементов:

• Жирная линия – Заголовок;
• Тонкие линии – подзаголовок, текст и надписи текстом;
• Перечеркнутый прямоугольник – картинка;
• Кружочек – иконка;
• Прямоугольник с закругленными углами – кнопка;
• Стрелочки – переключатель слайдера;
• Маленькие квадраты – ссылка на соцсети;
• Полоса сверху – меню. Короткие линии – пункты, кружок – логотип

6. Прототип выполняем в виде узкой ленты
Чтобы осталось место с караю для комментариев, пояснений или текста.

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

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

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

Меню – ссылки на страницы сайта, блоки сайта или на другие сайты. Отдельная ссылка – отдельный пункт меню.

Авторы предлагают использовать 2 вида меню:

1. Пункты, указывающие на страницы или блоки, в верху сайта
Такой вид меню годится, когда на сайте не больше 4 – 5 страниц. Или тематических блоков, в случае, если сайт – лендинг пейдж.

2. Гамбургер
Если информации много – тогда стоит пунты меню расположить на отдельно появляющемся блоке. В блок по порядку указать и пронумеровать страницы сайта. В поле меню – «гамбургер» будет отображен в виде трех параллельных линий. При клике на «гамбургер» появится блок с пунктами меню.

Общие правила оформления меню:

1. Меню должно быть компактным и визуально удобным – не широким, чтобы не перегружать страницу.

2. Пунктов меню не более 5

3. Каждый пункт меню из одного слова

4. Слова короткие, которые отражают суть страницы или блока

5. Пункты меню помогают посетителю быстро находить нужную информацию или раздел.

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

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

Чтобы сайт продавал – требуется наличие 3-х составляющих, как минимум:

1. Правильная целевая аудитория

После того, как определили целевую аудиторию, пишем заголовок и текст. Отвечаем на 2 вопроса:

а) Привлекают заголовки и текст правильную аудиторию?
К кому они обращены – к потребителям продукции и услуг – или к кому-то еще?

б) Привлекает внимание целевой аудитории?
Говорят о пользе и выгоде для потребителя на языке клиента

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

3. Правильное маркетинговое сообщение
Авторы предлагают следующую схему составления рекламного сообщения. Схема состоит из последовательных шагов. Упор сделан на логическое построение структуры контента сайта.

Максимум конкретики и никакого тумана:

• Что предлагает сайт? - Например: кожаные перчатки ручной работы
• Для кого? – Для женщин, которые ценят индивидуальность
• Чем хорош продукт? – Качество материала и работы просто супер!
• Как докажем свои слова? – Шьем в собственной мастерской с 2000 г. (20 лет)
• Кто продает (кто мы)? – Профессиональные дизайнеры и перчаточники
• Призыв – Кожаные перчатки ручной работы – для женщин, которые ценят индивидуальность
• Действие – купите перчатки

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

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

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

Теперь выполним контрольную проверку. Для этого ответим на 7 вопросов:

1. Привлекает сайт правильную аудиторию?
Изучите, к кому направлены сообщения на сайте – к целевой аудитории или ко всем сразу? Чем конкретнее обращение, тем больше вероятность, что контент просмотрят возможные клиенты. Заодно, отсечете тех, кому продукция не требуется

2. Привлекли внимание аудитории?
Сказали о пользе и выгоде, которую получит целевая аудитория. В цифрах, ожиданиях или эмоциях. Рассказали, какие проблемы решаете и как. Если пользы или выгоды нет – клиенты уйдут к конкурентам.

3. Сайт вызывает желание или эмоции приобрести продукцию или услуги?
На сайте есть информация и графика, которая вызывает желание среагировать на предложение. Показали наглядно – фотографиями, картинками или цифрами, как полезно будет клиенту совершить покупку.

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

5. Вызвали доверие клиента?
Покажите сертификаты, грамоты или лицензии в доказательство профессионализма. Добавьте цифры: Количество выполненных заказов, опыт работы или число удачных сделок. Добавьте отзывы.

6. Сказали, что предлагаете простое решение, которое не требует от клиента усилий?
Рассказали о том, что клиенту надо только заплатить удобным для него способом и желаемый продукт или услуга тут же будут у клиента. Чем легче и быстрее клиенту получить желаемое – тем больше вероятность, что он совершит покупку или сделает заказ.

7. На сайте есть повод и возможность среагировать сейчас?
Разместили мотивирующие оферы. Добавили бонусы или ограничения. Разместили кнопки обратного звонка или заказа.

Резюмируем:
Привлечь внимание правильной аудитории, показав выгоду предложения и вызвав желание сделать покупку. Доказываем, что способны решить любую проблему клиента и нам можно доверять. Клиенту нужно только позвонить и сделать заказ – остальное берем на себя.

Авторы блога представили пошаговое руководство, которое позволит создать сайт без команды – самостоятельно

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

Тильда – функциональный и креативный конструктор для создания сайтов: Лэндингов, Интернет-Магазинов, сайтов Услуг или Блогов.

Создание дизайна и верстка на Тильде позволят создать сайт быстро и эффективно. 6 причин, чтобы выбрать Тильду:

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

2. Разработчики Тильды предлагают 450 блоков
Блоки размещены в библиотеке блоков по темам – удобно искать и выбирать требуемый для верстки. Каждый блок имеет отдельные настройки контента и блока. В настройках контента удобно добавлять и изменять графические материалы. В настройках блока – дизайн и СЕО

3. Адаптивность мобильной версии сайта
Каждый блок Тильды автоматически адаптирован для мобильных устройств. Верстаете на компьютере. Конструктор самостоятельно адаптирует блок для каждого мобильного устройства. Сайт гармонично выглядит как на компе, так и на смартфонах или планшетах

4. Блок-ЗЕРО
Собственный редактор блоков. Открытый профессиональный редактор для создания индивидуального дизайна. Подходит для веб-дизайнеров. Дает возможность редактировать каждый элемент контента отдельно и создать собственный сайт. У блока-зеро также предусмотрены настройки расположения контента и СЕО

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

6. Визуальное оформление
Сайт зависит от графики. Красивые сайты смотреть приятнее и интереснее. Тильда предлагает набор блоков – в библиотеке, темы «Галерея» и «Изображения» - для размещения визуально-графического контента. Полноэкранные изображения, галереи из 2, 3 и 4-х фотографий, фотокомбинации и слайдеры. Сайт получится красивым, визуально приятным для просмотра и привлекательным для посетителей.

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

Дизайн и верстка сайта на Тильда задача не простая. В процессе создания сайта, веб-дизанер и верстальщик могут совершить ряд ошибок.

Рассмотрим ошибки при верстке веб-страницы:

1. Отсутствие разделения на смысловые блоки
Смысловые блоки сливаются – нет разделения различным цветом. Отсутствуют отступы между блоками или использованы отступы меньше 4-х линий (1 линия = 30 px)

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

3. Маленькие отступы между смысловыми блоками
Использованы отступы меньше 120 px между смысловыми блоками. Возникает ощущение, что информация на сайте выложена как «сельдь в банке». Не понятно, что и где находится

4. Текст сливается с изображением
Мало контраста между цветом фона изображения и текста, помещенного на картинку. Текст сливается с изображением или слабо читается.

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

6. Узкие блоки акцента
Если выделить отдельный элемент контента с помощью цвета – например, заголовок, то получится эффект «зебры». Смысловой блок распадется. А элемент, выделенный цветом, будет воспринят как отдельная часть или блок.

7. Узкие текстовые колонки
Когда текст располагают на веб-странице больше, чем в 2-х колонках – читаемость снижается. Получаются узкие и длинные текстовые блоки. Текст читать не удобно – сливается. Страница выглядит не аккуратно.

8. Весь текст по центру
Выравнивание текста по центру текста удобно для чтения, когда слов немного. Если тест большой по объему – читать сложно и неудобно.

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

10. Ошибки в визуальной иерархии
Несоблюдение визуальной иерархии вносит путаницу в восприятие контента сайта

11. Один смысловой блок распадается на два
Когда заголовок с текстом расположены выше полноэкранного изображения и нет объединения одним цветом – визуально кажется, что это два отдельных блока. Т.е. заголовок с текстом говорят об одном, а изображение о другом.

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

13. Лишняя обводка кнопок
Выполнена обводка цветной кнопки. Лишний элемент - делает страницу перегруженной, усложняет восприятие и создает пестроту.

14. Много цветов на веб-странице
При верстки использовано больше трех цветов. Много цветов – много путаницы и пестроты. Не понятно, какие элементы главные, какие второстепенные.

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

Рассмотрим каждую ошибку подробно в отдельных статьях. Что представляет и как визуально определить наличие ошибки верстки на веб-странице.

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

Первая ошибка в верстке веб-страницы – выполнить страницу на одном фоне – без разделения, с помощью различных цветов, на смысловые блоки. На практике – сделать фон для всех смысловых блоков одним цветом. Либо выполнить маленькие отступы между смысловыми блоками – менее 120 рх или 4-х линий.

Если совершить указанную ошибку при верстке, то при просмотре веб-страницы будет:
1. Непонятно какой текст и изображения взаимосвязаны
2. Информацию тяжело воспринимать
3. Смысловые блоки на веб-странице будут набиты, как «сельдь в банке»

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

Как избежать ошибки:

1. Текст и изображение относящиеся друг к другу по смыслу – один смысловой блок
2. Каждый смысловой блок выделить одним из 2-х цветов – белый и светло-серый
3. Отделить от другого с помощью цвета
4. Чередовать блоки, выделенные цветом – блок белый, блок и светло-серый и т.д.
5. Задать отступы между блоками – 4 линии или 120 рх

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

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

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

Если задать различные отступы между смысловыми блоками, то при просмотре веб-страницы:
1. Создается ощущение, что информация блоков с большими отступами важнее других
2. Создается ложная визуальная иерархия сайта, которая будет запутывать клиента
3. Теряется гармоничность веб-странцы. Сайт выглядит не аккуратно.

Как избежать ошибки:
1. Задать отступы между блоками – 4 линии или 120 рх
2. При выполнении верстки придерживаться выбранного стиля. Для каждого блока одинаковые отсупы.

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

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

При верстке сайта следует выполнять отступы между смысловыми блоками так, чтобы визуально видеть, что это отдельные блоки. Авторы рекомендуют использовать отступы между смысловыми блоками в 4 линии или 120 рх. Расстояние в 4 линии разбивает веб-страницу и сразу понятно, что каждый блок отдельный по смыслу.

Если задать меленькие отступы между смысловыми блоками – меньше 4-х линий, то при просмотре веб-страницы:

1. Смысловые блоки сливаются – прилипают друг к другу
2. Создается путаница – не понятно, что информация каждого блока разная
3. Веб-страница перегружена – нет «белого пространства»
4. Читать не удобно. Информация набита на веб-страницу, как «сельди в банку»

Как избежать ошибки:

1. Задать отступы между блоками – 4 линии или 120 рх
2. Можно использовать больше 120 рх, меньше нельзя

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

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

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

Как избежать ошибки:

1) Выбираем контрастный цвет текста и фонового изображения;

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

3) Размещаем текст на затемненных участках фото (или осветленных, если текст выполнен темным цветом)

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

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

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

Как избежать ошибки:

1) Смысловой блок выполняем одним шрифтом;
2) Шрифт одного цвета (кроме цвета акцента);
3) Два типа насыщенности – на выбор
4) Не надо пестрить и применять все цвета радуги одновременно

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

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

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

Как избежать ошибки:

1) Заголовки выделяем размером и насыщенностью шрифта;
2) Каждый смысловой блок имеет общий фон;
3) Заголовок, подзаголовок и текст помещаем на общем фоне;
4) Нельзя использовать дополнительное выделение Заголовков с помощью другого фона

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

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

Посетителю трудно прочесть текст. Как следствие, читать не будет. Информацию не воспримет. Можете потерять клиента.

Как избежать ошибки:

1) Размещаем текст в одной или двух колонках;
2) Больше 2-х колонок для текста не используем;
3) Пишем кратко, чтобы текст удобно читался – максимум 5 строк в каждой колонке

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

Когда на одном смысловом блоке располагают много текстового контента – уместно расположить текст в включкой слева. Выбрать отступ в 2 колонки и ширину блока – 8 колонок. Такой текст гармонично смотрится, и удобно читаем.

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

Как избежать ошибки:

1) При центральном выравнивании текста должно быть 3 – 4 строки
2) Кегль текста – 24 рх
3) Заголовок и короткий тестовый фрагмент с включкой по центру – гармоничная и читабельная композиция

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

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

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

Как избежать ошибки:

1) Располагайте текст слева или справа от значимых частей фото;
2) Применяйте левую или правую включку выравнивания текста;
3) Фото и текст – композиция. Дополняют друг друга. Не смешивайте вместе.

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

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

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

Как избежать ошибки:

1) Заголовок на обложке крупнее, чем заголовки других блоков;
2) Заголовок набираем самым крупным шрифтом. Подчеркиваем насыщенностью;
3) Подзаголовок меньше заголовка в 1,5 раза
4) Текст набираем самым маленьким шрифтом – в 2 раза меньше заголовка
5) Клиент должен сразу понять какая информация главная, какая второстепенная. Даже при беглом просмотре веб-страницы

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

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

Как избежать ошибки:

1) Галерея и полноэкранное изображение визуально выглядят как самостоятельный блок;
2) Заголовок и текст, расположенные выше изображения помещаем на единый фон;
3) Следующий блок выделяем другим цветом

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

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

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

Как избежать ошибки:

1) Для длинных заголовков уменьшаем шрифт;
2) Крупный шрифт только для коротких заголовков;
3) Визуально, заголовок не должен занимать полную ширину обложки
4) Заголовок и изображение должны смотреться гармонично. Определяем визуально.

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

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

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

Поэтому, обводку добавляем для создания прозрачных кнопок. Цветные привлекут внимание и без обводки

Как избежать ошибки:

1) Обводку применяем, чтобы сделать прозрачную кнопку;
2) Цветные кнопки одним фоном;
3) Нельзя обводить цветную кнопку

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

Если на странице используется много цветов, то возникает пестрота и путаница. Будет непонятно, какие элементы главные, какие второстепенные. Клиент не поймет, что хотите сказать и на чем заострить внимание.

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

Как избежать ошибки:

1) Используем три цвета: фон, черный текст и цвет акцента по выбору;
2) Подчеркиваем цветом акцента значимые элементы – заголовки, цифры и т.п.;
3) Не пестрим

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

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

Если расположите в меню более 5 пунктов, то ориентироваться будет сложно. Сайт выглядит перегруженным и непрофессиональным.

Оптимальным решением будет расположить в меню 4 – 5 пунктов. Удобно смотреть и видно, что предлагаете на сайте. Если пунктов больше 5 – используйте меню с раскрывающимся списком, многоуровневое или меню «Гамбургер».

Как избежать ошибки:

1) В строку меню выносим максимум 5 пунктов;
2) Когда пунктов больше – добавляем раскрывающееся меню - сбоку;
3) Используем меню «Гамбургер»
4) Применяем многоуровневое меню, с выпадающим списком подпунктов

Авторы блога рассказали об ошибках, которые допускают при верстке веб-страницы. Показали, как выглядят ошибки на конкретных примерах. И рассказали, как их избежать.

Дальше остановимся на ошибках, которые допускают при верстке статей или смысловых блоков

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

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

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

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

При верстке статьи и смыслового блока совершают следующие ошибки:

1. Сплошной текст
2. «Летающий» заголовок
3. Нарушение смысловой иерархии

4. Различные отступы в смысловом блоке
5. Подпись близко к фотографии
6. Мало белого пространства на смысловом блоке

7. Текст близко к ключевой фразе
8. Низкий контраст элементов
9. Цветной фон узкого блока

10. Пустое пространство между полноэкранными фотографиями
11. Много выделений жирным шрифтом
12. Много типографических стилей

13. Центральная включка для длинного текста
14. «Прилипание» заголовка к фото
15. Неуместный курсив
16. Смещение блока от центра

Дальше рассмотрим каждую ошибку подробно. Что представляет на практике, как выглядит визуально при верстке статьи или смыслового блока. Расскажем к каким последствиям приводит и как избежать ошибки

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

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

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

Вывод: разбиваем текст на короткие абзацы. Подчеркиваем акценты. Тогда посетитель будет читать статью и узнает, о чем хотели рассказать

Как избежать ошибки:

1) Длинный сплошной текст под запретом;
2) Разбиваем длинный текст на короткие абзацы в 4 – 5 строк;
3) Добавляем акценты из ключевых фраз текста;
4) Между абзацами добавляем дополнительное «белое пространство» в одну строку

Статья станет читабельной – клиент прочитает и узнает, о чем хотели рассказать

В следующей статье автор расскажет о «Летающем» заголовке. Что за ошибка, как влияет на читабельность и как избежать при верстке.

Визуально, посетитель должен понять к какому абзацу относится заголовок. Если задать равные расстояния между заголовком и предыдущим и следующим абзацами – возникает эффект «летающего» заголовка.

Заголовок зависнет в пространстве и будет воспринят как самодостаточный элемент. Смысл потерян и посетитель не поймет о чем говорит и к какому абзацу принадлежит заголовок. Как следствие – абзац пропустит.

Как избежать ошибки:

1) Просматриваем статьи и блоки, чтобы визуально определить «летающий» заголовок
2) Задаем расстояние между предыдущим абзацем и заголовком в 2-3 раза больше, чем между ним и следующим абзацем;
3) Задаем расстояние между заголовком и абзацем равным расстоянию между абзацами;

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

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

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

Соответственно – заголовок выполняем самым крупным шрифтом.
Подзаголовок значительно меньше заголовка. Текст меньше подзаголовка в полтора раза

Как избежать ошибки:

1) Выполняем заголовок крупным шрифтом – 60 рх;
2) Подзаголовок – 30 рх;
3) Текст – 22 рх.

Тогда будет видно, какие элементы главные, какие второстепенные. Посетитель воспримет информацию в порядке убывания смысла. И усвоит информацию

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

Меньший отступ между обложкой и элементом контента нарушает смысловую иерархию блоков

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

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

Как избежать ошибки:

1) Задаем равные расстояния отступов в смысловых блоках;
2) Рекомендуем задавать отступы сверху и снизу смыслового блока – 4 линии или 120 рх;
3) Заданные отступы используем для каждого блока на сайте
4) Не изменяем заданные отступы!

Тогда смысловые блоки будут выглядеть равнозначными. Веб-страница гармоничной и удобной для просмотра

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

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

Когда подпись расположена близко к фото, то визуально вторгается на территорию картинки.
«Приклеивается» к изображению и мешает восприятию контента. Посетителю тяжело смотреть картинку – подпись мешает. Смысл того, что хотите сказать будет утерян.

Как избежать ошибки:

1) Задаем расстояние между картинкой и подписью в 1,5 линии или 45 рх ;
2) Визуально смотрим, чтобы подпись относилась к фото и не мешала просмотру картинки;
3) Текст подписи не должен вторгаться на площадь картинки

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

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

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

Как избежать ошибки:

1) Задаем отступ между заголовком и текстом равным отступу между абзацами;
2) Если есть подзаголовок – отступ между текстом и подзаголовком равен отступу между абзацами;
3) Можно задать отступ между текстом и заголовком на 30 рх больше, чем между абзацами

Тогда статья выглядит гармоничной и удобна для чтения

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

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

Чтобы акцент визуально бросался в глаза используем шрифт в 1,5 раза больше, чем текст. Акцент помещаем на ширину 10 колонок, чтобы расположить шире, чем текст (8 колонок). И отделяем отступами в 4 линии сверху и снизу от текста.

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

Как избежать ошибки:

1) Задаем расстояние между картинкой и подписью в 1,5 линии или 45 рх ;
2) Визуально смотрим, чтобы подпись относилась к фото и не мешала просмотру картинки;
3) Текст подписи не должен вторгаться на площадь картинки

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

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

Решили подчеркнуть что-то важное с помощью ключевой фразу – разделите с основным текстом. Используйте шрифт в 1,5 раза крупнее основного текста. Можно выделить с помощью цвета или шрифта акцента. Ключевая фраза - важная мысль и должна выделяться визуально.

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

Как избежать ошибки:

1) Выполняем ключевую фразу шрифтом в 1,5 раза больше основного текста;
2) Отделяем отступами свершу и снизу в 120 рх;
3) Используем шрифт или цвет акцента

Тогда будет создан контраст элементов и посетитель заострит внимание и прочитает выделенный элемент.

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

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

Заголовки выделяем крупным - в 2 раза больше основного текста - шрифтом с засечками. Подзаголовок крупнее основного текста в 1,2 – 1,5 раза.

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

Как избежать ошибки:

1) Нельзя выделять узкий элемент цветным фоном;
2) Небольшой блок выделяем «белым пространством» - отступами сверху и снизу в 2 линии или 60 рх ;
3) Для заголовков используем насыщенный шрифт с засечками. Крупнее основного в 1,5 – 2 раза
4) Для подзаголовков – шрифт крупнее основного в 1,5 раза

Тогда статья или блок получатся гармоничными. Посетителю будет удобно читать контент

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

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

Как избежать ошибки:

1) Полноэкранные изображения подряд располагаем сплошной вертикалью;
2) Никаких отступов между ними не делаем;

Тогда блок выглядит гармонично. Посетителю удобно и легко смотреть фотографии

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

Жирное выделение служит, чтобы привлечь внимание к важному элементу текста. Жирное выделение, как акцент, привлекает внимание. Хорошо работает, когда выделений в тексте немного. Также, жирным в статье выделяем начало абзацев. Чтобы привлечь внимание читателя и создать эффект чтения «по вертикали», когда просматривают только начало абзацев.

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

Как избежать ошибки:

1) Визуально смотрим текст статьи – чтобы не рябило в глазах от выделений жирным;
2) Жирным выделяем только важные пункты в статье;
3) Начните абзац с жирного выделения, чтобы привлечь внимание читателя
4) Кроме начала абзаца ничего жирным не подчеркиваем

Тогда выделение жирным привлечет внимание и не будет мешать читать статью

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

Грамотное оформление – важная часть статьи. Удобство чтение важнее оформления. Вывод: оформление не должно преобладать над читабельностью.

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

Если поставить оформление в приоритет – пострадает удобство чтения. Много стилей внимания отвлекают внимания от текста – как следствие, читать не станут. Значит, статья написана в пустую.

Как избежать ошибки:

1) Один стиль;
2) Когда пунктов больше – добавляем раскрывающееся меню - сбоку;
3) Используем меню «Гамбургер»
4) Применяем многоуровневое меню, с выпадающим списком подпунктов


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


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

Когда располагаем на сайте статью с большим текстом – целесообразно использовать выравнивание текста по левому краю. Для удобства чтения делаем отступ слева в 2 колонки. Ширина текста на сайте – 8 колонок. Тогда статья визуально выглядит гармоничной и ее удобно читать.


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

Как избежать ошибки:

1) Разбиваем текст статьи на короткие абзацы;
2) Выравнивание – по левому краю;
3) Выравнивание по центру – для заголовков, подзаголовков и короткого описания
4) Длина описания – не больше 4-х строк



Тогда статья хорошо воспринимается визуально. Удобно читать и глаза не устают. Что и требуется читателю.


В следующей статье автор расскажет о случае, когда заголовок визуально «прилипает» к фотографии. Что за ошибка, как влияет на читабельность и как избежать при верстке.

Заголовок – самостоятельный элемент, который привлекает внимание и раскрывает содержание статьи или смыслового блока. Чтобы заголовок подчеркнул содержание – следует отделить от картинки отступом в 60 рх или 2 линии. Или добавить подзаголовок, который раскроет суть заголовка. Подзаголовок отделить от фото отступом в 60 рх

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

Как избежать ошибки:

1) Заголовок отделяем от фотографии «белым пространством» в 2 линии или 60 рх;
2) Между заголовком и фотографией размещаем подзаголовок;
3) Отступ между заголовком, подзаголовком и картинкой – 60 рх

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

В следующей статье автор расскажет о неуместном использовании курсива при верстке статьи. Что за ошибка, как влияет на читабельность и как избежать при верстке.

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

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

Как избежать ошибки:

1) Используем курсив только в текстах, набранных шрифтом с засечками;
2) Курсивом выделяем 2-3 слова или короткую фразу в тексте;
3) Нельзя выделять курсивом заголовки и подзаголовки
4) Ключевую фразу выделяем шрифтом акцента и отступами – без курсива

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

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

Элементы смыслового блока и сами блока выравниваем относительно друг друга. Чтобы они располагались на одно вертикальной линии.

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

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

Как избежать ошибки:

1) Визуально смотрим статью и расположение смысловых блоков;
2) Визуально выравниваем элементы статьи и блоки по вертикали;

Тогда статья и сайт будут смотреться гармонично. Статью удобно читать. Сайт приятно и удобно просматривать.

Авторы блога рассказали об ошибках, которые допускают при верстке статей и отдельных смысловых блоков. Показали, как выглядят ошибки на конкретных примерах. И рассказали, как избежать.

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

В следующей статье автор расскажет, что такое современное СЕО продвижение. Как и за счет чего поисковые системы выводят сайт в топ.

Продолжение темы читайте во второй части нашего БЛОГА