When designing your web page, it is important to understand how your fonts will affect the layout of your imagery and web design. It is amazing what the right font can do to your product. You can essentially affect the way readers interpret the information you are presenting just by the font you use.

At Soula, we can teach you how to break down these simple instructions and ensure you use the right font for you.

Most people have either a Windows or a MacIntosh machine at home, so when choosing a font, knowing the most common font families on both these systems will make life a lot easier for you, guaranteeing clear, consistent design.

If you examine both machines you will see that there are numerous common generic fonts of the same name on each, but these fonts can actually look different when you use them.

To counteract this problem we recommend you include both a Windows and a MacIntosh font choice in your font listings. This way you will not be surprised by how your page looks in various situations and you will receive the best possible results from your site.
A few common examples are:

•    Arial = Sans Serif
•    Comic Sans MS = Cursive
•    Courier New = Monospace
•    Impact = Fantasy

Changing your text to your favourite font will definitely make your webpage look great on your browser, but if your readers don’t have the same font as you, their computers will adapt to the nearest option in the generic family. When compiling your list of fonts, include a standard font near the end of your list and a generic font as your last choice. By including these in your list, you can have your favourite fonts, but also know that if a reader does not have the same font as you, your web design will still look good on their browsers.

When choosing your font, it is also important to bear the syntax of the font property in mind. Using CCS, you can experiment with all their great features which are easy to use and will allow you to add additional designs to your page.
The font property is a shorthand property used to set the following styles of fonts: font-style, font-variant, font-weight, font-size, line height and font family. Of all these options the font-family and font-size are the minimum styles required for this style of property.

To make font property work on most browsers, it needs to be written in the correct order, for example: font: 1em “Times New Roman”, Times, Serif;, but there are also other factors to consider, such as line height, bolding, small capitals, italics which can be easily added to the previous programming by making a few alterations to the ordering:
.
Line Height: to add line height, place it after the font size preceded by a slash
Font: 1em/1.5em “Times New Roman”, Times, Serif:

Font Bold: font: bold 1em/1.5em “Times New Roman”, Times, Serif:

Small Caps: font: small-caps bold 1em/1.5em “Times New Roman”, Times, Serif;

Italic: font: italic small-caps bold 1em/1.5em “Times New Roman”, Time, Serif;

By using these basic instructions you are half way to guaranteeing that your web design is viewed the way you want it to be seen. But if you are interested in using your font style to increase the success of your graphic design, by also introducing font-style and font-variant, they can really make a difference to your page:

1.    The font-style - defines whether the font is italic, oblique or normal
E.g. to use Italic font style, the programming you must write is: <p style=“font-style: italic;”>

2.    The font-variant – defines whether the font is normal or small-caps
E.g. to use italic font style, you must write: <p style= “font-variant: italic;”>

3.    Font weight – defines how light or dark the font displays on your webpage. You can choose from normal, bold, bolder, lighter, 100, 200 to 900 and lastly inherit
E.g. normal corresponds to 400 weight
       Bold corresponds to 700 weight
So if you want a bold font weight, you must write: <p style= “font-weight: bold;”>

4.    Font Size – ranges from <absolute-size>, <relative-size>, <length> and <percentage>
E.g. for absolute size write: <p style= “font-size:x-large;”>

5.    Line-height- sometimes described as ‘leading’, line-height defines the height of each line. From a choice of <number>, <length>, <percentage>
E.g. Uppercase: <p style=”line-height:1.5em;>
 
6.    Font-family- defines the font family that the text should be displayed in and follows one simple formula [family-name| generic family-name]
E.g.  p style= “font-family: courier new;”


These 6 basic tips can make the difference between your readers making a purchase to viewing another site. All you need to do to make them work to your advantage is simply change the phrasing on the part of the programming and your web design will successfully be received by most computers.

For more complicated professional designs, try speaking to us directly, a contanct form is available at the Soula digital design agency website.

This article has been designed to help you understand how subtle factors of web design can have a massive effect on you design as a whole. The article looks at the use of colour and different colour combinations as well as the implementation of sound, background images and text effects.

When you visit a website, the way the layout has been designed can often have more of an impact on the way you perceive their site than you realise. Typically, when a surfer visits a site, their decision to continue with the desired action can all happen in the first 7 seconds. So it’s important to get your information across fast.

