Социальная сеть
для любителей искусства
Артхив

Дата работы:
2012 — по настоящее время

Роль:
Дизайнер, дизайнер продукта

Артхив — сайт об искусстве. В артхиве работает своя редакция, содержится база из 275 тысяч работ, есть площадка для продажи картин и сообщество для любителей и деятелей искусства.

[unex_ce_button id="content_be1ntaerb,column_content_klj3fopgi" button_text_color="#ffffff" button_font="regular" button_font_size="18px" button_width="auto" button_alignment="left" button_text_spacing="-0.2px" button_bg_color="#000000" button_padding="15px 35px 15px 35px" button_border_width="0px" button_border_color="#000000" button_border_radius="30px" button_text_hover_color="#ffffff" button_text_spacing_hover="-0.2px" button_bg_hover_color="#333333" button_border_hover_color="#000000" button_link="http://artchive.ru" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]www.artchive.ru[/ce_button]

Концепция загрузки главной страницы и работы слайдера

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

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

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

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

Главная страница проекта

Работа блока «Факт дня»

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

Входная страница раздела «Художники»

Концепция работы таблицы в блоке «Старые мастера»

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

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

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

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

Входная страница раздела «Работы»

Страница работы

У нас собралось много информации от пользователей, что текущая система создания выставок и заведения других объектов в Артхиве неудобны. Кроме того они внешне морально устарели. Поэтому переработка всех форм стала отдельной крупной историей. Заодно мы решили их упростить и почистить от ввода лишней информации.

Страница добавления работы

Редактирование изображения

Добавление выставки

Добавление поста

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

Концепция анимации работы слайдера выставок и перехода на страницу выставки

Выбор региона проведения выставок

Процесс. Создание системы

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

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

Макеты проекта предыдущей версии

После этого мы решили определиться со шрифтами. После длительного отбора мы решили использовать два шрифта. Один — основной, системный. Второй — для текстов на страницах новостей, знаний, энциклопедии.

fontsfonts

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

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

Сам UI кит мы разделили на несколько частей:

  • Элементы
  • Карточки
  • Контент
  • Блоки
  • Заголовки
  • Иконки
  • Лента
  • Модальные окна
  • Сквозные элементы

Элементы

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

UI. Элементы.

Карточки

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

Поэтому мы решили вынести карточки в отдельную систему UI элементов.

UI. Карточки.

Контент

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

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

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

UI. Функциональные и контентные блоки.

Заголовки

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

UI. Заголовочные блоки.

Иконки

Коллекция иконок всегда была слабым местом проекта. Долгое время использовались иконки шрифта FontAwesome. Однако, из-за качества шрифтовых иконок, со временем мы начали переход на создание своих сетов. К тому же часть коллекции нам досталась «в наследство» от мобильного приложения.

UI. Иконки.

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

UI. Блок создания нового поста.

UI. Базовые элементы поста в ленте.

UI. Контентные блоки поста ленты.

Модальные окна

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

UI. Модальные окна.

Сквозные элементы

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

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

Спроектированная система в настоящее время постепенно внедряется, подменяя текущие шаблоны проекта на обновленные версии.

UI. Сквозные элементы.