Как правильно использовать визуальную иерархию и разметку веб-сайта


Оглавление (нажмите, чтобы открыть):

6 принципов оптимизации структуры сайта

Почему структура сайта так важна? Тому есть есть две глобальные причины:
— сайт с правильно спланированной структурой будет больше нравится поисковым системам, а значит, индексирование страниц будет проходить быстрее;
— людям нравится пользоваться удобными и понятными для восприятия сайтами. Поэтому логичная структура — обязательное условие, если вы хотите, чтобы на вашем сайте было много посетителей.
Обделенные хорошей структурой ресурсы просто обречены на неудачу. Как сделать структуру сайта, чтобы он не стал одним из таких неудачников? А также как подружить его с поисковиками и сделать юзабельным для людей я расскажу в этой статье.

Из статьи вы узнаете:

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

Создание структуры сайта: 6 шагов, которые нужно пройти

1. Планируйте иерархию страниц.

Иерархия страниц (или структура сайта) — это способ организовать всю информацию на сайте и предоставить ее в определенном виде. Нет единственно верного решения в плане иерархии, она может быть разной. Главные условия — это ее логичность, сбалансированность и отсутствие перегруженности. Под сбалансированностью понимается примерно одинаковое количество категорий в каждом разделе. То есть, не нужно стремиться сделать их совсем одинаковыми, но если в одном разделе у вас будет 36 категорий, а в другом (того же уровня) всего 3 — то это будет несбалансированная структура.

4 основных вида структуры сайта

Структура сайта определяет последовательность и форму отображения всех имеющихся на нём страниц. Основные виды структур такие:

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

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

Линейная структура сайта, пример: https://razooma.net/#0

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

Древовидная структура сайта, пример: https://dacha-dom.ru/

— решетчатая. Её можно назвать усовершенствованной иерархической структурой. Решетчатая структура позволяет не только выстроить страницы по принципу иерархии, но и перемещаться между «горизонтальными» страницами, не возвращаясь при этом на предыдущий уровень. Такая структура довольно сложная и применять её на сайте с большим количеством страниц не всегда рационально. Чаще всего используется для создания интернет-магазинов и других различных каталогов товаров.

Решетчатая структура сайта, пример: https://rozetka.com.ua/

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

Как выбрать структуру для своего сайта?

Если сравнивать эти виды структур, то тут нет понятия “лучше” или “хуже”. Выбор вида иерархии страниц будет полностью зависеть от типа и целей сайта.
Для сайта-визитки подойдет линейная структура, но в большинстве случаев используется одностраничный шаблон (то есть, по сути отсутствие структуры как таковой, ведь сайт состоит из одной страницы).

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

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

2. Используйте малый уровень вложенности страниц.

Расположение всех страниц на сайте можно определить с помощью уровня их вложенности.
1-й уровень вложенности – это главная страница сайта;
2-й уровень – это все страницы, на которые можно перейти сразу с главной страницы. Как правило, это категории или разделы;
3-й уровень – это страницы (например, статьи в каждом разделе), на которые ведут категории из предыдущего уровня. И по такому же принципу далее.

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

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

Схема уровней вложенности страниц на сайте

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

Желтые строки — это основные разделы сайта, на которые можно перейти сразу с главной страницы. Зеленые — это категории каждого раздела. А серые строки — страницы категорий. В этом же документе будет удобно прописывать и то, как будут выглядеть URL каждого раздела и категории (об этом подробнее чуть ниже).

3. Создавайте страницу с картой сайта.

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

На блоге Netpeak 10 основных категорий (на скрине видна только одна — PPC). Таким же образом на странице с картой сайта ниже отображаются и все остальные категории.

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

4. Расставляйте внутренние ссылки на сайте.

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

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

И еще это отличный способ привлечь внимание пользователей к определенной странице сайта. Вот так выглядит перелинковка на сайте:

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

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

5. Используйте ЧПУ.

Friendly URL или, в русской интерпретации, «Человекопонятный УРЛ» — это оптимальный для чтения и восприятия адрес веб-страницы. Использование ЧПУ в веб-адресах страниц дает преимущества и с точки зрения удобства пользователей, и с точки зрения поискового продвижения.

Когда пользователь видит ЧПУ адрес, ему уже становится понятно, какую информацию содержит данная страница. Сравните вот такой веб-адрес:
https://mysite.com/catalog/phones/
и вот такой:
https://mysite.com/sect=65&kind=24/g87phone/

Глядя на первый вариант, не возникает вопросов о том, в каком месте на сайте мы находимся. Это и есть ЧПУ.

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

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

И, соответственно, URL-адреса категорий:

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

