Портфолио

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

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

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

Интернет-магазин для оптовиков компании Мэтр

Спроектировать и разработать интерактивный прототип сайта для оптовых клиентов компании Мэтр. Курировать разработку приложения.

  • Составление проектной документации;
  • Разработка интерактивного прототипа приложения;
  • Проведение пользовательского тестирования на удобство использования интерфейса;
  • Написание технического задания на разработку;
  • Курирование процесса разработки.
Экспертная оценка, пользовательское тестирование
Проектирование, Разработка

Административный интерфейс интернет-магазина

Пользовательский интерфейс интернет-магазина с товарами Taobao компании Opentao.

Спроектировать и разработать интерактивный прототип административной части готового интернет-магазина товаров Taobao.

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

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

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

Вся документация по проекту.

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

  • Развитая система помощи, включая гид по разделам;
  • Панель инструментов индексной страницы;
  • Гайдлайн для команды разработчиков по системному внедрению дополнительных функций в новый интерфейс с точки зрения клиентской разработки;
  • Качественный надзор за разработкой в релизе.
  • И многое-многое другое :)

Единый расчетный центр (Opentao Tradehub)

Спроектировать и разработать интерактивный прототип расчетного центра проекта Tradehub System компании Opentao.

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

  • Динамический прототип.
  • Вся документация по проекту.
  • Изучение специфической предметной области, сбор качественных данных, составление основных сценариев использования.
  • Разработка динамического прототипа (Bootstrap+jQuery+css+php) который позволил наглядно протестировать модель интерфейса, а также сэкономить на специалистах по дизайну и фронтенду, то есть прототип полностью ушел в производство.

Проект «Просто Сайт»

Разработка агентства «Вызов», предназначенная для проектов с небольшим бюджетом.

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

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

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

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

Проектная документация:

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

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

Все сопутствующие сервисы кинотеатра Спартак (кафе и кофейни, боулинг, кейтеринг, возможности аренды и рекламы) подробно освещены и проиллюстрированы.

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

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

Графический дизайн получился как и заказывали — развлекательный и строгий одновременно.

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

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

Переработана система расписания: можно сразу перейти на необходимый день недели, по каждому фильму отображается время, зал, стоимость и заполненность зала (для уменьшения визуальной энтропии, заполненность выполнена в виде шкалы, которая появляется при наведении на строку с сеансами по фильму).

В связи мягко говоря не совсем удачной навигацией в самом кинотеатре (золотые заголовки на бежевых стенах и невнятная архитектура здания, которому более 100 лет, под крышей которого объединены мультиплекс, несколько кафе, боулинг) было уделено существенное внимание разработке интерактивной схемы кинотеатра.

  • Макет сайта масштабируются под разрешение монитора, включая изображения.
  • Уделено достаточно внимания информационной подаче содержания: список фильмов, расписание сеансов и т. д.
  • Разработана интерактивная схема кинотеатра, с двухсторонней возможностью навигации по объектам: через категории объектов, через объекты на схеме. Схема разрабатывалась без использования технологии «флеш», так что можно при случае давать ссылки на непосредственный объект чтобы посмотреть как к нему добраться.
  • Разработана схема выбора мест для последующей покупки или брони. Развитая обратная реакция системы на возможные ограничения. Решены задачи в связи с нетривиальной предметной областью по возможности покупки билетов в связи законодательством, ограничением по времени на операции по покупке или брони в связи с блокированием билета на продажу, деления реакции системы на события по бронированию и покупке в связи с тем, что бронировать могут только держатели карт.
  • Проработаны страницы личного кабинета пользователя: информация по текущим и архивным заказам, активация бонусной карты, подписка, профиль.
  • Доработаны специфичные разделы администраторского раздела для бекенда основанного на системе управления содержимым UMI.CMS

Cоциальная сеть MeetFriends

