Category Archives: Creative Ideas

Create a word picture for your website

Creative Technologies

Do you have trouble finding images for your website? Are you able to find a good matching image for your carefully crafted text?

If you’re anything like me, it’s a real challenge and part of the challenge is in the choice.

You can choose an image that you have taken, but the chances are that it lacks the right lighting and setting of a professional shot. You could also resort to searching on Google images, but of course run the risk of infringing someone else’s copyright. And then there’s buying images – I like fotolia.com – but you may not want to shell out each time.

Wordle is a fun way to create a relevant image without actually resorting to an image. This online service creates a word-based masterpiece from a paragraph of text on your (or any) web page.

You can choose from a basic cloud image popular on WordPress blogs, or something a little more artistic. Just go to Wordle.net/create and paste your text into the box.

Here’s a something made from the text of this post

Take a look and share with us what your image looks like!


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:

6 essential steps to design the perfect logo

Logos

Getting the right logo is an important part of designing a website. And logos aren’t just limited to the web, but can of course be used in printed material too. This week’s guest blog comes from Vicki Willingham who runs VictoriaAnnDesign.com. It’s all about the steps she takes when designing a logo.

6 essential steps to design the perfect logo

I’ve been designing logos for a few years now. It started off as a hobby, and now I’m lucky enough to have turned it into work. Whenever someone asks me to design a new logo for them I always stick to the following steps.

1. The Brief
This bit is about asking the client the right questions. I’ll make sure I have all the details I need from the client including: style; preferred colours; orientation; and the message they want their logo convey.

2. Write it all Down
I’m someone who likes to think on paper, so I write down everything that comes to mind about the company and scribble thoughts and ideas around that.  For example, if I were designing a logo for a financial company I might write jot down the words money, wealth, success, banking, saving…then continue with further words relating to each.

3. Start Drawing
Once I have my ideas and thoughts down in writing I begin to scribble them out as images.    I keep drawing until I find an idea I’m happy with and can develop into a logo.  I’ll usually also jot down colour ideas.

4. Get it on the Mac
Now I have my logo draft/s I’ll hop onto the laptop and get the idea onto the screen.  Depending on what I’m doing, I might also be tracing the draft using a pen tablet.  I’ll usually come up with a multitude of styles and variations and I’ll disregard probably 80% of those and work further on the 20% I choose to keep.

It takes time
This part of the process can take any time from a few hours to a week.  Usually, if I have done the previous part of sketching out ideas properly, this shouldn’t take all that long.

It takes colour

I’ll usually design in black first to check the shapes come together well, before I apply colour.  As well as designs looking fab in colour, it’s also important that logos work in black – it can look a mess on a photocopied corporate header otherwise!  There are a few exceptions to this, I’m sometimes asked to make a logo that will only be used online for web based companies and that won’t be used on print at all.  In that case, things are clearly a bit different and I feel happy to throw colour in from the start.

5. Get feedback from the client
The client is sent a copy of the logo to view.  At this point I encourage revisions to ensure we’re all happy when the project is completed.  There’s no telling how long this can take, but if we both understand the requirements at the beginning then it really does help.

6. Send the final version
So, when the logo is done, the files are ready and I’ll send them over to the client.  Typically, I will provide an ai file; pdf; small jpg; large jpg; transparent png; opaque png; gif and a tiff.

So that’s about it.
The process looks really clear and straight forward, but life isn’t always like that. There are always some unforseen bits and pieces that get thrown into the works. But that’s the basic outline.

If you’re designing a logo for your own website or someone else, stick to these steps and your life should be a bit easier.

I’d be interested to hear from others and how they do things – please leave a comment below.

About Vicki Willingham
Vicki is a Macbook Pro aficionado who is expert in logo design and corporate identify. For more information, visit her website.

Published by:

Is it time to Ban the Banner?

Banners

If you’re reading an article online, especially on a newspaper website, there will be a block of colour at the top of the page with an advertisement on in. This block – usually 468 x 60 pixels but now more frequently 728 x 90 pixels – is called a ‘banner advert’, and they are the bedrock of Internet advertising. And there’s a lot of them: in the UK alone, banner adverts were ‘served’ onto a web page over 54 billion times in the last month.

The more banners there are, and the more familiar we are with them, the more we ignore them. According to research by Harris Interactive published this month, 46% of users say they ignore banner ads entirely. A mere 1% say they find banners useful in making purchasing decisions.

If you contrast this with how people respond to adverts placed in traditional media: 37% say they are influenced by TV ads, and 17% say that Newspaper ads help them decide what to buy.

This lack of interest amoung consumers in banner advertising is also being played out in the relative ‘cost’ of them. Banner Advertising is traditionally charged as a cost per thousand impressions (CPM), and rates have fallen by two thirds in the last 12 months.

This drop in cost comes at a time when advertisers are shifting their budget towards more accountable online marketing channels search as search and affiliates.

So what’s wrong with banners? Why don’t we like them, and why do we take less and less interest them?

Well first of all it might be a longevity issue. Banner adverts have been around almost since the start of the Internet – a good 15 years or so. It has been the de facto form of online advertising, and therefore the one that most of us have been exposed to. So maybe we’ve seen so many of them now we are no longer affected by them. We are ‘banner blind’.

And then there is the size issue. Browsers – the software that you use to look at websites – used to show a much smaller space on a website. But now most of us use browsers over 1000 pixels wide, so banners are looking increasingly small.

There is also the regularity of them. OK, some new sizes have come along: apart from the sizes above, there are buttons (120 x 60 or 120 x 120); ‘skyscrapers’ that run down the side of pages (usually 120 x 60 or 160 x 60); or MPUs that sit in the middle of pages (250 x 250). But because we have also quickly become familiar with these other sizes, we’ve become blind to them too. It’s easy to look past them in a way that you can’t look past a full page ad in the paper.

And there’s a placement issue. Publishers want to place editorial all best places on a page, and banner adverts – whatever their size – are relegated to the margins where they’re easy to ignore.

So what is the alternative for advertisers? Well there’s no doubt that online video offers some ideas. Publishers are in many cases able to charge money for ‘pre-roll’ adverts on online video. These are adverts that must been viewed before the user can see the actual content.

And there are other ‘creative’ advertising options. The overlay – when an advert expands over the editorial you’re trying to read – is an effective if intrusive way of getting a readers’ attention.

The issue is: if we all want to continue to get free editorial and content, then publishers will have to ‘sell’ our eyeballs to advertisers. And if we stop responding to – or even seeing- those adverts, then they will need to find other ways to raise money. And that might mean charging us to read their website.

Do you buy banner adverts to promote your Sitebuilder website? Do you sell banners on your website? Are you turned off by banners, or do you think they’re a necessary part of the Internet? Leave us a comment below.

Published by: