Справочник в новой форме
У ВсеСуды была иконка-иллюстрация: зелёная книга, цветные закладки и деревянный судейский молоток. Мы сохранили зелёный характер и идею справочника, проверили четыре направления и собрали знак, который читается и в 16 пикселях. Все четыре варианта — в архиве в конце статьи.
БылоСталоЗелёный переплёт. Знакомый характер
У старой иконки ВсеСуды был вполне предметный мир: зелёная книга, светлый срез страниц, цветные закладки, деревянный судейский молоток и круглая подставка. Такой знак можно рассматривать как маленькую иллюстрацию — в нём уже соединены справочник и судебная тема.
Мы начали с вопроса: что должно остаться, если подробностей станет меньше? Не хотелось терять зелёный характер и связь с книгой. А тонкие линии страниц, фактуру дерева и несколько цветных закладок можно было переосмыслить.
«Из книги мы взяли идею справочника. Из цвета — преемственность.»Задача редизайна
Один исходник. Четыре ответа
Четыре направления сравнивали в одном визуальном языке: крупные плоскости, мягкие складки и переход от светлого зелёного к глубокому изумрудному. Каждый вариант проверяет свой способ сохранить судебную тему — сравниваем не украшения, а то, какой образ остаётся в памяти.
Мы выбрали «Справочник». В нём нет буквального переплёта, но есть продолжение прежней идеи. Три других направления сохранили: они показывают, какие решения стояли рядом с финалом, — и их можно скачать в конце статьи.
Листы — для справочника. Портик — для суда
Финальный знак состоит из двух смысловых слоёв: стопка листов-разделов и плашка со знаком суда. Разведите их ползунком — это схема устройства знака, а не отдельная пространственная модель.
Сначала силуэт
Листы идут ступенями вверх и вправо. Верхушки видны, поэтому стопка читается как разделы одного каталога. Передний лист крупнее: он собирает композицию.
Затем разделение ролей
Маленькое здание суда не приходится искать среди зелёных плоскостей: у него своя тёмная плашка, которая отделяет белый символ от светлого листа.
И только потом — свет
Объём построен внутри цвета: широкая светлая складка переходит в средний зелёный и глубокий нижний слой. Форма остаётся простой, свет помогает увидеть её устройство.
В финальной версии мы слегка увеличили плашку и белый портик: с 360 × 352 до 384 × 366 единиц. Характер прежний, но смысловой акцент занимает больше места. Первый эскиз хранится отдельно, поэтому между этапами можно честно поставить знак сравнения.
Большой знак. Маленькая иконка
В шестнадцати пикселях нельзя сохранить все переливы большого рисунка. Зато можно сохранить характер. Для 16, 24 и 32 пикселей подготовлены отдельные оптические рисунки: плашка относительно крупнее, просветы явнее, тени и мелкие переходы ушли, в 16 px колонны выровнены по пиксельной сетке.
Подвигайте ползунок и смените фон: картинка показана в настоящих пикселях, размеры 16–32 — оптические версии, а не уменьшенный большой рисунок.
Заберите все четыре идеи
Финальная иконка — только часть истории. В архиве лежат все направления, включая те, которые мы не выбрали: можно сравнить аргументы самим или взять вариант за основу.
Полная коллекция
Четыре первоначальных варианта и доведённый «Справочник»: редактируемые SVG, прозрачные PNG 16–1024 px, Windows ICO, macOS ICNS и исходный векторный лист.
Только выбранная иконка
Основной SVG, оптические рисунки для малых размеров, PNG и наборы для Windows и macOS.
Скачать можно сразу — без регистрации. Первые концепты сохранены в исходном виде, финальная доводка лежит в отдельной папке.
Знак уже в работе
Иконки уже стоят в каталоге программ.
Новая иконка стоит у проектов AllCourts в нашем каталоге: базы судебных органов России — поиск суда, реквизиты, иерархия и подсудность — и парсинга дел с сайтов судов. Оба проекта описаны на allcourts.ru.
База судебных органов России
Справочник судебных органов России: поиск по критериям, иерархия инстанций и API для доступа из ваших сервисов.
Парсинг дел с сайтов судов
Наша разработка для получения данных со всех судов РФ. HTTP API, оплата по объёму. Используется в других продуктах LawMatic для работы с судебными делами. Подробнее на…
Иконка — для вас
Рисуем иконки и знаки для юридических продуктов: от метафоры до файлов для всех платформ и материалов к запуску.
Редизайн иконки
Сохраним то, за что продукт узнают, и уберём то, что не живёт в 16 пикселях: варианты, выбор, финал.
Оптические размеры
Отдельные рисунки для 16, 24 и 32 px, полный набор PNG, ICO для Windows и ICNS для macOS.
Иконки для семьи продуктов
Общий язык для нескольких приложений: цвет, свет и форма — и узнаваемый знак у каждого.
Кейс в цифрах
Старая иконка — из исходного файла проекта. Четыре варианта — настоящие эскизы первого круга без изменений, финал — их доводка. Этюды, сетка и схема палитры нарисованы для этой статьи.
Ещё по теме
Иконки CaseTracker и Табло суда
Ещё один кейс: пара иконок, родные братья, которые не путаются в Dock.
Знак «вх.»
Иконка Автономного офиса — канцелярский штамп входящих в 425 байтах.
История «ВЗЫСК.PRO»
Портал претензионно-исковой работы: набросок с четырьмя темами, задача от заказчика, модель долга, демо за выходные и бэкенд с настоящими справочниками.
История «Автономный офис»
Автоматическая юридическая фирма за четыре дня: от анкеты для граждан к офису, который сам разбирает почту юриста, считает сроки и работает в Legalic.
Дизайн изнутри
Все наши материалы о том, как придуманы иконки, знаки, шрифты и сайты.
Нужна иконка?
Расскажите о продукте — найдём метафору, нарисуем иконку, которая читается в 16 пикселях, и соберём файлы для всех платформ.