Выбор шаблона оформления для сайта

Выбор шаблона оформления для сайта

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

Рассмотрим как выбирать шаблоны для сайта на примере WordPress (далее WP). В других cms критерии выбора могут быть такими же.

Хотя в WP шаблоны оформления называются «Темы», я буду использовать общепринятое слово «шаблоны». Тем более что и в самих названиях файлов используется слово «template» — «шаблон».

Для удобного выбора можно воспользоваться фильтром во встроенном в WP каталоге репозитория бесплатных шаблонов. Важно понимать, что выборка по фильтру неоднозначна, ибо авторы шаблонов могут ставить на них неточные метки, или вообще не ставить. Похожие фильтры есть на сайтах студий по разработке шаблонов. Кстати, там можно найти что-то отсутствующее в репозитории. Примеры студий, дающих бесплатные шаблоны (темы) для WordPress: SMthemes,New WP Themes, One Designs, и др.

Безопасность

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

Обычно трояном является рекламная ссылка. Но может быть и зашифрованный редирект ваших посетителей на другие сайты. Хитрый редирект может прятаться: вас редиректить не будет, будет только каждого 10-го посетителя. Плохо, если из-за плохой ссылки ваш сайт забанят поисковики.

Поэтому все шаблоны надо обязательно проверять плагином TAC. Его можно установить через внутренний установщик плагинов WP.

Общие правила при выборе шаблона

  • Шаблон должен лично вас вдохновлять. Как минимум — нравится.
  • Лучше выбирать с друзьями. Сначала самому отобрать нормальные, и советоваться по оставшимся. Ведь сегодня вам могут понравится одни шаблоны, завтра другие. Учёт симпатий симпатичных вам людей сузит выбор. Внимание друзей не будет долгим, поэтому стоит показывать им только конечную выборку из нескольких шаблонов. Также, если вы запустите на сайт посетителей, вы сразу почувствуете все недочёты сайта.
  • Можно присмотреть шаблон у других сайтов. У сайтов на основе WP прописано его название в html-коде. Кликаете ПКМ (правой кнопкой мыши) по странице сайта, «показать код страницы», ищите фразу «/wp-content/themes/«, сразу после которой и написано название шаблона. Затем его легко найти в репозитории или в интернет. (В cms DLE название шаблона узнаётся также по строке «/templates/«.)
    От другой cms взять шаблон для WP не получится — у них своя html-разметка, код придётся полностью переписывать — процесс слишком трудоёмкий. Проще и быстрее взять готовый шаблон, а потом перенести в него элементы (цвета, шрифт, размеры) с понравившегося сайта.
  • Можно заказать на фриланс-биржах или у веб-студий. Но результат будет дорогой и сложно предсказуемый. Фрилансеры просто продадут вам бесплатный шаблон, чуть поправив по вашим требованиям. Это вы можете сделать и сами.
    Заказывать услуги наёмного вебмастера имеет смысл только для фирм, если в штате нет вебмастеров или сайт сложный по функционалу.

На что НЕ стоит обращать внимание при выборе шаблона

  • Не стоит обращать внимания на привлекательные картинки, занимающие часто большую часть превьюшки (prewiew images — рекламная картинка, показывающих как будет выглядеть шаблон). Эти картинки чужие, вы их сразу уберёте.
  • Вам вряд ли понадобится слайдер если у вас не торговый, развлекательный, или новостной сайт. Слайдер — это широкий блок, в котором меняются картинки-объявления с последними постами, новостями сайта, или продаваемыми товарами. Он часто занимает половину превьюшек. Также вам не понадобятся другие нетрадиционные типы блоков, если делаете обычный сайт.
    Поэтому на привью шаблона, приходится смотреть на самую низкую часть, чтобы увидеть как там выглядят блок с контентом и сайдбары.
  • Расцветку, шрифты, и размеры блоков можно будет поправить на свой вкус. Для этого достаточно начальных знаний CSS.
  • Но если доводки требуется много, лучше подобрать другой шаблон. Тем более, что при обновлении шаблона авторами его придётся перепоправлять под ваши настройки. Хотя в некоторых шаблонах предусмотрены пользовательские настройки css.

