Simplicity is key to Designing

Some Basic Design Principles we overlook

A lot of my juniors, as well as my peers, have come up to me asking how they can improve their design while developing an app or a website since they are on their own and can't hire a designer for everything. Mostly I realized that I am giving out the same advice to all of them of course with some exceptions to the usage of my words, but the crux remains the same every time. Some of the Design Principles that I follow are pretty basic and can be applied by anyone be it a newbie or a professional person.

Design principles are just fundamental pieces of advice to make easy-to-use, effective interfaces. You apply them when you select, create, and organize elements and features in your work. Design standards speak to the aggregated astuteness of specialists and experts in structure and related fields. At the point when you apply them, you can foresee how clients will probably respond to your plan. “KISS” (“Keep It Simple Stupid”) is a pretty basic principle where you design for non-experts and therefore minimize any confusion your users may experience.

Always begin with User Research

But one of the most difficult tasks, when you look at design principles, is figuring out just how many design principles there are(3,6,10 the list goes on). But when you start designing and get into the practice of making them, you start learning that there are a few important things that you follow each time which helps a lot while making the designs. User experience design and User Interface Design are two yet not completely discovered fields in the industry. User experience deals with maximizing user satisfaction with any product, it includes Research, Building Wireframes, connecting dots, coming up with possible solutions. Whereas User interface deals with Making Prototypes, Building mockups, graphics, Placement of buttons, choosing right Colours, etc. To apply design principles effectively, you need to have a hold on users’ problems and a good eye for a possible solution.

The first and foremost thing that you should do even before designing anything is to Research. Research is the key to an optimum user experience design. Research is what makes us understand the user, make a designer connected to the thoughts of the user. This step is all about knowing our system domain and brainstorming. Research is what, that’ll make the designer understand better, the problems, loopholes, flaws, etc. It also deals with studying the existing procedures or competitors and questioning them. One of the things I follow is to make user personas before I start working on the design, you judge how to guide the user’s eye using symmetry or asymmetry. In this way, I get to know a lot about the demands of the user which would help me follow a basic theme and build a solid UX.

Design Principles

This list of basic principles can help anyone out there who is looking to build something out on their own or doesn’t want to hire a designer and wants to try designing out on their own.

1. A bit of Contrast goes a long way

When dealing with clients I have heard them complaining so many times that the design needs to “pop” more. In designer terms, this is a very vague statement. But what the client wants is to have more contrast in the UI. This means that they want a distinctive distinction between the elements. For instance, they might want to have the text to display in an away that attracts the focus of the eye of the user. This can help improve the readability of texts as well. Emphasis on important texts attracts the attention of our brain automatically. Color contrast is a must while designing the UI as it gives us knowledge on how colors interact with each other. Insufficient contrast can make text content in particular very difficult to read, especially for people with visual impairments.

2. More the whitespace, cleaner the UI

This one I hold dear to myself and I like to follow in every design of mine. I read it in a book called “Whitespace is not your Enemy”. This really helped to improve my design a lot. The thing which attracts clients more is when the UI is clean, but at the same time, the client wants us to incorporate a ton of information on a single page. So what do you do then? Check this dashboard I designed and you’ll be able to make out a clean distribution of information. The bulk text will be placed in the challenges section as read more, this improves the look of the design.

One thing that you can do is to distribute your text sizes and placement in such a way that even a hundred lines text doesn’t look messy. One way of doing this is to open a pop-up for such large quantitative information. In this way, the information is on the same page, which satisfies the client and the UI is cleaner as well. When you have more whitespace the UI automatically looks neat and clean. White space does not literally mean an empty space with a white background. It can be text color, texture, shape, or even an image. Whitespace helps in improving the comprehension, it helps in making items stand out in the UI and bring attention to specific objects and much more.

3. Gestalt’s law of Visual perception

This law seems fancy at first, but when you read into it, it’s basically just a law for things you know in the back of your mind but we sometimes overlook them in our designs. This law is related to how we as humans perceive things around us. It describes how humans typically see objects by grouping similar elements, recognizing patterns, and simplifying complex images. Designers use these to engage users via powerful -yet natural- “tricks” of perspective and best practice design standards.

There are a bunch of laws under this principle, I would be elaborating on a few of them which I follow in almost every design of mine. I’ll leave a link for you to know more about them.
a) Law of proximity —This law basically states that elements that are grouped together are perceived to be related while those elements which are placed far apart are perceived as unrelated.

Proximity is so powerful that it overrides similarity of color, shape, and other factors that might differentiate a group of objects. Notice the three groups of black and red dots above? The relative nearness of the objects has an even stronger influence on grouping than color does.

b) Law of Similarity — This law states that when elements that are similar in shape, color, or size they are perceived to be together. This is a very important law since it helps us in deriving relationships between groups of elements. We seek differences and similarities in an image and link similar elements.

If someone looks at the image above, they will be able to see a square made up of shapes other than squares, also they would be able to see a diamond in between made up of circles even though it's not boundary marked. This is how our brain plays tricks on us and take the ambiguous visual information and organize it into something that makes sense to us — something familiar, orderly, symmetrical, and that we understand.

c) law of closure — This law can be demonstrated almost everywhere around us. It states that our mind fills in blanks for objects that appear incomplete. It is visible in almost every interface that we see. If you notice the profile shape, it’s just two shapes placed together at close proximity but unconnected, but even then our mind automatically knows that its a shape of a person.

4. Proportionate Your Design

This principle is one of the easier to understand. It is the Relative Sizing and Positioning of elements around the screen. Simply put, it’s the size of elements in relation to one another. It helps in bringing out what’s important and what’s not. Larger elements are more important, smaller elements less. This even helps the user understand the hierarchy of the elements. The relative positioning helps in bringing out relationships between the elements which helps in improving the UX to a great extent. It necessarily means that the user is able to understand the UI on his own. and is able to make out the different elements and their importance easily.

5. Always follow Basic Instincts

This just means that while designing it’s not necessary to follow a certain set of guidelines every time you are making something. The main reason being that every idea, every design is different in its own way, therefore, the same set of rules cant be followed every time. For instance, you don’t automatically use a 3:1 header-to-text weight ratio to abide by the principle of good hierarchy. That ratio is a standard rule. Instead, a guideline you might use to implement good hierarchy is “text should be easy to read”. You should use discretion whenever you apply design principles, e.g., you judge how to guide the user’s eye using symmetry or asymmetry. Consequently, you adapt the principles to each case and build solid experience as you address users’ needs over time.

Continue Reading