You will first have to know the business that you are designing for and the audience that they want to attract. Research, research, research!

The Logo Design Process

When one creates a logo, they should follow a logo design process to ensure that the final design suits the needs of the clients (not their wants)… Here, below is the usual logo design process in short:

1. Design Brief:

Conduct a questionnaire or interview with the client to get the design brief.

2. Research:

Conduct research focused on the industry itself, on its history, and on its competitors.

3. Reference:

Conduct research into logo designs that have been successful and current styles and trends that may be related to the design brief.

4. Sketching & Conceptualizing:

Develop the logo design concept(s) around the brief and research.

5. Reflection:

Take breaks throughout the design process. This lets your ideas mature and helps you get renewed enthusiasm. Receive feedback.

6. Positioning:

Position yourself as a contractor or build a long lasting relationship. ie. Client tells you what to do OR you guide the client to the best solution. The latter is usually best however personally, I try to find a happy medium.

7. Presentation:

Choose to present only a select few logos to the client or a whole collection. Presenting only the best is recommended.

Clients Needs

Eugene, the business owner of UKE, needed to rebrand & make over their old business identity starting with their logo and then the website.

The Design Brief

After Eugene had filled out a questionnaire I had most of the information that I needed to start on the logo design. There were a few other emails clarifying things but basically all the information was there.
Here is a bit of background information on UKE Chocolate Gift Baskets:
UKE.COM or UKE for short sells unique arrangements of chocolate as an alternative to gift baskets. UKE targets a more upscale market due to the time to make and cost of the product.

After reading through Eugene’s completed logo questionnaire, I found in short that she wanted a logo that portrayed her whole business model and she needed it be: “strong, bold & luxurious” She also requested to have it black or gold however was open to colour choices. Eugene also wanted to have a lion in the logo. The logo also had to be suitable for the web, business cards & t-shirts.

This was the old logo that was to re branded.

Research

Upon receiving the initial 50% deposit for the logo and signed contract agreement, I then started researching what was needed for the project. This included looking up Eugene’s competitors (that she provided & my findings), researching the industry and searching for other logos in the industry, among other things.

Research is a critical stage in the logo design process as this ensures that your logo will differ from the competitors and it also sets a benchmark.

Sketching & Development

The next stage of the project was developing the logo. Developing the logo design concept is where creativity comes into play. Based on the design brief and research conducted, this is where I let my ideas run wild. I brainstormed and sketched down my ideas and then experimented with them on the computer. I also had breaks between these sessions so I could reflect on the designs and have a fresh perspective on the job at hand which is a crucial part of the process when when designing a logo.

The challenge that I had when creating the UKE logo was trying to incorporate a lion into the logo while still making it look luxurious… I got around this problem by brainstorming and word association. My thought process went something like this: Lion > King Of The Jungle > King > Crown > UKE with Crown

Below you will find one of the original pages of sketches that I did for the Ultimate Potential logo… I know I am no Picasso but it is the end result that matters. Find in the bottom right corner where I originally got the idea for the final logo. Remember that there is no such thing as a bad idea, just bad decisions.

Typeface

The first thing I did when experimenting with the logo design was to find the best typeface for the logo. Below you can see just some, of many, different typefaces I tried and circled in red, the typeface chosen (Friz Quadrata, Medium).

This typeface was chosen for its luxurious, traditional looking nature. A great alternative to the much overused Trajan.

Concept Development

After I had found the right typeface (though it is never set in stone) I then experimented with different concepts and layouts of which you can see some below.

Please take note that no colour has been added to any of the designs. This is to ensure the design works in one colour only. This helps on printing costs and makes the logo more adaptable for use over a variety of media.

One should also remember that simplicity in logo design is the key. The simpler a logo is, the more memorable and adaptable it is. In nearly all cases, less is more.

Color

I then experimented with colour. The final dark purple colour was chosen for its royal & luxurious nature… purple is the color of royalty after all.

In the image below you can see the logos from the above image with the same purple background.

Approval & The Logo In Use

When Eugene first contacted me she also wanted her website to be redesigned. Below you can see the redesign of her old website with the new logo in use. The website is currently still in development however should be online soon.