6. Правильно структурируйте главную страницу и разделы.

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

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

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

На этих примерах текст-пояснение размещен рядом с графическим логотипом ресурса.

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

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

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

Ищете лучший хостинг сайтов? У нас вы найдете отличные предложения виртуального хостинга с доменом в подарок.

Дизайн интерфейсов: 10 правил UI-дизайна

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

1. Четко понимайте роль UI и UX

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

Грубо говоря, UX – это «как работает», а UI – «как выглядит».

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

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

2. Знайте целевую аудиторию сайта

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

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

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

Помните: использование визуально приятных веб-шаблонов поможет привлечь ЦА.

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

3. Простой и понятный UI-дизайн

Отличительной особенностью хорошего интерфейса является простота.

Мы не имеем в виду приклеивание кнопки здесь и там с примитивной анимацией.

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

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

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

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

4. Внедряйте визуальную иерархию сайта

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

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

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

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

5. Правильно используйте типографику

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

Это не так просто, как выбрать хороший шрифт (три из четырех дизайнеров выбирают Comic Sans). Каждый шрифт имеет, так сказать, индивидуальность, и влияет на ЦА по-разному.

Размер играет ключевую роль при использовании шрифтов в вебе.

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

6. Цвета и контраст в дизайне интерфейса

Некоторые комбинации, такие как синий на красном, читаются ужасно.

Хороший UI-дизайнер никогда не допустит появления такого «салата» на мониторе.

Выбор правильных цветов для дизайна интерфейса – это целая наука.

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

Цветовая схема должна быть не только красивой, но и эффективной.

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

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

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

7. Настройте обратную связь

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

Идет загрузка? Почему бы не вывести в этот момент анимацию с полезным сообщением для пользователя? Человек неверно заполнил форму – почему сразу не сообщить ему?

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

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

8. Упрощайте формы для заполнения

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

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

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

Спросите себя: «Действительно ли эта форма необходима?».

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

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

9. Дизайн интерфейсов – командная работа

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

10. Объедините результаты UI-дизайна

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

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

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

Есть личные правила UI-дизайна? Делитесь ими в комментариях.

Правила композиции в графическом и веб-дизайне

Андрей Батурин

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

Что понимают под композицией

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

Мастер Йода рекомендует:  7 полезных советов для улучшения jQuery кода Javascript

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

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

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

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

Принципы композиции в графическом и веб-дизайне

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

Цвет

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

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

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

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

Обязательно определите основной цвет и дополнительные. Установите для каждого из них роли. Один — для интерфейса, второй — для контента, третий — для кнопок и т.д.

Модульная сетка

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

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

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

Направление взгляда пользователя

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

В случае с Z — слева направо, затем по диагонали вниз и снова слева направо. В случае с F — сначала вертикально сверху вниз, а затем слева направо вдоль строк.

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

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

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

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

Правило третей

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

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

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

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

Свободное пространство

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

Чтобы избежать этого, добавьте в дизайн “воздуха” — свободного пространства. Но и позаботьтесь о том, чтобы оно корректно отображалось на всех устройствах. Будет неприятно, если на мобильном телефоне интерфейс съедет за пределы страницы и будет виден только пустой фон.

Иерархия блоков

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

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

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

Баланс

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

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

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

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

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

23 совета по созданию качественного веб-продукта

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

Что желательно делать

1. Сделайте интерфейс однородным для всего проекта

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

На сайте Esquire всё выглядит однородным на разных страницах.

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

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

2. Разработайте простую для использования навигацию

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

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

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

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

3. Изменяйте цвет посещённых ссылок

Пользователь может запутаться и кликнуть на одну ссылку дважды, если вы не подсветите её после посещения. Будет печально, если из-за этого человек уйдёт с вашего сайта.

4. Сделайте страницу простой для сканирования глазами

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

4 октября 2020 – 1 марта 2020, Москва и онлайн, беcплатно

Влияние HTML5 и микроразметки Schema на SEO

Влияние HTML5 и микроразметки Schema на SEO

Вещи, давно ставшие стандартами в индустрии SEO на Западе, да и в России (в высокобюджетном сегменте SEO), с трудом доходят до массового потребления в России.
Несмотря на то, что технологии HTML5 8 лет, а самый популярный на сегодняшний день формат микроразметки Schema запущен в 2011 году, на просторах Российского интернета встретить эти форматы не так просто, а тем более, когда они используются совместно.
Нельзя сказать, что эти технологии сверх сложные для вебмастеров (хотя назвать их простыми тоже нельзя), просто зачастую до реализации их на сайте не доходят руки оптимизаторов, а зря. Причин тому множество, начиная с лени и заканчивая, к сожалению, некомпетентностью.
Так или иначе, внедрение разметки HTML5 и микроразметки (в общем, семантической разметки) в уже действующие сайты – одно из необходимых действий в рамках технической оптимизации сайта.

