Долго сайт не простоял в первоначальном обличии. Уж очень сильно хотелось попробовать что-то новое. Теперь сайт в светлом классическом исполнении.
Возникло желание перелопатить все стили и изучить что-то новое. На этот раз уделил внимание прочтению документации по material от Google. В целом подход понравился, тем более что повсеместно в мобильных приложениях наблюдаю этот дизайн и отвращения он не вызывает. Все просто и по делу. Возможно, так только кажется, пока на смену этой тенденции не придет новая философия дизайна. :)
Дизайн
Выполнял верстку по собственному же эскизу. Это был первый опыт рисования макета, так как до этого просто лепил стили сразу в редакторе. Думал, что разницы не будет, но на самом деле плюсы в этом подходе есть. Если вы бывалый в этом деле программист, то, наверное, так и поступаете, а если только делаете первые шаги, как я, то советую так попробовать.
Окончательный вариант все равно получится только написания стилей, но максимально стремиться к эскизному изображению интересно!
Почти все задуманное получилось реализовать. Также в макете предусмотрел наличие sidebar’a в виде модулей, но введу их позже, если на сайте появится больше разнообразия.
Попутно придумал другой логотип. Он вышел куда проще предыдущего, но меньше нравится от этого не стал.
Компоненты и шрифты
Как писал выше, решил пробовать дружить с material. Соответственно, изучал документацию. Надеюсь основную мысль уловил правильно и двигался в нужном направлении. Но, признаюсь, некоторые непонятные пока моменты для себя опустил.
Ну и надо было с чего-то начать. На сайте тем более не так много стилей для редактирования. Придерживался цели сделать блог более читабельным и понятным, без лишней информации, как-то отвлекающий глаз от основного сюжета. Тут мне помогло то, что в блоге пока очень скудная навигация и статей раз-два и обчелся :)
Основные изменения коснулись верхней панели и списка статей. В навигации теперь не испульзую градиенты и тени для пунктов меню, все гораздо проще стало выглядеть. Я далеко не мастер, но ничто не мешает при это придерживаться философии material дизайна. Все элементы интерфейса выполнены с толщиной 1px. Тени старался подбирать согласно руководству от Google.
Список статей теперь выглядит как набор карточек. Они стали меньше по размеру, стали компактнее располагаться на экране. Читать заголовки проще и быстрее. Добавил постеры для статей, в них стараюсь рисовать суть содержания всей статьи - это также должно улучшить понятность заголовка, а иногда и быть лучше самого заголовка. Лучше один раз увидеть, чем 10 раз прочитать. :)
Везде использую шрифты также по философии material - это семейство Roboto в различных вариациях. Раньше на них не обращал внимания, а стал повсеместно использовать и глаз вроде привык теперь и вовсе даже не против.
Верстку также старался выполнять с применением flexbox, тут знания и мастерство придут только с практикой - поэтому пока как есть. Но отмечу, что даже на простом уровне, верстка с использованием flexbox значительно упрощает разработку под различные разрешения экранов.
Ставил для себя также цель - сохранить читабельность блога и статей при просмотре с мобильных устройств. По-моему мнению, более менее мне это удалось сделать. Да, пока не все до конца отточено и выверено - тут еще предстоит немного доработок, но, повторюсь, с основной задачей справился. Читать можно :)
Всем успехов!