UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Кейс: оптимизация Sketch файлов или чему мы научились во время создания Reduce App
Редакція
Редакція

Опубліковано • Оновлено

Кейс: оптимизация Sketch файлов или чему мы научились во время создания Reduce App

Sketch принес совершенно новые стандарты в размерах файлов с дизайном. Теперь вы очень редко можете увидеть 10 гигабайтные файлы Photoshop-а. Тем не менее большие Sketch файлы существуют и когда вы с ними работаете, они влияют на производительность самого Sketch-а. В результате, замедляется ваша производительность, как дизайнеров. Вот давайте будем откровенны сейчас: это не файлы Sketch-а становятся большими по магии. Это дизайнеры, которые заполняют свои файлы неиспользуемыми, не оптимизированными и скрытыми элементами, которые занимают так неприлично много места. Мы в Flawless App лично столкнулись с проблемой чрезмерно больших Sketch файлов. Как правило, мы используем отдельный Sketch файл на каждый “продукт”. Под “продуктом” я подразумеваю: наше основное menu bar приложение для macOS, сайт/лендинг, промо материалы для соц. сетей, пресс кит для медиа, иллюстрации статей на нашем medium блоге и т.д. Со временем эти файлы начали расти из-за быстрого ритма работы и постоянных итераций/улучшений. Вследствие чего нам стало всё сложнее и сложнее работать с такими Sketch файлами. А это в свою очередь замедляло наш ритм работы. Как любой другой инженер поступил бы в этой ситуации – мы написали скрипт, который автоматически чистил Sketch файл, чтобы уменьшить его размер. Reduce App - Оптимизация Sketch файлов. Terminal Скрипт – прекрасное решение, но только если ты на одной волне с Терминалом. В конечном итоге мы решили, что нам необходимо что-то более человечное. Это позволило бы всей команде использовать этот инструмент, без лишнего дискомфорта как в случае с локальным скриптом. Мы также решили, что сделаем приложение публичным и бесплатным.

Первый прототип

У меня уже были некоторые абстрактные идея, прежде чем приступить непосредственно к UI. Основная цель была создать что-то что будет постоянно под рукой. Что-то что позволит оптимизировать и сжимать Sketch файлы настолько быстро насколько это возможно не отвлекаясь от рабочего процесса. macOS приложение для menu bar-а было очевидным выбором для нас:

  1. У нас уже был внутренний фреймворк для macOS menu bar приложений, с множеством возможностей, которых нет в стандартной библиотеке. Мы построили этот фреймворк для нашего основного продукта. Flawless App – это macOS menu bar приложение для iOS разработчиков, которое сравнивает насколько реализация разработчика соответствует первоначальному дизайну в реальном времени.
  2. Приложение в menu bar-е можно использовать даже если Sketch-а нет на компьютере или он закрыт.
  3. Писать приложение для macOS было для нас банально быстрее, чем разрабатывать с нуля плагин для Sketch-а (поскольку у нас уже были некоторые компоненты готовы)

Для нас также было важно дать пользователю возможность выбирать какие оптимизации будут применяться к выбранному файлу. Ниже первый wireframe нарисованный карандашом на старой доброй бумаге, пока без никаких модных инструментов прототипирования. Reduce App - Оптимизация Sketch файлов. Первый прототип

Вывод 1:

Прежде чем приступать к рисованию интерфейса, созданию прототипов в бесконечном количестве доступных инструментов, даже к рисованию wireframe-ов на бумажке. Стоит подумать сначала какие цели вы хотите достичь вашим дизайном. Кто будет использовать ваш дизайн и как эти люди будут взаимодействовать с приложением.

Цветовая палитра и шрифты

