All posts tagged Design

From Meet to Mock-Up – Steps to take

by The Web Squeeze on February 10, 2010 in Tutorials with 4 Comments

I’ve already written an article on meeting a client which you can view here. However after that many people (yours truly included) dive into either Photoshop for a mock-up or just open up a coding application and get going. This to me used to make perfect sense, however I’ve found in the last 6 months there has been a huge shift in focus with many stating different methods you might like to try. I’m not suggesting that you try all of them, but you might find a few of them take your fancy and ultimately provide you and the client with a better end result.

After the initial meeting it’s always a good idea to ask the client what they want their website to look like. Some might not have a clue, in which case this is almost your dream situation, free reign, but others might already have an idea. You need to know this before you go diving into any form of mock up. Once you have this mockup you can move onto the next stage.

Site Map

Something I always find hugely beneficial is to do a flow chart of the pages on the site and how they are going to link together, usually just by drawing lines between them. Personally, I always just grab a piece of A4 paper and get going, however there are many applications out there to do this for you if you prefer. Personally, I find it nice to stay away from the screen as much as I can before coding, as during coding most of my time will be spent on the computer. By doing a sitemap it gives you a real indication of how complex or simple the navigation is going to have to be on your site – it might just be one tier navigation or it could be a lot more in depth – each page might have sub-pages.

Colour Scheme

Again I never used to bother with colour schemes but now it’s an integral part of any design process for me. The most popular application for this is Adobe’s Kuler. You can find it online at kuler.adobe.com and there is also an Air app which you can download from the same URL. If you’re not a master of colour don’t panic, there are over 30, 000 colour schemes made from others which you can browse through, but if you like to get down with colour you’ll find this website delicious. One of the great features is the ability to create a scheme from a picture – but if this is not for you you can create your own 5 colour scheme very easily. You can choose from many types and customise them to fit your exact needs. If Kuler is not for you, you can do the same kind of thing using Photoshop or equivalent – but the key point of Kuler is that you can pick a base colour and Kuler will then create the others for you using one of the colour scheme ‘types’ available. And if that’s not enough, there is also a Kuler addon in Photoshop!

Check out the Rivals

By checking out sites of a similar ilk to the one you’ve been asked to design can give you ideas. Obviously there is a limit – you can’t just copy whatever you want, but this is more about examining the competition and seeing what line they are going down.

Wireframing

This is something which has gained in popularity hugely and something I’ve covered in depth as well. It’s point is to just get the layout of the site decided – nothing more. Personally once again I use paper and then either show them to the client in a meeting or scan and then email them (making sure it’s neat enough, of course). By doing this you can remove all the distractions like colour and fonts and just focus on the barebones layout. Of course if you prefer to use a computer you can use Balsamiq Mockups, which will set you back $79, although one of the most popular is the online (and free) Go Mockingbird.

Working Prototype

After deciding the layout, thanks to our wireframes, some like to take that basic layout and quickly mock it up in a browser, including nothing more than just rectangles and some links. The beauty of this is you can make all the links work, so the client can see and test the navigation of the site. Once this is done you might realise some of the layout is a bit impractical, something it was impossible to realise in the wireframing stage, and you can immediately change this.

Colour Scheme + Prototype

Now you can combine two previous steps into one. Take the prototype and apply the colour scheme you created and combine the two. Add in some text so you can try out the colours and apply the colours to the prototype. Now you should be able to see the site coming together and how perhaps that shade of red does not work with that purple colour you used in the header.

The Final Mockup!

At last! By now you should have all the things you need to create the final mockup. Personally I just open up my prototype and work from there, skipping out Photoshop completely. Photoshop gives the client the website in an ideal world – without different browsers, text rendering and the rest. By creating it in the browser, the client sees an actual real life site, rather than an idealistic Photoshop mock. But this is jut my opinion, if you prefer Photoshop you should certainly stick with it. But by going in the browser you can add as you go and eventually your final mock turns into a real website in no time at all.

The End

By now you’ve impressed the client, and have a super mock up and be ready to code the final thing, launch it and make lots of money! Good luck!

Tip And Tools For Creating A Stunning Colour Scheme

by The Web Squeeze on December 16, 2009 in Articles with 8 Comments

We all know that the success of a website is greatly influenced by the core idea, how it is built, the technologies behind it and the user interface but there’s one thing you should never overlook: the color scheme. Simply put, the right color scheme can make or break your project.

Even if you have the greatest idea and you have all the skills necessary to make your project a reality, if you greet your visitors with a dull or inappropriate color scheme for the audience, chances are they won’t return to your site.

Understanding The Basics

Of course the colors you decide to use is a personal choice, but here are some pointers. See those as a starting point. Like with everything else, it is ok to experiment and sometimes break out of the mold.

Let’s start with the color wheel:

Color Wheel

There different types of color schemes such as monochromatic, analogous, complementary, triadic and neutral. Here’s a quick explanation of each of those different types:

