Дом Работа Обо мне

Разработка интерфейса и верстка технического блога Selectel

Интерфейс технического блога Selectel

Краткое описание

Компания: Selectel

Роль: разработка интерфейса, дизайн, верстка

Сайт: blog.selectel.ru

  • ✤ HTML5 with CSS3
  • ✤ SCSS with Compass
  • ✤ Full responsive

Задача: разработать простой интерфейс для технического блога.


Процесс работы

  1. Изучение аналогов
  2. Наброски интерфейса
  3. Прототипирование
  4. Дизайн
  5. Мобильная версия
  6. Верстка

Изучение аналогов

Example design blog Example design blog Example design blog Example design blog Example design blog Example design blog Example design blog Example design blog Example design blog

Наброски интерфейса

В начале по-старинке: ручка и бумага.

Наброски вариантов интерфейса блога
Наброски вариантов интерфейса блога

Прототипирование

Затем множество wireframes. Поиск оптимального расположения элементов. За одно проверяем необходимость тех или иных блоков, например, подписка на email-рассылку, главное меню. В итоге от всего этого отказываемся в пользу простоты блога — только статьи, ссылки на авторов и комментарии.

Прототипы интерфейса технического блога Показать подробнее

Дизайн

Определившись с интерфейсом, работа над дизайном блога не составила труда. Легкость. Ничего не отвлекает от важной информации!

Страница автора
На странице автора, можно сразу же подписаться на его твиттер, если он указал его в своем профиле.

Мобильная версия

С момента создания мобильного блога категорически расстраиваюсь, если открывая сайт с телефона, обнаруживаю отсутствие мобильной версии.

Мобильная версия
Мобильная версия.
Страница 404 в блоге
Расстроенного Ти-Рекса нарисовал крутой дизайнер Сергеев Илья. Все иллюстрации Ти-Рекса можно найти в фото-галерее. Читайте подробнее о разработке галереи в моем портфолио.

Верстка

Адаптивная верстка блогов проста в реализации. Позаботьтесь, чтобы ваш блог было приятно читать.

Иконки социальных сетей оптимизированы под экраны сверхвысокого разрешения (Retina). Для реализации используется утилита Retina-Sprites-for-Compass.

Благодарности

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

comments powered by Disqus