Category Archives: Web Design

4 reasons businesses need to prioritise user experience

Social Media Web Design

Last year, user experience became the main priority for online businesses even more so than before. Among them were online giants Facebook and Google, who took major steps to improve the user experience of their websites. For Facebook this meant taking steps to prevent or penalise misleading ‘click-bait’ headlines and for Google it meant a crack down on ‘black-hat’ or misleading search engine optimisations (SEO). Continue reading

Published by:

Web Design Essentials: Constraints

Web Design

When designing a website you have to consider the end user. Constraints can be defined as the practice of limiting the users actions on a website.

Limiting the users actions on a website increase the usability of the interface be reducing the likelihood of them encountering an error.

There are two types of Constraints. Physical Constraints decrease the responsiveness of control which prevents any undesired actions. Psychological Constraints will guide the user on a subconscious level making your website more intuitive. Continue reading

Published by:

Turning Heads – Utilising Psychology in Web Design

Web Design

With the online landscape as crowded as it’s ever been, competition to stand out, get recognised, properly engage an audience and keep them coming back, is stronger than ever. But without the bottomless pockets of mega brands who can afford to continually experiment with the latest web design technologies making their sites able to sing and dance as they wish, are there ways of having a similarly dramatic effect simply by applying some basic psychological principles?

Why adopt psychology-based Design

When designing for the web, considering the psychological drives of a target audience is not commonly a high priority. It can however have surprisingly positive effects on how users will utilise a website, how engaged they will become and how frequently they will respond to calls-to-action.

By paying attention to how visitors will naturally wish to engage with information and providing them with an online environment which appeals to their conscious, and sometimes unconscious, inclinations, they will be happier and far more likely to perform the actions you want them to, whether that’s getting in touch with you, buying your product, or referring their friends. Continue reading

Published by:

Six things your website needs to get right!

Web Design

The Good, The Bad and The Ugly

Here at Webeden I have seen The Good, The Bad and The Ugly of websites. While a large number of customers use Webeden to build personal sites, the majority of our customers use Webeden to build sites for their businesses. If your site is for a business, large or small, there are a number of things you should keep in mind when building your site.

Here is a check list of simple changes you can make to your site with minimum effort but maximum impact. Continue reading

Published by:

See what your website looks like in all screen sizes and resolutions

Web Design

A couple of months ago we had a guest blog from Alison Cross of Alisoncross4webs that talked about how to put The Gold above the Fold.


Newspaper Talk

This phrase is borrowed from Newspaper publishing. It means that if you have something really important that you want everyone to notice, make sure you put it high up on the page, above the place where people fold  their newspaper.

Website Talk

When this applies to building a website, the ‘fold’ is the lowest part on the page that people can see without scrolling.

As many people do not scroll down web pages, it’s important to put your most important information (your gold) above this point (the fold).

Screen Sizes & Resolutions

That’s all very well, but there is a problem: There are a lot of different sized screens with different resolutions. And some people have toolbars installed too. This means that some users can see more of your website than others. And that means that the fold can fall in many different places.

Finding the Fold

So how do you find out where this fold is? Thanks to a handy little visualisation tool from Google, its now possible to accurately see where the fold is for your website for people using different screens.

The Google Browser Size tool lets you understand how everyone sees your website. For any point on the screen, the tool lets you know what percentage of people can see it without scrolling.

Here’s an image of what it looks like:

The tool isn’t perfect. It assumes that your website is left hand justified rather than centre justified (like most WebEden websites are). Nevertheless, when you’re making a website you can use the tool to make sure the important stuff can be seen by everyone.

Try using the browser size tool on your website and leave us a comment below.

Published by:

Four great (and free) online tools to help you build a website

Creative Ideas Web Design

A few months ago we brought you news of a free online tool that gives you feedback on your website design. 5-second test shows your site to volunteers for 5 seconds, and then asks them to write down what they think your website is all about.

You can use those comments to improve your website, and make it easier for users to understand and navigate.

That post has been so popular that we’ve pulled together three more free online tools to help you in your website building.

Paint.net

Paint.net is free tool that lets you create or edit images, and then save them for use on your website. It’s like a ‘photoshop lite’ for those of us with out the cash (or the patience) for the full blown software.

With Paint.net you can build up your images in layers, adding complexity and texture. You can manipulate each individual layer at any time. Once you’re happy with your image you can flatten it, and then save it many different files types.