Критерии выбора

Тема сайта и выбор расцветки

Сначала определимся с темой сайта (нишей). От темы зависит выбор расцветки шаблона, ибо цвета связаны с психологией.

Отфильтровать по нужному цвету в фильтре WP каталога шаблонов. Но больше 2 цветов не задайте, ибо выборка будет неточной.

  • Для сайтов требующих спокойного внимания на контенте лучше выбрать шаблон с большим присутствием оттенков нейтрального серого цвета. Примеры с основным наличием оттенков серого: шрифт текста, админка WP, сайт Youtube и многие другие.
  • Синий цвет тоже является разумным, научным, технологичным. Он холоден и успокаивает. В него раскрашены интерфейс Windows, файловые менеджеры. Изначально все url-ссылки в тексте синего цвета. Но сайты имеющие только синий цвет в дизайне — холодны и неприветливы.
  • Некоторые сайты о компьютерных гаджетах зелёного цвета. Например, это известные сайты NVidia и ОС Android.
  • Если сайт посвящён Ubuntu Gnome или другом программному окружению с определённым цветом интерфейса, сайт тоже лучше выбирать этого цвета. Чтобы посетителями расцветка узнавалась и была привычна.
  • Финансовые сайты имеют уклон к зелёному цвету. Зелёный цвет — спокойный, при этом не холодный как синий, а живой и растущий как растения. Можно взять другие цвета, но благородных «дорогих» оттенков — бардовый, бежевый и др.
  • Расцветку близкую финансовым сайтам имеют медицинские сайты и сайты о природе. Сайты о фармакологии чаще окрашены в оттенки синего, а о ботанике — в оттенки зелёного и коричневого.
  • Сайтам о ремонте и строительстве могут подходить оттенки коричневого цвета, ассоциирующего с домашним уютом, деревом, землёй и камнем.
  • Сайтам интернет-магазинов и развлекательным тематикам соответствует возбуждённые радостные цвета — красный и оранжевый. Но слишком яркие цвета могут отвлекать от контента, желательно чтобы они сочетались с картинками в тексте.

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

Цвет фона сайта и блока контента

  • Блок контента — это блок, в котором расположена статья с картинками и содержимым.
  • Фон сайта может отличатся от цвета фона статьи (блока контента). Зачастую фоном сайта ставят картинку, или замощают «плиткой» — маленькой однотипной картинкой.

Оптимально выбирать фон для статьи — белого, или светлых оттенков серого, голубого, бежевого цвета. А фон сайта делать другого оттенка или нейтрального цвета.

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

Часто делают чёрный фон сайтам, имеющим уклон в мистику: ночь, «тёмные делишки», глубины психики, готика, рок-музыка, некоторые игровые сайты. На чёрном фоне трудновато читать, потребуется выбрать шрифт с более толстой графикой букв.
Мне кажется, что чёрные сайты слишком меланхоличные, не развиваются. Если только это не сайт-визитка какой-нибудь группы или специализированный форум.

Широта рубрик и подтем (подниш)

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

Можно фильтровать по наличию в шаблонах 2 сайдбаров. Колонка со статьёй будет у́же, хотя при желании шаблон можно растянуть. Бывает — статья посредине, сайдбары справа и слева, а бывает — 2 сайдбара с одной стороны сайта.

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

Дополнительные настройки шаблона

Кроме настроек шаблонов в WP, некоторые шаблоны имеют собственные настройки. Они позволяют не забираясь в css просто настраивать разные элементы и менять цвета. В фильтре WordPress их можно найти по опции Настройки шаблона.

Анонсы постов в несколько колонок

На главной странице и страницах рубрик можно выводить анонсы постов несколькими колонками — сеткой (grid). Это может быть более наглядно. Фильтруются такие шаблоны опцией 3 колонки — 2 с анонсами и 1 сайдбар. Хотя некоторые авторы шаблонов понимают под этим 1 колонку контента и 2 сайдбара, и ставят не те метки на шаблон. Поэтому всё равно придётся проверять выборку.

Нужен ли сайдбар

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

Comments are closed.