Практика

1.5 Нарисовать дизайн

Возьмем разработанную модульную сетку и нарисуем по ней дизайн.

Будем исходить из принципа разумности и акцентироваться на полезном контенте, а не на оформительских элементах.

Проектируем, рисуем и получаем результат.

Страница со списком раздач:

Список раздач

C сеткой:

Список раздач с сеткой

Ссылка «Свежие» ведет на страницу с раздачами, которые были добавлены после последнего посещения пользователя.

Ссылка «Избранные» ведет на страницу со списком избранных раздач. Желтая звездочка в описании раздачи показывает, что данная раздача уже находится в списке избранных.

Ссылка «Все» открывает меню фильтра.

Фильтр

С сеткой:

Фильтр по сетке

Если убрать все галочки, то будет показан список всех раздач в порядке их появления.

Если отметить галочкой хотя бы один пункт в столбце, по данному свойству раздачи будет применен фильтр. Например, на скриншоте сверху показан фильтр со значением «все английские комедии 2010 года в любом формате».

Подразумевается, что смена различных списков будет происходить при помощи технологии AJAX без перезагрузки страницы.

Все второстепенные ссылки собраны в два выпадающих меню.

Ответы на вопросы

Сайты

Поиск можно вести по конкретным категориям.

Поиск

Если категория не задана, поиск будет осуществляться по всем доступным свойствам раздач.

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

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

Правила изменения размера обложки

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

Как и ожидалось, разработанная модульная сетка отлично подошла и для страницы с подробным описанием раздачи.

Детали раздачи

C сеткой:

Детали по сетке

Кадры фильма в оригинальном размере показываются по клику на картинку превью. Для этого используем любой лайтбокс.

Подробности о формате видео и аудио каждого файла убраны в всплывающий блок.

Детали деталей

Для различного типа скачиваемого контента — разные кнопки. Каждая кнопка имеет три состояния: обычное, при наведении и при нажатии.

Кнопки

Реклама
Стандартный

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход /  Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход /  Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход /  Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход /  Изменить )

Connecting to %s