Редизайн портала Sibnovosti.ru - от сложного к простому

Живой редизайн

Процесс изменения сайта был постепенным и многоэтапным. На отдельном шаге изменения были заметны слабо, что в свою очередь позволяло сохранить лояльность читателей. Унаследованный CSS-код имел большое количество неиспользуемых классов и свойств, которые в определенный момент времени наградили таблицы стилей повышенной сложностью и значительным весом. Впоследствии все CSS файлы были переведены в синтаксис SCSS.

Шапка

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

Первоначальная версияШапка
версия №2Шапка
версия №3Шапка
Актуальная версияШапка

Подвал

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

Первоначальная версия
Подвал
Версия №2
Подвал
Актуальная версия
Подвал

Страница публикации

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

Сраница публикации
Изначальная версия
Сраница публикации
Версия №2
Сраница публикации
Актуальная версия

Страница категории

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

Сраница раздела
Изначальная версия
Сраница раздела
Версия №2
Сраница раздела
Версия №3

Блок «Главные новости»

Концептуально другой и современный дизайн для главных новостей

Главные новости
Изначальная версия
Главные новости
Актуальная версия

Поддомен федерального сайта

Проводились изменения дизайна в несколько подходов для достижения общей стилистики с региональными поддоменами.

Федеральный поддомен
Версия №1
Федеральный поддомен
Версия №2
Федеральный поддомен
Актуальная версия

Адаптивность шаблона

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

Noto Sans & Noto Sans Serif

Шрифты семейства Noto стали заменой для стандартного пакета шрифтов, предустановленных на операционной системе пользователя.

Использование SVG и CSS-анимаций

Едва заметные мелочи и ненавязчивая анимациия использовались в комплексе с векторной графикой формата SVG

Анимации и переходы

Примеры анимаций по событию наведения на элемент

АнимацииАнимацииАнимации

Переход с CSS на SASS

Рефакторинг существующих CSS файлов. Постепенный переход на препроцессор SASS: использование переменных для основной цветовой палитры сайта, а также для указания контрольных точек при адаптивном поведении. Использование миксинов и дирректив @import, раздаление стилей на отдельные файлы (layout, header, footer и т.п.)

© 2016 - on-1.ru Gordeev Andrey