Rudimentary Principles for a Good UI — Part 1
What exactly is UI design?
In simple terms, UI design refers to the process of constructing an application’s graphical layout or user interface (UI). It involves designing any visual component associated with the application such as Text, images to be displayed; Buttons, links that are clickable by the user; Interface animations for each interaction.
Regardless of the complex and technologically advanced underlying functionality of an application, the first thing that catches the user’s eye is the interface and its ease of use. It gives us a notion that the UI is one of the essential elements in ensuring an application’s success if not the most important. There are innumerable advantages of a good UI such as:
Users can navigate the application more easily
Good UI helps the user find the right content they are looking for without any hassle
Maximizes user retention as they have a pleasing experience using the application
Now that we have an idea of what UI design is, let’s dive a little deeper and look at some of the design facets when included in the application UI design process results in a premium UI.
Let’s start by taking a look at some concepts that aid in creating an ideal screen layout. Some questions to ask ourselves before beginning the layout implementation are
The location of the various elements on the screen
The arrangement of these elements on the screen
Alignment and Grid
Consistency is essential for a good design as it aids in the design’s coherency. It improves the usability of the application and also guarantees a positive overall experience to the user. By ensuring uniformity of elements throughout the design one can achieve consistency. It consists of actions such as:
Maintaining the same placement for repeating elements in a design (Buttons, Navbars)
Colors and fonts used for text
Alignment can make a design look aesthetically pleasing. Grid is a baseline component that ensures consistency in the structure of the design by aiding in easy identification of an element’s placement in comparison to that on a blank canvas.
The 12 equal-width columns grid systems is the one which is most widely used by frameworks as it enables splitting in a very efficient manner in comparison to other variations.
Visual Hierarchy
This principle focuses on the arrangement of elements in a design by establishing a logical hierarchy. The hierarchy must be designed in a way where the viewer doesn’t have to stop for a moment and think where to look first.
There exists a Focal Point (analogous to a spotlight on a stage) which is the first thing that catches the attention of the user and then there exists other elements with varying levels of visual importance. The level of importance can be indicated by various characteristics such as size, the weight of the element; the boldness of a font; the color and contrast of images.
Visual hierarchy defines a clear flow of navigation to the users. It prevents them from being overwhelmed by all the content present on the screen.
Now, pause for a second and take a look at the above image… What was the first thing that caught your eye? Was it the portrait present on the right half?
This right here is the Focal Point and also sneak a glance at the Navbar. The next thing that might have caught your attention is the name ‘Vincent Schwartz’ in the bold heavy font on the left half. Following this, you looked at a brief description of his profession and finally the button which provides you with an option to book an appointment.
This right here is a visual hierarchy in actuality. You never had to think for a second on which section of the page you would have to start and stop and ponder what to look at next after taking a look at something. There is a clear pre-established flow existing which enables easy navigation.