Before | After

Most people still use Microsoft Explorer to browse the internet, but the landscape is definitely changing. As more web users switch to other internet browsers such as Firefox, it’s important to make sure that your website’s functionality and user experience remains intact across multiple browsers.

Browser User Share

Browser statistics on Wikipedia, show that Firefox has gained a large number of new users over the last 3 years:

5 Areas of Compatibility

We use the following categories to assess website performance in terms of browser compatibility:

Accessibility

1 Can users access your content? This is the most important compatibility category because your small business doesn’t really exist if users can’t read what’s on your website.

Critical Functionality

2 Are basic website functions available i.e. navigation, ecommerce, contact forms; etc?

Basic Visual Design

3 Are all visual elements in sync? In many cases website visitors can read the content, and see some graphics but some images and visual web elements don’t line up properly.

Non Critical Functionality

4 Are secondary website feature available i.e. other navigation aids, site maps, links, etc?

Sophisticated Visual Design

5 Does the website look perfect and support certain features on particular browsers that are available on all browsers?

Opportunity Cost

Browser incompatibility can have a negative effect on your small business – a site with compatibility issues can:

Case Study

One of my small business clients experienced browser compatibility issues before re-designing their website earlier this year. When they first started their small business in 2005, they decided to program their website using MS Publisher, which is not compatible with Firefox.

As their business grew and they began to establish a presence online, website browser incompatibility became an issue. Clients, vendors and business associates started commenting on the fact that their website was not completely visible on Firefox.

Before deciding to have a new website designed, they installed Google Analytics on their existing site to gather some data about their visitors, including the type of browser they used. As it turned out, Firefox was being used by 35% of the users entering their site.

The small business owner was concerned that Firefox users connecting to their website would get a bad first impression and never bother contacting them. In addition, their brand image would be at risk if (negative) word of mouth started to circulate.

They decided it was a good investment to redesign their website, using a programmer that guaranteed compatibility across multiple browsers. Recognizing the importance of browser compatibility prevented any permanent damage to their brand and helped continue their positioning as a professional service provider.

Like a ‘mind-boggling’ yet enthralling Pablo Picasso painting, it is essential for websites to create captivating and thought-provoking material to lure an audience and, secure a solid fan base. Naturally, abstract paintings require quite a bit of out-of-the-box thinking when deciphering the artists’ vision, thought and message. This is the kind of allure that a website needs to uphold so that it can become successful over time. By ensuring that users are sufficiently stimulated on a continual basis companies will eventually attain devoted subscribers. This is what every company desires, though the trick is to develop a site that is not clad with complicated design elements (which could affect usability) and bland content that’ll bore browsers to tears, but to establish an effective balance.

Of course, if a website does not contain substance one cannot expect a great response or loyal following, now can you?

According to research, a website that has relevant and informative content can help to position a company as professional in view of the interested and targeted consumer. If a website can clearly and efficiently show a potential customer that the company is knowledgeable and up to date in their field of expertise, the consumer becomes confident and trusting of the services offered. Take into account that a web site is multi-functional entity that serves as a communication tool, thus it plays a central role in improving the impact and image of a brand. Consider your website a personal interaction with both current and potential consumers. Because of this very notion, even the slightest ‘balls-up’ can jeopardize a company’s reputation. Yet, however gripping a website’s content may be design elements have a dramatic, if not crucial impact and contribution to make.

There are a few prominent aspects of a website that is greatly influenced by web design. Keep in mind that web design’s influence on the success of a website runs deep. These are but a few significant and fundamental elements that are magnificently affected by web design.

Usability is key

When a user punches a few keywords on a keyboard, instant and relevant information and a no fuss policy is expected. Instance coffee and fast-foods bears testament to how today’s world has evolved into a fast-paced, ‘I want it now’ society. The Internet is certainly a result of this mindset. Life has become easier, like baking a cake from a box. Most users have a short attention span, when it comes to finding the information that they need and want. Because of this very reason, usability is a vital. As far as making content easy to find, with good web page design, a user should not have to wonder what to do next. Navigation is there for a reason and, makes thing easier and get information to the user ASAP!-which is what you want. The next step should always obvious. The easier it is for customers to find what they are looking for the likelier they’ll buy or inquire.