Содержание:

  1. Зачем вообще сайту нужна разметка
    • HTML5 или макро разметка
      • и
      • Микроразметка Schema и другие форматы
        • Разметка контактных данных
        • Разметка хлебных крошек
        • Разметка карточки с товаром
    • Влияние HTML5 и микроразметки на ранжирование сайтов и определение релевантности документов
      • Плюсы использования HTML5
      • Плюсы использования микроразметки
      • Что там с факторами ранжирования?
        • Яндекс
        • Google
    • Выводы
    • Полезные ссылки

Зачем вообще сайту нужна разметка

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

HTML5 или макро разметка

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

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

Пример разметки header Пример разметки footer

Однако тег header используется не только для разметки шапка сайта. Его можно использовать и для других целей. К примеру у секции или статьи может быть свой header.

Этот тег предназначен для разметки любой навигации по сайту, будь то меню в шапке сайта, ссылки в footer или сайдбаре. Если у Вас на сайте есть блочный элемент с любой навигацией — смело оборачивайте его в .
Спецификация разрешает использовать nav многократно, что и следует делать.

Пример разметки nav в header

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

Пример разметки nav в header (Мобильная версия)

Пагинация — это тоже своего рода навигация и допустимо размечать ее тегом nav.

Пример разметки nav для пагинации

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

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

Это по сути универсальный элемент, в который можно заворачивать практически все, кроме тех сущностей, для которых предусмотрены специальные теги (Статьи и списки статей (или новостей) и сайдбары). Как правило элемент section объединяет в себе блок, в котором содержится однородный контент.
К примеру:

Пример разметки section для части страницы сайта

Обычно section содержит заголовок и контент, относящийся к этому заголовку. При этом, в section можно использовать заголовки h1 и это не приведет к каким-либо негативным последствиям со стороны поисковых систем (но все равно страшно, когда на странице 60 заголовков h1). Пожалуй, можно использовать заголовки и другого уровня, спецификация на этот счет не имеет четких рекомендаций.
Sectiom может содержать произвольное количество вложенных семантических тегов — Artilce, Aside, Section, потому что сами секции могут быть довольно большого размера (но, конечно, не больше main). Не будем на эту тему подробно, потому что это повод написать отдельную статью, видимо как создать ТЗ на верстку и интеграцию html5 и микроразметки.

Дословно переводя — это статья. Но используется этот элемент не столько для разметки статей, сколько для разметки групп статей, новостей, комментариев, в общем-то любых записей на сайте. Для таких элементов не нужно использовать тег nav.
Сами статьи также можно размечать элементом article, но только в том случае, если в нем будут другие вложенные элементы — article, aside или section.

Пример разметки article для части страницы сайта

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

Пример разметки aside для части страницы сайта

Микроразметка Schema и другие форматы

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

Пример микроразметки. Что можно разметить на странице

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

Разметка контактных данных

Для разметки контактных данных рекомендуется использовать схему Organization.
Используя эту схему можно разметить:

  • Телефоны
  • Адрес
  • Социальные сети
  • Логотип
  • E-mail
  • Полное наименование
  • Социальные сети организации

Это далеко не все. Все можно посмотреть здесь https://schema.org/Organization.
Такая разметка позволяет поисковой машине точно определить тип сканируемого контента и использовать эту информацию при формировании результатов поиска.
Однако, разметка организации как правило используется в сниппетах по брендовым запросам (Но не всегда и не только там).

Выдача яндекса по брендовому запросу

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

Разметка хлебных крошек

Это простая схема, наверное самая простая из всех. Не случайно она используется практически во всех шаблонах и готовых решениях для создания сайтов.
Больше об этой схеме можно узнать здесь https://schema.org/BreadcrumbList.

Яндекс взял хлебные крошки из микроразметки

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

Разметка карточки с товаром

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

Это все-таки разметка страницы, которая используется в потоке документа. И чтобы сделать все валидно, нужно правильно использовать вложения схем и свойств и при этом сохранить разметку html и верстку. Безусловно, микроразметку лучше всего внедрять на этапе верстки сайта, но так делаем только мы, и, возможно кто-то еще.
Создать ТЗ на внедрение микроразметки по всему сайту и валидно внедрить ее — это лишние 5-6 часов работы. Обычно заказчик сайта и не знает о такой опции, а исполнители не особенно любят совершать «лишние движения».
Поэтому внедрение микроразметки происходит в уже давно созданный html. И часто приходится часть документа переверстывать. Но это того стоит.

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

  • Цены
  • Рейтинг (желтые такие звезочки)
  • Отзывы
  • Данные из других типов разметки

