О проекте
«ДМК Пресс» — российское издательство, специализирующееся на выпуске литературы по программированию, информационным технологиям, электронике и радиотехнике. Компания начала работу в 1992 году как книготорговая фирма. Через пять лет направление было расширено: на базе компании появилось собственное издательство. За годы работы «ДМК Пресс» сформировало репутацию одного из ведущих издательств технической литературы в России. В ассортименте издательства — книги для разработчиков, инженеров, студентов, преподавателей и всех, кто интересуется современными технологиями. Каждое издание проходит тщательный отбор, редактуру, обработку иллюстраций и несколько этапов проверки перед публикацией. Некоторые книги «ДМК Пресс» рекомендованы Министерством образования Российской Федерации в качестве учебных пособий для студентов высших учебных заведений. За время работы издательство выпустило несколько сотен книг и продолжает регулярно расширять каталог, исследуя новые направления и отслеживая актуальные темы в сфере технологий.
Задача
На момент обращения в Iris Digital у «ДМК Пресс» уже был действующий сайт на платформе UMI.CMS.
Изначально заказчику требовались небольшие доработки функционала и улучшение отдельных элементов сайта. Однако в процессе работы стало очевидно, что проект нуждается в более масштабном обновлении. Существующий интерфейс перестал соответствовать объёму каталога и задачам издательства:
- структура сайта требовала пересмотра;
- навигация по каталогу была недостаточно удобной;
- контентные блоки нуждались в более логичном расположении;
- дизайн необходимо было адаптировать под современные требования;
- отсутствовала полноценная адаптивная версия;
- часть пользовательских сценариев требовала доработки;
- существующий шаблонизатор ограничивал возможности дальнейшего развития сайта.
Поэтому совместно с заказчиком мы приняли решение не ограничиваться точечными изменениями, а провести комплексную модернизацию проекта: обновить визуальную концепцию, переработать структуру страниц, перейти с TPL на XSLT-шаблонизатор и доработать ключевые функциональные возможности сайта.
Концепция и дизайн
Одной из задач было создать визуальный образ, который помог бы выделить сайт среди других книжных интернет-магазинов и сделать его более узнаваемым. На первом этапе команда Iris Digital подготовила первоначальную концепцию главной страницы и предложила несколько вариантов подачи каталога, новинок и специальных предложений.
В ходе обсуждения заказчик попросил сохранить в дизайне персонажа — сову, которая уже ассоциировалась с издательством. Мы использовали этот образ как центральный элемент визуальной концепции и дополнили его интерактивной механикой: глаза совы должны были следить за движением курсора пользователя.
Так персонаж стал не просто декоративным элементом, а частью пользовательского взаимодействия с сайтом. Это добавило проекту индивидуальности и сделало интерфейс более живым.
Работа над структурой
В процессе проектирования мы отказались от избыточного использования вкладок и пересмотрели расположение основных информационных блоков. Главная страница была выстроена вокруг ключевых задач пользователя:
- быстро перейти в каталог;
- найти нужную книгу;
- ознакомиться с новинками;
- посмотреть товары со скидками;
- получить информацию об акциях;
- перейти к популярным разделам;
- ознакомиться с дополнительными материалами издательства.
Мы изменили композицию страницы, добавили персонажа в интерфейс и перераспределили контентные блоки таким образом, чтобы пользователь мог быстрее ориентироваться в ассортименте.
На следующем этапе доработали дизайн главной страницы:
- добавили отдельный блок с акциями;
- оптимизировали расположение разделов «Новинки» и «Распродажа»;
- уточнили визуальную иерархию элементов;
- сделали акцент на обложках книг и товарных предложениях;
- привели блоки к единой системе оформления.
Дизайн внутренних страниц
После утверждения концепции главной страницы мы разработали дизайн основных внутренних разделов сайта.
Карточка товара
Карточка книги была спроектирована так, чтобы пользователь мог быстро получить всю необходимую информацию об издании:
- обложка и основные характеристики;
- название и описание книги;
- сведения об авторе;
- стоимость;
- информация о наличии;
- возможность добавить товар в корзину;
- дополнительные параметры и материалы.
Особое внимание уделили удобству восприятия большого объёма информации и заметности целевого действия — добавления книги в корзину.
Каталог
Для каталога разработали понятную структуру с акцентом на навигацию и быстрый просмотр ассортимента. Пользователь может последовательно переходить между разделами, знакомиться с подборками книг и открывать подробные страницы товаров. Визуальная подача каталога была унифицирована: карточки книг получили единый формат, а обложки стали основным элементом, помогающим ориентироваться в ассортименте.
Текстовые страницы
Для информационных и текстовых разделов создали отдельный шаблон. Он позволяет комфортно воспринимать большие объёмы текста, сохраняет единую стилистику сайта и подходит для публикации материалов об издательстве, авторах, условиях работы и другой информации.
Адаптивная версия
Одним из обязательных этапов проекта стала разработка адаптивной вёрстки. Мы подготовили отображение сайта для различных разрешений экрана, включая компьютеры, планшеты и мобильные устройства. В адаптивной версии пересмотрели размеры элементов, расположение блоков и поведение каталога, чтобы основные сценарии оставались удобными независимо от устройства.
Отдельно проработали:
- отображение меню и навигации;
- карточки книг;
- каталог и товарные списки;
- страницу товара;
- корзину и пользовательские формы;
- информационные и текстовые разделы;
- интерактивного персонажа;
- фиксированный блок просмотренных товаров.
Техническая реализация
После утверждения дизайна мы выполнили вёрстку всех основных страниц и интегрировали её с действующей платформой UMI.CMS. В рамках технической части проекта:
- перенесли шаблоны с TPL на XSLT-шаблонизатор;
- смонтировали свёрстанный дизайн на платформу;
- адаптировали основные модули под новую структуру;
- сохранили работу каталога и существующих пользовательских сценариев;
- внедрили обновлённые шаблоны главной и внутренних страниц;
- обеспечили корректное отображение сайта на мобильных устройствах.
Переход на XSLT позволил сделать шаблонную систему более гибкой и создать основу для дальнейшего развития сайта.
Дополнительные доработки
Помимо обновления дизайна и структуры, мы реализовали ряд функциональных изменений.
Генерация прайс-листа
Разработали механизм автоматической генерации прайс-листа в формате XLS. Формирование файла происходит по заданному расписанию, поэтому заказчику не требуется каждый раз собирать документ вручную. Это упростило подготовку актуальной информации о товарах и сделало работу с ассортиментом более удобной.
Обновление системы уведомлений
Полностью переработали систему уведомлений пользователей о статусе заказа. Теперь покупатель получает более понятную информацию о ходе обработки заказа и может отслеживать его основные этапы.
Регистрация по электронной почте
Добавили возможность регистрации пользователя по e-mail. Новый сценарий упростил создание аккаунта и сделал процесс более привычным для посетителей интернет-магазина.
AJAX-авторизация
Для авторизации реализовали AJAX-механику. Благодаря этому пользователю не нужно каждый раз переходить на отдельную страницу: вход в аккаунт происходит непосредственно в интерфейсе сайта, без полной перезагрузки страницы.
Просмотренные товары
Добавили блок просмотренных товаров, который фиксируется в нижней части экрана. Пользователь может быстро вернуться к книгам, которыми уже интересовался, не повторяя поиск по каталогу.
Результат
В результате модернизации «ДМК Пресс» получил обновлённый интернет-магазин с узнаваемым визуальным образом, современной структурой и адаптивным интерфейсом. Мы не ограничились изменением внешнего вида сайта, а комплексно переработали проект:
- обновили дизайн главной страницы;
- сохранили и переосмыслили образ совы;
- добавили интерактивного персонажа;
- переработали структуру и расположение контентных блоков;
- разработали дизайн каталога, карточки товара и текстовых страниц;
- реализовали адаптивную вёрстку;
- перенесли шаблоны на XSLT;
- интегрировали новый дизайн с UMI.CMS;
- автоматизировали формирование прайс-листа;
- обновили систему уведомлений о заказах;
- добавили регистрацию по e-mail;
- реализовали AJAX-авторизацию;
- внедрили блок просмотренных товаров.
Новый сайт объединил задачи издательства, интернет-магазина и контентного проекта: помог пользователям быстрее находить нужные книги, упростил работу с каталогом и создал основу для дальнейшего развития цифровой площадки «ДМК Пресс».
