UI Design Hygiene
We, as designers, create a lot of designs, artworks, digital designs, and many other design solutions to meet each client’s as well as in-house requirements. Therefore, we make a lot of basic mistakes due to lack of time, high iteration frequency or lots of creatives. Also, many designers make these basic mistakes in their early days. We can not change these habits in a single day. However, we can always do basic hygiene checks before sharing a design with clients. This method might save some time as well as repetitive iterations and can make your design more acceptable. There are a few quality checks which you need to do for the same. Also, “Before you experiment, you must learn & explore your limits by rule.” You must indeed experiment to maintain your creativity. if you are doing random things without having a basic understanding of it, it might end up resulting in nothing. You must learn how to play by rules before breaking it and experimenting. Before you start your UI Design 1. Have your UX part ready beforehand, Specially wireframes. You must know what you are designing. Understand your product-brief well before starting your design. You might get stuck in the middle or make something else, if UX flow/Wireframes are not clear to you. 2. Choose a theme or color palette to work with It is important to fix your color palettes for your project. It can be given brand colors, selected mood boards for that project or palette of your own choice. As long as your palette is decided, your design will be more consistent. 3. Work with Color-Hex as well as RGB colors It is easier for developers to understand Hex codes (ex: white: #FFFFFF, black: #000000). Also, understand the uses of RGB(0,0,0) and RGBA(0,0,0,0.1) formats of colors. RGBA stands for Red Green Blue Alpha and alpha controls the opacity of a color (a=0 means transparent and a=1 means opaque). 4. Choose the best-suited fonts for your project/product It is important to work with pre-selected fonts to save time and maintain consistency. It’s best if you have brand fonts given with brand guidelines. If not, you can always create your own set of fonts that are better for your project. Try not to use more than 2 font families. You get plenty of font-weight variations in a family. 5. Understand the devices and platforms you are designing for Nowadays, there are multiple device resolutions, screen sizes and platforms like android, ios, mac-ios, windows, Linux, web-browsers and many others. To make your product more device friendly, more important navigation friendly, you need to understand device sizes and responsiveness. 6. Use a layout grid system Famous and most commonly used grid system is the Bootstrap grid (12-column responsive grid system). Or you can create your own grid system. Be careful, you might increase the difficulty level and time of development for developers. There are few more such as Simple Grid (12 columns), Pure, Flexbox Grid, Foundation, etc. In bootstrap, You leave margins on both sides, no margin on top or bottom, Central part is divided into 12 columns with gutter width. Default gutter width is 30px. While Designing your screens/pages 7. Imagine, think about functionality and discuss its feasibility Whatever you create, new layout, new transition effect or any other new UI component. Think from a development perspective as well. » Read More
Like to keep reading?
This article first appeared on calypsu.com. If you'd like to keep reading, follow the white rabbit.