Во время дискуссий с командой мы не нашли критичных UX проколов в первоначальных wireframe-ах. Поэтому я начал с создания подходящей цветовой палитры и выбора шрифтов для будущего приложения. Я хотел чтобы приложение было светлым и визуально дифференцировалось от нашего основного продукта. Поэтому я подобрал следующие палитры цветов: Reduce App - Оптимизация Sketch файлов. Цветовая палитра и шрифты Структура следующая: первая строка предназначена для разных уровней текста, вторая строка – акцент цвета. Все второстепенные цвета были выведены из первоначального базового цвета применяя простые правила трансформации в системе HSB (Hue Saturation Brightness) К примеру, давайте возьмем #4A90E2 (синий), что в системе HSB будет выглядеть как (212, 67, 89) в качестве первоначального базового цвета. Чтобы получить более темную вариацию этого цвета нам необходимо уменьшить Brightness, увеличить Saturation и совсем немного подвинуть Hue. Таким образом у нас получится #2477C9, что в HSB выглядит как (210, 82, 79). Я использовал это правило для получения всех вариации на картинке выше. В конечном итоге я остановился на первой цветовой палитре (оранжевая). Sketch файлы и логотип Sketch выполнены в похожей палитре, поэтому наше приложение будет более гармонично смотреться.

Вывод 2:

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

  • Adobe Kuler поможет найти комплементарный цвет для любого выбранного цвета
  • Khroma использует машинное обучение, чтобы генерировать палитры цветов на основе ваших предпочтений
  • Статья Erik Kennedy Color in UI Design: A (Practical) Framework просто небывалой полезности материал. Я прочел его около 8 месяцев назад и с тех пор использую систему HSB гораздо чаще, чем стандартную RGB в Sketch-е

Если вы не планируете делать что-то совсем нестандартное, стоит использовать “родные” системные шрифты (в нашем случае шрифты предоставляемые macOS). Родные шрифты рендерятся быстрее и разработчику будет проще их интегрировать в приложение. Однако глубоко в душе я хотел попробовать Montserrat в macOS приложении, поэтому я просто не смог устоят :)

Вывод 3:

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

Первая итерация дизайна

Я начал преображать wireframe-ы в какой-то более менее понятный интерфейс. Основная структура использования приложения задумывалась так:

  1. Пользователь перетаскивает Sketch файл в окно приложения
  2. Далее пользователь выбирает, какие оптимизации необходимо применить к файлу
  3. Собственно происходит процесс оптимизации
  4. Пользователь сохраняет файл

Reduce App - Оптимизация Sketch файлов. первая итерация Весь дизайн я делал в Sketch-е и на данной стадии я был полностью удовлетворен результатом. Поскольку у меня уже был опыт проектирования macOS menu bar приложений, размер шрифта и отступы были мне понятны и являлись стандартными. Несмотря на это, с первой итерацией было достаточно много мелких проблем, которые я опишу ниже более подробно.

Вывод 4:

Если вы никогда не проектировали интерфейс для macOS – я рекомендую сперва изучить стандартные UI элементы в Facebook Desktop Design Kit. Прежде всего вы поймете “визуальный язык” системы, какие отступы и размеры для элементов являются приемлемы. Для macOS приложения 12 pt или 14 pt для шрифта – это вполне нормально.

Ошибка 1: Пропущенное состояние

С дизайном выше всё было хорошо, всё не считая того, что я напрочь забыл добавить состояние приложения во время оптимизации Sketch файла. Как мне известно из опыта, количество пропущенных состояний на стадии дизайна прямо пропорционально равняется степени головной боли инженеров на стадии разработки. Как часто разработчики жалуются, что дизайнеры “творят” в вакууме? Обсуждая такие проблемы как: пропущенные состояния, использование идеальных данных, отсутсвие empty state-ов и т.д. Reduce App - Оптимизация Sketch файлов. Пропущенное состояние

Вывод 5:

Прежде чем высылать дизайн разработчику, стоит убедиться, что не пропущены важные шаги в пользовательском flow. Гораздо лучше убедиться что все состояния специфицированы, чтобы избежать вопросов от разработчика наподобии: “Как это должно выглядеть [в таких-то условиях]?”. Хорошая техника поиска таких пропущенных состояний – использовать инструменты для прототипирования. На данный момент я не знаю способа быстрее чем использовать Craft Prototype (от InVision) прямо в Sketch.

