Практика

1.6 Написать обращение

Отправлено на adm@rdtc.ru:

Генеральному директору ЗАО «РЦТК»
Владимиру Петровичу Шургалину
от абонента-дизайнера

Обращение

Уважаемый Владимир Петрович.

Уже два года я являюсь абонентом новокузнецкого провайдера «РЦТК» и исправно оплачиваю предоставляемые услуги. Но со временем моё впечатление от работы компании становится всё хуже и хуже.

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

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

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

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

Те, же кто хочет что-то изменить, сталкивается со стеной непонимания и агрессии со стороны зажравшихся лентяев, не способных поднять свой зад ради дела, и вся энергия которых тратится лишь на прикрывание собственной недееспособности. Естественно, что о клиентах компании они даже не думают. Да никогда и не думали. А зачем, если «быдло и так платит»?!

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

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

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

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

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

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

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

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

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

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

Спасибо.

Стандартный
Практика

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

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

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

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

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

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

C сеткой:

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

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

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

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

Фильтр

С сеткой:

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

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

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

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

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

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

Сайты

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

Поиск

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

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

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

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

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

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

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

C сеткой:

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

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

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

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

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

Кнопки

Стандартный
Практика

1.4 Разработать модульную сетку

Модульная сетка существенно упростит отрисовку дизайн-макетов и последующую верстку шаблонов.

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

Сначала определим следующие параметры шрифта и микромодуля:

  • шрифт: Arial,
  • базовый размер кегля: 12 пикселей,
  • базовая высота строки: 18 пикселей,

и, как следствие,

  • ширина середника: 18 пикселей,
  • размер микромодуля: 18×18 пикселей.

Имя шрифта мы унаследовали от текущих стилей оформления «Кладовки».

Размер кегля в 12 пикселей выбран из-за получаемой сочетаемости компактности набора и удобства его чтения на различных современных устройствах.

Микромодуль

Далее определимся с размерами модуля.

Сначала определим ширину.

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

Размер картинки составляет 133×180 пикселя.

Обложка диска

133 не кратно 18.

Рассчитаем новую ширину, наиболее близкую к оригинальной и кратную 18. При этом, для большей гибкости создаваемой сетки, «впишем» в ширину картинки не один, а два модуля и один середник.

Считаем и получаем ширину картинки в 7 середников, или в 126 пикселей.

Новая ширина картинки

Далее вычитаем из ширины картинки один середник и результат делим пополам. Таким образом, ширина модуля равна 54 пикселям.

Аналогичным образом определим высоту модуля.

Опять же, для гибкости, «вписывая» по высоте в картинку два модуля и один середник, получаем, что высота модуля равна 72 пикселя (4 базовых линии).

4 модуля в одной картинке

С модулем определились.

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

Первый момент.

Краткое описание раздачи будет располагаться справа от обложки. Определим, что описание должно занимать примерно такую же площадь, что и картинка — 2×2 модуля. Пусть между обложкой и описанием будет зазор в один середник.

Обложка с описанием

Обложка и описание вместе образуют блок раздачи.

Второй момент.

Разделим страницу на две основных секции.

Основные секции

В секции «А» будут располагаться: логотип, меню, поиск и другие функциональные элементы.

Секция «Б» будет полностью занята блоками раздач.

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

Определим, что в данном случае пользователь должен считывать блоки построчно.

Порядок считывания раздач

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

Отступы между блоками раздач

Необходимо выполнить два условия:

  1. Горизонтальный отступ между блоками h должен быть больше, чем середник между картинкой и описанием раздачи.
  2. Для сохранения задуманного порядка считывания блоков, горизонтальный отступ между блоками h должен быть меньше, чем вертикальный отступ v.

Исходя из условий, определим, что

  • горизонтальный отступ h равен 36 пикселям (2 середника),
  • а вертикальный отступ v — 54 пикселям (3 базовых линии).

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

Подготавливаем паттерн.

Паттерн

Заливаем паттерном пустой макет для будущего дизайна страницы.

Макет, залитый паттерном

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

Подбираем ширину и высоту макета (получилось 954 и 755 пикселей, соответственно).

Макет с сеткой

Модульная сетка готова.

Стандартный