There’s a question that I frequently get asked and that is how much will a website cost me? If you search “web design uk” in Google you’ll presented with plenty of sponsered listings titled things like: “web design for only £249″ or cheaper.  For small businesses or individuals this’ll no doubt be a pretty tempting offer.  Trouble is not many people understand how much work is involved in decent web design.  Here’s a quick, very basic breakdown of everything required to get a complete website launched:

The Design Stage:

1. Recieve brief for new website
2. Send over a quote/agree on a price for the project, recieve deposit
3. Look at the content, and sketch out a plausable layout/wireframes which works with the given content for each page
4. Mock these up in Photoshop/other image editing program
5. At this point we haven’t even started ‘designing’, we’ve just layed out a usable presentation of content
6. Design an inital mockup which gives us the general ‘look’ of the site which compliments our wireframes [consider any current branding, or create new brand image folloing logo design]
7. Some clients will require 1-3 or more designs to choose from.
8. Send over initial first mock ups
9. If client is happy design each page following the same layout and design based on chosen design mockup
10. Add finishing touches send over to client for further approval before HTML conversion

Coding Stage:

1. Start slicing up the final designs and building into HTML
2. If targeting specific keywords, which are known build to enforce these
3. Upload to a testing server make sure al rollovers etc are as client expected
4. Test test test – in all major browsers, amend until the coded site looks exactly like the PSD sent to client previously.

Development Stage:

1. Depending on whether the client required a CMS/e-commerce or static HTML site progress to the development stage
2. Code in using PHP or chosen language
3. Setup all databases
4. Test test test again to make sure all code is functioning as expected

Setup Stage and Maintenance:

1. Upload to clients server, or setup server for them if they’re not sure how
2. Send instructions how to use CMS/setup meeting explaining everything
3. Most web designers should offer some form of maintenance, this doesn’t come free.

As you can see a  lot more goes into a complete website than most people think, and this is accounting for font selection, copywriting, SEO, javascript implementation and various other extras.  A high quality website should contain all of these and if you think it sounds too cheap, it probably is!  You get what you pay for.

As a UI/frontend designer I maybe slightly biased, but I hear of lots of people who think they can design too.  Because design is so subjective everyone has an opinion and therefore they believe they could do better, or it’s easy.  I beg to differ, it takes years of practice and experience to be able to produce a quality, workable design.

So next time you see cheap web design, ask yourself why is it so cheap?  What have they cut out of the above to bring the price down? A good way to look at it is as an investment, what ROR will I get if I go for a higher quality build?

For those who haven’t read about our startup discounts, we are offering web design, as well as web design advice to those with great ideas but little capital to get started, some discounts up to 50%.

We’ll be adding a number of these great ideas to our portfolio once live so keep an eye out!  If you’d like to book yourself in or enquire, click here!

For this reason, web developers should be looking beyond the immediate aesthetics and consider how they can build a website that’s easily adaptable to other languages and cultures.

Text

Whilst design and layout is what first draws traffic in initially, it’s content that ultimately keeps visitors coming back. It can be easy to solely think ‘English, English, English’ in terms of language, but the simple truth is three quarters of the world’s population speak no English. Not even to basic conversational level.

If the purpose of a website is to make money, then businesses need to talk to clients in their own language. But the website translation process is made far easier if the pages were developed originally in Unicode, which caters for over 90 different scripts and has a repertoire of over 100,000 characters. So the German ‘Eszett’ symbol (ß), for example, can be replicated with ease.

Unicode has been adopted by the likes of Oracle, IBM, Apple and Microsoft, whilst all the commonly used operating systems and browsers support it too. Furthermore, standard web design tools such as Dreamweaver and Microsoft Front page facilitate Unicode web page design.

So it’s best to use Unicode if a site is to be targeted at any non-English language audiences.

Color symbolism