Ошибка 2: Слишком много нестандартных элементов

Вы практически всегда будете проектировать интерфейс для какой-то определенной платформы. В нашем случае это macOS. И macOS как платформа имеет определенные стандартные элементы. Поэтому если только ваш продукт не будет работать без нестандартных компонентов – это хорошая мысль применить стандартные компоненты где это уместно. В этом случае разработчики также будет вам благодарны. Руководствуясь этими мыслями я полностью убрал первый вариант checkbox-ов и заменил их стандартными. Я также существенно упростил экран с процессом оптимизации файла. Reduce App - Оптимизация Sketch файлов. Нестандартные элементы Reduce App - Оптимизация Sketch файлов. Прелоадеры

Вывод 6:

Чтобы понять какие стандартные элементы есть в определенной платформе я бы порекомендовал изучить следующие материалы:

UPD: для iOS есть еще один крайне полезный UIKit от Meng To. На момент написания статьи этого UIKit-а еще не было, но я считаю его стоит сюда добавить поскольку он качественно выполнен и может пригодиться, как дополнение к оригинальному UIKit-у от Apple.

Ошибка 3: Недостаточно фокуса после оптимизации

Несколько командных фидбек сессий спустя стало ясно, что финальный экран с результатами оптимизации чрезмерно перегружен. Также на этом экране отсутствовал результат сравнения (как размер файлы был до оптимизации и какой стал после). Поэтому я сделал отдельный экран с небольшой иллюстрацией, где указало размер файла до и после сжатия и возможность сохранить новый файл. Reduce App - Оптимизация Sketch файлов. Недостаточно фокуса

Вывод 7:

В качестве основного места коммуникаций команды мы используем Slack. Send to Slack это небольшой плагин, который отправляет artboard из Sketch-а в определенный канал в Slack-е. Возможно быстро поделиться дизайнами существенно сэкономили время на командных фидбек сессиях.

Ошибка 4: Маленькие, но важные детали

Ошибки, которые я опишу ниже были найдены уже на стадии разработки. Однако я опишу их в этой секции, чтобы не нарушать целостность повествования. Я приступил к реализации дизайна. Сразу после первого запуска, я осознал, что у пользователя нет совершенно никакого способа полностью закрыть приложение. Мы также хотели распространять приложение нашими собственными каналами, вне Mac App Store (на то есть множество причин, но это скорее тема для отдельной статьи). Поэтому для нас было важно добавить систему автообновления в приложение. В этом случае у пользователя должна быть возможность проверить нет ли новых доступных обновлений и какая текущая версия приложения. Я остановился на небольшой меню, которое бы выполняло все эти функции и отображало необходимую информацию. Последней упущенной деталью была возможность “закрыть” оптимизированный файл и вернуться на главный экран. Таким образом была добавлена иконка закрытия (точно такую же как и на экране со “списком оптимизаций”) в правом верхнем углу. Reduce App - Оптимизация Sketch файлов. Выпадающий список Reduce App - Оптимизация Sketch файлов. Сохранить файл

Вывод 8:

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

Подготовка дизайна к разработке

В конечном итоге итерации были окончены. Хотя технически итерации дизайна никогда не окончены. Поэтому давайте согласимся, что мы пришли к “приемлемуму” результату и можем приступать к полноценной разработке. Прежде чем начинать реализацию я привел в порядок отступы и layout в целом, чтобы все соответствовало 4-пиксельной сетке. Такой подход однозначно окупится на этапе разработки. Reduce App - Оптимизация Sketch файлов. Подготовка дизайна

Вывод 9:

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

Логотип и название приложения

