An Exploration-Based Approach to Improving UI Skills

An Exploration-Based Approach to Improving UI Skills

May 13th, 2023
May 13th, 2023
Dribbble Website
Dribbble Website
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?
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.

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
Here are the steps I usually take when doing design exploration

1. Defining Customizable Assets

1. Defining Customizable Assets

Layout Moodboard
Layout Moodboard
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.
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

2. Determine the theme

Theme Moodboard
Theme Moodboard
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.
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

3. Create a design sketch

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

4. Wireframing

4. Wireframing

Wireframe
Wireframe
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.
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

5. Color and component exploration

Color 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.).
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

6. Add design assets

Final Design
Final Design
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.
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.
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.
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

7. Create the final presentation

Design Presentation
Design 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.
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.🎯

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👋
The steps above were inspired by a webinar presented by Riko Sapto Dimo on 'Belajar Bikin Preview Dribbble Sambil Ngabuburit,' if you are interested in learning it, you can play the video below👋
Youtube Video about How to Create Dribbble Preview
Youtube Video about How to Create Dribbble Preview
Muchtarruddin © 2024
Muchtarruddin © 2024
Muchtarruddin © 2024