DESIGNS PROCESS
Understanding the Goal: Laying the Foundation
Before starting any project, I focus on understanding the goal and documenting everything I find relevant. This helps in making informed design decisions. Here’s how I do it:
- What’s the goal? → Defining the core purpose of the project.
- Are there any existing sites or apps? → Researching competitors or previous versions.
- What are the existing tools? → Listing software, frameworks, and technologies currently in use.
- What are the features? → Identifying both essential and optional features.
- Compare with existing features → Understanding what works, what doesn’t, and what needs improvement.
- Finding the gaps, advantages, and disadvantages → Evaluating the strengths and weaknesses of different platforms.
I document everything in Google Docs or MS Word, making sure I have a clear roadmap before diving into the design phase.
Ideation & Wireframing: Shaping the Vision
Once I understand the goal, I start shaping the structure and flow of the project.
- I brainstorm and list down all the key pages needed.
- I experiment with different layouts and structures using flowcharts or detailed documentation.
- I document what each page should contain, ensuring clarity before wireframing.
- I create low-fidelity wireframes, either on paper or directly in Figma, to get a rough visual idea.
This phase ensures that I don’t miss any critical UX elements before proceeding to the actual design.
One Trial Mockup: Testing the Visual Identity
Before designing all the pages, I create one sample page to test the design system. This Trial Mockup helps define the look and feel of the project.
Here’s what I focus on in this phase:
- Primary color selection and testing
- Table styles for structured data
- Icon styles to match the brand theme
- Button styles (size, shape, border radius, colors)
- Border colors and thickness
- Title font sizes and weights
- Body text sizes and readability
- Hover colors, active states, and dropdown styles
This helps me lock in the core visual elements before scaling the design to other pages.
Design System: Standardizing the UI
Once the Trial Mockup is finalized, I create a comprehensive design system in Figma to ensure consistency across the project.
🎨 Color System
- I generate Primary, Secondary, and Tertiary colors.
- Each color has 10 light shades (-X) and 10 dark shades (+X).
- Darker and lighter shades follow a structured system (e.g., Primary +1, Primary -1).
- A Neutral/Gray Scale is also created for backgrounds and text.
🔤 Typography System
- Define Title Hierarchy (Title 1 → Title 5) based on font size and weight.
- Body text styles are standardized for consistency.
- I save typography settings to ensure uniformity across headings, subheadings, and paragraphs.
🛠 Design Tokens
- Even though I’ve saved typography and colors, I create design tokens to make things more specific:
- Button colors (default, hover, active, disabled)
- Text colors (headings, body, links)
- Background colors (primary, secondary, neutral)
- Dropdown styles (hover effects, border thickness, spacing)
- Spacing & padding values for uniformity
This system makes it easy to scale and maintain the design efficiently.
Main Design: Bringing It All Together
Now, I start designing the actual UI based on the Design System, Wireframes, and Documentation.
- I ensure reusability by creating components for common elements.
- I use Auto Layout to make the design flexible and adaptable.
- I focus on making the design developer-friendly to simplify the handoff process.
By doing this, I make sure the design isn’t just visually appealing but also functional and scalable.
Prototyping: Bringing Designs to Life
A design is just a static image unless it is interactive. So, I prototype it in Figma to make sure it feels natural.
- Advanced prototyping features are used for interactive flows.
- Hover effects, transitions, and animations simulate real interactions.
- User journey testing is done before finalizing the design.
This helps clients and developers visualize the product in action before development begins.
Repeat to Perfection: Refining the Experience
Nobody gets it perfect in the first go. That’s why I:
- Take feedback from clients, friends, and colleagues.
- Refine and tweak the design system to improve usability.
- Repeat the process until the design is polished and seamless.
By following this step-by-step approach, I ensure that the final product is user-friendly, visually appealing, and scalable. 🚀