Сниппет в Google из микроразметки

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

Влияние HTML5 и микроразметки на ранжирование сайтов и определение релевантности документов


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

Плюсы использования HTML5

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

В самом деле, ведь Вы помните Flash? Иногда он еще встречается на сайтах из 2000-х годов. Сегодня подходы к использованию графики на сайте совершенно иные. В этом смысле богатый инструментарий дает и HTML5.

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

Отменный поток документа

При грамотном подходе к разметке с HTML5 поток документа станет идеальным. Помните, как это было раньше? Когда заголовки h2 h3 h4 попадали в ту часть документа, где не должно их быть. Если правильно пользоваться html5 можно забыть как об иерархии заголовков (речь конечно не о текстовой контентной части) на странице, так и использовании заголовков во второстепенном контенте, таком как формы, фильтры, сайдбары и проч. Все это оборачивается в aside и поиск понимает, что это не важно для релевантности основного контента.

Выделение основного контента

Возможность сделать разметку контента более понятной

К примеру у той же статьи, если ее разметить article может быть свой header, где есть мета данные — дата, автор, название мало ли что еще, свой footer, где может быть количество просмотров, кнопки поделиться, комментарии, и проч. Спецификация это допускает.
Есть огромное количество плюсов технологии HTML5 вне контекста семантической разметки, которые влияют на скорость загрузки, поведение пользователей, Usability.
На наш взгляд самое главное для улучшения результатов сайта в поиске в html5 — это возможность разбить документ на отдельные смысловые, семантические секции. И есть интуитивное ощущение, что поисковые машины их понимают и интерпретируют.
Кроме этого, подумайте вот о чем. Появился новый стандарт в HTML разметке (причем довольно давно), почему бы не использовать именно его при создании технических заданий на верстку?

Плюсы использования микроразметки

Наши наблюдения за выдачей показывают, что ближе к первому месту находятся ссылки на сайты с расширенными сниппетами. Это говорит о том, что поисковики любят микроразметку.
В пользу этого факта говорит и то, что в панелях вебмастеров большое внимание уделяется микроразметке, ее тестированию, примерам внедрения и т.д. Это в большей мере относится к Google, практически вся SearchConsole кричит о структурированных данных. Гуглу, видимо, структурированный данные очень для чего-то нужны. Вероятно нужны они будут и яндексу (если они намерены развивать поисковые технологии, а не лепить выдачу из своих сервисов и рекламы).
Микроразметка важна не только для формирования сниппета, а еще, по нашему мнению, для улучшения индекса страницы. Используя микроразметку мы обогащаем именно индекс поисковой системы (грубо — базу данных, в которой храниться информация о странице). Использование структурированных данных позволяют заполнить больше полей индекса и использовать их для вычисления релевантности документа.
Правильное использование структурированных данных на своих сайтах влияет в целом на качество поиска.

Что там с факторами ранжирования?

Яндекс

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

Почему?
Потому что большая часть SEO специалистов работает в низкобюджетном сегменте.
Если бюджет на создание сайта 60 000 рублей, а на SEO 25 000 / мес, то откуда взяться продуманным техническим заданиям?

В общем, HTML5 для SEO в России пока не прижился начиная с Яндекса.
Относительно микроразметки как фактора ранжирования от Яндекса четких сигналов также не поступало, однако в панели вебмастера есть инструменты работы с микроразметкой. Кроме того, некоторое время Яндекс довольно активно работал со структурными данными, на эту тему есть даже несколько хороших постов Яндекса на хабре (Если твердо решили разобраться с микроразметкой — почитайте, там всего 5 постов).
По микроразметке точно можно сказать, что на SEO под Яндекс она влияет.

Google

В общем из-за океана также не было четких сигналов о полезности HTML5. Джон Мюллер однажды высказался на эту тему в Twitter, дословно.

«Не думаю, что мы обращаем внимание на все это. Вообще-то, когда речь заходит об HTML, веб-мастера очень часто творят чудеса изобретательности. Но главное при этом все делать правильно. Если HTML5 используется верно, то в плане SEO никаких проблем быть не должно».

