An Exploration-Based Approach to Improving UI Skills

Have you ever felt that your designs are just so-so? Or sometimes you think it inferior to look at other people's more saucy designs?

Everyone must have experienced that period, but how can we upgrade our designs to another level?

The easy way is to do design exploration using the OIM (Observe, Imitate, Modify) method.

Here are the steps I usually take when doing design exploration

1. Determine the layout

When we see some layout references from UI Design that are out there, it will inspire us to pour ideas and what we can improve on other people's designs. So, determining the layout becomes an integral part at the beginning when we want to start exploring design.

2. Determine the theme

After we have an overview of the layout we want to create, the next step is to determine what theme or content is suitable for the form that has been selected. For example, we can look for references to similar applications or designs of Home Visualizer to analyze what data and content already exist and what we can improve.

We can look for references from the website chamjo.design for live apps or dribbble for visual references.

3. Create a design sketch

The next step is to sketch on paper to determine the final layout and what information we will include.

4. Wireframing

The next step from the sketches we have made before is to convert the drawings into digital form (wireframe). At this stage, we have not yet entered design assets (images, icons, etc.) to ensure that the layout and information are neat.

5. Color and component exploration

From the wireframe we created, the next step is to determine and explore the right and suitable colors for the design. For the color itself, we can reference other people's designs or generate colors from the coolors.co website.

And we also need to determine the shape of the final component of the design we create so that it is easier when inserting design assets (images, icons, illustrations, etc.).

6. Add design assets

After determining the color, look for images that match the color of the design, and add icons or illustrations based on the color that has been selected. This is one of the tricks to make our design look harmonious.

7. Create the final presentation

The last step is to make a presentation of the design that has been made. The best practice is to create several alternatives to be able to compare which is the best presentation.

In improving a UI skill, it cannot change instantly. It needs practice and time sacrificed. So there is no need to worry if the design is not good because it is part of the process.🎯

The steps above were inspired by a webinar presented by Mas Riko on 'How to Create Dribbble Preview While Ngabuburit,' if you are interested in learning it, you can play the video below👋