It’s like being stuck in the queue at customs at the airport, waiting for your turn to be serviced. Frustrating isn’t it?

It’s been noted that too often web sites are focused on looking attractive without considering the user. Many have won prestigious design awards, yet perform extremely poorly and as a result lose customers by the thousands. According to research 50% plus of online sales are lost because visitors aren’t able to navigate through a website and find what they are looking for. Another factor that plays a major role is how long it takes for a website to load. Research states that it makes good sense to ensure that a website loads fast. Studies have shown that if visitor are forced to wait for more than 8-10 seconds for a page to load, clients run a serious risk of losing potential consumers.

As a rule of thumb, every single web page should load in at least 8 seconds or less, preferably on a 56k modem.

Flash has been named as a huge factor when it comes to the usability of a website. However, Flash has become a popular tool in internet marketing and is now widely used across the web. But, there can be drawbacks so it needs to be carefully determined whether or not a site will benefit from its use. One of the benefits of using Flash is the visual appeal of it. It can be used with navigation, by adding interesting visual graphics. Although, one disadvantage about using Flash is that not all internet browsers have a Flash player moreover, not all users may want to download it. Needless to say, Flash technology tends to discourage usability for very apparent reasons. Flash can cause bad design, break the Web’s fundamental interaction style and it also consumes resources that would be better spent enhancing a site’s core value. Approximately 99 % of the time, the presence of Flash on a website hampers the usability and distracts the attention from the site’s core value and purpose.

Perhaps, Web designers interested in enhancing usability and their site’s overall business presence should use Flash sparingly?

By focusing on improving usability, web designers are able to keep users interested, for the long haul.

Our lives are filled with color. What would the life be like if we lived ‘black and white’ lives? Color adds interest and can determine whether a website is fresh and alive looking or it can also create a dull and dreary image, which is not what any client wants. In the world of web design, bad color schemes can make a site look unfriendly, amateurish, and inaccessible. So, it comes as no surprise that over 80% of visual information is related to color. There are various reactions to color which are instinctual and cross universal and cultural boundaries. According to a 1997 survey by Cooper Marketing Group, Oak Park, IL, power is represented by the color scarlet red for 25% of respondents, black for 17% and bright violet blue for 13%. More than 55% of those surveyed chose one of these three colors out of 100 colors. Fragility was most represented by pale pink (27%), white (9%), and pale lavender (9%).

Note that colors can be perceived by people as different moods and emotions. When designing a site one should consider the mood that needs to be portrayed. These moods can vary from person to person, depending on their life experiences. Web design which achieves successful marketing results is sensitive to the cultural, instinctual and iconic meanings of color in relation to the product or service being promoted. More importantly, it also considers the cultural backgrounds and gender of the targeted clientele. Avoiding the extremes of sheer garishness and boredom, effective design displays symphonic color arrangements of shades, tints, tones and complementarities to tantalise and maintain interest. Adding textures too can alter colors – a roughly textured surface makes a color seem darker, while a smooth surface lightens the same color.

Although, it also stands a designer in good stead to know what colors signify. Different shades of colors work well in different situations. For example, using very saturated colors all the time is not always good, by using shades that can make certain things stand out more or less than others. For example, it would be good to have elements in the main content stand out more than in the sidebar, because that is where you want to draw attention. When making sites you have to use your common sense when picking colors. For example, if you were making a business site you wouldn’t use bright pink, because this would look childish and unprofessional. Another example, if you were making a laser eye clinic site, you wouldn’t use red as this would imply danger and blood. Scary.

These days computers support millions of colors (16bit or 32bit) meaning the compatible colors between systems have increased. The new palette, based on 16bit systems, is the web smart palette which supports 4096 web smart colors. When changing colors you must ensure the contrast between the color and the text on it is enough for people with poor eyesight to see, or at least offer a high contrast version. There are sites with grey text on slightly greyer background making it very hard to read, this is bad accessibility wise. Also note some colors can be annoying together, for example some people have difficulty looking at green and red together, green text on red would be a very bad idea. In most instances, finer details are forgotten and falls by the wayside – consider color blind people on the web, ensure they have options to see a version they can actually read.