В этой цитате я бы выделил один важный момент. Профессионалы, да и вообще воспитанные люди никогда не утверждают чего-либо, если они в этом не уверены. Начало ответа «Не думаю, что мы обращаем внимание на все это» означает то, что Джон не знает точно, использует ли Google HTML5 разметку в качестве сигнала релевантности, либо при формировании индекса, либо еще на каком-либо этапе работы google с документом.
Западное сообщество SEO специалистов настроено противоположно Российскому, там большинство уверено в необходимости HTML5 как технической части SEO оптимизации.
Джон Мюллер отрицает и структурные данные как фактор ранжирования, на эту тему он высказывался несколько раз.
Однако те, кто видит SearchConsole чаще, чем раз в неделю знают, что google очень настаивает на внедрении микроразметки. Практически все высказывания Мюллера в этой области сводятся к тому что сама по себе микроразметка ничего не решает, важна совокупность всех факторов.

15 золотых принципов визуальной иерархии на лендинге

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

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

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

  • Что это? (принцип полезности)
  • Как это использовать? (принцип удобства)
  • Почему это должно меня беспокоить? (принцип желательности)

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

Специалисты DesignMantic выделили 15 золотых принципов визуальной иерархии:

1. Точка фокуса

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

2. Движение

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

Существует два культурных паттерна чтения текста: Z-паттерн и F-паттерн. Подстраивание дизайна или текста под эти шаблоны сделает ваш контент понятнее. Если посетители изучают страницу не в том порядке, в котором вы бы хотели, проведите сплит-тестирование двух вариантов сайта, соответствующих этим паттернам.

3. Золотое сечение

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

4. Баланс

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

5. Повторение

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

6. Пустое пространство

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

Это один из самых важных инструментов проектирования, поскольку от него зависит, насколько легко читается лендинг. Пустое пространство позволяет вашим посетителям «выдохнуть» в процессе получения информации. Также оно может подчеркнуть некоторые значимые элементы.

7. Визуальный треугольник

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

8. Текстуры

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

9. Шрифты

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

10. Случайность

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

11. Нарушение правил

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

12. Выравнивание

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

13. Линии

Большинство западных пользователей читает справа налево. Именно по этой линии следует располагать важные элементы дизайна.

14. Контраст

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

15. Правило трех

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

13 основных правил веб-дизайна, которые полезно знать заказчику

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

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

Основные правила веб-дизайна

Правило 1. Хорошая скорость загрузки страницы

Казалось бы, причем здесь веб-дизайн? Объясняем. Многие специалисты так увлекаются графическими экспериментами, что не обращают внимания на скорость загрузки. А она, если напичкать сайт виджетами, анимацией и видео, неизбежно будет падать. Если сайт будет грузиться медленно — не у каждого посетителя хватит терпения ждать, половина просто покинет ваш ресурс, не успев ничего толком посмотреть. С другой стороны, без графических эффектов тоже никуда. Скучную серую простыню текста никто читать не будет — если у вас, конечно, не “Википедия”.

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

Правило 2. Юзабилити, или удобство использования сайта

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

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

Если всего этого нет — сайт неудобен, посетитель с большой вероятностью покинет его и будет искать другой, в котором позаботились о юзабилити. Никто не будет сидеть и разбираться, где же на сайте находится раздел “Распродажи” — проще закрыть вкладку и вернуться в поисковик. Конкуренты скажут вам за это спасибо, а вот бюджет на продвижение помашет ручкой и скажут “прощай”: считай, деньги улетели в трубу. Да и конверсия падает: посетитель ушел и не успел совершить никаких целевых действий.

Правило 3. Читаемые шрифты

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

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

Правило 4. Умеренная цветовая палитра

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

Правило 5. Современный фон

Еще один привет из девяностых: сложносочиненный фон, или подложка, для сайта. До сих пор используется в среде начинающих веб-дизайнеров, на бюджетных сайтах доменов второго и третьего уровня, очень активно — в “Живом журнале”. Наивно думать, что если вы продаете украшения — фоном должны идти золотые россыпи, если продукты — груды еды. Все это слишком очевидно и банально. Нет, картинки в тему всегда актуальны, но для фона лучше выбрать что-то необычное, неизбитое. Чистые тона и градиенты, трехмерные изображения, виртуальная реальность — вот что модно сейчас.

Правило 6. Единый стиль

Шрифты — строгие, цвета — веселенькие, а картинки надерганы из разных стоков по принципу “пусть будет, да побольше”? Одна форма заказа горизонтальная, другая — вертикальная, и в каждой разные шрифты? Стоп, так не пойдет: продающий дизайн предполагает единство стиля. Как сказал классик, “в одну телегу впрячь не можно коня и трепетную лань!”

Правило 7. Золотое сечение

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

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

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

Правило 8. Правило третей

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

Следовательно, рядом с этими точками нужно размещать самую важную информацию — чтобы наверняка увидели. Это может быть кнопка с call to action — призывом к действию, или форма заказа. Считается, что самая “активная” точка — левый верхний угол. Присмотритесь: именно там на сайтах по традиции располагается логотип. Совпадение? Не думаю!

