Дизайнерские штуки и логика на моем сайте

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

Штука с заголовками

Заголовок показывает иерархию. Если я нахожусь на главной странице, заголовок «Давид Кистаури», если в блоге и списке проектов: «Давид Кистаури. [раздел]», дальше продолжается через точку. Например у раздела тегов в блоге заголовок «Давид Кистаури. Блог. Теги».

Это правило не соблюдается для шаблонных страниц: статей, страниц проектов, разделов для каждого тега, потому что писать «Давид Кистаури. Блог. Как использовать ВС Код, если ты пишешь текст» — издевательство над читателем, особенно тем, кто заходит с телефона.

Штука со ссылками

Ссылки в блоге — первые две можно нажать, третью — нет, потому что мы и так находимся в блоге, а еще две — дополнительные: у блога есть теги и на него можно подписаться

Над заголовком всегда стоят ссылки в блоках. Они делятся на два типа: постоянные — primary — и непостоянные — secondary. Постоянных три: главная страница, страница с проектами и блог — они представляют разделы сайта; при добавлении нового раздела добавляется и ссылка.

Постоянные ссылки

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

Непостоянные ссылки

Они имеются не всегда и зависят от страницы. В блоге две ссылки: на список тегов и РСС. На странице проекта одна ссылка — на сам проект. Такие ссылки имеют дополнительный фоновый цвет, а текст по стандарту синий.

При ховере постоянных ссылок заливается фон, непостоянных — текст. При фокусе у ссылки появляется внутренняя рамка, заданная через тень.

Расположение непостоянных ссылок

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

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

Ссылки на статьи я расположил по отдельности, потому что каждая статья — отдельная единица контента и слепливание их делает поиск тяжелым. Да и для кирпичного дизайна длинные заголовки статей не подходят — длинных кирпичей я не видел.

Штука с линейками

Все разделы связываются — или разделяются — линейкой. Над ней всегда большее расстояние, чем под ней. Про этот прием я прочитал у Игоря Штанга.

Штука с темной темой

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

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

Вдохновение

Пока я делал этот сайт, много анализировал, думал, исследовал и подглядывал. Со всего веба набрал по чуть-чуть и добавил от себя. Тут самые яркие источники крутого дизайна.

Дизайн АйОС — скругления и стиль кнопок в целом может напоминать элементы АйОС. Шрифт тоже подобный.
Портфолио Сергея Сурганова — центр сайта — минимализм в портфолио — позаимствован у Сергея Сурганова. У него еще есть монолог, где он рассказывает, почему такой принцип крут и почему картинки не обязательны.
Блог Максима Ильяхова — я включил сюда именно блог Ильяхова, но он написан на Эгее, поэтому источником является именно дизайн движка, но так легче показать пример и я вдохновился именно его блогом. Вся типографика: отступы, размеры заголовков, длина строки и много другого по тексту изначально было взято оттуда, потом дорабатывалось и изменялось.
Блог Аруна Веркатесана — Изначально мой блог был с квадратами, у которых были картинки. Было похоже на это решение. Картинки пережили изменения только в разделе с проектами, но яркие цвета по разделам остались.