<?xml version="1.0" encoding="utf-8"?>
Open full project

To begin designing the Settings screen, I first drew inspiration from something familiar—my own mobile device. I explored the built-in settings menu to get a feel for how options are structured and prioritized in a real-world app. This helped me mentally sketch a rough wireframe and outline the basic layout of the screen.

Once I had the initial structure in mind, I turned to design platforms like Behance and Dribbble to refine my approach. Browsing through real examples from experienced designers gave me ideas on how to improve the visual hierarchy, spacing, and grouping of elements. I made a few adjustments to my layout based on what I found most effective in those references.

Finally, I moved into the actual design phase. One of the most challenging parts for me as a beginner was creating the toggle switch, especially making sure it looked intuitive and responsive. It took some trial and error, but I’m happy with how it turned out in the end. The process helped me better understand both the visual and functional expectations of interactive UI components.

Share your insights — leave a project review and help others grow their skills

Reviews

1 review


Nice work Shivani! Thank you for sharing your thought process and how you used your own mobile phone and then then some designs online to design the final project. I like how scannable the settings page is. The headings split the content into categories so I'm not overloaded with information. And I like that the "Tasks" and "Sound" settings have a little explanation below. I think "Language" and "Country" could also go under the account sections. Keep in mind when using the grey font on a white background that the contrast needs to meet accessibility standards. The greys are a bit too light and I cannot clearly see that there are arrows on the end of some of the settings. I like the use of icons and the clean minimal look of the whole page. Nice work! Keep at it!


3 Claps
Average 3.0 by 1 person
5 claps
4 claps
3 claps
2 claps
1 claps
<?xml version="1.0" encoding="utf-8"?>