Правило 9. Знание эффекта “баннерной слепоты”

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

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

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

  • размещать рекламу чем выше — тем лучше. Огромный баннер на главной с информацией о скидках точно не пройдет незамеченным;
  • играть на контрасте: выделять рекламу ярким цветом, делать контрастные кнопки призыва к действию. Главное — чтобы глаз зацепился;
  • придумывать креативные (но не желтые!) заголовки, привлекающие внимание;
  • использовать фото человека, который смотрит в направлении рекламного баннера. Это работает!

Правило 10. Кнопка “вверх”

Казалось бы, такая мелочь, а как важно! Представьте, что у вас интернет-магазин с огромным каталогом товаров или крупный новостной портал — чтобы пролистать сайт вниз, нужно достаточно долго скроллить (крутить колесиком мыши) вниз. А как потом вернуться назад? Многие веб-дизайнеры забывают об этом, заставляя посетителей отматывать страницы вверх. А ведь достаточно всего прикрутить кнопку “Вверх” или графическое изображение ^ — и все сразу понятно. Так вы экономите время пользователя и делаете сайт более удобным.

Правило 11. Новая ссылка — та же вкладка

Любая внутренняя ссылка с вашего сайта (баннер на главной, ведущий на страницу распродаж, статья в блоге, которая отсылает посетителя в карточку товара, видео на “Ютубе”, иконка соцсетей, в которых представлен ваш ресурс — что угодно) должна открываться в том же окне. Много копий сломалось на эту тему: пользователям удобнее, когда ссылка открывается в новом окне, особенно когда ссылок много. Но в этом случае они могут не нажать кнопку “назад” и не вернуться на самую первую страницу, а то и забыть, о чем там вообще говорилось. А это значит, что они могут покинуть ваш сайт, не досмотрев важную информацию. Поэтому мы советуем внутренние ссылки открывать во внутренних же окнах, а внешние — в новых. Например, если ссылки ведут на дружественный сайт — пожалуйста, пусть открывается в новом. Если направляют на свой же паблик в соцсети — тоже без проблем.

Правило 12. Больше визуализации!

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

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

Правило 13. Адаптивная верстка

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

И это еще только начало! Веб-дизайн — целая наука, которой мы овладели, смеем надеяться, на твердую пятерку. В этом блоге мы постараемся рассказать вам обо всех тонкостях нашей работы. Давайте общаться!

Как создать структуру сайта с учетом требований SEO?

Внутренняя структура сайта имеет значение при продвижении в поисковых системах.

Как создать структуру сайта правильно с точки зрения поисковой оптимизации?

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

Как создать структуру сайта с учетом требований SEO?

Рекомендации по SEO в части создания структуры сайта сводятся к учету следующих нюансов:

  • Создание структуры на основе семантического ядра. Использование модели SILO в иерархии структуры сайта;
  • Распределение ссылочного веса;
  • Технические требования.

1 — Структура сайта и семантическое ядро

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

Кластеризацию следует проводить по топу поисковой выдачи. Оптимальный порог кластеризации: 3.

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

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

Без учета семантики структура сайта обычно выглядит так:

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

С учетом семантики, SILO структура должна выглядит так:

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

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

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

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

2 — Распределение ссылочного веса

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

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

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

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

Далее могут размещаться карточки конкретных товаров и услуг.

Узнать текущее распределение ссылочного веса по страницам можно используя аудит от MegaIndex.

Сервис бесплатный.

Используя инструмент по аудиту можно проверять свои и конкурентные сайты.

Пример отчета для сайта seoheronews.com.

3 — Технические требования

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

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

Пример разметки для сайта indexoid:

Документация по разметке размещена на официальном сайте Google — Google Search Breadcumb.

Рекомендованный материал в блоге MegaIndex по теме семантической разметки по ссылке далее — Семантическая разметка сайта в SEO.

Оптимальная длина URL страницы — включая доменное имя — не должна превышать 75 символов.

Не рекомендуется использовать длинные URL в 75-120 символов.

Вопросы и ответы

Что делать, если текущая структура сайта не соответствует рекомендациям?

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

Наиболее подходящим моментом является смена дизайна сайта или перехода на HTTPS.

В чем разница в терминах: раздел, папка и каталог?

По сути все три термина означают разделы сайты и являются синонимами.

Итак, все приведенные ниже термины означают одно и то же:

  • Структура каталогов сайта;
  • Структура разделов сайта;
  • Структура папок сайта.

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

Нужно ли проводить аудит структуры сайта?

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

Если проблемы будут выявлены, то в качестве решений есть такие варианты:

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

