DEV Community

Satwik Gawand 🦄
Satwik Gawand 🦄

Posted on • Updated on

ReDesign UI 001-005

View the design files on Figma Community


001 - Monitoring Dashboard by SunnyUIbegin

Original Tweet by SunnyUIbegin

Feedback

Congratulations on starting out your design journey. I like the idea behind the design as well as the colours you’ve selected. I have a few suggestions that can help you improve this design. The first, and in my opinion, the biggest issue is with the spacing between all the elements. Having consistent spacing in your design can make it look much better instantly. Also, since the purple colour is your primary colour, you should use it to highlight the most important elements on that screen. You should also consider the contrast between the foreground and background colours. You can use some icon libraries to have consistency amongst your icons. You can also use outlined icons for your inactive menu items and use a filled icon for the active item, but I’d suggest using a different background colour to highlight the active page.

The ReDesigned concept for Monitoring Dashboard

Changes

So, I decided to make an expanding sidebar over a slide-out one. The spacing is consistent now with 20px across the design. I changed the background colour for the containers to be neutral except for the sidebar which is still the primary colour. I changed the primary colour a bit as well to suit well with the background. There’s also a new highlighter that changes the background and foreground colour for the active page. The idea behind this design was to dynamically change the container sizes to accommodate the expanding sidebar. All the icons are from Remix Icons and the icons are separated into two sections, the top one has all the functionality whereas the settings and logout options are separated down below.


002 - To-Do List App by HatokUr0

Original Tweet by HatokUr0

Feedback

I really like how clean the design looks. However, the main issue I believe is that there are no different sections throughout the design, it’s all in one container. The header section only has the “Today” along with the day and the date, but ideally, you can add a menu to change some other settings. All the content seems to have a lot of left margin. The tasks seem too cramped together as well. Feel free to space them out a bit. the button to add a new task looks more like a display item rather than a button, and I believe you don’t have to add labels for completed and incomplete tasks. I’m not sure if they’re display items or buttons to filter out tasks.

The ReDesigned concept for To-Do List App

Changes

The app is now divided into 3 prominent sections, the header, the tasks and the button to add new tasks. The margin is now reduced to 20px on both the left and the right sides. The header now has a menu icon along with the page title as well as the day and date. The font size is reduced for a cleaner look along with the colour for that text. The tasks are more spaced out with a light divider line separating them. The “Add New Task” button is now big and uses the primary colour to make it pop up and get some attention.


Customize Product Page by Radianceinspir1

Original Tweet by Radianceinspir1

Feedback

Nice design. I really like the logo you’ve included in the design. I’d recommend not using dark backgrounds, especially for delicate and elegant objects like gold watches. Although the text looks readable in this screenshot, it might be too big when used in an actual design. I’d recommend you stick to a definitive font size rather than adjusting the size visually. There are guides on font sizes you can use for different screen sizes. You can arrange the colours section differently and make the colour selection circles bigger as well as highlight the currently selected colour. The same goes for the price and the “Add to Cart” button. You can arrange them in a different layout and make the button bigger.

The ReDesgined concept for Customize Product Page

Changes

The background is changed to pure white since many elegant products have it as the background. Changed the typefaces and colours to depict more elegance. The elements are spaced out and divided into 2 sections, the top section contains all the display elements where the users can read about the product and the bottom section where they can take actions like customizing and buying the product. The primary colour used on the page is somewhat of a golden yellow since the product or series of products is about golden watches. The selected colour is highlighted with a small stroke and the price as well as the button colour are changed to the primary colour.


004 - Signup Page by sayesystem

Original Tweet by sayesystem

Feedback

I really liked the design, especially the background. It challenged me to design such a background from scratch and it was fun and something new for me. the only issues for me were the font colour and the buttons. The text could’ve been arranged better and the buttons made bigger and more prominent.

The ReDesigned concept for Signup Page

Changes

I tried to recreate the background and it was something new for me, but a fun challenge. I’m kinda happy with the results. I couldn't find the typeface you used but used a different one I believed to fit perfectly for the use case. I also brought the tagline closer to the name and changed the colour for visual hierarchy. The buttons are bigger now and more prominent. The signup buttons are solid since that’s the primary CTA, but there’s also a secondary option to Login.


005 - Food Menu by Maaasry98

Original Tweet by Maaasry98

Feedback

A very nice design. I like the colours. The spacing and layout of the product list seem perfect. There are only two major issues, one is the search bar and the other is the horizontal categories list. Be mindful of the top margin in your designs, you don’t want that overlapping anything. Be mindful of the notches and the punch holes that bring the content further down on the screen. The search bar doesn't follow the same layout and spacing as the rest of the design and seems too small. The horizontal categories list has the same issue where it doesn't follow the same arrangement as the rest of the design. What you can do for those is keep them left-aligned and allow horizontal scroll.

The ReDesigned concept for Food Menu

Changes

Although there were only 3 things I wanted to change in the design, I had to recreate the rest of the design as well. It was fun. So, here are the changes I’ve made. The header has been brought down to adjust for the notch. The search bar is now bigger with 20px margins on the left and right sides and the height increased to 50px. The options in the categories sections are now aligned to the left to follow the same margins as the other elements. The divider below the categories section is increased to span the entire width of the screen to separate everything above and below the divider.


My Thoughts

It was fun to start redesigning spree again. It's as much fun as it is a challenge and difficult. This article had some designs that needed minimal changes and some that needed a bit more. There are two new things I did, which are the expanding sidebar and the multi-colour background. It was something I never tried before, but it was fun for sure.

If you'd like to get feedback on your designs, feel free to tag satwikgawand on any of your designs in your tweets. See you next week!

Top comments (0)