The Impact of Web Design on Conversion Rate

A simple description of conversion on the web reads as follows; Conversion refers to the form that an interested party fills out in order to buy a product from a company. A Web Site Visitor Conversion occurs when a user takes key action to do so. Conversions can be macro (the most significant action) or micro (one of the many actions that precede the macro conversion). For most sites, conversions are what can be directly or indirectly traced to a financial return. Spending money on search engine marketing or online advertising might be a waste of your resources if a site is a poor converter. Inevitably, conversion determines website profitability.
Once again it is essential to make a web site to easy to use. If not the less chance there’ll be of people buying.

Interestingly enough, making a site accessible is a legal obligation in many countries. Inaccessibility can affect sales, as visitors will find the site impossible to use and go elsewhere. Apparently a typical inaccessible site could be losing 5% of potential sales because of this. Many designers only pay attention to Internet Explorer. The justification for this is usually that 99% of the site’s users use IE. It never seems to occur to the designers that perhaps the reason they have so few visitors with other browsers is that their site is fundamentally broken – it doesn’t work in anything else.

Percentages of people not using IE varies from site to site.

Approximately 80-85% of web users are using IE on Windows, which means that an average site that does not work in anything else could stand to lose 15-20% of sales. Visibility is also an important factor. For instance, when a user decides to buy a product, they add it to a shopping basket. How do they add it? By clicking a button or link. But what happens when they can’t see the button? They go elsewhere. There are plenty of sites out there with buttons that are too subtle, or don’t say the right thing, or are hidden away at the bottom of the page. “Add” is considered an ineffective button text. “Buy” is fairly successful. “Add xxx To Your Basket” is great. “Add xxx to Your Basket” in big letters on a big, bright button, near the top of the page, is even better. Calls to action, like this, don’t have to be bland but they must be obvious and clear.

Sites which are just call to action according to research could earn a 1% to 30% increase in sales as a result.

The impact the web design has on SEO (Search Engine Optimization)

It is a known that having a Web site rank well in search engine results for searches on specific keywords/phrases. If a Web site doesn’t have a page appearing in the top 10 search engine result positions (SERPs) the chances of someone clicking on the listing, and actually visiting the site, will drop dramatically. Optimizing a site and content for a search engine, for a better ranking in SERPs, is known as Search Engine Optimization (SEO), yet many Web developers/designers either don’t take time to code a site properly or don’t know how to do proper SEO. The basics of code optimization are just sound HTML coding practices; when followed, they go a long way toward SEO. There is a lot you can do to optimize your Web site for search engines from the code level.

The first rule of SEO is not to design your site in such a way that the code prevents a spider from being able to index it. This means avoiding pages which are 100% graphics and no text, such as pages that contain all images, or are Flash-only. Furthermore, if the first thing a user encounters is a log-in page, before being able to see the site’s content, then that’s what a spider will see and it won’t go any further, either. If you’re planning to build a Web site entirely in Flash, Don’t. If you have no choice, then read my previous column, Search Engine Optimization and Non-HTML Sites. To find out what a spider sees on your site, run a spider simulator on a given page. The simulator will show you what text the spider sees and what links it finds. There are many good ones on the market at various prices. If you’re looking for something that’s free, I’d suggest Search Engine Spider Simulator.

There’s certainly plenty of room for further impact, depending on the subject matter, in regards to information architecture, copy writing, interface coding as part of web design or the layer of graphic design (usability). Web design encourages confidence and trust in the site as it is able to look legitimate and “professional”, depending on the design elements chosen. Web design can maintain a clear, consistent and unified message and operation. Obvious as it may be, a good site should be memorable. Being memorable, and making sure you stick in the user’s mind, is dependent on a lot of factors. It’s no good if your visitors remember why you are great but don’t remember your name.

Evidently, web design is much more than just a pretty picture.

Well, it might not happen exactly like that, but a good design that brings in more visitors is definitely going to have some of that trickle into your sales.

Every website should have a call to action, a response you want users to complete. But, how do you encourage users to act? Our job is to help you create this encouragement…