Нужно ли разделять информационные и коммерческие страницы?

Да. Структуру сайта следует выстраивать в зависимости от интента.

Про термин интент подробнее в материале по ссылке далее — Что такое интент.

Выводы

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

  • Потенциальная конверсия по группе фраз;
  • Частотность;
  • Конкурентность.

Рекомендации по структуре сайта следующие:

  • Продумывать структуру сайта следует до создания сайта. Иерархия в структуре сайта должна выстраиваться исходя из целей в бизнесе и семантики;
  • Создавайте структуру сайта из связанных кластеров, чтобы добиться тематической связности каждой из страниц;
  • Используйте 1-4 ключевые фразы в полном адресе страницы;
  • Используйте лаконичные URL адреса. Оптимальная длина составляет до 75 символов;
  • Если сайт создан и на сайте есть трафик из поисковых систем, то оптимальным моментом для изменения структуры будет переход сайта на HTTPS или плавное изменение структуры при обновлении страниц;

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

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

Остались ли у вас вопросы, мнения, комментарии по теме создания структуры сайта?

6 принципов оптимизации структуры сайта

Почему структура сайта так важна? Тому есть есть две глобальные причины:
— сайт с правильно спланированной структурой будет больше нравится поисковым системам, а значит, индексирование страниц будет проходить быстрее;
— людям нравится пользоваться удобными и понятными для восприятия сайтами. Поэтому логичная структура — обязательное условие, если вы хотите, чтобы на вашем сайте было много посетителей.
Обделенные хорошей структурой ресурсы просто обречены на неудачу. Как сделать структуру сайта, чтобы он не стал одним из таких неудачников? А также как подружить его с поисковиками и сделать юзабельным для людей я расскажу в этой статье.

Из статьи вы узнаете:

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

Создание структуры сайта: 6 шагов, которые нужно пройти

1. Планируйте иерархию страниц.

Иерархия страниц (или структура сайта) — это способ организовать всю информацию на сайте и предоставить ее в определенном виде. Нет единственно верного решения в плане иерархии, она может быть разной. Главные условия — это ее логичность, сбалансированность и отсутствие перегруженности. Под сбалансированностью понимается примерно одинаковое количество категорий в каждом разделе. То есть, не нужно стремиться сделать их совсем одинаковыми, но если в одном разделе у вас будет 36 категорий, а в другом (того же уровня) всего 3 — то это будет несбалансированная структура.

4 основных вида структуры сайта

Структура сайта определяет последовательность и форму отображения всех имеющихся на нём страниц. Основные виды структур такие:

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

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

Линейная структура сайта, пример: https://razooma.net/#0

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

Древовидная структура сайта, пример: https://dacha-dom.ru/

— решетчатая. Её можно назвать усовершенствованной иерархической структурой. Решетчатая структура позволяет не только выстроить страницы по принципу иерархии, но и перемещаться между «горизонтальными» страницами, не возвращаясь при этом на предыдущий уровень. Такая структура довольно сложная и применять её на сайте с большим количеством страниц не всегда рационально. Чаще всего используется для создания интернет-магазинов и других различных каталогов товаров.

Решетчатая структура сайта, пример: https://rozetka.com.ua/

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

Как выбрать структуру для своего сайта?

Если сравнивать эти виды структур, то тут нет понятия “лучше” или “хуже”. Выбор вида иерархии страниц будет полностью зависеть от типа и целей сайта.
Для сайта-визитки подойдет линейная структура, но в большинстве случаев используется одностраничный шаблон (то есть, по сути отсутствие структуры как таковой, ведь сайт состоит из одной страницы).

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

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

2. Используйте малый уровень вложенности страниц.

Расположение всех страниц на сайте можно определить с помощью уровня их вложенности.
1-й уровень вложенности – это главная страница сайта;
2-й уровень – это все страницы, на которые можно перейти сразу с главной страницы. Как правило, это категории или разделы;
3-й уровень – это страницы (например, статьи в каждом разделе), на которые ведут категории из предыдущего уровня. И по такому же принципу далее.

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

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

Схема уровней вложенности страниц на сайте

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

Желтые строки — это основные разделы сайта, на которые можно перейти сразу с главной страницы. Зеленые — это категории каждого раздела. А серые строки — страницы категорий. В этом же документе будет удобно прописывать и то, как будут выглядеть URL каждого раздела и категории (об этом подробнее чуть ниже).

3. Создавайте страницу с картой сайта.

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

На блоге Netpeak 10 основных категорий (на скрине видна только одна — PPC). Таким же образом на странице с картой сайта ниже отображаются и все остальные категории.

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

4. Расставляйте внутренние ссылки на сайте.

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

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

