ФЭНДОМ


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

Основной цвет

У каждой вики есть основной доминирующий цвет. Чаще всего он используется как фон страниц, а также преобладает на фоновом изображении. Именно этот цвет в первую очередь вызывает эмоциональный отклик у читателя, поэтому выбирайте его тщательно. О том, какие цвета каким эмоциям соответствуют, мы писали в одном из предыдущих блогов. Здесь же кратко отметим, что более яркие цвета привлекают внимание, но могут вызывать беспокойство и волнение, а более тёмные - успокаивают, но также могут ассоциироваться с мрачной атмосферой и ужасами.

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

  • Постарайтесь, чтобы персонажи на фоновом изображении не оказались позади текста статьи. Попробуйте сдвинуть персонажей вправо, чтобы за текстом была более-менее постоянная цветовая гамма.
  • Если на фоновом изображении множество ярких и разных цветов, то длительный просмотр такой «радуги» может вызвать раздражение у читателя. Это также относится к изображениям с множеством мелких разноцветных деталей.
  • Не бойтесь снизить прозрачность основной части страницы. В большинстве случаев фоновое изображение от этого не пострадает, но читабельность текста улучшится.

Второстепенные цвета

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

Триада

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

Аналог

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

Дополняющие цвета (или контрастные)

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

Обратите внимание на сайты http://paletton.com и https://colorscheme.ru С их помощью можно подобрать цветовые гаммы для разных схем и сразу увидеть, как они будут смотреться в сочетании друг с другом.

Контраст

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

Самый высокий коэффициент контрастности имеет соотношение чёрный-белый - 21, но не имеет смысла всегда стремится к нему. Есть множество других сочетаний цветов фона и шрифта, которые дают приемлемый коэффициент контрастности: 7.0 и выше. Именно эта цифра считается пограничной для хорошего оформления сайта.

Сравнить различные цветовые сочетания фона и шрифта и получить коэффициент контрастности для них можно на этом сайте https://colorable.jxnblk.com/

Шрифт

Думая о том, чтобы сделать на вики оригинальный шрифт, сначала думайте о читабельности страниц вики с этим шрифтом, а затем - о распространённости данного шрифта. Многие шрифты отображаются только в одном браузере, поэтому все ваши старания по преданию вики оригинального вида пойдут насмарку. Очень хороший сайт для подбора шрифтов - это https://www.cssfontstack.com/ С его помощью можно увидеть самые популярные и используемые шрифты, получить CSS код для шрифта и сразу увидеть изменения в окне предварительного просмотра.

Другой вариант сделать для вики оригинальный шрифт - использовать Google Fonts. В этом случае вам не нужно будет думать о том, будет ли виден шрифт другим участникам, потому что вы импортируйте шрифт непосредственно на вики. Подробнее о подключении шрифтов Google Fonts смотрите соответствующую страницу справки.

Некоторые участники идут ещё дальше и загружают на вики несколько шрифтов: один для текста, другой для заголовков, третий для инфобоксов и т.д. Здесь хочется посоветовать - не сходите с ума. Разнообразие шрифтов раздражает читателей так же, как бессмысленная радуга в цветовой гамме вики. Если вы хотите использовать несколько шрифтов на вики, остановитесь на двух шрифтах: один для текста, другой для заголовков разделов. Примеры таких пар шрифтов можно найти на сайте http://fontpair.co


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

Материалы сообщества доступны в соответствии с условиями лицензии CC-BY-SA , если не указано иное.