Design Principles & Elements to Enhance UI Design
At its core, UI design makes use of many aspects of design principles to enhance user experience. Today, I will be talking about some of these principles that can be adopted to enhance the overall user experience and user design of an interface.
On a side note, as I’ve mentioned in my profile description, I started learning Adobe Illustrator just a few months back. So the images in orange are some illustrations I did as a form of practice for me. Hope they’re okay! :-P
On an ever side-r note: I took a screenshot of the illustrations directly from the AI application, so the pictures may appear grainy or soft, especially if viewed from a PDF :-( Web is still fine though….
- Dots, Lines and Shapes
Many UI components make use of the basic elements of design — that is, dots, lines and shapes
Dots: A dot can be referred to a round mark, also known as a point. A dot is considered as the building block for every other elements including lines, shapes, patterns and textures.
Lines: A line is defined as a continuous movement of a point (dot) along a surface. Basically, when two points are connected with each other, they form a line. Lines can come in a variety of types, and can convey different type of emotions and messages, depending on how they are structured and are being used. These include:
- Thick (Strength/Emphasis) or Thin lines (Weakness/Delicacy)
- Straight (Rigidity)/Curved(Fluidity)/Diagonal(Energetic) lines
Shapes: A space confined by an actual or implied line. As such, it can be said lines form the basis of shapes.
As mentioned earlier, many UI components are actually made up of simple shapes, which are in turn, formed from the basis of lines and shapes.
A simple example to illustrate is the volume slider, where the volume level is usually seen as a line, while a circle is usually used as the level adjuster. Other examples are windows, search bars and image carousels.
2. Alignment
Alignment is one of the core fundamentals of UI design as it provides a sense of orderliness in any interface. Elements such as text and buttons that are properly aligned with each other as a whole tend to give off a sense of professionalism, while randomly placing UI elements or text that is misaligned, is generally dismissed as being sloppy, due to the lack of structure.
For example, imagine a website where text is arranged randomly everywhere. It simply makes finding information difficult for the user, due to the lack of structure for the user to scan the information using his/her eyes.
3. Hierarchy
When there are different elements within a design, you are more likely to have an element or message that you want to convey to your audience, over the other visual elements. As such, more weight would be needed in order to provide emphasis towards the element or message.
This can be achieved by different methods, such as bold or enlarging text, or simply putting it at a higher location than other information.
Logically speaking, users tend to read information that is displayed in the main or first page, and might not read information that is placed at the bottom of long, vertical scrolling pages, or, information that is deeply buried within several pages of the website.
As seen in the example above, the weight of the message in the bad example is lower compared to the weight of the text of the author. Besides that, the size of the text of the author is larger compared to the message. This shifts the focal point of the page to the author, rather than the message, which was the main element to be conveyed.
4. Contrast
Similarly to hierarchy, contrast provides emphasis towards certain elements of a an interface. This is achieved by having two elements having differing characteristics with each other (for example light vs dark, thin vs thick), guiding the user to the most important aspect of the page — increasing the overall organization of the information within an interface.
Contrast is especially useful when displaying text, as text that has good contrast with the background increases the overall readability of the interface, as seen in the example above. Increased readability would then enhance the overall ability for a user to understand the information being displayed in an interface.
5. Proximity/Space
Proximity refers to how related elements within a page are being grouped together,
whether with regards to position, or simply in terms of characteristics, such as colour, size, type, etc. Ideally, information should not look too cluttered together as this would result in too much information being displayed at once, which in turn, would force the user to digest too much information at one instance (or the inability to digest that volume of information).
As seen in the example above, the text are more evenly arranged in the good example, while text are in too close proximity with each other in the bad example, decreasing the overall readability of the text. As the text is also more spaced out with each other in each line, there is more ‘breathing space’ for the user’s eye to scan through text quickly.
6. Colour
Using different colours within an interface would allow the creator to convey different messages. Different colours bring about different emotions and messages. For example, red is often characterized with the anger of emotion and rage, due to it’s high intensity in the colour spectrum, while blue tends to bring about more calm and passive feelings. Green on the other hand, is associated with the environment while yellow is related to energy and optimism.
Generally, bright colours such as red tends to be avoided as the background, due to it’s high intensity, which strains the user’s eyes under bright light.
As such, many applications now adopt a dark background (also known as ‘Night theme’ feature), which switches the application to that of a dark blue or black background. Such colours are less strenuous to the eyes when a user uses the application at night (bright light in a dim environment), which increases the overall usability of the application.
Besides that, most interfaces may also make use of colours that are next to each other within the colour scale/wheel (analogous), or opposite of each other (complimentary colours).
All in all, these principles can be taken into consideration not only when designing interfaces, but also in any form of design we do.
