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

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

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

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

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

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

Модульная сетка это как рамка, в которую помещается картина/фотография. Модульная сетка позволяет определить фон (браузера) на котором будет смотреться сайт. Обратимся для примера к Default-шаблону MaxSite CMS. Серый фон браузера подчеркивает неактивную область — то где ничего полезного не размещается.

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

При прототипировании как правило используется серый цвет. В UniCSS с цветами полный порядок, поэтому не составит труда прописать классы для серого цвета в своем шаблоне. Серый цвет — универсальный в том плане, что он оперирует только яркостью и контрастностью. В w3.org даже есть рекомендации по определению контрастности цветов (и даже формулы расчета). Но нам больше интересен практический результат. Тут я могу предложить воспользоваться он-лайн сервисом Luminosity Colour Contrast Ratio Analyser, который вычисляет отношение двух цветов.

В этом примере можно точно сказать, что цвет #777 пригоден только для заголовков. А вот цвет #555 уже можно использовать для основного текста.

После «серого» прототипирования можно переходить к полноцвету. Цвета лучше всего подбрирать из готовых палитр так, чтобы общая гамма оказалась в одной яркости и насыщенности. Обычно решается какой тон будет основным и от этого создаются дополнительные цвета (как в Material Design от Гугла). В цветовой палитре главное не сколько сами цвета (тон), сколько их яркость и насыщенность. Если, скажем используется красный цвет в качестве основного, то бледно-красный может выступать как контрастный текст. А «соседний красный» (скажем, оранжевый) в качестве окантовки блока, эффекта hover и т.п. При этом для текстов используется высокий контраст, а для фона — более бледный и менее насыщенный цвет.

Для подбора цвета можно воспользоваться он-лайн инструментами, например Adobe Color CC. Старайтесь использовать простые схемы вроде последовательной и монохромной или даже уже готовые палитры.

Уж коли затронули тему «материального дизайна» (или flat), то в нём используются сильные и насыщенные цвета. Такие цвета можно назвать «кислотными», которые имеют больше искусственное происхождение. Натуральные цвета — это цвета природы (растения, цветы), где сложно найти тот же ярко-зеленый. У MD есть одно неоспоримое преимущество — он предлагает некую унификацию. Считать же материальный дизайн какой-то художественной ценностью я бы не рискнул. Аккуратно, просто и понятно — это всё.

Типографика

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

• гарнитура (шрифт), например Open Sans
• размер шрифта, например 15px
• интерлиньяж, например 140%
• основной цвет текста, например #555555

В Default-шаблоне типографика задаётся в assets/less/main/base.less:

body {
	font-family: Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 15px;
	color: #555555;
	line-height: 1.4;
}

Достаточно поменять шрифт на Ubuntu или Arimo и выставить размер 16px, сайт уже будет смотреться по-другому.

Шрифты лучше брать современные, которые адаптированы под сглаживание экранов. Конечно, же основным источником будет Google Fonts. Обращать внимание нужно на поддержку кириллицы и размер файлов. Если вы загружаете шрифт со своего сервера, то достаточно использовать только woff-файл — этот формат поддерживают все браузеры.

Сайдбар и виджеты

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

CSS-свойства виджетов задаются в assets/less/main/my-template.less в div.mso-widget-header и div.mso-widget.

Info-блок

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

А ведь для шаблона доступны почти 600 иконок Font-Awesome! Кроме того можно поменять взаимное расположение элементов и их цвета.

Эти «мелочи» уже дают хороший эффект.

Миниатюра записи

Обычно миниатюра выводится слева в тексте.

Однако можно разместить миниатюру на всю ширину.

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

Шапка

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

Сейчас стало модно размещать в шапке второй большой блок с рекламным текстом или картинкой.

В Default-шаблоне используется универсальный компонент Top1, который позволяет получить два варианта шапки.

И второй:

Таким образом шапку можно скомпоновать самым разными способами.

Подвал

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

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

В целом подвал — это второстепенный блок, поэтому главное, чтобы он просто аккуратно смотрелся.

Средства создания дизайна

Вебмастеру доступны:

• цвет фона
• цвет текста
• бордюры
• тени
• выравнивание элементов
• отступы
• общая типографика
• взаимное расположение элелементов

Использую эти средства можно при небольших трудозатратах изменить любой дизайн.

ps Все примеры к статье выполнены на «чистом» UniCSS.