It is possible to create an appealing website and still capture the attention of all your visitors. You just need to follow a few simple rules:

• Ensure you contain a summary of what the purpose of the site is. By including a concise description of your company near the opening of your page, this will give your readers the information they need to continue reading and feel reassured in your product.
• Keep products and services displayed prominently on the page as this allows new and returning customers to visualise what they will be getting.
• To balance the appeal of your page for new and returning customers, include a sentence or two on the product with clearly defined links to other pages with more information on. For example ‘About you’ and ‘Company Information’.
• Include news, press releases and event announcements. This will give your company credibility, and allow your visitors to research further into your company.

Your graphic designs and web imagery should get your readers in the right mood for your page. In the web design world there are certain taboos you should steer clear of when constructing a webpage.

1. Black background with light, white or pale text: using this style can make your website look pretentious and is very difficult to do well even by the most talented designers. Another problem created by this design is that some browsers like to try and print this background, wasting ink.
2. Black with dark text: readers will not be able to read the text unless they highlight it
3. Tiled background images that are too busy: these types of web designs are currently very popular with new web designers, but these images will add to the download time of your site and add no real value to the customer’s perspective. The one exception to this rule is wide tiles that are larger than your screen as they can create a left side gutter on the screen.
4. Everything centred: this can make the page really hard to read and can often be perceived as very boring to look at
5. Too many headlines, over emphasis on themes and bold/italics words: every line should not look like a headline as this will confuse your readers on what to read first.
6. Blinking text: was originally the perfect way to say all you needed to say to your customer. Through over use on many new sites, this design has lost its appeal to surfers and is nearly always impossible to read.
7. List of links: this only becomes a problem when every line is a link. If you do want to list URL links, add a paragraph to each to explain why they are worth viewing.
8. Too many images: this relates to the overuse of icons at the bottom of your webpage. If you have more than 2 icons, there are too many on your site
9. Sound: everyone has different music tastes, so if a reader hears a song that annoys them, they may leave especially if your website does not have the resources to let them switch it off.

By following these simple rules, you can achieve your ultimate goal of winning the attention of your customer. The right use of graphic design, imagery and layout, can make a real difference to the success of your site, simply by tying in all your themes into a coherent structure.   

This article is really aimed at the basic web design level for those who do not yet have the experience to spot mistakes in design layout before they make them. If you need help with designing and marketing a site why not contact the Soula digital design agency.

We hope this article will be of use to you in the early phases of web design, as you gain more experience its knowledge will become inherent and all you design will adhere to common conventions that are in place. For more help with your site why no contact the Soula creative design agency.

This article discusses the most common mistakes made by web designers when they create web pages. It is aimed at those earlier in their career or those just starting out to help them not to make the mistake so many of us do in our first months. This article has been provded to me by the Soula web design agency.

Starting out in web design is exciting, you’ve learnt a whole new set of skills and you’re ready to take on the big bad world of freelancing. You need a site something that says “I’m the best; choose me for your work”. So your pour everything into creating it, all the stuff you’ve learnt over the past few months or even years. Two months later you have your masterpiece coded up and ready to go.  Everyone you know says it looks great and you look at it everyday just to make sure it still as good.

Then you speak to someone in the industry, they rip your site to shreds, this is wrong, that’s the wrong colour, it’s not valid. At first you hate them but you will slowly realise they are right.

I went through all this, It wasn’t fun but slowly I realised my “masterpiece” was not perfect. Industry professionals, while overly harsh are experienced and their advice will be ciritical to your success. To save you too much embarrassment here are some handy things to check in the construction stages of your website.

Page Size & Loading

Loads of people have broadband these days but not everyone. A good percentage of people, around 40% at last survey still use 56k to view the net. As you are bound to know most people will leave a site if it hasn’t loaded in a few seconds so you need to keep loading times down. This means keeping images small and to a minimum and designing in divs not massive chains of tables.

You also need to reduce the amount of unnecessary code in the page this means using complete external CSS and not stick random flash or java in there just for the sake of it. These scripts can achieve some fantastic effects but they can easily annoy visitors and potential clients as well as slow the page down.

Generally valid code also loads better than invalid code. Not only that but many higher level clients look for W3C compliance in your work, it shows diligence and ability and will also make your site eligible for listing in special compliance directories.

