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

Итак, задача — разработать систему управления проектами по созданию и поддержке веб-сайтов со следующими возможностями:

• возможность раздельного отображения входящих и исходящих (поставленных пользователем) задач;
• возможность назначать задачам типы работ с определенной тарификацией и объединять задачи по проектам;
• возможность легко отмечать небольшие отрезки времени затраченного на задачу в течении дня, сразу же по завершении этого отрезка работы. Это актуально для менеджеров проектов и технической поддержки, которые тратят по 10 раз по 20-40 минут в день на проект, а проектов одновременно от 5 до 10;
• возможность участия клиентов в качестве пользователей (экстранет);
• возможность получения отчетов по загрузке сотрудников и биллинговой информации по выполненной работе для клиентов. Соответственно возможность установки различных тарифов на разные виды работ.

На экране входящих задач, с которого начинает работу пользователь, мы видим поставленные пользователю задачи. Зеленым выделены новые (в статусе «Регистрация»), оранжевым просроченные. Флажками отмечены задачи с высоким приоритетом. Всплывающий слой рядом с «плюсиком» позволяет не открывая карточку задачи добавить затраченное только что время.

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

Карточка задачи в общем обычная для таких систем. Цветом разделено содержание и свойства задачи. Набор доступных опций для редактирования свойств разный для каждой роли пользователя. Из приятного — выделены ключевые параметры задачи: дедлайн и приоритет. Приоритет снимается и назначается одним кликом по иконке флажка.

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

Cистема дистанционного тестирования предназначена для подготовки к сдаче квалификационных экзаменов на курсах специалистов финансового рынка и курсах подготовки специалистов по связям с инвесторами.

Локальная задача: разработать удобный интерфейс для сдачи экзамена на время при условии, что за 2 часа нужно ответить на 60-80 вопросов по 3-5 вариантов ответа в каждом.

Особенности: нужно предусмотреть возможность пропустить сложный вопрос и затем легко к нему вернуться, когда останется время (таймер).

Изначально заказчик ориентировался на следующий пример:

Как видите, возможности пропустить ответ нет, номера вопросов расположены в виде кубика Рубика, а головоломок хватает, достаточно вчитаться в текст вопросов. Самый главный недостаток такого решения то, что все 30 (в данном случае) вопросов находятся на одном экране и для того, чтобы ориентироваться в них, нужно не спеша прокручивать  страницу туда-сюда и поглощать массу ненужной информации.

Решение очевидно — поэкранное отображение вопросов. С возможностью выделения цветом тех вопросов, на которые дан ответ. Таймер выделить, чтобы экзаменующийся чувствовал себя спокойно :)

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

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

Мабухай!

Это филиппинское приветствие. По аналогичному доменному имени mabuhay.ru, скоро будет открыт сайт Департамента Туризма Филиппин.

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

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

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

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

Итак, по хронологии, в порядке убывания.

Сайт компании Телемарк

Компания занимается разработкой интернет-проектов и директор там замечательный человек, Сергей Тимохин. Для этого сайта была разработана оригинальная концепция содержания и тексты писала Наталья Кристеа, талантливый копирайтер. В общем, процесс работы мне понравился и результатом я тоже доволен.

Сайт турагентства Марина Клаб

Помнится, в начале века были очень популярны фактурные дизайны. Особенно в Великом Новгороде, там редкий сайт обходился без бересты :) Да и неподражаемый Тема Лебедев делал барочные сайты, взять хотя бы сайт Старого Мельника

Вот камбэк из деревянной серии собственного производства — сайт агентства «Марина Клаб».

Главная страница…

… и внутренняя (на примере описания страны)

Сайт компании География здоровья

Проект включает в себя 3 сайта и сплэш-страничку. Классные флешки делал Влад Вовк.

Один из сайтов:

Сайт магазина эко-продуктов Bio Gourmet

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

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

…поможет Axure RP Pro! Наверное многим в информационном дизайне знакома ситуация: нужно спроектировать интерфейс содержащий множество различных сущностей и взаимосвязей. Рисовать на бумаге — не у всех получается аккуратно и трудно вносить исправления. Сразу в фотошопе — невольно начинаешь думать о цветах, шрифтах и забываешь о структуре и механизмах, как результат — зарываешся в макете и устаешь так ничего и не спланировав толком.

Выход в использовании программ для прототипирования. Долго расписывать не буду: пробовал визио – как всегда куча инструментов для кого угодно и в итоге много лишнего. Axure RP Pro — специально предназначена для веб-интерфейсов. Проектровать в нем — одно удовольствие!