In this article I will explain 5 important tips in UI/UX designing using Material Designing. We are using Figma tool for designing a UI and we are using Google’s material designing research to create a beautiful UI for our future clients so that we get paid in handsome amount.
How to choose app theme
First you need to identify your app’s logic or the solution which your app is providing. Like if you are building a social media platform for fun then Green , Yellow and Blue colours are the best because Green means growth , blue means Connectivity | Cool and Yellow means Fun.
You can learn about colour psychology in my lecture below:
Material Design colour scheme
Material design says that you need to use at least one primary colour for all major UI components and second neutral colour for your surface and backgrounds. At minimum you need to use two colours at least. Less colours more clean and neat UI will be.
You can add secondary and accent colours as well, for that you have first option that is use same colour family with different variants or use those colours which are good in visual with respect to your primary colour.
5 Tips for Colour Schemes
Consider these tips for your UI designing it will save your time.
Use Material Color
What is a material colour? Material colour usually means a mid variant of the colour family with weight of 500. All colours has infinite variants but we usually count them as starting from 50 to 900 weight, 50 means light weighted or light variant of the colour and 900 means heavy weighted colour. So using 500 weighted colour is the material colour’s logic. Showing below
This is what a material colour means.
Neutral Colour
What is a neutral colour?
Basically it is your background and surface colour of your app it can be only white, white smoked , material black and grey. One of the neutral colour can be used at one time.
Secondary Color
Means mixing of two primary colours.
In material design, secondary colors are used to complement the primary color palette and provide contrast and visual interest. According to material design rules, secondary colors should be selected based on their contrast with the primary color, and they should be used sparingly to avoid overwhelming the design.
One guideline for selecting secondary colors is to choose hues that are adjacent to the primary color on the color wheel, as these colors are likely to harmonize well. Another approach is to use complementary colors, which are opposite the primary color on the color wheel, to create a more dramatic contrast.
In terms of usage, material design recommends using secondary colors for accent elements, such as buttons, icons, and highlights, rather than for large areas of the interface. This helps to create a clear visual hierarchy and avoid overwhelming the user.
Overall, secondary colours play an important role in material design by adding depth and contrast to the primary colour palette. By following the guidelines for selecting and using secondary colours, designers can create effective and visually appealing interfaces that are easy to use and understand.
DON’T Use Many Colours
Don’t use more than 3 colours in design, because a neutral colour is for backgrounds and for the surface , primary colour is for major components and secondary or an accent colour that is used to highlight or draw attention to specific elements of a design. Typically, accent colours are used sparingly and strategically to create visual interest and hierarchy in a design.
An effective accent colour should contrast well with the primary colour palette, while also harmonising with the overall aesthetic of the design. It can be used for various elements such as call-to-action buttons, headings, icons, and other important interface elements to make them stand out and catch the user’s attention.
When using an accent colour, it’s important to use it consistently throughout the design to maintain visual cohesion and avoid confusing the user. By using accent colours thoughtfully, designers can create designs that are both visually appealing and effective in guiding the user’s attention to key elements.
Dark Mode and Light Mode
Always design both colour families for the app because latest devices has builtin both dark and light modes and why you should use?
Firstly, they provide users with a choice in terms of how they want to interact with the app. Some users may prefer a darker theme, especially in low-light environments, as it can reduce eye strain and improve visibility. On the other hand, other users may prefer a lighter theme, as it can be more comfortable to use in bright environments and during the day.
Secondly, offering both dark and light mode themes can improve accessibility for users with different visual impairments or color sensitivities. For example, users with photophobia may find a darker theme more comfortable to use, while users with color blindness may find a lighter theme easier to distinguish between colors and elements.
Finally, offering both dark and light mode themes can also improve the overall user experience by enhancing the app’s aesthetics and creating visual contrast. This can make the app more visually appealing and help to draw the user’s attention to important elements.
Overall, providing both dark and light mode themes can improve the usability, accessibility, and aesthetics of an app, which can ultimately enhance the user experience and satisfaction.
You can improve your colouring scheme with the help of material designing. Checkout my full lecture video on YouTube below.
For more info and other freelancing tips checkout my latest blogs here.