И еще это отличный способ привлечь внимание пользователей к определенной странице сайта. Вот так выглядит перелинковка на сайте:

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

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

5. Используйте ЧПУ.

Friendly URL или, в русской интерпретации, «Человекопонятный УРЛ» — это оптимальный для чтения и восприятия адрес веб-страницы. Использование ЧПУ в веб-адресах страниц дает преимущества и с точки зрения удобства пользователей, и с точки зрения поискового продвижения.

Когда пользователь видит ЧПУ адрес, ему уже становится понятно, какую информацию содержит данная страница. Сравните вот такой веб-адрес:
https://mysite.com/catalog/phones/
и вот такой:
https://mysite.com/sect=65&kind=24/g87phone/

Глядя на первый вариант, не возникает вопросов о том, в каком месте на сайте мы находимся. Это и есть ЧПУ.

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

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

И, соответственно, URL-адреса категорий:

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

6. Правильно структурируйте главную страницу и разделы.

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

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

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

На этих примерах текст-пояснение размещен рядом с графическим логотипом ресурса.

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

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

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

Ищете лучший хостинг сайтов? У нас вы найдете отличные предложения виртуального хостинга с доменом в подарок.

Контраст в веб-дизайне. Как управлять вниманием посетителей на сайте?

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

Что такое контраст и как его использовать на сайте?

Контраст — это заметное отличие двух или более элементов. Ниже 5 причин почему его стоит использовать:

  • Контраст позволяет управлять вниманием человека.
  • С его помощью можно усилить более значимые элементы.
  • C помощью контраста мы можем ослабить менее значимые элементы и сделать их менее заметными.
  • Его можно использовать для создания иерархии и структуры.
  • Без контраста человеку будет сложно понять, что важно и что второстепенно и ему не видна разница между элементами.
Каким образом можно создать контраст?

Рис. 1. Для создания контраста, вы можете использовать любой приём, который будет создавать заметное отличие. На рисунке выше продемонстрировано несколько приемов, которые вы можете использовать. Это размер, оттенок, фигура, цвет и расстояние.

Ниже приведен ряд примеров, относительно того, каким образом можно использовать контраст.

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

Рис. 3. Если мы добавим контраст (изменим цвет одного круга), то появляется точка интереса. За нее сразу цепляется взгляд. Таким образом мы можем управлять вниманием человека, поскольку этот элемент отличается от остальных и взгляд автоматически направляет на него внимание. Это является акцентом всей композиции. Акцент обычно является ярким, заметным пятном. Если мы прищурим взгляд или сделаем взгляд косым, то мы все равно будем видеть это яркое пятно. Таким образом вы можете манипулировать вниманием человека и направлять его туда, куда вам необходимо.

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

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

Рис. 6. Необычные формы привлекают больше внимания, чем простые. Если мы посмотрим на круг слева, то с ним все понятно, поскольку он имеет простую форму. У формы справа много углов и она довольно необычная. Взгляд хочет изучать эту форму больше, чем круг, который находится слева.

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

Рис. 8. Возьмем простую, на замысловатую форму с сайта и посмотрим, где применяется контраст:
1. Плашка (прямоугольник) отличается от фона вокруг.
2. Заголовок отличается по цвету от плашки, которая находится сзади и отличается по размеру от текста, который находится ниже.
3. Акцентом является кнопка, поскольку она имеет яркий цвет и это значимый элемент в форме.
4. Подпись ниже кнопки сделана мелким серым цветом. Это сделано для того, чтобы не привлекать к себе особого внимания. С помощью мелкого размера и серого цвета мы ослабляем внимание к этой подписи.

Рис. 9. На примере выше показан пример хаоса и чрезмерного использования приемов.

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

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

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

Рис. 13. Изменим кегль (размер) заголовков и цитаты посередине.

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

Рис. 15. Чтобы усилить отличие цитаты от основного текста добавим отступ слева.

Рис. 16. На последнем этапе изменим цвет основного заголовка, что усилит контраст.

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

Золотые принципы при использовании контраста.

1. Используйте минимальный контраст, который создает заметную разницу. Если контраст будет слабым, то это не будет работать и человек не увидит разницы между элементами.
2. Используйте контраст только там, где это необходимо и не злоупотребляйте им. Если вы будете использовать слишком много приемов, то это не будет работать. Элементы будут спорить между собой за внимание.
3. Контраст должен быть обоснованным. Вы должны уметь объяснить своё решение. Перед тем, как использовать любой прием хорошо подумайте, а нужен ли этот прием вообще или можно обойтись без него?

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

Мастер Йода рекомендует:  Все о языке программирования Python новости развития
Добавить комментарий