Your choice of colors should also reflect your intended international target audience. For example, ‘black’ generally signifies ‘death’ in western cultures, but in many eastern cultures, white is the color for this. Similarly, red can mean ‘danger’ or ‘love’ in western cultures, whilst it can represent ‘purity’ in India or a cause for ‘celebration’ in China, or even ‘good luck’.

There are many examples of how different colors can mean different things in different cultures. And whatever you do, don’t include an image of a green hat on your site if you’re targeting customers in China…as that means that a man’s wife has been unfaithful!

Simply put, carefully consider your color scheme from the start to avoid having to completely change your design later on.

Content

Obviously, not many people will visit your carefully constructed website for the design alone. Content most certainly is king when it comes to successful websites – you must offer genuinely useful content for your global markets…not only in their native tongue, but in their native dialect too.

Adapting your website text for global markets requires a two-fold process: localization and then optimization.

The localization facet means you need a qualified native-language translator for each of your target countries. And remember, language dialects can vary considerably between regions.

For example, many words mean different things in French (France) and Swiss/Belgian French. ‘Lunch’ is déjeuner in France, but dîner in Switzerland and Belgium. And in France, dîner is the word for ‘evening meal’. Coche in Spain is the word for a ‘car’, but in most Latin American regions, it means a baby-stroller. Moreover, a baby-stroller won’t be a familiar term to UK readers: they’ll be more likely to use a ‘pushchair’ or ‘buggy’.

Website translation is made a whole lot easier if you stick to standard text and use minimal amounts of Flash content. This is because it’s difficult to edit, copy and perform word-counts on Flash files, processes that are central to the translation process. Moreover, the old adage that text is the food of search engines is true: Google can’t detect words embedded in Flash, meaning it’s harder to optimize to rank highly on search engines.

Speaking of search engine optimization (SEO), you shouldn’t translate your keywords and phrases directly from English. Locally, people might not use the direct translation – they may use abbreviations, acronyms or synonyms.

The properly researched search terms should then be incorporated into your translated website, preferably on a dedicated ‘in-country’ domain. For example, http://www.mywebsite.fr, for France, rather than http://fr.mywebsite.com – Google uses the domain as part of its search algorithm to determine where your site should rank on its in-country search engine, in this case www.google.fr.

Navigation

It goes without saying that navigation should be a key consideration in any website’s layout. But with right-to-left languages (RTL) such as Arabic, where you put your main navigation bar may have to differ from your English language website.

It’s not a disaster if you simply shift the menu over to the other side of the page, but for ease – and consistency – some designers may prefer to use a horizontal bar instead.

If your website is to be replicated in a number of different languages, you have a couple of options for how users access their native language pages. You can create a simple entrance page, where visitors select the language of the site, which will of course include the positioning of the navigation and scroll bars. Or, you can simply use English as default, and have clearly labeled options for switching to other languages at the top.

These are just a few of the things you should consider when building a website. Of course, if the main aim of developing your site or blog doesn’t involve making money, then you’ll probably get by just fine in English.

But given that anyone from Nebraska to Nairobi could be accessing your site, it certainly pays to be prepared should you wish to adapt you site at some point in the future.

About the author

Christian Arno launched translation company and website localization specialists Lingo24 in 2001. With operations across four continents and clients in over sixty countries, Lingo24 had a turnover of $6.1m USD in 2009.

Download it here.  Demo coming soon!

A bit about Spicy Web Designers:

This website [Spicy Web Designers.com] is dedicated to answering the question “Where are all the good web designers?” and we answer this question by interviewing the top web designers from around the world.

Our goal is to create a website that allows creative studios, companies and agencies a way to keep on the pulse of web design industry.

SpicyWebDesigners.com features some of the hottest web design talent around the world and strives to showcase them and inspire others with what is possible in the world of web design.

Great resource there – and thanks to Luc for the great questions!

Below is the original (click to enlarge):

Job Trio Original Design

Now you’ll notice it’s not bad, at all.  It just needs some touches to bring it out to it’s full potential.

It’s weak points:

