In the previous chapter, we have gone through some basics of minimalistic design and the trend of website layouts. Please check it out in case you have missed it. The trend of minimalistic design and layouts are unlikely to fade away in anytime soon. Therefore, you should spend couples of minutes on catching up the basics of them if you haven’t already. Let’s get down to business. Today, we are going to discuss something geekier in design such as flat design versus skeuomorphism and choices of font.
is not a new design philosophy. It is believed to be originated in Swiss design, which demonstrates a strong focus on order and clarity. However, flat design has only become an unstoppable trend since the release of Windows Phone operation system. The user interface of Windows Phone is minimalistic and… ‘flat’. All the unnecessary gradients and bevel are removed from the buttons, background and other parts of the UI. Since the adoption of metro style by Microsoft, other popular brands such as Apple and Google also redesigned iOS and Android respectively with flat design.
A website created with the style of flat design. (Courtesy: trefectamobility.com)
On the other hand, skeuomorphism was once a dominant philosophy of graphic design. Skeuomorphism is defined as the following:
This obscure word describes the way designs often borrow a particular feature from the past, even when the functional need for it is gone. Examples include pre-recorded shutter noises on smartphones to remind us of film cameras, or calendar apps that feature torn paper and metal rings.
– Sacha Greif
In other words, skeuomorphism aims at imitating the reality. It was meant to be intuitive to users. One of the typical examples is the little floppy disk icon in many software which represents saving files. But, floppy disks are no longer available in the market. Younger users may not be able to relate the floppy disk icon with its function. This is one of the major problems of skeuomorphism.
An iPad app with the leather-like user interface, which is a form of skeuomorphism. (Courtesy: Sacha Greif)
Flat design rises and replaces skeuomorphism due to various reasons. Firstly, websites designed with flat elements load blazingly fast compared to the traditional ones. It is because the elements in a website with flat design are often lightweight and it enables web browsers to render the page faster. Secondly, the minimalistic big buttons in flat design are favorable for mobile browsing. Thirdly, flat design is more compatible with responsive web design. Responsive web design is a relatively new technique that enables a web page to rearrange its own layout to suit the size of the browser. To sum up, flat design is the combination of minimalism and aesthetic.
Choices of typeface do play an important role in web design. Before we move on, we will have to know some basics of the typeface. There are two main types of font, which are namely serif and sans-serif font. Serif font is the one with a serif at the end of a stroke and vice-versa for sans-serif fonts. ‘Sans’ is a French word which means ‘without’. You should know why those without serifs on the strokes are called sans-serif. The following is a guide on how to choose the right typefaces for your website.
A comparison between serif and sans-serif typefaces. (Courtesy: limcomputerart.weebly.com)
Firstly, serif fonts usually look elegant and traditional while sans-serif fonts give a sense of stylishness and modernity. You may actually combine the two fonts and it usually does the trick. For instance, assign a serif typeface to the heading of the page while using a sans-serif font for the content. Never attempt to put two similar fonts together. Audiences may find the typefaces inconsistent. Don’t forget to assign different weights to the texts for better distinguishment between important and supplementary texts. You may also want to combine fonts of similar time eras. Although it is fun to combine fonts within a page, never use more than 2 to 3 typefaces. They will mess up your website catastrophically.
The importance of font weight. (Courtesy: colorlib.com)
This will be the last chapter of the tutorial series Photography Portfolio Website Starter Guide. I hope you have enjoyed the series and have found it useful. Good luck for your website.