Zamzar.com

On Zamzar.com you can convert almost any file type to any other file type. Have you got an excel file that you want to turn into a PDF? Or what about a PDF that you want to turn into Word so that you can edit it? Zamzar can do the lot.

Zamzar can also convert a wide rang of music, video, image and compressed files.

Here’s just a few of the extensions that Zamzar can deal with: .ods; .odt; .ppt; .pptx; .ps; .pub; .rtf; .docx; .doc; .xls; .xlsx; .cvs; .odp;  .wpd; .wps… the list goes on.

Zamzar can also convert iTunes files to mp3.

The other cool thing about Zamzar is that you can add a button to your browser toolbar that lets you click on Youtube videos, convert and save them.

Imagemerger.net

One side effect in the digital-camera-megapixel-race is that the files that modern digital cameras produce are now pretty massive. Do you ever have large photos that take an age to download? Ones that you could blow up to the size of a poster? Would be useful to cut them down to size, possibly for use on your website?

With Imagemerger.net/resize.php you can do just that. You can specify the % reduction you want to apply to your image.

Imagemerer.net also has some other cool image manipulation tools – one which blends two photos together.

ColorZilla

Colorzilla is a free extension for the Firefox browser that can help you to choose the right colour for all the elements of your website.

You can download Colorzilla from the Firefox website. It has a colour picker that sits in the bottom left hand corner of your browser window. If you want to know what the RGB colour of anything on the web, simply click the colour picker and then click on the website that you want to know the colour of.

Colorzilla then displays the RGB and Hex values of that colour.

Check these free tools out and let us know what you think.

Do you know any free online tools that you can share?

Published by:

Turn browsers into buyers with the right buttons

Web Design

We consistently discuss how to get more visitors to your website. We talk about using search engines, social networks, and of course there’s even offline advertising.

But all the website visitors in the world are pretty pointless if no-one buys anything (or takes any other desired action) once they get to your website.

Whilst there are hundreds of different design factors that can influence whether or not someone buys from you, an often overlooked factor is how and where and what type of ‘buy now’ buttons you use.

A ‘buy now’ or call-to-action button should act like a magnet, drawing the visitor’s eye. It should be clear, easy to find, and stand out even on a busy page. Varying how you use these on the page will hugely influence your website conversion rate. Here are a few things to think about when it comes to buttons:

1. Try different colours

There’s an easy rule to follow here: Use strong colours on important buttons, neutral colours on those less so.

One thing to be wary of though, don’t use too many different coloured buttons. You still need to keep to your brand colours otherwise your website can end up looking like carnival poster.

2. Try Varying the Size

Another very simple rule. Use a big button for important actions, small buttons for less important ones.

3. Try varying the shape

You can use shape to change the emphasis of the button, and also hint at its function:
Triangular buttons often contain links to more information.
Circular buttons, especially when small, usually perform a basic function such as closing a document or application.
Rectangular buttons are most commonly used for a call-to-action. Due to this consistency across web design, make sure your important buttons are rectangular. Use other shapes elsewhere.

4. Try to varying the Style

Although you want to stick to your website colours and style guidelines, you should still have enough flexibility to make quite big style changes.

A good and easy way to distinguish a call-to-action button is to make it a block of colour with the text in white. In the example below, both bits of text are the same size. You’re left in little doubt which is the call to action button.

Alternatively, you might like to try placing a symbol or an arrow next to your call to action button. This is what we do on the WebEden homepage to encourage people to start building a website

Last of all, don’t make your call-to-action buttons just text links without a highlighted background. Text links are almost always used to just offer more information.

5. Try to vary the placement

Where your button appears on the page will hugely influence how likely it is to be clicked.

In a page with lots of products make sure the buy now button is immediately next to the product that it is associated with. It should also be on the right, at the bottom corner of the product.

If you have a general page that with a general call to action, make sure that the button is on the right hand side, usually lower down the page.

If users have to scroll down the page, make sure you have a visible buy now button on the right hand side that they can see without scrolling. If you need to, repeat the button lower down the page too.

And that’s it

Varying the way your buttons look and how they appear on the page can hugely influence whether or not your website visitors will click on them. The only way to find out what works best for your website is to try out some different combinations.

Any comments or experiences about buttons you’d like to share? Leave us a comment below.

Published by: