Современная, быстрая и удобная система управления сайтом

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

Архив записейКомментарии: 15Просмотров: 21280

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

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

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

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

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

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

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

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

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

Анализ 2-х цветов

В этом примере можно точно сказать, что цвет #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-блок

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


Великий Оксмокс предупреждал ее о злых запятых
Просмотров: 1234Комментарии: 29
Новости

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


Новости
Великий Оксмокс предупреждал ее о злых запятых
Просмотров: 1234 Комментарии: 29

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

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

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

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

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

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

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

Шапка

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

ЛОГО
ИКОНКИ
МЕНЮ
ЛОГО
ИКОНКИ
ПОИСК
МЕНЮ
ЛОГО
МЕНЮ

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

ЛОГО
МЕНЮ
ТЕКСТ

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

ЛОГО
ТЕКСТ

И второй:

КАРТИНКА

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

Подвал

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

КОПИРАЙТЫ
СЧЕТЧИКИ

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

КОЛОНКА1
КОЛОНКА2
КОЛОНКА2
КОПИРАЙТЫ
СЧЕТЧИКИ

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

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

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

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

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

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

Комментариев: 15 RSS

1Dark-insideСайт14-11-2015 06:00

Спасибо за статью. Я вот отличный сайт использую для подбора цветов: http://www.0to255.com . Очень экономит время при подборе основного цвета и псевдоклассов для элементов дизайна.

2Иван Павлович08-12-2015 09:27

Полезная статья!!! Надеюсь, что будет продолжение темы!

3Максим08-12-2015 11:31

Чем больше отзывов и пожеланий, тем быстрее появятся новые публикации. ;-)

4Pavel12-12-2015 21:56

Где подскажите взять шаблончиков на свежую версию? С ног сбился искать...

5АлександрСайт15-12-2015 01:09

Где подскажите взять шаблончиков на свежую версию? С ног сбился искать...

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

6vitvlad08-02-2016 00:08

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

7Влад29-02-2016 18:16

Веб дизайнер должен знать основы верстки, но не должен эту верстку делать. Если дизайнер будет верстать да еще с углублением в бутстрап... Когда ему дизайн выполнять...? У дизайнера портфолио может и в JPG быть.

8Андрей29-02-2016 21:33

В последней версии (0.94) При использовании файлов info-bottom-page и info-bottom, работает только второй. Первый никак не воспринимается. Использовал дефолтный шаблон.

10Андрей01-03-2016 14:37

Максим

Это не решает проблему, которая находится, как выяснил, в \application\maxsite\shared\type\_def_out\full\full.php

/ для page возможен свой info-bottom
if ($f = mso_page_foreach('info-bottom-' . getinfo('type')))
{
require($f);
}
elseif ($f = mso_page_foreach('info-bottom')) require($f);


$p->html('');

mso_page_content_end();

$p->clearfix();

$p->line('[comments]');

$p->html('');

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

Возможно ли как то переопределить эту часть в своём шаблоне или кроме как редактирование этого файла, других вариантов нет?

11Максим01-03-2016 14:46

Тип page выводится своим кодом, а full.php — это список записей. Это разный вывод и разные type_foreach-файлы.

12Андрей01-03-2016 14:55

full.php — это список записей.

Тогда, если я правильно понимаю, проверка на 'type' не совсем в том порядке? При наличии файла info-bottom-page, он будет использован в первую очередь?

Вообще, изначально я хотел убрать [comments] внизу. Ну и немного запутался в логике.

13Максим01-03-2016 15:05

Вывод через full.php не работает с page, поэтому info-bottom-page там просто не сработает.

14Андрей01-03-2016 15:48

Нашёл ошибку. application\maxsite\shared\type\page

172 if ($f = mso_page_foreach('mso-info-bottom-page')) 
Оставьте свой комментарий!

Комментарий будет опубликован после проверки

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

(обязательно)