Проект телекомпании Russia Today — это социальная сеть для зарубежных пользователей и иностранцев в России, которым интересны россияне и их жизнь.

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

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

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

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

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

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

  • Easy Guide
    Две навигации: по стрелкам и по шкале движения к счастью. Интерфейс адаптирован к разным экранам: стрелки всегда прибиты к своим краям; шкала счастья прибита к левому верхнему углу браузера, так что она всегда доступна для пользователя при любом разрешении. Особенности визуализации: ползунок шкалы можно также таскать, одновременно проматывая все шаги в реальном времени; активный слайд высветляется в отличие от своих неактивных собратьев; неактивная навигационная стрелка уводится в прозрачность и снимется признак активности курсора (pointer).

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

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

  • Профиль пользователя
    Подразделы выполнены посредством вкладок.

    Profile: содержимое полей редактируется путем инлайн-реализации с возможными вариантами для выбора.

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

    Video: загрузка видео, карусель превью для выбора ролика, заголовок и подпись к ролику, удаление.

    Looking for: содержимое полей редактируется путем инлайн-реализации с возможными вариантами для выбора аналогично разделу profile с учетом своей специфики.

    Settings: смена пароля, ящика, настройка уведомлений, использование защищенного соединения https, скрыть профиль, удалить профиль.

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

    Общий поиск выполнен в виде предложения с изменяемыми в нем частями — параметрами. В предложении визуально выделены ключевые составляющие. В выпадающем списке полов автоматически выставлен противоположный пользователю пол.

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

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

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

  • Записная книжка
    Специальный раздел для контактов пользователя с делениями по подразделам: General, куда попадают все контакты по умолчанию с кем было какой-либо взаимодействие; подраздел MyList, куда попадают желанные контакты; BlackList, куда заносятся контакты которые более не будут беспокоить пользователя. Списки снабжены краткой информацией о контактах. Здесь же можно проставить рейтинг. Интерфейс позволяет осуществлять перенос контактов из одного подраздела в другой и удаление.

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

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

  • Система сообщений
    Интерфейс пользователя реагирует на действия пользователя и дает обратную связь. Сообщения имеют цветовое кодирование. Модальные окна используются только для диалогов при удалении и информировании об ошибках. Уведомления об успешности действия не являются модальными и скрываются через определенное время.

  • Уведомления о событиях
    Пользователь получает уведомление в почту о произошедшем событии. Если он находится на сайте, то уведомление приходит в интерфейс с соответствующей индикацией события.

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

  • Интерфейс администратора
    Выполнен в дизайне сайта, с идентичным делением по разделам и подразделам. Весь функционал по потребностям — модерация новых пользователей, система тикетов корреспондеции в службу поддержки, редактирование статичных страниц, редактирование ролей, редактирование статусов тикетов, назначение ответственного за тикет. Реализация почтовой переписки через интерфейс сайта, хранение истории сообщений по пользователю, поиск по тексту, фильтры по дате.

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

  • Разработка
    Выполнена реализация front-end части интерфейса (кроме JS)

  • Гид по сайту для гостей. meetfriends.rt.com
  • Регистрация. meetfriends.rt.com
  • Уведомление о приглашении в чат, расширенный поиск meetfriends.rt.com
  • Результаты поиска. meetfriends.rt.com
  • Редактирование фото профиля. meetfriends.rt.com
  • Диалог удаления. meetfriends.rt.com
  • Профиль пользователя. meetfriends.rt.com
  • Раздел фотографий контакта. meetfriends.rt.com
  • Окно чата. meetfriends.rt.com
  • Раздел общения. Чат. meetfriends.rt.com
  • Моя записная книжка . meetfriends.rt.com
  • Администрирование. Тикеты. meetfriends.rt.com
Разработка
  • Облагораживание макетов дизайна вебом на стадии верстки;
  • Верстка макетов дизайна, настройка клиентских скриптов (html, css, jquery);
  • Функциональное тестирование продуктов.