1. White space is good, but I think here we’ve got a little too much white space.
2. We could use nicer fonts for the main titles (could use sIFR/cufon if image replacement is a problem).
3. The navigation shine and appearance could be improved.
4. The search button here is pretty important, at the moment it’s not very engaging, so I think that should be improved.
5. Better fonts all round, no need to have native text on the title elements and navigation.

By first assessing a sites current issues, it’s then very simple to go in and make the necessary improvements.

So here’s the finished product:

JobTrio-Redesign

The new site design should be up in the coming months!

Below are some great examples of providing persuasive call to action buttons:

Always been a fan of the invoicing machine.  The screen grab doesn’t do it justice, but it’s header region stands right out give the user enough info to know what the site is about, and then provides more info or sign up buttons, if interested.

Love the new(ish) basecamp design, along with the simplicity the invoice machine example provided, basecamp’s button offers a time-frame estimate for new users to sign-up.  ‘Sign up in 60 seconds’; these fast sign up’s are a breath of fresh air compared to the tragic, outdated sign-up forms of old.  They provide the user with a very tempting offer!

Plain and simple is this persuasive button’s promise, 2 words every user loves.  The simpler and easier it is to get going, the better.

Another very nice button which provides a description of where it’s going to take you, as well as a little support promise to add in some trust.

Good old mail chimp doing it the right way. Big bold buttons that stand out more than anything else.  Both with time scale and price descriptions.  Good stuff.

When it comes to downloading any form of software, FireFox have got it down.  The most descriptive button here – price, language and windows version.

So when you’re next designing those buttons don’t overlook their function, and try to think like the end user.  Is this going to help them?  Is this going to entice them?

Obviously cost is a major factor and the majority of people who want to sell something online wouldn’t have a clue how to set up a database, let alone install and configure an e-commerce platform.  For this reason alone I’ve read horror stories about clients spending £12000+ on a very bad, essentially useless ‘e-commerce’ site because they’re lack of knowledge has been taken advantage of.  Truth is, it’s not THAT expensive to set up an online store, entering all the products is the slow laborious part (DB configuration isn’t a laugh either).

It’s important to distinguish between the site; or the tool used to sell to customers, and the products themselves.  A great site won’t sell shit products, just as a shit site won’t sell (many) great products.  But as a web designer we can at least start the client off in the right direction with a few key points to keep in mind:

1. Keep it clean: No point having all the fancy crap that we could get away with on a static site, your selling the products not your design.  Keep to sleek, clear navigation and categories.  I’m liking play.com design, and can usually find what I’m looking for sharpish.  It’s attractive without being overdone.
2. Balance the look and usability: How easy is it to find a product you’re looking for? If it’s a pain to find, change it.  While usuability is VERY important as with all websites, I think it’s important to generate professionalism through solid design.  Building customer trust will sell products.
3. Show the cart all the time: The cart should always be in view, keeping up that total price and making the customer aware of what they’re adding is so important.
4. Don’t force the customer to register when buying a product: Offer the chance to simply checkout without registering, think I read some mad statistic 60% customers leave website on checking out.
5. Make sure the categories are one of the first things the customer sees: Not being able to find a product is just annoying, horizontal or vertical nav or both is fine.
6. Checkout button should be easy to find: So they’ve added whatever product tickles their fancy, now they want to buy it..if there’s no checkout button, you can say goodbye to the sale.  Best thing to do is keep the checkout button near the cart as well as on the navigation.
7. Build trust using trusted brands: Whack on some credit card logos, paypal, verified, logos which really every store should have, and unconsciously gives us a warm feeling inside that says ‘oh they accept trusted payments methods, here’s my money’.
8. Bottom line: Buyers are become very adept at shopping online, with all the price comparisons and competition about, it’s important to make it as easy as possible to buy the product, for example amazons one click checkout, see a product you like, you buy it, simple.

All these points are pretty obvious and should be seen on all e-commerce sites, all we’re doing is making it easier on the customer.  As web designers, it gives us plenty of opportunities to get out there and make these store owners rich by improving their e-stores.