Archive for the ‘Website Design’ Category
published by Dan in Website Design
- Alignment - Left-align the text. In rare cases you can right-align the text but remember that for body text left alignment is the easiest to read. If you are a fan of justifying the body text you should realise that although it is fine for books in monitors it is not that friendly since you will be maximising the width of the column. The problem with this is that it is actually easier to read narrower columns than wider ones!
- Capitalisation - You might think that capitalising an entire line or even an entire paragraph is a good way to capture people’s attention. While you might get their attention the fact is that an entire line of capitalised letters is harder to read. The reason for this is that the letters are harder to tell apart since they are the same size. So if you want to provide emphasis it is better to stick with italicisation or capitalising just a word or two.
- Underlines - Avoid using fonts that have underlines or plain underlining a word or phrase. Since underlined text is often used to distinguish links people tend to click on underlined words, be it a link or not.
- Emphasis - As mentioned earlier you can use italics for emphasis. Another common thing done to emphasise text is by emboldening select words. Note though that whatever approach you take always remember to only emphasise words that really do need emphasis. Too much bold and italicised words can be distracting and end up making your site look more cluttered.
published by Dan in Website Design
Now that you know the three main factors that should be considered when choosing the approrpiate font for your website here’s a short list of things you should remember in order to make the wisest decision in font selection.
- Appropriateness is the key - Remember there is no one perfect for a any website. When choosing fonts you do not have to find the perfect font all you need to do is choose the one you like best among the appropriate fonts.
- Font size - The size of the font is just as important as the type you choose. Stick with font sizes that are readable. You can use different font sizes but do not use too many sizes. Three different font sizes is enough to distinguish between main heading, subheading, and body text.
- Spacing - Always make sure there’s enough line spacing so that you wouldn’t waste all the effort you put into choosing a good font. Make sure that there’s a larger space between headlines than the usual line spacing. This is done to make the headline stand out even more allowing the visitor to see what the website has in store with just a single glance.
- Mixing and matching - You do not have to stick to one font type. You can mix and match typefaces. However, make sure that the typefaces you choose blend well together and give an appearance of consistency.
published by Dan in Website Design
The third thing that should be considered is the level of formality that is appropriate to your website. Obviously the nature of the website will again determine this level of formality. However, note that even for websites with the same topic or theme the level of formality can differ depending on your vision.
For example sites A and B can both be a an online resource for pet owners, however site A’s goal is to be interactive and fun while site B’s goal is to provide in-depth organised and technical information. Because of this site A should use fonts that exudes a more casual feel while site B should use fonts that are more traditional.
Note that the “feeling” conveyed by a site and the level of formality are often interchanged but still differ in that they can have the same level of formality but have a different tone or vice versa.
For example sites X and Y both want a cheerful feel but since site X’s target audience are kids while site Y’s target audience are elderly then you can be sure that site X will have a more casual feel than site Y.
On the other hand companies QWE and RTY both want formal/traditional websites, however, since QWE deals with the mortuary business while RTY deals with family planning toys then obviously site RTY will have a lighter feel than the more somber QWE site, which in turn will definitely affect the choice of font to be used as well as the presentation of the fonts.
published by Dan in Website Design
The font used is important because it helps form a visitor’s first impression of the website. Because of this you want to convey the right feeling during the very first seconds simply by having chosen an engaging type face and by presenting it in the way you want your website to be perceived. Note that the choice of colour for the fonts is very important because colour is very good at hitting people in the subconcious level.
As an example if you look at the typewriter fonts listed in Simply the Best Fonts you will see that each font gives a more traditional feel. However, due to the colour and the size of each font the feel differs greatly. The Hammerkeys font really makes you feel like you’re reading an old novel, while the Teletype font still feels like a novel but a more recently published one. Hence, the type of font you use can affect a person’s impression of how old the contents are, how serious, and even hint at the actual topic (see Gothic Fonts).
Another good example would be the Creeper font, a liquid horror font. It is obviously can obviously be used for any halloween-themed sites but you can tweak the “scariness factor” by simply changing the colour. Keeping the font a deep blood red will make it look scary of course but changing the colour to a soft pink or sky blue will lessen the effect.
Just for fun try tweaking the colours and sizes of different fonts. You’ll find that you’ll learn a lot about choosing an appropriate one to convey/reflect the feeling you want.
to be continued…
published by Dan in Website Design
In choosing a font for a website you should consider three things:
- the purpose of the font;
- the feeling you wish to convey; and
- the level of formality you need.
As mentioned in the previous post the purpose will determine the appropriate type, size and colour to use. Ask yourself will the font be used to showcase the body or will it be used for headings and other display features.
If the font will be used for the body text you will need to use clean simple fonts that are easy on the eye. The purpose of the font for the body text is to make it very readable. The recommended font size is usually 11 point although depending on the type you can use anything from 9 to 12 point. Again, remember that if your audience consists of the elderly make sure you use a big font size (12 to 14 point). It would also be a good idea to provide a way to change the font size easily.
If the font will be used for headings and other display features you will be needing bigger font sizes. You can also emphasise the heading by using a different colour for the font or even a different background colour to make the heading pop out. You can use the same font used in the body text to get a more consistent feel or you can opt for a fancier font. The choice for this will depend on the next two factors that will be discussed in the succeeding posts on choosing fonts.
to be continued…
published by Dan in Website Design
To be able to determine which type to use you have to first remember the reason why you need to choose an appropriate type. The very basic purpose of font types is to draw attention to the text. That being said the font type should be chosen so as to present the text best making sure it doesn’t fade into the background but at the same time making sure that it does not overpower the text. This means no ornate letters and no screaming colours.
Another important thing to remember is that it exists to make the text readable. This means that you should never choosy a pretty or cool text if it is hard to read. Spacing between letters and lines comes into consideration as well because even if the type used has clean lines tightly packed letters are harder to reader. This also implies using the appropriate font size. If your target audience are older you should use bigger font sizes regardless of the typeface you use.
published by Dan in Website Design
When designing a website many graphics designer settle on a font type with only aesthetics as their only consideration. In fact, in some cases, when a client asks for a specific font type web designers agree to use that type even if it is not the best option. In this series on typography I will be discussing not only the importance of paying attention the font type used but also the reason why they are important as well as ways to determine which type would work best for the website being designed.
When scanning a website or even reading a book the type is actually very important because even though readers rarely consciously notice the typeface used subconsciously it affects the reading experience. It is not only the actual words that speaks to the reader but also the typeface. In spoken communication it could be likened to body language. This includes not only the font type but also the size and the color used.
Notice that if you visit a website you automatically form an impression depending on the type used. Curvy scripts are associated with femininity, types with clean lines appear professional, big fonts appeal to the younger audience as well as seniors, etc. Choosing an appropriate typeface is very important to give a good first impression to your target audience. Choosing the wrong font will not only lessen the appeal of your site but can also make them question your credibility. So if you haven’t been putting emphasis on the type in your site now is the time to take a good look and find the one that’s optimal for your site.
published by Dan in Usability | Website Design
- Allow misspellings in search - It is harder to type using the small keyboards found in mobile devices resulting in more typo errors made by mobile users. Because of this you should make sure that if your mobile site has a search function you should factor in incorrect spellings so that users can easily find the information they need even with a bunch of typo errors.
- Place basic navigational elements in the page - Examples of basic elements that you should provide would be a “Back to top/homepage” link, a “Next Page” link, or “New search”. This way once the user has finished browsing through the page he she can easily go back or go forward without having to scroll back up.
- Test. Test. and Test - In the end even if you do follow these tips but do not test the mobile site before launching it chances are your users will find a critical bug or two. So make sure you debug and do user testing to make the needed changes before the site is launched.
published by Dan in Usability | Website Design
- Highlight selected items - Navigating through a mobile site is usually not as easy as doing so in a normal website on your PC. One reason for this is that unlike with PCs where you can easily tell where your mouse is, allowing you to simply hover and click with ease, cursor control in mobile devices is not as easy. It often leads to confusion resulting in irritating wrong clicks. To help users avoid this problem make sure you provide a way for them to determine where they are at the mobile site page. You can do this by highlighting the part of the page where the cursor is currently pointing. For this very same reason it is usually good practice to make the background colour of the mobile site white so that whatever colour you choose to highlight items you can be sure that the item will stand out.
- Minimise user input - Users will need to type in information at one point or another but make sure you help them out by minimising the occurences where they will need to provide information by typing. Instead give them a list of options where they can choose an answer or narrow down their queries whenever possible. When doing this, however, make sure that you don’t end up giving them a long long list of links to browse through. This will only be effective if you give them a several choices and then giving them the option to search if they still need to narrow things down.
to be continued…
published by Dan in Usability | Website Design
When designing mobile sites one of the biggest limitations everyone should remember is the size of the screen. The small screen size limits the amount of content that can be viewed at one time. This means that to make the user interface of your mobile site visually appealing yet efficient as possible you should:
- Remove unnecessary information - Cut down the content to the bare minimum. Forget about wittiness and paragraphs. Instead opt for bullet points and concise yet descriptive wordings.
- Present information upfront - Instead of relegating vital information to a click or two away from the landing page present it at the landing page immediately. People using mobile devices to access the internet are generally in a hurry and need access to immediate information. It would be more convenient for them if the information they need is found on the landing page.
- Use breadcrumbs for navigation - Forget about sidebars. Sidebars will eat up space and we already know there is little enough of that with mobile devices. Instead relegate the navigation to the top of the page by providing breadcrumbs. This will allow users to not only move around but also keep track of where they are. If you do not wish to use breadcrumbs then place the links/sections you planned on putting on the sidebar but again this time on the top of the page.
to be continued…
0845 838 7448 
