An Exploration-Based Approach to Improving UI Skills

Dribbble Website

Ever feel like your designs are just meh? Or maybe you catch yourself comparing your work to others’ more polished, eye-catching designs?

It’s a feeling most designers experience at some point. But the question is, how can we elevate our design skills to the next level?

One simple yet effective method is design exploration using the OIM approach: Observe, Imitate, Modify


Here’s a step-by-step breakdown of how to use this method to level up your UI design skills.

1. Define Customizable Assets

Layout Moodboard

Start by gathering layout references from existing UI designs. These references can spark ideas and help you identify opportunities to improve on others’ work.
The first step is to define the layout, which will serve as the foundation for your exploration.

2. Determine the Theme

Theme Moodboard

Once you have a general idea of the layout, the next step is to decide on a theme or context for your design.

  • Look for references from similar apps or concepts (e.g., Home Visualizers) to analyze existing data and content.
  • Consider what can be improved upon or adapted for your design.

3. Create a Design Sketch

Low-Fidelity Design

Before jumping into digital tools, sketch your ideas on paper. This step helps you refine your final layout and decide on the information to include.

4. Wireframing

Wireframe

Convert your sketch into a digital wireframe.
At this stage:

  • Focus on layout and information hierarchy.
  • Avoid adding design assets like images or icons.

This ensures the structure is clean and functional before moving into visuals.

5. Explore Colors and Components

Color Exploration

With the wireframe ready, it’s time to explore color schemes and finalize your components.

  • Use references from other designs or tools like Coolors to generate color palettes.
  • Define the shape and style of your design components (e.g., buttons, cards, icons) to maintain consistency.

6. Add Design Assets

Final Design

Now it’s time to bring your design to life! Add:

  • Images that match your chosen color palette.
  • Icons or illustrations that enhance the visual harmony.

7. Create the Final Presentation

Design Presentation

Finally, prepare a presentation of your design.

  • Create multiple variations to compare and identify the strongest option.
  • Focus on clarity, storytelling, and how the design addresses the initial problem.

A Note on Improving UI Skills

Improving your design skills takes time, practice, and persistence. Don’t be discouraged if your early designs don’t meet your expectations—it’s all part of the learning process. 🎯


If you’re interested in learning more, check out this inspiring webinar by Mas Riko: How to Create Dribbble Preview While Ngabuburit. Watch it here:

Youtube Video about How to Create Dribbble Preview