Vital Design tips for Mobile Application

Design is one aspect that is often overlooked.

Let me explain; everyone knows that design is important in creating an engaging and interactive platform, be it a mobile application or a website. However, the effort and details spent on design are often undermined. This could be a grave mistake because the design is beyond putting a few images together or including some animations here and there. The purpose of design is to bring out the essence of your website, in terms of company branding and the message you want to bring out. It can come in subtle nuances, or it could be distinct to create shock and a lasting impression.

Let’s throw it back to the times of Leonardo da Vinci and Michelangelo. These famous renaissance artists are so impactful and impressionable because they express the meaning behind their works. This extreme example, although way before the time of modern website or app design, is a great illustration of how design or art is not to be taken in its literal form, but rather, meaning and subtle nuances of it are to be expressed behind each piece of design.

At SGI, we take pride in creating designs which bring lasting impressions upon first sight and also incorporate our client’s values and identity into our design for them. Below are a few tips we can take from design fundamentals and apply it into our modern design for mobile application.

The Rule of Thirds

The rule of thirds is basically dividing up your image or, mobile application section in this case, into 9 equal squares by using 2 grid lines horizontally and 2 grid lines vertically. It is proven that the content or focus of the image should be placed off-centre for a more natural look and one which pleases the eye. With that in mind, you should aim to place the focal subject of your content in the intersection of your grid lines, which makes your subject sit in two-thirds of the picture. The rest of the grid squares would be reserved for negative space, which means they should be left empty to bring out the contrast and move your audience’s eyes to your focal subject.

Phi grid

The Phi grid is derived from mathematical calculations based on proportions to give rise to the “Golden Ratio”. This scientifically proven formula is said to create visual harmony when you place the subject on the “sweet spot”. This is similar to that of the previously mentioned rule of thirds, but the Phi grid and golden ratio are just more specific. Below is an illustration of the “golden ratio”.

Use of white space

The use of white space is vital, especially to web design. Whitespace is the space that is purposefully left untouched to allow for spacing between elements and graphics. It can be as simple as a blank column to allow for more space between two pictures. This is to smoothen out the entire webpage and are perfect for minimalistic and clean looks. Apple is a master at utilising whitespace on its website and Apple Store mobile application. They even incorporated the use of whitespace into their logo to achieve a minimalistic design. At SGI, we believe a clean and smooth mobile application is the trend at this time and would include the use of whitespace for our clients as the opportunity arises, to bring out certain elements on the mobile application. Complimented with our seamless UX/UI, you can rest assured that we could make your mobile application smooth and minimalistic.

Visual hierarchy

The visual hierarchy means the order in which the human eye perceives what it sees. When your audience come onto your mobile application, they would look at some elements first before looking at another. This could be due to many factors such as size, colour or layout, but a simple rule to follow would be to have one element pointing to another so that there is a systematic order. For example, if your header is an image of an attractive model which you think that would capture the audience’s attention at first sight, then try to have him/her looking or pointing in the direction of the next element you want your audience to look at. This element could be the brand name of your company or your featured products. There are many patterns by which people look at content, such as the F-pattern or Z-pattern, and also other factors such as colours, sizes and layouts that could be manipulated to rank higher in the audience’s visual hierarchy. There are many other techniques to optimise your visual hierarchy in your mobile application and it would be better if we could share it with you over a consultation session.

Colour Palette

The colour palette of your mobile application should be in congruence to your company’s colours and style. This is a subtle aspect of reminding your customers of your branding and subconsciously etch your brand colours into their memory. You could still use universal tones like black and white apart from your company colours but it is not advised to deviate too far off the colour spectrum from your company’s main colours. All in all, your colour palette should bring your mobile application together and make your mobile application congruent and relative to the entire theme.

Conclusion

The design could be more complicated than it seems, but fret not, if you want to take out the guesswork and leave the designing part to experts who have been doing this for a good minute, we are more than happy to speak with you via a zoom call or a physical meeting. Just contact us at marketing@sginteractive.com.sg and we could set a slot for you.