Ink
Design System
2023 | Ink Entrepreneurs
About the project
After crafting a series of screens for the ‘Ink’ app and securing approval for the design language, I embarked on building a design system tailored to seamlessly manage and enhance the design elements and improve the work process with the developers.
Main goals
The decision to establish this system was driven by several key factors:
- Streamlined and efficient workflow, allowing swift updates across all instances of a component.
- Clear and convenient transfer of components and states to developers, fostering smart and time-saving collaboration.
- Providing designers and developers with a user-friendly means to add settings and new variants effortlessly to existing components.
- A flexible framework for easy integration of additional designers in the future, ensuring consistent design alignment.
- Empowering developers to manage components more intelligently, saving valuable work hours.
Guiding principles
Derived from previous experience and research, the development of the design system adhered to the following key principles:
Consistent & clear structure – Each component page has a consistent structure, providing clarity for both designers and developers:
- A short component explanation.
- Manageable settings with detailed explanations.
- Comprehensive display of all component variants and colors.
- A table summarizing component properties, available options, and defaults (primarily for developers).
- An example of the default state (primarily for developers).
- The Figma component (primarily for designers).
These guiding principles ensure a coherent and efficient design process, fostering collaboration and adaptability in response to evolving design requirements.
Workflow process
1. Components Analysis
I collected all existing components from the designed screens, deciding which ones should be part of the design system based on their potential for reusability.
2. Categorization by Type
I organized the components into pages based on their types.
3. Component Guidelines Structure
I established an initial basic structure for each component, incorporating all essential settings.
4. Reference and Improvement
Drawing insights from other design systems and utilizing Chat GPT, I refined the design system, adding any overlooked settings crucial for developers or beneficial for future use.
5. Components Testing
I scrutinized the components and their states within the application screens, using my mobile device for a practical examination. Adjustments to the design were made as needed.
6. Easy-to-use components
Ensured that each Figma component is designer-friendly, simple to use, and configured with clear settings and variants for ease of use by designers.
This comprehensive workflow process guarantees that the design system is well-structured, user-friendly, and adaptable for future design needs.
Additions for developers
It was important for me to add a table at the bottom of each component that maps all the settings of the component, the existing options, and the default values. This makes it clearer and more organized for developers.
In addition, I made sure to add an example of the component default and list all the states and variants of the component, providing a comprehensive overview for developers.
Design Decisions
Color palette
Existing colors analyze (previous design)
Establishing a harmonious color palette took precedence in my design journey. Reviewing the existing colors from a previous designer, I identified the drawbacks of using pure black and white, which could be harsh on the eyes, particularly on mobile devices. The visual language lacked consistency, with variations in the color of the bottom menu and buttons. Some buttons featured a saturated pink-purple gradient, adding to the inconsistency. Working with designs that fell between wireframes and final designs, I undertook a comprehensive task to refine the visual language and define a cohesive color palette.
The original materials from the client
New design: Dark theme
I chose a dark theme for the application, driven by practical considerations:
- The app’s primary use for exploring tattoos and piercings aligns with users’ leisure time, often in low-light conditions like mornings and evenings.
- Tattoo artist studios generally have low lighting, making a dark interface more comfortable for them.
- The black color symbolizes ink, tying in with the app’s name and conveying a sense of luxury.
- The dark theme sets the app apart, offering a unique look among Israeli apps.
New primary color & Improved gradient
I softened the gradient for primary actions to better suit the dark palette. The original vibrant shade clashed on smartphone screens, requiring subtler tones. The refined gradient blends blue and purple intentionally, with blue symbolizing trust and reliability, and purple expressing creativity and uniqueness—qualities aligned with our target audience. The primary color follows the same strategy, leaning towards a purple shade with a touch of blue.
The new design with the updated color palette
Extended color palette
I organized colors into shades, offering flexibility for various needs. Avoiding pure black and white, I aimed for comfort and visual appeal. Palettes with low saturation and darker tones blend seamlessly with the dark theme, all tested for quality on smartphone screens.
Buttons
I chose to categorize buttons into three types. All buttons are intelligently constructed to allow adaptation for design needs. Additional colors, design options, icon replacements, etc., can be easily added to suit various design requirements.
Regular Button
It includes primary and secondary buttons, one larger with a gradient and another smaller in a solid color.
Business Plan Button
This button is designed for business plans and includes two rows – a title and a subtitle. It also has two style options – filled and outlined.
Link Button
This button can have an underline and may include icons. I believe that in the future, I will also add an icon button, although I haven’t felt the need for it so far.
More components
Next steps
- Transfer the design and design system to developers, including a kickoff meeting and adapting assets as needed.
- Expand the icon library and illustrations as required.
- Refine the iconography.
- Add additional components as needed for new screen designs.
- Adjust, edit, and add settings based on developer feedback.
Thank you!
Want to see more?
ScholarPro
