Артхив 3.0
Социальная сеть об искусстве
Год:
2012 — 2019
Роль:
Дизайнер, Дизайнер продукта
Артхив — проект об искусстве. Здесь есть редакция, а сайт содержит базу из более 300 тысяч работ, платформу для продажи картин и сообщество любителей искусства и художников.
Для артхива я создал дизайн-систему, которая привела в порядок проект. Система будет внедряться постепенно в течение длительного времени, но первые результаты уже можно увидеть на сайте.
Помимо стремления упростить элементы и дальнейшую работу, также была достигнута критическая масса изменений в продуктах компании. Необходимо было привести сайт к единой структуре.
Концепция загрузки главной страницы и слайдера
Прежде всего было принято решение о редизайне наиболее посещаемых страниц и разделов проекта. Главная страница была почти полностью переработана. Только новостной блок сохранил обычную структуру, хотя и он был серьезно изменён. Был добавлен промо-блок с информацией о других продуктах Артхива, которые «замалчивались» предыдущей версией страницы.
База выставок постоянно пополняется пользователями и редакторами, поэтому она заняла почетное третье место на странице. Ленту пустили внизу, что сделало страницу входа проекта бесконечной в формате социальных сетей.
Главная страница
Анимация «Факта дня»
Следующими разделами, на которые мы обратили внимание, были Работы и Художники. В этих разделах было несколько проблем, которые нужно было решить. А планируемая техническая переработка разделов позволила нам сделать более глубокий редизайн.
Страница входа в раздел «Художники»
Концепция таблицы художников в блоке "Старые мастера"
В разделе художников основная проблема заключалась в том, что вывод художников в списке по умолчанию определялся популярностью. В результате известные старые мастера, очевидно имеющие огромную популярность, не позволяли ни одному современному или просто новому художнику «просочиться» на первый экран. С другой стороны, мы не смогли переработать алгоритм и поставить зависимость от активности. Ведь тогда наоборот старые художники будут полностью заменены новыми.
В результате мы перешли к разделению старых мастеров и современных художников на входной странице раздела. Теперь они ранжируются по-своему и имеют две отдельные страницы.
Страница художника
В разделе работ у нас также были проблемы с доставкой релевантного и интересного контента зрителю. Сокровища лежали в глубине системы, но мы не могли их показать, потому что ни одной вразумительной сортировки работ было недостаточно, чтобы показать лучшее и убрать из глаз искушенных влюбленных эксперименты начинающих художников.
Проблема частично решена привлечением экспертов, которые вручную отбирают новые работы и собирают тематические подборки с интересными экземплярами. Также мы сделали раздел «Дебют» где публикуется первая загруженная работа художника в Артхиве. Превью-блок дебюта выводится в том числе на главной странице. Посетители могут оценить новых художников и подписаться на них.
Чтобы помочь работам художников продаваться на рынке, мы переориентировали страницу работы на коммерческий тон, выделив блок информации о цене и работе.
Входная страница раздела работ
Страница работы
Мы собрали много информации от пользователей, что нынешняя система создания выставок и других объектов в Артхиве неудобна. Кроме того, они морально устарели. Поэтому переработка всех форм стала отдельной большой историей.
Ранее формы были модальными окнами, но из-за их размера работать с ними было неудобно. Мы вывели формы в отдельные страницы. В то же время решили упростить и очистить их от ввода дополнительной информации.
Добавление работы
Редактирование изображения
Добавление выставки
Добавление поста
В раздел выставок был внесен минимум функциональных изменений. Мы лишь обновили дизайн раздела и привели его к общему стилю.
Выставки. Весь мир
Концепция анимации слайдера выставки и перехода на страницу выставки
Страница выставки
Выбор региона для показа выставок
Процесс. Создание системы
Отдельно хочу поговорить о создании системы, которая легла в основу всех изменений. Желание создать такую структуру возникло после того, как в предыдущей версии появился большой список новых функций. Работать над добавлением новых элементов, блоков, разделов становилось все труднее, а внедрение обходилось все дороже.
Для начала мы решили собрать все экраны Arthive в одном месте, чтобы определить основные шаблоны, которые используются в проекте, и понять, как нам проще всего объединить их в единую систему. Как построить эту систему объектов, на каком основании объединить элементы и даже как их назвать.
Предыдущие экраны проекта
После этого мы решили выбрать шрифты. Решили использовать два. Один — основной. Второй — для текстов на новостях, знаниях, страницах энциклопедии.
Следующим шагом было создание UI Kit. У нас было два варианта действий. Первый вариант — полностью разработать комплект пользовательского интерфейса, а затем распределить его по макетам. Этот подход был применен, когда мы создали байкнет. Второй подход заключается в постепенном создании и замене UI Kit.
Первоначально мы стремились к первому варианту, однако, учитывая технические ограничения, мы не смогли бы внедрить даже небольшие изменения быстро и повсеместно. Поэтому мы решили накапливать и расширять коллекцию.
Мы разделили UI Kit на несколько частей:
- Элементы
- Карточки
- Типографика
- Блоки
- Заголовочные блоки
- Иконки
- Лента
- Модальные окна
- Сквозные элементы
Элементы
Элементы, без сомнения, являются каркасом всего проекта. Формы, кнопки, цвета, всевозможные ссылки, выпадающие списки, переключатели и другие детали.
UI. Элементы.
Карточки
Каждая страница делится на две части. Первая часть — сквозные элементы: шапка, футер, нумерация страниц, блок заголовка, фильтры, сортировки. Вторая часть — контент. Контент на страницах состоит из потока «информационных карточек», которые ведут на свои собственные страницы: статьи, страницы работ, художники, выставки, галереи, пользователи, коллекции и так далее.
Поэтому мы решили объединить эти карточки в отдельную систему элементов пользовательского интерфейса.
UI. Карточки.
Типографика
В этом блоке пользовательского интерфейса мы собрали все или почти все стили текста. Это абсолютно необходимо при работе с супер-большим проектом, таким как Артхив. Кроме того, была сделана попытка синхронизировать размеры шрифтов на десктопной версии с их размерами в мобильной версии проекта. К сожалению, это не всегда обеспечивает необходимую гибкость для проекта, поэтому это работает как «правило по умолчанию», но может быть нарушено.
Отдельно следует сказать, что подход к стилям текста был непростым. Изначально планировалось собирать стили, в том числе интерлиньяж, размер и цвет. Однако позже выяснилось, что это резко увеличивает количество стилей, поскольку интерлиньяж меняется в зависимости от ширины страницы, а цвет текста может быть любым в пределах цветовой гаммы, принятой в проекте. Поэтому в настоящее время мы собираем только размеры шрифтов, и интерлиньяж является только рекомендацией и может быть гибким.
UI. Стили шрифтов
Блоки
Галереи, списки, загрузчики, видео и другие функциональные элементы проекта находятся здесь.
Ui. Функциональные и контентные блоки
Заголовочные блоки
Еще одна часть структуры. Чтобы не создавать десятки различных типов заголовков для каждой страницы, проще и удобнее сделать 3-4 варианта блоков заголовков. Блок заголовка включает в себя подменю раздела и информационный текст, который используется для SEO.
UI. Заголовочные блоки.
Иконки
Коллекция иконок всегда была слабым местом проекта. Значки шрифта FontAwesome использовались в течение длительного времени. Однако из-за качества иконок шрифтов мы начали создавать собственные наборы. Кроме того, мы унаследовали часть коллекции от мобильного приложения.
UI. Иконки.
Лента
Специальный раздел UI Kit, который уникален для этого проекта и разделен на внутренние компоненты, из которых состоит каждая карточка в ленте.
UI. Создание нового поста.
UI. Базовые элементы поста в ленте.
UI. Контентная часть постов в ленте
Модальные окна
Содержат некоторые правила для модальных окон проекта. Раньше большинство форм были в модальных окнах. Это должно было стать важной частью UI Kit. Однако мы отказались от этого подхода, поэтому модальные окна теперь используются гораздо реже.
UI. Модальные окна.
Сквозные элементы
Это набор элементов, которые так или иначе связаны с шапкой или футером и могут пересекать все страницы проекта или разделы.
На этом блоке содержимое UI Kit заканчивается. Такая структура позволила нам создать достаточно стабильную и гибкую систему, на основе которой все страницы проекта строятся по единому шаблону.
Разработанная система в настоящее время постепенно внедряется, заменяя шаблоны текущего проекта обновленными версиями.
UI. Сквозные элементы
More selected projects
Drop me a line
skorobogatkonn@gmail.com