Создание продающего сайта. "Как недизайнеру задизайнить сайт. Часть 1 – Основы"

Приветствую!

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

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

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

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

А сейчас мы начнем с базы веб-дизайна.

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

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

И далее переходим непосредственно к дизайну.

Если вы работаете в Zero Block на конструкторе Tilda, или в аналогичной «свободной секции» на другом конструкторе/движке, или в графическом редакторе, – обязательно используйте сетку (может быть в виде клеточек или колонок). Это позволит выравнивать все элементы относительно границ экрана и друг друга. Даже небольшие «неровности» могут создать ощущения большого беспорядка и сильно испортить вид сайта.

Помимо белого и темного (для букв) цвета не рекомендуется использовать на сайте множество цветов и палитр. В идеале я вижу еще 1 или 2 цвета, 1-2 оттенка на каждый. Ну например, помимо белого и черного: темно-голубой, светло-голубой, темно-желтый, светло-желтый. Максимум. Сам часто использую еще меньше цветов. Например: 2-3 оттенка синего (помимо белого и черного) – и все. Это позволяет придать сайту более связный, целостный вид.

Правильнее сказать не шрифтов, а гарнитур. (Напр. Open Sans – гарнитура, а Open Sans Bold – шрифт. Но для удобства Open Sans, Arial, Calibri и т.п. будем здесь называть шрифтами).

В общем, 1-2 шрифта и не более. Например, один – для заголовков, другой – для всего остального. Лично я в большинстве проектов использую всего один шрифт. Речь идет именно о конкретных шрифтах. Различные курсивы (жирный или с наклоном) и различные размеры – на ваше усмотрение, используем, где и как уместно.

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

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

Перечисленные выше принципы (п.п. 1-5) – это прям базовая база. И расписаны они тут ооочень кратко. А вот подробнее и понятнее они описаны в книге Трэйси Осборн «Веб-дизайн для недизайнеров», которую я рекомендую к прочтению.

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

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

Это очень большая проблема многих сайтов. Часто с ней сталкиваюсь.

Заголовок белого цвета на ярком фоне.

Белые буквы на ярко-желтых кнопках.

Текст, написанный самым тонким шрифтом, при этом серого цвета, на белом фоне.

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

Когда дизайните сайт, обратите внимание на то, чтобы в перспективе даже бабушки/дедушки смогли бы прочитать, что там у вас написано. (В разумных пределах. Т.е. бабушки/дедушки без серьезных проблем со зрением).

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

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

Как минимум, используем четкие заголовки. Как максимум, – прочие визуальные элементы: границы, различные фоны и т.п.

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

На этом у меня все.

Спасибо за внимание и успехов вашему бизнесу!