Процесс создания адаптивного дизайна интернет-портала «Век вендинга»

«Век вендинга» — интернет-портал о вендинге, созданный в 2009 году.

Первоначальный дизайна портала:

Старый дизайн портала

Пожелания заказчика:

  • Убрать всю гамму серо-зелено-синего цвета, оставить белый, голубой, черный. 
  • Изменить шрифты.
  • Переделать расположение блоков, согласно предоставленному прототипу.
  • Сайт должен быть адаптивным!

адаптивный дизайн сайта

Прототип:

прототип сайта

Этап создания дизайна

Для создания адаптивного сайта используем в макете сетку от Twitter Bootstrap.

Предлагаем первый вариант дизайн-концепции:

первый вариант дизайна

Отказываемся от темно-серого фона, собираем меню в выпадающие списки. Второй вариант:

второй вариант дизайна

Останавливаемся на данном варианте. Прорабатываем детали:

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

Итог:

проработанный вариант дизайна

Создаем дизайн второстепенных страниц:

Новости
Список новостей

Форум
Разделы форума

Новость подробнее
Новости подробнее

Темы форума
Темы форума

Иконки для форума в разном состоянии активности:

Иконки форума

Этап верстки

Вcтраиваем семейство шрифтов PT Sans:

PT Sans

Используем модальные окна для входа:

модельное окно

Дропдаун для регионов:

Выпадающее меню

Указываем стили отображение сайта для разных типов устройств.

Проверяем корректность отображения на планшете и мобильном:

отображение сайта на планшете и мобильных устройствах

Работа в портфолио и в интернете.


Заинтересовали наши услуги? Вы можете связаться с нами, и мы с удовольствием ответим на ваши вопросы.

Получить консультацию у специалистов БЕСПЛАТНО!