Free Hosting and Emails

Making your website look professional is only half the battle, you need to appear professional from all angles. Registering a domain for both your site and emails is essential. Free hosting service may seem like a good idea while you are “starting out” but clients will just see it as unprofessional and cheapskate.
Free hosts will also plaster your site with ads and script restrictions so you may not even be able to do what you actually want with the design.

Small Site Mistakes

Disabling the right click

I have lost count of the amount of websites by new designers that I have seen this on. Without a doubt it is one of the most pointless activities on the ent. Not only does it massively frustrate anyone viewing the page. Assuming that a right click is designated for saving an image is stupid; in this modern age of browsers right click menus contain thousands of commands including bookmarking the page. More importantly it does not actually stop anyone stealing images.

Background Music

Another common mistake from new web designers, especially flash heavy ones. Do you really think your page is so important to other people browsing the net you have to take over control of the audio output of their computer? What if they are on multiple sites? What if they are listening to music or watching a video in another window?
There are very, very few websites that need background music so do not include it in your portfolio page.

Hit Counters

Monitoring and targeting your traffic is an extremely important procedure but not one that the visitor needs to see. Far from making your page look tacky invisible hit counters can seriously compromise SEO. Avoid including them on your page and instead plump for more comprehensive offsite solutions like Google Analytics or AWStats.

Make sure none of these errors occur on your page and you will be a few steps ahead of many other new (and old) web designers out there. Good luck in the web design industry and remember to keep on top of the newest trends, which will always be the way to win business.

This article explores the use of colour in websites from the user’s point of view. It discusses effects of mood and perception from a user as well as the effects of eye fatigue when faced with certain colours. It also covers the effects of dithering and advice on browser safe palates.

As everyone knows colour can be a massive influence on mood and perception when a visitor first sees a website or indeed a billboard, movie trailer or room. Choosing the right colours for your website is crucial and if you are not careful you can easily drive visitors away just by choosing the wrong ones.

A big obstacle in choosing the right colour for your site is the fact that most web browsers can only see 256 colours, a further problem is that these browsers don’t even have this selection standardised and there is only a common range of 216 web safe colours. It is always recommended that all aspects of your design are inside the 216 colour palate, failure to do so can end up with images and text on your site dithering.

Dithering is a process us by browsers (and other programs) to create colours that don’t exist in their own palates. They do this by generating lots of tiny pixel points of colours they can render close together so that from a distance it appears to be a different colour. While this can be successful, it can also cause images to be speckled or distorted. Obviously you need to avoid this wherever possible and remember one important thing, just because your screen renders it ok does not mean every screen does.

Another reason you should be careful of the colours you choose for your websites is that excessive use of certain colours causes eye fatigue. While this is hardly the most serious of affiliations it’s something you should strongly avoid giving your users. Let’s face it there are too many reasons someone would leave your site already, we don’t want to give them more.

Yellow and red are the biggest culprits for causing eye fatigue, they are much more intrusive (hence their use in warning and caution signs) and extended periods of looking at these colours the cones that detect these specific colours become fatigued and you stop seeing it as strongly. This can also bring on headaches and strain.

Only use these colours to highlight areas and even then do not use them on large areas of the site.  It is also wise to separate text out into smaller blocks for the same reasons. This may mean you slightly breech grammar guidelines with too many paragraphs but it will be easier to read and that’s simply more important.

Colour also has an effect psychologically. There are far too many reasons and effects to cover in just one short article but I will outline the basics as much as possible. Cool colours such as blues or greens have a soothing effect on users but can also set a negative mood or slow response. Warmer colours such as oranges and gold’s have a positive and vibrant effect but can be overwhelming especially if this is not what the user is looking for.

Good luck with the development of your next website and make sure you take note of how much influence colour can have on a site, if you want more information on website design and development why not speak to a professional

Hey Guys,

Really sorry I have not been able to do an update lately, I have been super busy with web design work and although I love to blog, somethings gotta pay those food bills :)

I am working on the newest article but I don't think it will be ready until next week. I have been having fun too, not all boring work work work. I was in Birmingham this weekend for the Pain/Nightwish gig, pretty good time but it rained like hell and everyone got soaked queuing to get in.

Update you soon people

-Ian