Monochromatic: Different shades of a single color. It depends on how much black or white is added.

Monochromatic

Analogous: Colors are close to each other on the color wheel. (blue and purple for example)

Analogous

Triadic: These colors are spaced evenly on the color wheel. For example you could have shades of green, red and blue. As the name implies, triadic comes from ‘triangle’.
triadic

Complementary: This is often seen as “opposite” because the two colors in a complementary color scheme are opposite one another on the color wheel. (blue and orange for example) Many people will like to go with a complementary color scheme since it is easier to combine two colors than it is combining 3 or 4.

Complementary

Neutral: A neutral color scheme includes colors that are not in the color wheel. For example: beige, brown, white, black, greys, etc.

Neutral

Choosing The Right Color Scheme For Your Audience And Niche

The color scheme you chose will probably be greatly influenced by your audience but it also depends on what meaning and emotions you want your website to be associated with. The meaning of certain colors will also vary depending on the country and culture. For example, the color red usually means passion and leadership for North American people, but it can mean mourning and grief in South Africa.

White: pure, neutral, clean
Black: classy, elegance, power, mystery
Grey: humility, pessimism, balance, formality
Red: passion, fire, strength, leadership, love
Green: environment, wealth, youth, greed, creative
Blue: peace, harmony, conservative, cold
Purple: royalty, envy, spirituality, pride
Orange: enthusiasm, energy, happiness
Yellow: gold, joy, optimism, weakness, light
Brown/Beige: Earth, natural, friendliness, rustic
Pink: love, gratitude, health, joy, young

Needless to say you should do a lot of research before deciding on the color scheme you will use. Make sure you research existing websites in your niche but don’t forgot that sometimes thinking a little outside the box can be a good thing.

Color Contrast

Once you have a better idea of the range of colors you’d like to use, it’s crucial to understand how important contrast is. Take a look at the following examples:

Bad Contrast

As you can see, the text in the examples above is not very readable. For some of you it may look ok, but for some people with color blindness or impaired vision it may be completely impossible to read. Also keep in mind the age of your users. 16 year-olds usually have better vision than people over 50.

Clashing Colors

Back in the Geocities days, a royal blue background with red and yellow text was very common (1998 anyone?). But these days designers need to pay attention to colors that may clash. See the example below:

Clashing

Not good! Now check out the examples below:

No Clashing

Much better, right?

How To Chose A Color Scheme From A Photograph

Sometimes you’ll want to create your own color scheme based on photographs that will appear on your website. Let’s pretend I’m building a website about Siamese fighting fish. Here’s a picture I took from my own Flickr account. At first I see 3 main colors: green, blue and brown.

That’s a good start. Now let’s open up that picture in Photoshop.

Betta Fish

What you can do is take a sample of the image. You can take your sample horizontally (or vertically if you prefer that) like this:

Sample

The sample I took is 1px hight and 550px wide. Of course I reduced the size of the image considerably, no need to do this step with a 4000px wide image.

And then, I simply stretched that selection vertically and got something like this:

Stretched Sample

The results you’ll get will vary but by experimenting a little you should be able to come up with some amazing color schemes.

Online Tools

There’s a lot of web-based tools to help you chose the right color scheme, here are some of my favorites:

Colour Lovers

Adobe Kuler

Color Scheme Designer

Daily Color Scheme

Your Turn Now!

I hope you enjoyed this post! Please share your own tips and tricks with the rest of us

What makes a good Home Page?

by The Web Squeeze on November 30, 2009 in Articles with 9 Comments

I was recently approached by Karinne and asked to do a more detailed and comprehensive write-up of a reply I had left in The Web Squeeze forum to a thread entitled What Should a Good Home Page Contain? I gave the subject some thought and came to the conclusion that although my forum response was good for the user who initially submitted the question, it wasn’t the whole story. Not by a long shot.

Regardless of the nature of your website, your home page remains one of the single most important pages. New visitors will land on this page almost exclusively, unless they are referred to a particular piece of content, so it needs to do its job, and do it well. So we’ve established that your home page is important, but what the heck should be on it?! Well I’m afraid there is no clear cut answer; it depends what kind of site you’ve got.

As with any other page, the layout and content of your home page are determined by the purpose of the site. e-commerce stores are different to iPhone App sites, personal blogs are different to info and tutorial sites. But there are some constants; some features that should be present in one form or another on pretty much all home pages.

1. Clearly identify yourself

So many websites neglect this simple rule. Your home page is like the packaging of a product. By looking at it, the visitor must be able to clearly identify what they are going to find inside. For this reason any home page needs to clearly display not only the name of your site or business but also what it is that you do/sell. This is particularly important if the business doesn’t have an established customer base and isn’t already widely recognised.

To see a great example of this you need look no further than the site for ClearLeft‘s usability testing app, Silverback. Here, the home page gets right down to business. The largest text is the name of the product and the next largest is a brief product description followed by a short, attractive feature list.