Последнее, но не в последнюю очередь. Название приложения пришло к нам достаточно быстро. Это было просто очевидно, приложение может называться либо “Reduce”, либо “Shrink”. Я проверил Product Hunt, продукт с названием “Shrink” уже существовал, поэтому мы остановились на “Reduce”. Вот логотип был настоящим испытанием для меня. Поскольку это menu bar приложение, мне необходимо было выбрать также и иконку для menu bar-а. Reduce App - Оптимизация Sketch файлов. Первая итерация логотипа Поскольку menu bar иконка приложения должна быть 16х16 пикселей, не желательно использовать какие-либо маленькие элементы. Иконка должна быть отличительной и хорошо сочетаться с остальными иконками в menu bar-е. Reduce App - Оптимизация Sketch файлов. Вторая итерация логотипа После нескольких дней борьбы с простыми формами, я сдался и открыл секцию “Featured” в Google Fonts. Я искал там особенный курсивный шрифт, который мог бы подходить для логотипа и для иконки в menu bar-е. В конечном итоге, был обнаружен Pacifico и я остановился на нем. Reduce App - Оптимизация Sketch файлов. Принятый лого

Вывод 10:

Важно помнить, что существует две версии macOS menu bar-а: темный и светлый. Необходимо готовить иконку для обоих вариантов. Стоит также тестировать, как ваша иконка будет выглядеть при стандартном цвете выделения. По-умолчанию, когда пользователь нажимает на иконку в menu bar-е macOS подсветит эту иконку стандартным цветом, который пользователь выбрал в настройках. (у Apple есть отличное руководство по цветам в macOS). Для тестирования я создал символ для каждого стандартного цвета в macOS. Таким образом я могу быстро переключиться между цветами и проверить хорошо ли выглядит моя иконка на их фоне.

Используя базовый цвет из первоначальной палитры, я поставил “R” в самый центр круга и добавил небольшую рамку сбоку. На этой стадии логотип был более чем “приемлемый” для меня. Reduce App - Оптимизация Sketch файлов. Логотип и иконки

Заключение

Все еще есть места, которые нуждаются в улучшениях. Как я уже упоминал в статье, итерации дизайна никогда не завершены. Но если вы продолжите итерировать бесконечно, ваш дизайн так и останется в Sketch-е навечно. Гораздо лучше запустить “приемлемую” версию быстрее и так же быстрее получить отзывы от пользователей. Короткие итерации способствуют быстрому получению фидбека. Reduce был создал за полторы недели, потому что нашей основной целью было сделать продукт быстро и сделать его максимально полезным. Мы получили множество позитивного фидбека от команды. Как мы и предполагали, использовать macOS menu bar приложение оказалось в разы проще, чем скрипт в терминале. Также во время публичного запуска наши пользователи подкинули нам множество отличных идей как мы можем улучшить приложение и какие новые функции реализовать. Коротко о выводах из статьи, чему мы научились во время создания Reduce:

  1. Подумайте о целях и use case-ах продукта, прежде чем делать wireframe-ы или прототипы
  2. Используйте такие инструменты как Adobe Color и Khroma чтобы ускорить процесс поиска подходящей цветовой палитры. Также базовые знания HSB системы будут не лишними.
  3. Не бойтесь экспериментировать с нестандартными шрифтами.
  4. Каждая платформа обладает своими стандартами. Изучили эти стандарты прежде чем проектировать интерфейс.
  5. Используйте инструменты для прототипирования, чтобы понять flow пользователя.
  6. Не перегружайте ваш дизайн нестандартными элементами, иногда лучше использовать “родные” компоненты платформы.
  7. Стремитесь получить конструктивный фидбек по вашему дизайну как можно раньше.
  8. Вовлекайте разработчика в процесс дизайна как можно раньше. Это существенно сэкономит время и избавит вас от желания сделать “кнопку с сферическим градиентов в вакууме” на реализацию которой уйдет больше месяца.
  9. Используйте стандартную для платформы сетку, чтобы расположить элементы.
  10. Тестируйте ваш дизайн в разных сценариях (как в примере с темным и светлым menu bar-ом) прежде чем финализировать интерфейс.

Если вы считаете, что Reduce мог бы упростить и вам работу с большими Sketch файлами, приложение можно скачать бесплатно тут. Буду крайне признателен за любой фидбек. Я убежден, это самое ценное что можно получить от пользователей.

Найстарші коментарі (0)