Having an effective call to action is an essential part of any website. A call to action is not just limited to e-commerce sites. Every website should have an objective it wants users to complete whether it is filling in a contact form, signup for a newsletter or volunteering their time.

A call to action provides…

1. Lay the groundwork

Before a user is willing to complete a call to action they have to recognise the need. Infomercials do this very well. Before they ask people to respond, they first identify a problem and present a product that solves that problem.

You also need to communicate the benefits of responding. What will the user get out of completing the call to action?

Take for example the VoIP service Skype. Immediately above their call to action (a download button) they have the following text:

“Make calls from your computer — free to other people on Skype and cheap to phones and mobiles around the world.”

They clearly explain what the user will get by downloading Skype.

2. Offer a little extra

Sometimes you may have to sweeten the deal to encourage users to complete a call to action.

Incentives could include discounts, entry into a competition or a free gift. This is the approach Barack Obama used on his fund raising website. If you made a donation of $30 or more you got a free t-shirt.

Of course the beauty of this offer was that not only did he pursued you to donate, he also turned you into an advertising billboard.

3. Have a small number of distinct actions

It is also important to be focused in your calls to action. Too many and the user becomes overwhelmed. Studies in supermarkets have shown that if the shopper is presented with too many varieties they are less likely to make a purchase.

By limiting the number of choices a user has to make we reduce the amount of mental effort. Effectively you guide the user around the site step by step.

The number of appropriate actions will vary from site to site. However, it is not so much the number of actions as the distinctiveness of each.

Take for example pbwiki.com. They have three calls to action:

4. Use active urgent language

A call to action should clearly tell users what you want them to do. They should include active words such as:

To create a sense of urgency and a need to act now, these words can be used alongside phrases such as:

5. Get the position right

Another important factor is the position of your call to action on the page. Ideally it should be placed high on the page and in the central column.

picsengine.com does this well placing their ‘see in action’ centrally on the page above the fold.

6. Use white space

It is not just the position of your call to action that matters. It is also the space around it. The more space around a call to action the more attention is drawn to it. Clutter up your call to action with surrounding content and it will be lost in the overall noise of the page.

PlanHQ does an excellent job of focusing users of their calls to action by surrounding them with a lot of empty space.

7. Use an alternative color

Colour is an effective way of drawing attention to elements, especially if the rest of the site has a fairly limited palette.

Things (the GTD application for the mac) does this expertly on their website. While the rest of their site is predominately muted blues and grey, their calls to action are highlighted orange. This extreme contrast leaves you in no doubt as to the next thing you should do.

Of course never rely solely on color because many users are colour blind and will not see the contrast.

8. Make it big

As web designers we often get annoyed with clients who ask us to make things bigger. It is certainly true that size isn’t everything. We have already established that position, color and white space are equally important.

However it cannot be denied that size does play a large part. The bigger your call to action, the more chance it will be noticed.

Mozilla have certainly taken this approach to heart on the firefox homepage where their download link dominates the page.

9. Have a call to action on every page

A call to action should not just be limited to the homepage. Every page of your site should have some form of call to action that leads the user on. If the user reaches a dead-end they will leave without responding to your call.

Your call to action does not need to be the same for each page. Instead you can use smaller actions that lead the user towards your ultimate goal.

37 Signals understand the importance of having a call to action on each page. At the foot of every page of their Basecamp website they clearly display links to their tour and signup pages.

10. Carry the call through

Finally, consider what happens when a user does respond to your call to action. The rest of the process needs to be as carefully thought through as the call to action itself.

One particular word of warning – if you require users to provide personal data about themselves, resist the temptation to collect unnecessary information.

Marketing people in particular like to build up demographic information. Although I can appreciate the value of this, it brings a danger users will drop out of the process.

WordPress.com is an excellent example of how to minimise the amount of data collected. They only ask for the minimal information required to setup a blog.

Conclusions

An effective call to action is the linchpin of a successful site and involves drawing together best practice in usability, creative visual design and powerful copy writing.

However, if it is done right it can generate real measurable return on investment and in the current economic climate that is what we all want.