Выполненные проекты (около 80-и)

  1. Визажист Ольга Екатеринчева — olgaecat.com;
  2. Личный блог Виктории Логачевой — lgch.ru;
  3. roadjunky.ru — путешествия на машине и без;
  4. Редизайн krepezhsv.ru;
  5. Вок-кафе в г. Паттайя (Таиланд);
  6. O.K.Design — студия по дизайну интерьера и художественно-декоративным работам;
  7. Изготовление рам для оформления картин, фотографий и икон Серёжинский багет;
  8. Вокальный ансамбль народной песни «Добродея»;
  9. Группа сайтов для компании Opentao: box.opentao.net
  10. Динамически прототип административного части интернет-магазина Opentao;
  11. Динамический прототип Единого расчетного центра системы Трейдхаб (компания Opentao)
  12. Воронежский концертный зал;
  13. Центр правовых инноваций и примирительных процедур;
  14. Адвокат Кирилов;
  15. Архитектурное бюро Дизайн-Воронеж;
  16. Трикотажная фирма Ателье «Берёзка»;
  17. Адвокат Ермолаев Роман Сергеевич;
  18. Отделение теоретической и прикладной лингвистики ВГУ;
  19. Конференция «Развитие региональных логистических систем»;
  20. Компания «ВИПЛАСТ-РЕСТАВРАЦИЯ»;
  21. Компания «7 Собак»;
  22. Сеть заводов «Бетон 222»;
  23. Анна Брагинская — украшения из бисера;
  24. Компания «АкваСто»;
  25. Компания АвтоПромМ;
  26. Издательство «Мир книги»;
  27. Компания Direct Logistics;
  28. Беспроводной провайдер интернета FlyNet.ru;
  29. МОА Черноземье;
  30. Проект idea36.ru + редизайн;
  31. Федеральный интегратор систем безопасности ID Systems + редизайн;
  32. Официальный сайт Каширского муниципального района;
  33. Компания ООО «Мастерфайбр-Люкс»;
  34. Компания «Торговая Марка»;
  35. Лесопромышленная компания «ТЕМП»;
  36. Интернет-магазин канцтоваров и товаров для офиса Мэтр (Мэтр.рф);
  37. Газета «Молодой Коммунар»;
  38. Издательство Мир Книги;
  39. Центр Реабилитации «Возможность» — MisPos;
  40. Фотограф и визажист Ольга Екатеринчева;
  41. Бюро креативных проектов SilverStone;
  42. Институт Практической Психологии Терра;
  43. Официальный сайт российского представительства портативной навигационной системы Tibo GPS;
  44. Школа боевых искусств «Парящий орел»;
  45. Воронежский экспериментальный завод металлических конструкций — ВЭЗМК;
  46. Рекламное агентство «VidMedia»;
  47. Адвокатская контора Алимкина Н. И.;
  48. Юридическая компания АЛЬТТЕРА;
  49. Материалы для наружной рекламы «Аструм»;
  50. Банк Петербург Инвест;
  51. Охотничье хозяйство «Берендеи»;
  52. Сайт Сергея Ведерникова;
  53. Компания Водная империя;
  54. ОАО «Воронежоблгаз»;
  55. ООО «Воронежрегионгаз»;
  56. Агентство творческих услуг «Галина»;
  57. Проектно-строительная компания Геопром;
  58. Компания «Мегател»;
  59. Форум-сайт для продажи, покупки и обмена детских товаров Продавайка;
  60. Международная сеть спортклубов Reebok в России;
  61. Группа компаний «Русский Аппетит»;
  62. Город Рыльск;
  63. Свято-Серафимо-Саровский мужской монастырь;
  64. Московское кафе «Свой круг»;
  65. Институт развития личности;
  66. Компания «ТУТ И ТАМ»;
  67. Клуб спортивного покера «Феникс»;
  68. Компания «Элмиком-ТВС»;
  69. Агентство «Вызов» + редизайн;
  70. Проект «Просто Сайт»;
  71. Проект телекомпании Russia TodayMeetFriends;
  72. Издательский дом Свободная пресса;
  73. Светодиодные вывески;
  74. Мастерская «Художественная ковка»;
  75. Арт-студия лепки «Желтый мак»;
  76. Галерея уникальных вещей «Слонеги»;
  77. Порошковая окраска;
  78. Информационный ресурс LookCool;
  79. Кинотеатр Спартак;
  80. Компания ID Consulting.

Частичное участие

Информационное агентство «Воронеж-медиа», ООО «НПО ТЕРМЭК», архиепископ Ионафан (Елецких), школа «Феникс», DJ Sergeev, рекламное агентство Максима, развлекательный комплекс Парнас, ЗАО Кодотел, скульптор Марина Ливенцева, системы управления развитием Эффективные решения (аудит).