Как просто сделать сайт и заработать на нём. Без навыков программирования и кодов

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

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

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

Содержание абсолютно всех блоков меняется при помощи кнопки «Контент», внешний вид при помощи двух левых кнопок: «Настройки» и «Тип блока».

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

Структура сайта и страниц

Сайт состоит из главной страницы, разделов и основных страниц с контентом. Главная страница открывается в браузере по короткому адресу https://доменнноеимя.ru (https://ridero.ru/link/tk9SvdVlKRD3CH) или https://доменнноеимя.com (https://ridero.ru/link/uZNzsfWs-SFR9N) (ссылки нерабочие, указаны в качестве примера).

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

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

У многостраничных сайтов сложная структура, навигация осуществляется при помощи ссылок на страницы типа: https://доменнноеимя.com/адресстраницы (https://ridero.ru/link/XXeacflTDCH23e).

Например, https://blogtr/stpetersburg (https://ridero.ru/link/g5Q42laPv3pwVE). По ссылке https://blogtr.ru (https://ridero.ru/link/dcqrlJdOiAS4z9) доступна главная страница. По ссылке https://blogtr/stpetersburg (https://ridero.ru/link/g5Q42laPv3pwVE) будет открываться раздел, посвященный Санкт-Петербургу или обычная страница с контентом (ссылки, которые указаны в качестве примера не существуют). При создании сайта важна иерархия страниц.

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

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

Такая структура сайта – не лучший вариант:

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

Например, в меню моего сайта много разделов.

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

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

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

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

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

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

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

Оформление страниц сайта

Конструктор Tilda позволяет настраивать внешний вид страниц, использовать разные шрифты, цвета для фона страницы и плашек.

Цвет страниц и шрифта можно выбрать в настройках сайта в разделе «Шрифты и цвета».

Я училась на курсе «Графический дизайн», мы изучали оформление сайтов. Существуют простые правила, а если быть точнее, то страницы оформляются по стандартному шаблону.

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

Из шрифтов лучше всего использовать Times New Roman и другие простые шрифты. Главное, чтобы начертание букв было простым и отсутствовали «засечки».

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

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

Пример антиквы:

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

Пример нехороших шрифтов для серьёзных сайтов:

Существенное значение имеют межбуквенное и междустрочное расстояние, чтобы предложения и буквы «не слипались». Межстрочные интервалы не могут быть меньше 20 pt, а лучше выбирать 30 pt.

На Tilda чем больше межстрочное расстояние, тем лучше. Например, минимальное межстрочное расстояние 14 pt:

В этом примере межстрочное расстояние 20 pt:

В этом примере междустрочное расстояние 30 pt:

Для основного текста лучше использовать насыщенность начертания light. Для заголовков используют Bold (жирный текст сложно будет читать, поэтому при помощи начертания Bold выделяют заголовки).

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

Главная задача выбора шрифтов, начертания и интервалов – текст удобно читать.

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

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

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

Например, светло-бежевые страницы ассоциируются с теплом и уютом. Они подходят для сайтов о рукоделии, хобби, сайтов с рецептами.

Главная задача выбора цвета страницы и шрифта – они должны гармонировать и не должны сливаться.

Приведу два примера очень неудачного выбора цветов:

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

Правило контраста распространяется на оформление кнопок, меню, подвала и т. п.

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