В сентябре 2018 года мы представили первое крупное обновление kod.ru. Изменилась структура, сайт обрёл своё уникальное лицо и с этим дизайном редакция проработала почти два года. Сегодня представляем вам крупнейшее обновление — третью версию kod.ru. О том, как мы пришли к нему, я расскажу подробнее.
Перед тем, как перейти непосредственно к обзору обновления, введу в курс дела. Сайт почти два года был оформлен в дизайне от Антона Филиппова. Его работа набрала на Behance более 23 тысяч просмотров, получив огромное количество положительных отзывов. Парень продолжает делиться своими проектами, поэтому, вероятно, вам будет интересно ознакомиться с ними. Тем не менее, время протекало незаметно, сайт постепенно улучшался, появлялись какие-то новые и полезные фичи, которые улучшали экспириенс на максимально возможном уровне. Мы гордились сайтом, но при этом хотели идти дальше.
В медиа сфере сайт любого издания должен предлагать читателям (в том числе потенциальным) продукт, который не только может заинтересовать, но и принести пользу. Наши желания с одной стороны могут предложить читателям больше возможностей, с другой — они зачастую трудно реализуемые. Поэтому каждое обновление сайта — это этап. Это маленькие шаги к мечте, в которой сайт выполняет не только функции инструмента для чтения материалов.
Сегодняшнее обновление — это новый этап. Нашим решением при обдумывании тонкостей нововведений было взятие за основу дизайнерской работы. Разработчиком дизайна выступила студия Biron Themes, которая продаёт свои профессиональные макеты для нашей CMS Ghost.
Приобретая базу дизайна именно от Biron Themes мы не просто облегчили по большей степени себе работу, но и сделали всё для того, чтобы не прибегать к вынужденному переезду сайта на новое ядро. К выполнению данной задачи команда «Кода Дурова» прямо сейчас не готова — прибегать к своему идеалу следует последовательно и не спеша. В наших планах внедрение достаточно амбициозных проектов, однако перед этим нужно закрыть точечные проблемы — переезд на желаемый дизайн был одной из них.
Релизный вариант дизайна обновлённого сайта стал возможным после выполнения огромного спектра задач по изменению технических и дизайнерских решений, которые частично не совпадали с нашими желаниями. Над итоговой моделью пришлось попотеть — это сотни правок и большой промежуток времени, выделенный на обсуждение и согласование. С дизайном нам также помог наш друг Артём Неборский, который ранее выступил автором одного из логотипов издания. Парень из Беларуси делает амбициозные проекты, поэтому о них вы можете узнать больше в его Telegram-канале Design Code.
Главная страница
Первое, что вы можете заметить в обновлении — совершенно иная структура сайта. Уже на главной можно наблюдать иной подход к использованию пространства. В новой версии по сравнению с прошлым вариантом всё кажется чуть более крупным. Верхний блок для перехода к разделам немного переехал вниз, а по крайним верхним углам разбросаны ключевые кнопки перехода: кнопка на главную и переключатель для включения тёмной версии.
Мы немного изменили подход к построению главной ленты. Как и в прошлой версии, последний материал выделяется на фоне других. Блок с ним растянулся по всей ширине сайта, а в качестве приятного бонуса к нему прилагается чуть заметный узор с анимацией — на фоне он будет менять своё положение в зависимости от местоположения курсора на экране.
Остальные блоки с материалами теперь не разнятся между собой в размерах и строении. Вот так получается естественный список из идентично оформленных блоков, которые идут последовательно друг за другом. Из нового: без перехода к заметке можно сразу же узнать, кто её автор. А ещё — при наведении курсором на изображение оно немного масштабируется. В остальном — всё так же доступна информация о дате публикации и рубрике, в которой она размещена.
Справа нас встретят ещё несколько блоков. В самом главном представлены материалы, которые редакция рекомендует к прочтению. Если раньше это были блоки с заголовками, то сейчас к каждому материалу добавлены картинки, отвечающие за роль мини-превьюшек. Таким образом, каждый выделенный в блоке материал привлекает гораздо больше внимания.
За блоком рекомендаций следуют ещё три менее крупных. Первый со списком ссылок на наши площадки. Вы точно не потеряете нас, если вдруг захотите посетить Instagram или паблик ВКонтакте. Второй блок повторяет список рубрик. Он примечателен возможностью просмотра количества написанных материалов в каждой рубрике — да, кому-то это действительно может быть интересно. Последний блок — это реклама. Мы и в этом обновлении постарались разместить её так, чтобы она не вынуждала вас добавлять сайт в список «адблока». И не рекомендуем! Кушать-то то сейчас всем хочется.
Внизу вас будет ожидать классический футер, наполненный всеми необходимыми ссылками. Прошу заметить, что сейчас мы не выделяем его синей палитрой. Тут у нас и навигация по сайту, и ссылки на наши площадки, а также информация о наших партнёрах, которые поддерживают жизнеспособность сайта. Напомню, kod.ru работает на «Яндекс.Облаке», а за техническую поддержку отвечают наши друзья из opsguru.ru. Ребята из OpsGuru нам очень сильно помогли с переездом — мы вместе глобально протестировали сайт и оптимизировали всё возможное. Именно благодаря их труду сайт не должен падать, и всегда быть online.
Рубрики и авторы
Отныне в отдельной странице вы можете наблюдать целых 7 блоков с различными рубриками. Каждый блок имеет фоновую картинку, соответствующую рубрике, а также циферку, обозначающую количество написанных материалов. При посещении каждой рубрики можно ознакомиться с её описанием и перейти к просмотру статей.
Дополнительно добавили отдельный раздел с авторами, которые пишут для «Кода Дурова». Сейчас там все активные представители редакции. Новый раздел выступает как некое портфолио для авторов, позволяющее познакомиться с их работами. При желании читатель может перейти по ссылкам, указанным в профиле для индивидуальной связи с представителем редакции.
Страница чтения материала
Пожалуй, это один из главнейших разделов сайта. Как вы могли заметить, тут всё иначе. Отныне материалы из той или иной рубрики будут иметь соответствующее оформление. Видоизменились новости и статьи, отдельное оформление у обзоров, и совершенно иной дизайн в интервью. Такой подход позволит нам разделять подачу контента и не смешивать всё в единой разметке.
Новости и статьи
Заголовок и основная картинка размещаются в таком же стиле, как и крайний блок с последним материалом на главной странице. Редакция теперь может отмечать сразу несколько авторов, а кнопки «шэринга» материала в соцсети приобрели более приятный дизайн. Кстати, можно нажать на кнопку «Копировать», дабы не париться с выделением ссылки в поисковой строке браузера.
Пространства для контента стало в два раза больше. Об этом говорит не только более крупный шрифт текста, но и растянутые на достаточно большую ширину картинки. Разметка существенно отличается от прошлой, но при этом не даёт нам сливать весь текст в единую кучу. Следует ещё отметить более изящное оформление цитат, групповых списков и гиперссылок.
Отдельно хочу обратить внимание на изменившуюся галерею фото. Пересматривать собранный пак фотографий будет гораздо удобнее за счёт более крупных «стрелок» для переключения вперёд и назад.
Кроме того, по клику можно открывать картинки на весь экран — этого очень сильно не хватало в прошлой версии сайта. Ещё одна важная стрелочка на сайте — кнопка для перелистывания вверх. Сейчас она располагается в правом нижнем углу.
Обзоры и интервью
В какой-то момент эта рубрика стала одной из ключевых на нашем сайте. Мы смотрим на актуальные гаджеты и не только, при этом предлагаем вашему вниманию честное и качественное мнение. В оформлении все материалы из этой рубрики немного отличаются от новостей и авторских статей.
Так как обзоры зачастую имеют достаточно длинный текст, отныне в отдельном блоке выделяется его содержание по частям. Например, кому-то интересно узнать только о функциональности продукта — читатель сразу же может к этому моменту перейти. Конечно же, стоит отметить, что данный блок может индивидуально применяться и в больших статьях.
Мобильная версия
Наш сайт всё так же читают со смартфонов намного чаще, чем посещают десктопную версию. Основная концепция мобильной версии kod.ru сохранилась — главная представляет из себя ленту из последовательно идущих новостей. Верхний блок для перехода к разделам остался доступен по клику на «гамбургер».
По поводу переключения темы могу отметить преимущество для мобильных устройств, у которых включена тёмная тема в настройках операционной системы — в таком случае сайт автоматически изменит свой окрас при первом посещении. Поэтому, если вы читаете этот материал с телефона на Android 10 или актуальной iOS, не удивляйтесь, если у вас уже автоматически включена тёмная тема на сайте. Кстати, обладатели Mac также смогут оценить по достоинству эту фичу.
Мы постарались сохранить в мобильной версии дизайн десктопной — всё идентично, а структура расположения тех или иных элементов просто аккуратно подогнана под размер экрана мобильного устройства. Очень надеемся, что с телефона читать контент вам будет гораздо комфортнее. Это одна из главных целей, которую мы преследовали при подготовке обновления.
Друзья! Мы продолжаем проводить работы над улучшением сайта. Если у вас есть интересные предложения и замечания, или была обнаружена какая-либо проблема (баг, недоступность сайта, медленная загрузка и прочее), обязательно пишите на почту support@kod.ru. Мы обязательно примем к сведению все ваши отзывы. Делитесь своим мнением в комментариях!
Дальше — больше!
Читать первым в Telegram-канале «Код Дурова»
