Creddy
Дизайн и разработка сайта для современного p2p-сервиса онлайн-кредитования
кейс
Перспективное развитие
Новостной портал Промсвязьбанка о финансах и промышленности в России
задача
Абстрагироваться от бренда ПСБ и создать самостоятельный экономический медиапортал, рассчитанный на профессиональную аудиторию, предприятия и ведомства Оборонно-промышленного комплекса.
клиент
ПСБ
отрасль
Медиа
год запуска
2021
что сделали
Дизайн сайта
Frontend-разработка
Backend-разработка
Начало работы
Подобрали и утвердили референсы по визуальной стилистике, настроили параллельную работу над общей дизайн-концепцией и внутренними страницами и приступили к фронтенд и бэкенд-разработке.
Крупные цитаты с акцентом на контент
На главной странице выделили фразы авторитетных спикеров отрасли и лидеров мнений. Важно отметить, что сделали акцент именно на цитате, а не на говорящем — поставили подпись после фразы и добавили небольшое изображение.
Дизайн
Портал обновляется с разной периодичностью, поэтому, чтобы он не казался пользователю «мертвым», решили внедрить в строгую и минималистичную концепцию особые решения: крупные новостные карточки, небольшие отступы и цветовое кодирование для каждого из разделов. Сохранили лаконичность главной страницы и разместили в начале только самые свежие публикации.
Цветовое тонирование
Тексты портала написаны специфичным и сложным языком, поэтому эмоциональное воздействие на пользователя оказывают превью. Чтобы подбор обложек для текстов был более вариативным и соответствовал при этом единому визуальному стилю, использовали цветовое тонирование. Если навести курсор на карточку, тонирование исчезает, выделяя новость среди других. Портал имеет четыре основных раздела с текстами, для каждого из которых подобран собственный цветовой тон.
Подобрали обложки для каждой статьи, сочетая их между собой соответственно цветовому тону раздела.
Навигация
Меню отражает идею разделов и делит контент на смысловые блоки. Пользователь перемещается не только между основными разделами, но и дополнительными — «Нормативные документы» и «Журнал».
Реализовали верстку типовых блоков и элементов и предусмотрели их работу в различных контекстах.
Проектирование графиков
Спроектировали для каждой статьи визуальные элементы: таблицы, столбчатые, линейные и круговые диаграммы. Перевели текстовую статистику в изображения и переработали входные данные единиц измерения для лучшего восприятия. Например, перевели миллиарды в проценты.
Внутренние страницы
Все внутренние страницы поддерживают общую сетку и модульность, которую мы разработали. Это позволяет переиспользовать некоторые блоки и модули, сохраняя общую консистентность.
Форма заявки
Создали специальную анкету для проектов, ищущих инвестиции. Реализовали текстовые поля с автоматической высотой — по мере ввода текста размер поля увеличивается. Таким образом пользователь видит весь текст без прокрутки, а по умолчанию поле не занимает много места на экране.
Администрирование сайта
Собственный роутер и самописные решения в коде позволяют редакторам сайта удобно управлять страницами и контентными блоками. Восприятие специфической информации упрощается с помощью простых форм в дизайне, цветового тонирования и визуализации статистики.
технологии
1С-Bitrix
HTML5
CSS3
Vanilla JavaScript (ES6)
Web Components
отзыв
Вера Подгузова
Старший вице-президент, директор дирекции по внешним связям
ПСБ
Команда Red Collar стала нашим партнёром в разработке самостоятельного экономического медиапортала. Агентство взяло полную ответственность за работу над проектом о промышленности и финансах и отвечало за все этапы создания сайта: от дизайна и frontend до backend-разработки. Специалисты компании показали высокий уровень экспертности и оперативно решали все поставленные задачи. Уже на старте работы нам удалось добиться полного взаимопонимания и создать медиа, которое помогает понятно раскрывать сложные экономические темы и выстраивать коммуникацию с пользователем. После запуска мы также успешно сотрудничаем по части развития и наполнения медиа.
смотрите также
связаться