Дизайн ArtSide Company
3 553

Инструкция: улучшаем дизайн за один день без бюджета и Артемия Лебедева

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

В закладки
Реальный сайт одного из туристических агентств

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

Но есть один приём, который улучшит положение. Не надо переделывать дизайн, привлекать специалистов, нанимать Артемия Лебедева, отсматривать 403 варианта и тратить уйму денег. Просто сделайте отступы между единицами контента. Это, конечно, не редизайн, но сайт станет удобнее для восприятия.

Просто сделайте отступы

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

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

  1. section (секция) — крупный элемент контента. В первой части это текст: заголовок и два абзаца. В секциях отступ обозначается как p — padding, «набивка, шапка документа».
  2. row (строка) — элемент, на который разделена секция. Отступ обозначается как m — margin, «поле».

В обоих случаях величина отступа выражается в пикселях.

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

Расчёт отступов для десктопной версии сайта

Расчёт отступов для мобильной версии сайта

В этих таблицах заданы усреднённые значения. Но вы можете задать свои. Главное — смотрите на формулу. Принцип расчёта отступов сохраняется.

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

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "ArtSide Company", "author_type": "self", "tags": [], "comments": 13, "likes": 15, "favorites": 78, "is_advertisement": false, "subsite_label": "design", "id": 71942, "is_wide": false, "is_ugc": true, "date": "Tue, 18 Jun 2019 09:29:43 +0300" }
{ "id": 71942, "author_id": 302011, "diff_limit": 1000, "urls": {"diff":"\/comments\/71942\/get","add":"\/comments\/71942\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/71942"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
13 комментариев

Популярные

По порядку

Написать комментарий...
10

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

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

Ответить
3

Объясните, как у вас на одной странице оказалось два заголовка h1?
Дизайн меняем - для удобного восприятия, а h1 второй для падения в яндексе - ошибочка)
Но в целом, неплохо для улучшения юзабилити без бюджета👍

Ответить
1

Упс, должно быть h2, конечно! Спасибо, что заметили, поправим.

Ответить
0

А где тогда будет h1?

Ответить
0

В первом блоке. Там, где вы нашли первый h1.
Обновили картинки.

Ответить
3

Кажется на первом скриншоте примерно такие отступы и есть, но ситуацию это не спасает.

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

Ответить
3

Без Артемия Лебедева? Это вообще законно?

Ответить
1

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

Ответить
1

без бюджета и Артемия Лебедева
Логомашина.

Ответить
0

они не делают сайтов

Ответить
1

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

Ответить
0

Сейчас есть 3 типа турагентств.
1 Крупные агрегаторы со своим ИТ и мощным онлайн-поисков по турам. (слетать, онлайнтур)
Текста у них минимум, основное - это поиск.
Кто может отжимать туроператоров и качественно писать поиск - тот рулит.
2 Мелкие агенства. Часто работают по агентскому договору с п1.
Часто делятся комиссией. Основное их УКП - человеческое отношение, экспертиза, доверие.
Сайт если и есть, то играет десятую роль.
3 Организаторы "немассовых" поездок.
Тут другой рынок - как раз нужны и продающие тексты. и на сайт приходят с соцсетей, инсты и тд..
Задача сайта - именно увлечь поездкой-приключением.
Само количество туров часто ограничено одним в месяц.

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

Ответить
0

Как-то сложно🤔

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Голосовой помощник выкупил
компанию-создателя
Подписаться на push-уведомления
{ "page_type": "default" }