Hi Chinmay, thank you a lot for your arcticle! I’m a musician turned developer with no particular gift for visual things, but I’ve been trying for some years now, and besides having made solid improvements I’m still unable to make a UI I can seriously consider deploying.
I’ve read your tips and they’re going to be very helpful, but if you don’t mind, I’m going to ask you, what about images, both fore and background? Or shapes? Is there some guideline to using them, for those ungifted such as myself?
What usually happens is that my designs tend to be safe and boring, without much clutter but really visually unappealing.
I’m going to try this 60 - 30 - 10 rule, it should help using these sites for picking up colors. Any special guidance on where should these three layers be? Such as 60 for the main content, 30 for headers and such, 10 for content which needs to stand out.
Last but not least, I tend to use a single sans-serif font through the design, with some different sizes, is there some safe rule to use a little more than that?
Sorry for asking so many questions, and thanks a lot for your arcticle, going to read it some more times with the app I’m making in front of me. It caught me in a very proper time as I’m about to design the landing page for the app and am approaching alpha deployment stage. Before probably hiring a pro designer, eventually, of course, rs, but I’d really like to keep costs to a minimum in the MVP fase and have an acceptable design for the first users to try on.
Hello Tomaz! Thanks a lot for reading out my blog. And wow, musician plus a developer. That's the rare combination of talent.
I have not emphasized images and backgrounds much, but here are some things I would like to suggest you.
Try to avoid grainy and low-quality images. Validate color combination of your Images and the application. They should match or completely contradict the overall color pattern. They should go with the flow unless you want them to stand out of the design. You might want to use images with dull background and bright text, for your landing page. Or add a hue-effect on the image to make it look rich.
Keeping color patterns in the ratio of 60-30-10% helps a lot. That gives your page a uniformity. Check out this blog, color patterns are well explained here.
In your application, you can divide color combinations into three layers, such as your App menu (30%), primary content (60%), and the information which should stand out (10%). According to your needs and the design, you can generate color themes online using different tools. The best way to learn to create stunning color schemes is to practice and play with colors.
There are no defined rules for using fonts on your page. You can use multiple fonts in combination or a particular font throughout the page.
For example, your brand title and brand-related information might have cursive fonts, and the other page content might be in a regular font. Check out genius.com. They have used different fonts for their brand icon and the page content. Personally, I use Google fonts. Check them out here.
If you want to learn more about design patterns and libraries, then I would recommend you to have a look at this blog post. This might help you design your application and a perfect landing page.
People like you and me, have to play with the design until the end-user feels satisfied. Once we know how to tweak the design patterns, then nothing like it.
These are really great suggestions Chinmay, thank you very much! I really lung for the day I’ll be able to find real pleasure designing things, knowing I might be happy with the result. But I care for it enough to keep pushing till I get there.
I think initiatives like your post are really important because the more developers are design-aware, the better... Design is intrinsically related to user experience and usability, and I’ve already seen my share of developers who are frustrated by the fact that users can’t use properly the features they’ve so carefully coded due to really bad developer-made design decisions.
That’s not to mention that code design itself is a important thing as well, and the importance to write code that looks good and is easy to understand visually.
I’ll thank you once again and when I finally get to finish this first phase of my app (it’s my first app actually!) I’ll come back here to share this part of the experience.
Designing a good UI/UX is an iterative process. It'll mature after every UAT phase.
I know you will develop a kickass application and amazing UX. I will be glad to hear your development experience. Happy coding!
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Hi Chinmay, thank you a lot for your arcticle! I’m a musician turned developer with no particular gift for visual things, but I’ve been trying for some years now, and besides having made solid improvements I’m still unable to make a UI I can seriously consider deploying.
I’ve read your tips and they’re going to be very helpful, but if you don’t mind, I’m going to ask you, what about images, both fore and background? Or shapes? Is there some guideline to using them, for those ungifted such as myself?
What usually happens is that my designs tend to be safe and boring, without much clutter but really visually unappealing.
I’m going to try this 60 - 30 - 10 rule, it should help using these sites for picking up colors. Any special guidance on where should these three layers be? Such as 60 for the main content, 30 for headers and such, 10 for content which needs to stand out.
Last but not least, I tend to use a single sans-serif font through the design, with some different sizes, is there some safe rule to use a little more than that?
Sorry for asking so many questions, and thanks a lot for your arcticle, going to read it some more times with the app I’m making in front of me. It caught me in a very proper time as I’m about to design the landing page for the app and am approaching alpha deployment stage. Before probably hiring a pro designer, eventually, of course, rs, but I’d really like to keep costs to a minimum in the MVP fase and have an acceptable design for the first users to try on.
Hello Tomaz! Thanks a lot for reading out my blog. And wow, musician plus a developer. That's the rare combination of talent.
I have not emphasized images and backgrounds much, but here are some things I would like to suggest you.
Try to avoid grainy and low-quality images. Validate color combination of your Images and the application. They should match or completely contradict the overall color pattern. They should go with the flow unless you want them to stand out of the design. You might want to use images with dull background and bright text, for your landing page. Or add a hue-effect on the image to make it look rich.
Keeping color patterns in the ratio of 60-30-10% helps a lot. That gives your page a uniformity. Check out this blog, color patterns are well explained here.
In your application, you can divide color combinations into three layers, such as your App menu (30%), primary content (60%), and the information which should stand out (10%). According to your needs and the design, you can generate color themes online using different tools. The best way to learn to create stunning color schemes is to practice and play with colors.
There are no defined rules for using fonts on your page. You can use multiple fonts in combination or a particular font throughout the page.
For example, your brand title and brand-related information might have cursive fonts, and the other page content might be in a regular font. Check out genius.com. They have used different fonts for their brand icon and the page content. Personally, I use Google fonts. Check them out here.
If you want to learn more about design patterns and libraries, then I would recommend you to have a look at this blog post. This might help you design your application and a perfect landing page.
People like you and me, have to play with the design until the end-user feels satisfied. Once we know how to tweak the design patterns, then nothing like it.
These are really great suggestions Chinmay, thank you very much! I really lung for the day I’ll be able to find real pleasure designing things, knowing I might be happy with the result. But I care for it enough to keep pushing till I get there.
I think initiatives like your post are really important because the more developers are design-aware, the better... Design is intrinsically related to user experience and usability, and I’ve already seen my share of developers who are frustrated by the fact that users can’t use properly the features they’ve so carefully coded due to really bad developer-made design decisions.
That’s not to mention that code design itself is a important thing as well, and the importance to write code that looks good and is easy to understand visually.
I’ll thank you once again and when I finally get to finish this first phase of my app (it’s my first app actually!) I’ll come back here to share this part of the experience.
Designing a good UI/UX is an iterative process. It'll mature after every UAT phase.
I know you will develop a kickass application and amazing UX. I will be glad to hear your development experience. Happy coding!