Чек-лист по созданию сайта

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

Шрифты

Стиль шрифта

• не должно быть более 2-3-ех стилей шрифтов (один вид стиля допустим в Заголовке, другой - в Подзаголовке, третий - в обычном тексте должен быть Montserrat);
• если сложно определиться со шрифтом, ставим везде привычный Montserrat;
• со сложными кривыми стилями не увлекаемся - соблюдаем читабельность текста.

Размер шрифта

• Заголовки - 32
• Подзаголовки - 24
• Текст обычный - 17

Как сохранить шаблонный шрифт

• выделяя нужный шрифт, используем набор клавиш Ctrl C - копирование того шрифта, что хотите повторить;
• затем набор клавиш Ctrl Shift V - вставка в то место, где он необходим (вставляем скопированное дальше от стоящего шрифта, иначе он скопирует стоящий рядом).

​

Цветовая гамма

Количество цветов

• на сайте желательно использовать 2 основных цвета;
• допускается максимум 3 цвета, не более.

Цвет кнопок

• цвет кнопок должен быть одинаковый;
• при наведении на кнопку - другой цвет, как правило, темнее основного цвета кнопки, либо иной выбранный цвет;
• не ставим кричащие фломастерные цвета за исключением уместной для этого тематики;
• меняем в настройках блока: настройках формы, в параметрах кнопок. Либо, используя массовое изменение на сайте (в боковом интерфейсе "пипетка").

Цвет текста​

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

​

Подбор изображений

Откуда брать изображения для сайта

• используем только стоковые фото со стоковых сайтов, к примеру, https://unsplash.com/ ;
• для товаров на белом фоне - допустимо брать с поиска Яндекса, при этом конвертируя их в фоторедакторе. Используем изображения товаров без надписи крупных брендов

Цветовая гамма изображений

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

​Тематика

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

​Форма изображений

• если фотографии закругленные, то ставим закругленные;
• если изображения, в основном, все с прямым углом, ставим не закругленные.

​

Логотипы

Откуда брать логотипы

• чужие логотипы/иконки не берем, используем только лицензионные, свободные;
• логотипы можно брать с сайта https://icon-icons.com/ru/ ;
• логотипы можно создать с помощью шрифта здесь https://fonts-online.ru/fonts .

Цветовая гамма лого

• обязательно должен быть в едином стиле по цвету с общим оформлением сайта.​

​Размер

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

Что ставим на лого

• ссылку на Главную страницу в виде слэша / и в меню, и в подвал;
• от проставления ссылки текстовый логотип не должен подчеркиваться фиолетовым/синим выбивающимся цветом.

​

Общая структура сайта

Что обязательно должно быть

• меню (шапка сайта) и подвал (желательно ставить и шапку, и подвал с логотипом);
• меню наверху, подвал - внизу сайта (они не должны "блуждать" посередине сайта;
• логотип;
• блок Контакты;
• желательны иконки социальных сетей в меню и подвале (иконку YouTube убираем);
• если есть карта, отмечаем точку, отключаем зум;
• Заголовки, Подзаголовки, обычный текст - порядок должен соблюдаться. Заголовок не может быть обычным текстом;
• В поле Заголовка ставим только Заголовок, в поле Подзаголовка ставим только Подзаголовок, в поле текста обычного только текст;
• Заголовки и Подзаголовки не должны быть длинными. Никаких двух предложений, только одно. Одно словосочетание, одно небольшое предложение/лозунг (иначе ваш Заголовок/Подзаголовок будет смотреться как обычный текст иного шрифта, особенно при мобильном просмотре);
• в меню обязательно должен быть раздел Главная, ведущий на Главную страницу;
• в меню должен быть раздел Контакты, ведущий на Контакты;
• после второго блока Обложка, как правило, располагаем блок Каталог, если он есть у сайта.

Разделы сайта

Какие разделы должны быть обязательно в меню/подвале

• Главная - с этого раздела перекидывает на главную страницу сайта;
• Контакты/Связь с нами.

Какие разделы обычно стандартно бывают

• Главная;
• О компании/о нас;
• Каталог (если интернет-магазин);
• Галерея/примеры работ;
• Наши преимущества;
• Контакты.

Проставление якорей и ссылок на Разделы

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

Если сайт многостраничный

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

​

​Где брать ссылки и якоря

Где брать ссылки - URL страницы

• у сайта есть страницы. Напротив каждой страницы есть интерфейс из 3-ех точек после кнопки "Редактировать";
• необходимо нажать на эти 3 точки. Появится новый интерфейс, где мы видим "карандашик";
• выбираем значок "карандашик" - Редактировать параметры страницы;
• всплывет окно "Настройки страницы", и там мы в поле видим заполненный URL страницы;
• копируем этот URL (ссылку, которая нам нужна) и вставляем в поле нужного раздела. К примеру, в раздел "О компании" ставим ссылку - /o-kompanii/, при этом поставим по бокам значок слэша /

Где брать якоря блоков

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

Отступы

• в настройках блока доступна функция регулирования отступов (отступ сверху и снизу блока). Можно как уменьшить, так и увеличить расстояние;
• когда видим, что блоки прилипают друг к другу, меняем отступ;
• самое важное - чтобы между блоками был "воздух", визуальное восприятие было приятное;
• в некоторых блоках может отсутствовать такая функция, как регулирование отступов. Тогда добавить "воздух" можно с помощью текстовых пробелов.

Куда должна вести кнопка

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

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

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

Её не игнорируем, она требует настройки

• редактор формы расположен внутри Настроек кнопки: нажимаем на  кнопку в редакторе и внизу находим зеленую кнопку "Редактировать форму";
• выйдет сама форма, через которую можно перейти в её отдельные настройки - "Настройка формы";
• здесь мы можем изменить поля формы, шрифт, цвет кнопки, различные параметры кнопок. Эта настройка должна перекликаться с основным оформлением на сайте. К примеру, если цвет кнопки на сайте один, то и в форме всплывающей цвет должен быть такой же. Если кнопка на сайте закругленная, то и внутри формы кнопку ставим закругленную.

Где менять цвета ссылок

• цвет ссылки не оставляем синего/фиолетового цвета, который ставится автоматически при прикреплении ссылки;
•  цвет ссылки меняем через Массовое изменение на сайте (боковое меню, значок "пипетка").

​

​Номер телефона

• номер телефона в меню/подвале/контактах, либо в другом месте - ставим только несуществующий номер. К примеру, 8 800 300 20 00;
• исключение, когда сайт реальный, клиентский, не шаблон. Тогда ставим номер телефона действительный, у клиента, по которому можно позвонить.