Website Design Services Penang | Logo Design

Logo design

Broadly speaking there are three types of logos: icons (also known as symbols), logotypes and combination marks. The terms icon and symbol are used interchangeably and refer to visually bold images such as the logos for Apple, IBM, Shell and Nike. Logotypes, also called wordmarks, generally use a unique, custom-designed font to render the company or brand name. Well known examples include IBM, Dell, Disney and CNN. Combination marks, such as those used by McDonald's and Starbucks, combine text with an icon.

The logos below are taken from a set of ideas I designed for Thailand's Department of Highways, part of the Ministry of Transport in Bangkok. The concept is based on an early 20th-century illustration depicting an elephant chair above a pair of tusks. The design on the right was chosen for the website.

This is a logo I made for the Malacca Portuguese Eurasian Association. Given more time, I'd probably re-draw the ship's hull and tweak the sails. While intricate logos like this are generally fine for printed matter, they are best avoided on websites as they scale poorly and much of the detail is lost.

Website typography

Typography is an important aspect of website design. The most basic considerations when choosing a typeface are whether you like the characters and how they render at different sizes. For a brief overview of typography, click or tap any of the icons below.

Serifs

Kerning

Ligatures

Descenders

Serifs and sans-serifs

Serif typefaces differ from their sans-serif counterparts in that they feature small, decorative flourishes at the end of the strokes. These flourishes are called serifs and were traditionally thought to increase readability and reading speed.

Font Serifs

On websites, especially at smaller sizes and for short passages of text, sans-serif fonts are often a better choice. Popular serif typefaces include Georgia and Times Roman, while Arial, Verdana and Helvetica are some of the better known sans-serifs found on the web.

Kerning

Kerning is a typographic term that refers to spacing between two consecutive letters.

Font Kerning

The word above features two examples of kerning: the W "pulls back" the letter o that follows it, and the y occupies some of the space used by the a. The reduction in white space leads to a neater, more uniform appearance, and enhanced legibility. Some web fonts are notorious for poor kerning: Arial, for example, has no built-in kerning pairs and by default will display excessive white space between letter combinations such as Va, We, Wo and Te.

Ligatures

A typographic ligature is a special character that represents two letters joined together. Ligatures generally occur only in serifs, though Gill Sans and Futura (both sans serif typefaces) include them as standard characters. The text below is displayed with Gill Sans and features two ligatures.

Font Ligatures

The letters f connect to form a single character, and the second f joins with the i to form a character without the dot. The result is interesting, though not necessarily more legible.

Descenders

Descenders are the parts of letters that descend below the baseline. The word below is displayed with Gill Sans and includes three descenders.

Font Descenders

What I particularly like are the straight lines in the letters p and y, as well as the "goggles" shape of the g character. This website uses the word design quite a lot, so I wanted an interesting g rather than the bland curl found in typefaces such as Arial or Helvetica.

Content creation and development

Content creation, development and refinement are important aspects of the web design process. A good article will generally weigh in somewhere between 1000 and 1500 words, and where necessary will include a rich selection of media and a bibliography. I've provided copywriting services to several clients, authoring comprehensive articles from scratch and expanding / improving others.

Responsive website design

Responsive design describes the techniques used to ensure that websites can be viewed on desktop PCs, laptops, tablets and smartphones. These devices generally have different screen sizes, so it's important that websites can adapt (or "respond") accordingly. Responsive design is now an integral part of the design process and something anyone about to hire a website designer should be aware of. For more information, Wikipedia's article about responsive design is informative, well-sourced, and offers links to other useful resources.

Page loading speed

More than 50% of online traffic now comes from tablets and smartphones, so it's essential that websites load quickly. To help website designers assess page loading speeds, Google has developed PageSpeed, a tool that monitors performance and gives technical advice on how load times can be improved. I use this tool to optimize my clients' websites and in some cases have achieved a near 100% score.

Website infographics

All website designers should understand the importance of presenting content in a way that's aesthetic, interesting and varied. Good typography is crucial, but so is media such as video, quotes, infographics, interactive graphs and charts. Shown below is one of several infographics I designed for a client involved with ISO 9001.