Як і чому я розробив варіант кольорів та інструмент доступності

Як розробник, вибір кольорів для мого дизайну завжди був одним із найскладніших завдань. Для допомоги я схильний використовувати такі інструменти, як Coolors, SASS Color Generator та цю перевірку кольорового контрасту.

Мій процес раніше виглядав приблизно так:

  1. Створіть палітру за допомогою Coolors
  2. Підберіть варіанти для кожного кольору за допомогою генератора кольорів SASS
  3. Об’єднайте варіанти у поєднання тла / переднього плану.
  4. Переконайтеся, що пари доступні за допомогою засобу перевірки кольорового контрасту.
  5. Додайте обрані кольори до обраного вами інструменту для дизайну (Figma).
  6. Налаштуйте кольори та повторіть крок 2.

Отже, в чому була проблема?

Мій старий процес зайняв багато вперед і назад між різними програмами. Я не зміг налаштувати свої кольори і в реальному часі побачити вплив на доступність. Натомість мені довелося копіювати / вставляти шістнадцяткові коди з одного додатка в інший. Потім, коли я був готовий розпочати розробку, мені довелося вручну створювати змінні в SASS / CSS і копіювати значення заново.

А рішення?

Створіть інструмент, де я міг би робити (майже) все в одному місці. Моєю метою було рухатися до такого процесу:

  1. Створіть палітру за допомогою Coolors
  2. Підбирайте варіанти, поєднуйте кольори та виконуйте налаштування за допомогою одного додатка.
  3. Додайте отримані кольори до мого обраного інструменту дизайну.

Я також хотів, щоб програма могла експортувати свої кольори в код, щоб у мене була гарна відправна точка для розробки.

Початковий доказ концепції

Я хотів якомога швидше щось запустити і запустити, щоб я міг почати тестування. З цією метою я взявся за створення прототипу.

Використовуйте кейси

Першим кроком у створенні прототипу було визначити випадки використання, які сприятимуть цьому.

  1. Як користувач, я хочу створити варіанти для моїх базових кольорів.

Я хотів мати можливість відкрити програму, додати свої основні кольори, вибрати варіанти, а потім знову експортувати їх назад у мій інструмент проектування. Просто?

2. Як користувач я хочу перевірити, чи доступна пара кольорів тла / переднього плану.

Зі введених базових кольорів або їх варіантів я хотів мати можливість перевірити, чи доступні два кольори в парі.

3. Як користувач, я мав би бачити вплив зміни доступності основного кольору на доступність.

Я хотів мати можливість отримувати в реальному часі зворотний зв’язок щодо кольорових пар, які я вибирав кожного разу, коли робив налаштування основних кольорів.

(Дуже груба) робоча версія

Після визначення випадків використання я тоді взявся за розробку прототипу. Я придумав кольорову палітру, розробив обмежений набір компонентів і врешті-решт прийшов до рішення, яке мало три «режими» або сторінки, і користувачеві доводилося переключатися між ними для виконання своїх завдань.

Замість того, щоб описувати це далі, давайте подивимось.

Як видно з малюнка вище, прототип досяг всього, що я хотів, виходячи з початкових випадків використання ... Начебто.

Клацніть тут, якщо ви хочете спробувати прототип на собі, завдяки магії попереднього перегляду розгортання Netlify.

Хороше і погане в оригінальному дизайні

Я ніколи не передбачав, щоб перший прототип був чимось іншим, ніж сходинкою, і ви самі переконуєтесь, що він був досить грубим та дефектним.

Що стосується наступної версії, я розпочав з розгляду того, що мені сподобалось у прототипі.

Варіантний режим

Я був дуже задоволений тим, як вийшов варіант, що генерує частину прототипу. Вибрати колір і отримати список варіантів було досить просто. Крім того, підхід з вкладками досить добре працював для додавання декількох базових кольорів.

Можливість бачити зміни в доступності після зміни кольору

Як ви можете бачити у короткій демонстрації вище, не потрібно було копіювати / вставляти шістнадцяткові коди між програмами. Тепер я міг змінити один зі своїх кольорів і побачити, як це дуже швидко впливає на доступність кольорів.

Потім я почав вибирати речі, які мені не сподобались і які потрібно вдосконалити .

Взаємодія не була очевидною

Виходячи з домашньої сторінки, було не відразу очевидно, як ви обираєте варіанти та перевіряєте доступність. Ви, мабуть, могли зрозуміти, що з часом вам довелося клацати плитками, але це було дійсно незграбно.

Режими заплутали

У початкових проектах ви могли додавати пари лише з подання палітри, а також могли додавати / видаляти варіанти з подання варіантів. Все це передбачало багато перемикань між екранами, і я відчув розчарування від того, скільки роботи змушував мене робити додаток. Це підводить мене до наступного моменту.

Потрібно було занадто багато клацань

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

На екрані одразу було видно недостатньо інформації

Чим більше я ним користувався, тим більше я починав не любити створену концепцію «режимів». Я думаю, що на мене вплинув оригінальний процес, який надихнув додаток, і я розробляв екрани в елеваторах, а не розробляв єдиний досвід. Після використання прототипу я вирішив, що мені потрібно перейти від концепції «режимів» до чогось, що в ідеалі можна було б зробити на одній сторінці.

Друга спроба

Я взяв уроки, які вивчив із прототипу, і взявся за створення кращої версії програми.

Щоб зменшити кількість необхідних взаємодій , зменшити неоднозначність взаємодій та збільшити обсяг інформації, доступної користувачеві відразу, я вирішив перейти до інтерфейсу на основі перетягування та падіння, де користувач міг би перетягувати плитки навколо, щоб додати їх до своєї палітри або створити перевірку доступності.

Завдання перетягування завжди відображатиметься, і це уникне необхідності перемикання між екранами.

Давайте подивимось, що я придумав.

Ви можете отримати доступ до поточної версії програми тут.

Наступні кроки

Додаток все ще перебуває в початковій стадії, і хоча друга версія набагато ближча до ідеї, яку я мав на увазі, все ще можна зробити вдосконалення.

Імпорт з коду

Окрім експорту палітри, я планую додати можливість читати початкові основні кольори з коду, що містить змінні (для початку починаються змінні SASS та CSS)

Експортувати в інші формати

Наразі ви можете експортувати лише SASS. У майбутньому я планую додати підтримку змінних CSS та інших форматів.

Інтегруйте з інструментами проектування

Експорт у код - це чудово, але було б ще краще, якби я міг експортувати палітру, а потім імпортувати її як шар або спільний стиль в інструменті дизайну, такому як Figma або Sketch.

Уточніть інтерфейс користувача

Погодьмось, це не найкраще виглядає додаток у світі. Я планую налаштувати компоненти інтерфейсу для візуального вдосконалення програми.

Відгуки та повідомлення про помилки

Цей говорить сам за себе. Я можу вдосконалити додаток лише за введенням даних тих, хто ним користується. Для цього я планую додати форму зворотного зв'язку в майбутньому.

Зворотній зв'язок

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

Друга причина полягає в тому, що я хотів продемонструвати інструмент спільноті розробників та дизайнерів, оскільки я вважаю, що він може бути корисним для багатьох людей, а також зібрати відгуки про нього в його поточному стані.

Отже, якщо у вас є якісь думки щодо дизайну, функціональності, процесу, який я пройшов, щоб створити інструмент, чи чогось іншого, я б дуже хотів це почути!

Посилання

Прототип

Поточна версія

Бібліотека компонентів