8 Rules Of A Good Design Every Website or Mobile Application Design Should Follow

Functionality is fine, but it is the design that attracts the customers to your business in the first place. Today, the website is considered as your online visiting card. Especially after the Coronavirus pandemic when every business you can think of is going online, websites have become the most important thing you should have if you want to get successful online. And when it comes to the website or any mobile application as well, their design should be clear and attractive at the same time so that your prospect automatically gets attracted towards knowing more about you.

So, I am listing down these 8 rules of a good design that no matter what industry you belong to, your website and mobile application should follow.

1. Typography

I keep typography at first because there are a lot of designers who are excellent in creating designs, deciding color combinations, designing elements and everything else but struggle in deciding fonts for their designs, and trust I was one of them during my early days. Keeping a clearly readable font is very important. If the user is not able to read the font then there’s no sense of having a world class design.?

For example, if the end users of your website are old age people, then keeping thin and small fonts won’t work because they will face a lot of issues reading those texts. So, understand your user and decide the fonts.

Now when you have decided your fonts, you need to maintain a proper hierarchy. By hierarchy I mean the level of sizes of the font you are using for headings and paragraphs. For instance, title texts need to show emphasis on need to be big and bold whereas the texts for running paragraphs need to be small but readable. Next there should be a clear difference in the font size of h1 & h2 and so on.

So, having a clear knowledge of typography is a must.

2. Color combinations

Design means good colors. But design for website & mobile applications means color combinations that suit the user's eye, combinations where texts are easily readable, and combinations where not every color from this world is used. In the above example you can clearly see that the text on left is not readable but the text on right is clearly readable. So, use the combinations which allows you to see each element of the design clearly. Also, while designing for a particular brand make sure that you are using the colors that they are using consistently everywhere. That’s what branding is.

For example, Air Asia uses red and white color as it’s main color, but imagine what if it changes the color on its facebook cover Image to green. That won’t make sense right? It won’t give their customers the feeling of Air Asia at first glance.

So, using the same brand color is also important.

3. Lots of text vs graphics

See the difference? Wherever you can convert texts into graphics. Graphics are much more appealing and easy to understand. It also takes less time to communicate the message to the user.

I personally like to use graphics more than text. All my designs are a combination of icons, vectors, illustrations and anything else I can use to communicate my message easily to the user.

So, between lots of text and graphics, graphics always wins.

4. Consistency

I would like to make a confession here. My first design had elements that you see on the left side. Like seriously? I still wonder what the hell I did there. Ha Ha. But anyways, new designers don’t make this mistake. Stay consistent across your project. Same set of buttons, form element, headings, and everything else should be used. Don’t use 20 different types of design for? buttons placed in 20 different places. Even when you are using icons, if you are using line icons then use only line icons in your complete project, if you are using colored vector icons then that should be the case in your complete project.

Maintaining consistency of design for each and every element is always the best practice to create wonderful and attractive designs.

5. Clear (UX)

In the left demonstration, just greying out the login button doesn’t give the user any information about why he is not able to login to his account. But in the right demonstration, he is clearly able to understand that he has entered the wrong username. This means that the right one is communicating the message to the user very clearly. But in the left one, the user will just wander here and there by entering his information again and again and he will never know why he is not able to login. And at the end he will be irritated and just quit the application.?

So, everything in the UI should be very very clear. The user should not be confused while using your website and application, what is the next step, or what is the issue or what should I do now. Everything should be clear and precise so that each and every user landing on your website and application understands very very easily what he has to do.

6. Keep it simple

Which form is easy to fill? Obviously the right one. When the user sees the left form he is most likely to quit the application and leave. Because no one wants to fill such chaotic and large forms. Yes, yes I know many government forms are like this. But we are talking about websites right? So, everything in a website and mobile applications should be simple. There is no need to complicate the UI.

Another great example I can give you of is this: I have seen many contact forms with labels such as “My Email Address” or “Your Email Address”. Do you think words like my or your are required in the label? Just Email Address will do. Even only Email works fine.

Always try to simplify the UI as much as you can. It is the best practice.

7. Know your users

Before starting to build the actual product, always do the UX part first. Even in today’s digital world, there are lots and lots of designers who are not performing UX before going to UI. But realise that a designer should design for the users and not according to what he likes. So, before starting the UI design of a website or a mobile application, first research about the users of that application. Research about their requirements, research about what they will be expecting from the app and understand them. Then design to fulfill their needs.

For example, in the above picture, consider it is a blog home page. The left side arrangement that you see is not for the users because when someone lands on the blog he wants to see all the topics available but the left arrangement shows the entire blog on the homepage itself. But in the right picture, you can see the topics are aligned in list form.

Therefore, study the users and proceed with creating awesome designs.

8. Give feedback—fast

In the left side of the above picture, when the user sends the request there is no feedback for him that his information has been sent but in the right design there is a message to communicate to him that his information has been sent and moreover the button has been disabled.

So, the UI should immediately communicate the feedback and the message to the user with any delay. To send feedback, you can show alert messages, change designs on hover and focus states, use popovers and tooltips and more as per your design. But communicating the message to him is very important.

The Bottom Line

Whenever you design any kind of application always remember you need to design it for its end users and not what you like to design. Even a single small mistake can sometimes be a turn off and a bad experience for the users that can motivate him to quit using the app and he can immediately switch to the competitors app. So, focus on the user’s needs and requirements and then build an awesome design.