Color assistant for illustrators

Background

This project started during my second semester at school of visual arts crafting interaction class as an in-depth exploration of skills. I was tasked with selecting a creative tool to focus on, and my choice was 'Color’. I was drawn to it because it’s a ubiquitous element across various creative endeavors while it’s application varies greatly across professions.

Tools

Figma
Figjam
Protopie
Illustrator

Team

3 Product designers

Timeline

8 Weeks

Contribution

Refined project scope through research and user feedback.
Led co-creation sessions and ideation to inform design decisions.
Ensured user-centric designs through prototypes testing and iterative feedback.

Full case study is in presentation format, please reach out to f@fangfan.me

Colorpal helps illustrators create visual impact based on their creative vision

Colorpal is

ColorPal is an tablet app. It helps in generating color palettes based on the artist’s creative vision and makes color blocking more efficient.

Target Audience

I found a distinct need among illustrators: they often start with a more explicit brief. ColorPal excels in taking these specific inputs and seamlessly merging them with an illustrator's vision, making previously challenging visualizations attainable.

Methodology

Co-creation and user testing is key for Colorpal

Co-creation with illustrators

Conduct usability tests on prototypes of different fidelities

ColorPal is tailored for professionals, making co-creation crucial in developing a tool that integrates into their daily workflow. After formulating the initial concept, I facilitated a co-creation workshop, collaborating with three designers who engage with color daily to learn about how they want to use the tool. Subsequently, my team and I created interactive prototypes, ranging from low to high fidelity, testing and iterating to improve ColorPal.

Through research, we found these

Challenges illustrators face

Drawing, Inspiration & Brief

Brief: children’s book, warm, cute, cheerful

Create Palette & Color Blocking

Experiment and explore Tools: Photoshop, Adobe Color

Begin Color Process

Color details Tools: Photoshop

Color blocking is time consuming, requires a clear vision when start and often demand careful boundaries between colors and organized layer management in digital tools. In addition, Making changes after starting and staying true to the initial concept can be challenging.

Multimedia reference is hard to visualize. While multimedia references provide a rich source of inspiration and direction, translating them into a unified and coherent color palette demands a blend of technical skill, aesthetic judgment, and keen attention to detail

Tweaking and reapplying the palette is a laborious task and hard to keep track of. Illustrator often save multiple copies and make the process harder to manage.

User flow

A closer look at how Colorpal works:

Create Color Palette & Color Blocking

Upload artwork

Shape Detection

Upload inspiration

Shape Detection

Refer & edit mood board

Auto organize layers and export

Features showcase

Features that makes Colopal unique:

FEATURE 01

Color Blocking

Color blocking and defining shapes can be tedious and time consuming. We integrate this step and auto-detect shapes from the imported artwork.

Define shape: Auto-detection can be inaccurate, depending on the style of the imported artwork but we account for that by helping locate loose ends that can be manually closed.

FEATURE 02

Mood Board

Users are prompted to upload visual references, keywords, and any primary colors they might already have. That makes it possible to formulate colors and generate palettes that matches their vision for the mood and tone of the artwork.

All in one place: Collect all the inspirations in the one place and rearrange/add weight to different inspirations

Quick view: Refer to the mood board and make changes at any time; the changes reflect in palette suggestions

FEATURE 03

Tweaking, Reapplying

Colors are generated by combining all the images while also considering the mood and tone that the artist is trying to achieve

Switch palette: Switch palette and view the nuanced changes it imparts to the artwork's mood in just one click. With thoughtfully curated palettes grounded in color theory, artists never feel overwhelmed. Gradually, they develop a deeper understanding and choose colors confidently.

History: Colorpal is designed to automatically save palette selections. Additionally, it allows for the manual save of favorite palettes, which can be conveniently accessed and retrieved from the gallery at any time.

Lastly,

Learning from this project:

Tool design. User testing is vital for any design process. However, when designing tools, it's especially crucial to use interactive prototypes, allowing users to test and reveal areas of friction, enabling me to fine-tune micro-interactions.

Designing for Skilled user. When designing for skilled users, it's important to offer efficiency, advanced features, and the ability to customize. The design should be straightforward, yet capable. Co creating with users and testing the design helps make sure we're meeting their needs effectively.

Inspired by technology, grounded by the user need. As AI continues to advance rapidly, throughout the project we were constantly enlightened by its capabilities. However, relentlessly pursuing technology can be a never-ending race. Truly understanding user needs is what should drive our design decisions.