Over-crowded, unclear homepages are a complete no-no

On the flip side, you can see just how wrong this can be done by looking at a site for a UK party/event service site; Party Bus. Seen in the image above, I don’t know how to describe the site, particularly the home page, in fewer words than this; It is a complete clusterf***. It shows you prices but no really useful information on what you’re buying, It has the company name/logo but nothing like a sub-heading that says what the company does in any usable fashion. Not only that, there are a bunch of terrible flashing gif images and badly compressed logos straight out of mid 90′s web design hell. I know of this site because I looked into it for an up-coming birthday. Needless to say, the laughable home page made me not use them.

2. Make yourself appear trustworthy and worthwhile.

Your home page will be where a large proportion of new visitors will land. As such, it needs to help them make up their minds whether or not you are a site that can not only be trusted, but one that will be worth their time in browsing.

This is where your skill as a designer needs to shine through. The home page, more than any other page on a site, needs to be perfect. If some text doesn’t float correctly and overlaps another piece of content or something goes wrong when re-sizing the browser window the apparent quality of the whole site takes a dive in the eyes of the visitor. Images should be as free from ugly compression artefacts as possible. Use colour theory combined with common sense to create a home page (indeed, a whole site) in a colour scheme that puts the user’s mind at ease and instills a sense of trust in them. The calm green on the Silverback site I mentioned earlier does this very well.

Choose colours wisely to make the visitor feel at ease.

But it’s not just the design that will make a user want to stay. The copy needs to be just right too. Spelling and grammar errors can make something totally professional look amateur in the blink of an eye. Not only that, the copy needs to be the right tone and brevity. Too long and it will drown out the rest of the content, too short and you risk not telling the visitor enough. More importantly, use language that will make the user want to do whatever it is you want them to do.

Unfortunately there is no hard and fast formula for getting your copy and design right. The best thing you can do is get it critiqued by as broad a test group as possible and draw your conclusions. You can do this right here at The Web Squeeze in the critique forum.

3. Your most up to date content.

In some ways all home pages can benefit from displaying the latest content that the site has to offer. If you sell a product, make sure the newest version or latest releases are mentioned. If you write a blog, display your latest post or an excerpt from it. This isn’t just to make sure your newest releases see a good launch, however. There are other benefits too.

Keeping your homepage up to date with the latest relevant information can have beneficial SEO implications. Not only that, it is the most basic method for making sure that visitors keep coming back to you, thus providing a more steady consistent flow of traffic.

4. Call to Action!

If there is one thing I find myself repeating and repeating to people who ask me to critique their website it’s this one. A call to action is simply one of the most crucial components of any good home page. Think about it like this; Your site has a goal. That goal is to get people to buy your product, read your articles, subscribe to your service, download your app or hire you as a professional. A call to action provides visitors with a one-click route to achieving this goal. Freelance designer, Luke Jones gave me a sneak peek at his fantastic call to action from his up-coming portfolio redesign due out in December, see below:

Luke Jones' new Call to action is not only great looking but very effective

I bet you noticed the two calls to action on the Silverback site… Go on, have another look. The sites that have really embraced the use of a call to action, however are the social networks. Twitter, Facebook, Flickr and pretty much all the others all feature prominent calls to action on their home pages that not only provide the visitor with a quick means of signing up but, rather cleverly, encourages them to do so. Facebook’s call to action is actually a brief version of the signup form.

Your call to action should stand out on your home page and, arguably be the largest single element, even larger than the company logo in some cases. It should be a distinct colour that stands out (Twitter, Facebook and BrightKite all use green when their main colour scheme is blue) and should contain a very brief command such as “Sign up”, “Download now” or “Try FREE for 30 days”.

No matter what the nature of your site is, it is important to identify the goal. Once it is identified it can be translated into an effective call to action. There are very few practices that can increase the number of conversions as much as a good call to action.

5. Test, test and test again.

Ticking the boxes outlined above is only half the battle. In order to ensure a truly successful home page you need to test. Get a wide range of people to view your home page and ask them questions. You can use specialist tools, such as Silverback, to do this or you can simply do it the old fashioned way with a questionnaire. A good cross section of your intended audience will provide you with plenty of clues as to what you need to change, if anything.

Testing is extremely important when building a sucessful home page

While it might be tempting to get a lot of fellow web designers to go over your site and critique it for you, this is often very counter-productive. As web people we see things differently to the average user. We often have a sort of sixth sense for what we’re supposed to be doing on a site where a standard user might not be able to tell. That being the case, we will often miss potential problems that average users might come across. Of course, if your target audience consists of web designers/developers then you obviously have to test on them but for 99% of other sites it’s wise to avoid it.

Arguably, testing is the most important point I have given here. It is the best way of making sure that you have applied the other four points in the right way and the most comprehensive way of gauging the over all success of your home page.