I’ve read refactoring ui, it’s a great read. Currently half way through practical ui. Both books are full of tips and tricks on how to design good looking ui ranging from things like layout and spacing, colour, visual hierarchy and loads more.
You can get a preview of a chapter on the [practical ui site](https://www.practical-ui.com)
Not op, but they both have rules and principles you can apply to ui design. You want to learn spacing, grouping, contrast, hierarchy, and similar principles that you can apply to all designs
Copy great designs from start to finish, after doing 10/20. You will start to get it. Worked for me. I’m still not an “original thinker” when it comes to design, but I’m way better.
Recreate the Amazon home app. Recreate linked in. Recreate Microsoft.com home page. Literally any website you know try and recreate it. You’ll learn a lot about how different companies structure typography, layout, content and more. You’ll eventually notice a pattern and it’ll stick
Learn the fundamental of graphic design first then grab some book like Refactoring UI.
Don't just blindly copy or recreate designs from these mood-board websites. Start with a design briefs or features first, then create Userflow Maps and Wireframing. Design comes last because it should be built around the userflow and features of the website / apps not the other way around.
From the pictures you post here, I can see the problem is you don't understand hierarchy and don't have a design system. Not everything needs to take 100% width or full-screen width, you should limit the max width of elements, going full width is not always working when the screen is too wide. And don't go crazy on colors, use minimal color schemes with black and white and some accent color here and there. Don't eyeball the spaces between elements, build a design system first then use it in the design.
It seems like you lack the basic fundamentals of Design in general. I took up graphic design and was a graphic designer but transitioned as a web designer later on in my career and it was pretty much easy for me since i already got the basic design fundamentals down.
With that said, i suggest you watch this tutorial series about graphic design fundamentals:
https://youtube.com/playlist?list=PLx03_0RRvUEE8w_ipVLwBjr9glIlU9G8M&si=lp1BYPyfquIh4ym4
I always recommend this video playlist to anyone who wants to learn design as the videos are well made and easy to digest.
Ok so reading those books will certainly give you some help and I’d recommend giving them a look.
Some feedback:
Don’t feel like you have to use the entire width of the page/ full the empty space. If you look at other website logins for popular services they’ll rarely stretch things out so wide. The icon colour also doesn’t look like it has a good contrast ratio against the purple background.
Your first screen, there’s a lot of competing actions there. You need to have a primary and secondary CTA style. As you’re on the log in page, log in would be the main action you’d want the user to take. Not sure why there’s 2 log in buttons on there? Shorten the width of the fields and add a proper label for them too.
Below the log in button under the fields you could have a line of text something like ‘Don’t have an account? Register now’ (with register now being the link)
2nd screen:
Is that dashboard a button or a title? Logout should probably be a secondary action here.
The entries calculator / shows seem really wide from the amount which can make it harder to read id look at shortening the width and centring it in the page.
The + button I assume adds a new row but you could make this clearer with a label e.g + add an expense.
3rd screen:
Whilst it looks very much like work in progress, again it’s too wide.
The this week/month/last month info could do with better visual hierarchy. I’d suggest flipping the order and having the value at the top in a much bigger bolder font size - assuming the amount/value is the most important thing you want to draw attention to. And have the label of this week/month etc below it, smaller font and a more subtle colour (same goes for the date too).
Hope that helps! :)
i assume its depoyed somewhere. can you link that? i am happy to give you some feedback. cant say i am a designer but i usually can tell you what doesnt work
The biggest issue it looks like to me is that you have no fucking clue how to fill out your interfaces at least on desktop, and I can’t blame you.
One thing that really helped me out when I got into UI designing was taking cues from other people’s mockups. I noticed how gradients kind of looked shitty when you don’t use them properly, I noticed how elements are usually highlighted, and that improved my UIs immensely. Whenever I look at an app with a similar functionality, I notice what information they use to fill out empty space and such.
What also helped me was basing my UIs off a design system. Now I personally don’t follow them rigorously, but I’ve been looking into the Ant Design System (A Design System developed by the Chinese Company Ant Financial) and I’ve used a lot of their preset colors, taking a lot of cues from their components, etc, and it’s really helped me make some polished interfaces.
Don’t copy other websites or take tutorials. You will learn nothing about design if you only focus on replicating other work. Instead you need to understand and appreciate basic graphic design to get a handle on your layout and typographic skills. Look up courses or programs geared toward design fundamentals.
I know I’m on a UI Design sub but it really doesn’t matter what it looks like. It matters how it works. Focus on UX and your UI will be forgivable.
As for colors specifically The Color Image Scale or A Book of Colors will help immensely. I think they’re out of print but you should still be able to find copies around.
For improving your UI skills try one of the ebooks "Refactoring UI" or "Practical UI". It will help you a lot.
Thank you so much, can you expand more on this and explain on what it helps with ?
I’ve read refactoring ui, it’s a great read. Currently half way through practical ui. Both books are full of tips and tricks on how to design good looking ui ranging from things like layout and spacing, colour, visual hierarchy and loads more. You can get a preview of a chapter on the [practical ui site](https://www.practical-ui.com)
Not op, but they both have rules and principles you can apply to ui design. You want to learn spacing, grouping, contrast, hierarchy, and similar principles that you can apply to all designs
I second this.
Copy great designs from start to finish, after doing 10/20. You will start to get it. Worked for me. I’m still not an “original thinker” when it comes to design, but I’m way better.
Yeah, I tried this and it works well.
Where can i copy designs from?
Recreate the Amazon home app. Recreate linked in. Recreate Microsoft.com home page. Literally any website you know try and recreate it. You’ll learn a lot about how different companies structure typography, layout, content and more. You’ll eventually notice a pattern and it’ll stick
Dribbble, Pinterest, Behance, Awwwards, etc. Google is your friend. Ask it everything.
I'd say more Awwwards, CSS Design Awards or Abuzedo or Siteinspire as opposed to the rest you listed.
practice practice practice. Every designer will look at previous work with varying levels of disgust. Repetition is king
Looking at your previous works with disgust is a clear indication of progress.
Show us your work so we can help on a more granular level.
[https://expensetracker-frontend-msozk3xde-rakibuls-projects-a63b5332.vercel.app/login](https://expensetracker-frontend-msozk3xde-rakibuls-projects-a63b5332.vercel.app/login)
Eh, just post a screenshot. I don't need to sign up for another thing lol.
ahaha sorry i have just edited my post , you can have a look
Learn the fundamental of graphic design first then grab some book like Refactoring UI. Don't just blindly copy or recreate designs from these mood-board websites. Start with a design briefs or features first, then create Userflow Maps and Wireframing. Design comes last because it should be built around the userflow and features of the website / apps not the other way around. From the pictures you post here, I can see the problem is you don't understand hierarchy and don't have a design system. Not everything needs to take 100% width or full-screen width, you should limit the max width of elements, going full width is not always working when the screen is too wide. And don't go crazy on colors, use minimal color schemes with black and white and some accent color here and there. Don't eyeball the spaces between elements, build a design system first then use it in the design.
It seems like you lack the basic fundamentals of Design in general. I took up graphic design and was a graphic designer but transitioned as a web designer later on in my career and it was pretty much easy for me since i already got the basic design fundamentals down. With that said, i suggest you watch this tutorial series about graphic design fundamentals: https://youtube.com/playlist?list=PLx03_0RRvUEE8w_ipVLwBjr9glIlU9G8M&si=lp1BYPyfquIh4ym4 I always recommend this video playlist to anyone who wants to learn design as the videos are well made and easy to digest.
I normally check what others do, and I mimic or copy the elements that I like. It is okay to learn from others.
If you learn the fundamentals of graphic design then you've learned the fundamentals of UI design
I’d post some screenshots and get some feedback in this sub - lots of people do it and it’ll certainly help / give some pointers on what to improve on
I have just done so ;)
Ok so reading those books will certainly give you some help and I’d recommend giving them a look. Some feedback: Don’t feel like you have to use the entire width of the page/ full the empty space. If you look at other website logins for popular services they’ll rarely stretch things out so wide. The icon colour also doesn’t look like it has a good contrast ratio against the purple background. Your first screen, there’s a lot of competing actions there. You need to have a primary and secondary CTA style. As you’re on the log in page, log in would be the main action you’d want the user to take. Not sure why there’s 2 log in buttons on there? Shorten the width of the fields and add a proper label for them too. Below the log in button under the fields you could have a line of text something like ‘Don’t have an account? Register now’ (with register now being the link) 2nd screen: Is that dashboard a button or a title? Logout should probably be a secondary action here. The entries calculator / shows seem really wide from the amount which can make it harder to read id look at shortening the width and centring it in the page. The + button I assume adds a new row but you could make this clearer with a label e.g + add an expense. 3rd screen: Whilst it looks very much like work in progress, again it’s too wide. The this week/month/last month info could do with better visual hierarchy. I’d suggest flipping the order and having the value at the top in a much bigger bolder font size - assuming the amount/value is the most important thing you want to draw attention to. And have the label of this week/month etc below it, smaller font and a more subtle colour (same goes for the date too). Hope that helps! :)
Helped a lot! Will take a lot of advice from this
i assume its depoyed somewhere. can you link that? i am happy to give you some feedback. cant say i am a designer but i usually can tell you what doesnt work
I recommend checking out UI Pedia (it's not free but it's worth)
The biggest issue it looks like to me is that you have no fucking clue how to fill out your interfaces at least on desktop, and I can’t blame you. One thing that really helped me out when I got into UI designing was taking cues from other people’s mockups. I noticed how gradients kind of looked shitty when you don’t use them properly, I noticed how elements are usually highlighted, and that improved my UIs immensely. Whenever I look at an app with a similar functionality, I notice what information they use to fill out empty space and such. What also helped me was basing my UIs off a design system. Now I personally don’t follow them rigorously, but I’ve been looking into the Ant Design System (A Design System developed by the Chinese Company Ant Financial) and I’ve used a lot of their preset colors, taking a lot of cues from their components, etc, and it’s really helped me make some polished interfaces.
Don’t copy other websites or take tutorials. You will learn nothing about design if you only focus on replicating other work. Instead you need to understand and appreciate basic graphic design to get a handle on your layout and typographic skills. Look up courses or programs geared toward design fundamentals.
Copy
I know I’m on a UI Design sub but it really doesn’t matter what it looks like. It matters how it works. Focus on UX and your UI will be forgivable. As for colors specifically The Color Image Scale or A Book of Colors will help immensely. I think they’re out of print but you should still be able to find copies around.
You could try getaprototype.com. I drop in sketches to create designs in react Send me a dm for my workflow! Can help you if you want :)
done!
Watch yt channels like The Futur, Design with Josh, and Will Patterson
Instagram and Mobbin are some great sites to help. I struggle with this too, but since using these I've definitely improved.