The world today is constantly changing. It seems that every week there is some sort of new gadget, gizmo or technology that is changing the way we do things, especially for business owners. Over the last few years it has almost become a necessity for many businesses to have a company website in order to compete.

Being involved heavily in design over the last few years, I have seen thousands of websites that companies use to promote their business and there is one thing that I have noticed. No matter how much technology changes, the design principles that make a great website stay the same. There are many sites that use all  of the greatest technology available but don’t come across as being professional because they don’t “look good.”  When it comes to marketing your company, design matters.

So how can you make your website look good? This is a very broad question and there are probably thousands of articles written on this subject. I don’t intend to completely answer this question, but there are some basic things that can be done that will dramatically improve the look of a website. In order to illustrate some of these things, I am going to redesign a website step by step.

So here it is.  Not a very pretty website, is it? I am still surprised how many websites there are that look similar to this. 

Don’t worry, I didn’t grab this website off of the Internet to make fun of it. This is something that I designed as an example. As you can probably tell, there are a few things that need to be done to make this website into an effective marketing tool.

Color

Color is a very powerful tool. It can be used to create interest, show emphasis and create unity. But it can also cause problems if not used properly. If too many colors are used, it can ruin a design. There needs to be unity. In this example, there are many colors being used, but they just don’t relate to each other. So the first step I took was to change the colors so they relate to the logo. The logo is part of the brand of the company, so the design of the website needs to start with the logo.

Typography

Typography is one of the most overlooked and underrated design principles. Typography itself is an art form. It is one of the quickest ways to tell if something was professionally designed.

This example does not have good typography, so we are going to fix that. Sometimes it can be a temptation to use too many different fonts to create emphasis on different things. Pretty soon, everything is emphasized–which makes nothing is emphasized–and it just looks like a jumbled mess. In this example, there are only two fonts used which can be good, but the header font doesn’t relate at all to the company. So let’s change that.

Another problem I see is the width of the bottom paragraph. It’s not good to make the paragraphs too wide because it makes it difficult on the reader to find their place when they read multiple lines. Also, it just doesn’t look very good.

Something that many people don’t notice is negative space when it relates to type. This is the empty space around the type. In the example, the negative space around the type needs a little breathing room and also some continuity to it surrounding elements.

Grid

This website as it is doesn’t have much of a grid system. Things are not lining up like they should. In designing a grid, the use of the thirds rule can be helpful. For some reason, the brain likes odd numbers in design. (1, 3, 5, etc.) For the main part of the grid, let’s divide it into three sections. I will put the picture in the right section and the main body of text in the left two sections of the grid.

Photo Relationships

The relationship your photos have in your website can really make your website pop. There are many ways to do this, but the basic idea is to pay special attention to the photos in your site and make them relate to the elements in your design in a unique way. For this design, I did some Photoshop work and cut out the photo a little bit to give it some interest. This isn’t a good idea for the header if you plan on switching out photos, but since I plan on making this one static, I went ahead and did it.

Using Elements From the Logo to Convey the Brand

The purpose of a logo is oftentimes misunderstood. Logos are not just an icon to tell what the company does. They are the face of the company. They convey what the company is, not just what it sells. They are not the brand, they visually convey the brand. Since the logo is in line with the brand, the website needs to reflect elements of the logo. It can be very effective to take elements from the logo and repeat them through the design. This can be done with color, shape, typography, etc. For the example, I took elements from the logo and created a navigation that is a little more interesting. I also took the right angle shapes and added them to the header to create interest.

Using Hierarchy

We are almost there, but not quite. We are missing some hierarchy. Right now there is a big picture of a house, which is the first thing you see. After that, everything else has similar visual weight. We want the viewer of our website to be led in a path by the visual elements. We want them to see the header, the logo and the content in order of most important to least important.

For the final touches of the website, I gave the main content some good visual weight. With the secondary paragraph, I made the heading a little smaller and put it lower to make it less important. I added a quote and another photo to give it some visual interest, but made it secondary to the main photo. I also created a color sidebar. Now the user’s eye will be led from the header, down through the sidebar and lower photo, and back around to the top.

So there it is. With a few adjustments and design tools, we turned a website that was not visually interesting and looked unprofessional into a website that has a good hierarchy and follows good design principles that looks very professional.

Even though technology changes and artistic mediums evolve, basic design principles stay the same and can be followed to create materials that are both visually interesting and enhance their functional purpose.

John Morrey has been working as a graphic designer for Logoworks for the past four years. He graduated with a BFA in graphic design from Utah State University and currently resides in Herriman, UT. He has a passion for art and design, and his work has been featured in Communication Arts and the AIGA 100 show. He started his career in fine art, and still enjoys oil painting on the side when he gets the chance.

It goes without saying that to compete in today’s global workplace, your business needs a website. A good website. But a good website is more than your logo and some pretty photos surrounded by copy. A good website has most or all of the following characteristics:

1. Communication

Above all, a good website communicates your brand message in a clear concise manner. It lets people know who you are, what you do, and what you are about. It shows them the easiest way to contact and locate you.

Needless to say, brevity, grammar and spelling count. Not sure what to say? When in doubt, consider hiring a seasoned copywriter…not everyone can be Ernest Hemingway.

2. A Strong Call-To-Action

The most effective website designs focus on a single, clear call-to-action. Do you want visitors to buy or do something? Make it easy for them. Put it on the homepage. Don’t bury your main offering deep inside the “Products & Services” page. Bonus tip: Keep the call-to-action higher up on the page to avoid scrolling.

3. Instills Confidence

People really do judge books by their covers. And like it or not, visitors will judge the credibility of your business based on your site design. Unconciously, our brains process design elements such as layout, alignment, symmetry, typography, color, and consistency. And don’t be afraid of white space. Adequate use of white space has been shown to improve reading comprehension by 20%!

Remember, a great site may not necessarily close the deal, but a poor website design will lose one.

4. Personality

When in doubt, humanize your site. Given the choice, people prefer to interact with people, not faceless businesses. Invest in professional, high-quality photography of people, particularly happy, smiling ones. Let visitors know there is a real, warm-blooded, human being on the other end of the line. Just because it’s business, doesn’t mean it has to be boring!

Don’t forget: Strong website designs appropriately reflect the needs and values of your target audience. If possible, avoid culturally-specific phrases and references which may confuse, or even alienate, potential clients.

In Conclusion

So there you have it. These 5 Earmarks of Effective Website Design will help your website design go a long way towards improving your overall business image.

And who knows, it might even get you a sale or two!

Randy Stuart is a Senior Graphic Designer at Logoworks by HP, with over 15 years experience creating eye-catching print and online media. Trained in fine art painting and commercial illustration, he brings a discerning eye to every project. When not designing, he can be found coveting his next purchase at Cabella’s or working on his detective novel.

We have collected the top 32 Logos of 2010. Tell us what logos you feel are the best of the best…please take a minute and vote for your top 5. We will then reveal the results in the May issue of Inside Small Business Newsletter! Click the button below to vote.

Charlie Sheen is a self-proclaimed winner, and since everyone loves winners, we’ve decided to honor his “winningness” with a custom illustration.

We can make your business a winner too, check out our award winning logo gallery.

Over the past several years it has been my pleasure to hire and work with many talented logo designers from around the world. After reviewing hundreds of design portfolios and critiquing thousands of logo designs, I’ve come to respect the amount of thought, creativity, and artistic talent it takes to execute a well-designed logo. To represent a company or idea in a single graphical symbol is no small undertaking!

If you are a company looking to improve your logo, or a designer looking to improve your portfolio, consider the following key attributes found in great logo designs:

• Simple and clean. “Less is more” is definitely a good rule of thumb when it comes to logo design. Logos with many colors, gradients, shadows, effects, or illustrative clutter and detail generally scream “unprofessional,” “indecisive” and “trendy.”

Remember that a great logo design will withstand the test of time if it is visually simple without sacrificing creativity. “Simple” is the operative word here: avoid logos that are “plain,” without creativity, or that lack unique visual merit.

Interestingly enough, the more simple logos out there tend to do better when it comes to branding and sales. Why? Because the logo points to the brand and company it represents rather than distracting from it. The logo is complementary. It enhances. It communicates and symbolizes clearly as opposed to comprehensively.

• Creative, unique, and memorable. As mentioned, a great logo design will be simplistically beautiful, but not plain. The “simple” refers to the artistic style and execution of the logo; the “plain” is what you want to avoid when it comes to the creative idea behind the design. No matter what kind of emotion you are trying to convey in your logo design, it’s important that the design itself reflects custom work and creative thought.

Another good descriptive word that fits this category is “conceptual.” If the logo symbolizes some kind of creative concept, or perhaps merges multiple ideas into one symbolic meaning, then the logo carries a greater depth of brand equity. It becomes more unique to that company, more memorable, and therefore more marketable. But remember, a well-designed logo can only enhance your overall marketing plan; it doesn’t necessarily replace it.

• Great typography. Otherwise awesome logo designs that fail to use great typography are nothing more than missed opportunities. If you’re looking for a logo designer, you should find one that takes pride in the details, and typography is all about the details. Picking a font style that matches the logo icon style, balancing the typography with the icon, customizing the type, adjusting the kerning (spacing) between letters, manipulating the way the letterforms play off each other, etc., etc… It’s a lot to think about when defining it, and certainly takes more work and effort than simply typing the company name out and calling it good.

• Functional use. No matter how awesome the logo design is, it’s important that the logo is functional, versatile, and practical for the business it represents. Can the logo be reproduced in a one-color version? Will it embroider and fax well? Will it appear clear when printed small on a business card? Does it function for the market niche and does it properly represent the business?

Logo design samples

Now that we’ve identified some aspects of great logo design, let’s look at some logos! Rather than showing off logos we are all familiar with, I thought I’d show off some of the logo designs from the designers I have worked with over the past several years. See if you can identify some of the important logo design attributes that were described earlier.

Le Pecheur

The words that first come to mind when I look at this logo are “custom,” “creativity,” and “execution.” The designer managed to go the extra mile by taking the company name and creating a custom logotype by forming a fish with the letterforms. Definitely not clipart! It’s also evident that the designer took the necessary time to properly execute his great idea. It’s hard to find a tangent or a misplaced stroke anywhere. So, how do you identify a great logo? It uses a unique custom design, it reflects a creative or conceptual idea, and it is executed with the proper artistic techniques and typography.

Buzz Cart

Matching the typography (text) with the icon is a mark of a great logo, which is done here. For many designers, the tendency is to devote 90% of the time towards designing the icon, and then quickly look for a font to finish it off. Want to improve your logo design? Spend more time on your typography by matching the font style with the icon style. I also like how this logo is simple and straightforward. Many designers mistake “plain” as being “simple.” A simple logo is good if its simplicity still reflects creativity and branding.

Elephant Ant Media

Which do you see first? An elephant? Ants? Logos that require a second read show great conceptual thinking and creativity. When a design has layered ideas, it has a greater affect on the viewer because of the “Ah ha!” moment. Creative logos will often do this to a certain degree: they take two elements or ideas and meld them into one well-executed concept. The only thing I would change on this logo is eliminating the “LLC.” Legally, adding “LLC” or “Inc.” to a design is only required in company documentation, and should not be a part of the logo if at all possible.

Arcadia Mailbox

The genius behind this design is in the combining of two ordinary concepts into one creative and cool logo! At first glance you don’t see the envelope on the horse’s saddle, but a second read reveals that there’s much more to this design than meets the eye. The logo also has great balance and poise, and as one color looks very professional and classy.

Sleepy Eyes Filmworks

Design that provokes and/or displays human emotion in an authentic, believable way can be difficult to do…but this designer pulled it off! This logo was popular among many of our designer and non-designer employees alike because it makes such a unique connection with the viewer. Looking at the two upside-down letter e’s in this design makes us feel like we’re really looking to the eyes of an insomniac. The illustration of the eyes is not overdone, it’s just the perfect amount of detail to make the logo believable and not cluttered or confusing. This logo also is evidence that typography matters in design! Picking the right font or designing custom type in a logo not only adds credibility to the design, but makes it more creative and unique.

About the Author

Luke Baker is the Director of Design for ARTEIS (a Hewlett-Packard Company), which is a by-invitation-only community of roughly 100 designers that reside in countries all around the world. He also works as a senior graphic designer for HP, having joined the company in February 2005.

With degrees in graphic design and business management from Brigham Young University, Luke has been designing professionally for seven years, and also runs his own graphic design studio called Lucas Marc Design. His work has been featured in LogoLounge as well as GDUSA publications. He currently resides in American Fork, UT with his wife Lynnece and five newly-planted flowering pears which he hopes survive the winter.

Since my first interactions with the Internet many years ago, I have had many questions about file types and what they can and cannot do. It can be confusing. Let me help.

RASTER GRAPHICS

Before I go in depth with different file formats, let me start by clarifying the two general types of design files: raster and vector. Raster graphics are based on pixels, or small squares. These squares each have their own color and when combined with many other pixels, form a larger image. PPI or DPI (or the number of pixels or dots per inch in an image) is commonly referred to as resolution. The more pixels per inch in an image, the smaller the pixels within that space and the better or crisper an image will be.

If you have ever downloaded an image off a website and increased its size, you have noticed the downside of raster graphics. As you make an image larger, you also make the pixels within that image larger and more noticeable. Opposite to what I mentioned before, the fewer pixels per inch, the larger the individual pixels are and the less crisp or lower quality an image will be. This is the same reason that a low resolution (or low PPI) image if printed large can appear pixelated, blurry and grainy.

Due to the fact that raster graphics are based on individual pixels, getting specific colors from them can be challenging. Because as an image shows shadows or highlights, pixels within that image can each vary slightly from each other. With this quality, raster graphics (ie. photos) can have continuous and flowing color that look more lifelike and much more like we are used to seeing with our eyes. This smooth flow from one color to another makes images look more realistic and resembles reality better.

Generally, there are resolution standards for different applications. High quality print images are generally 300 DPI, magazines or lower quality print is generally 150 DPI and web or electronic images are usually 72 DPI.

VECTOR GRAPHICS

Vector graphics are based on math or the relationship of points to each other. Instead of saving the information or color of each pixel in an image, vector graphics use bézier curves to create smooth lines between points. Within a vector design file, the relationship between one point and another, the location and magnitude of each point, and their connection to each other make up vector shapes. This mathematical nature allows vector graphics to be increased or decreased in size, never losing resolution. The advantage of vector graphics is the ability to change size without losing the clarity and crispness of the image.

Vector graphics also save the color information within the file. Although there can be color gradients or shading within a vector file, the base color is saved within the document. This allows future projects, designs or adaptations to each have the same color as the original. This unity is a valuable aspect of vector graphics. Photos or realistic images are generally not created in vector format because they would have to be much more complex and larger a file to resemble the everyday images we see with our eyes. This is one of the shortfalls of vector formats.

WHAT DOES THIS LOOK LIKE?

Below are examples of each type of image or graphics. I used the text “Jeff Stoneman” as a simple example to see the difference in file types. The top section shows raster graphics, with the top name at 72 PPI and the bottom name at 300 PPI. The 300 DPI image shows more clarity and a crisper edge due to the higher resolution. The J image to the left shows a blown up raster image. You can see the individual pixels and how each one has its own degree of black to make up the J. There are also several stray gray pixels that show what happens when a raster image is blown up.

The box marked vector shows the bézier points and curves found in this same letter and to the right of the large J shows the clarity found in vector graphics. Each of the tiny squares is a bézier point with an extension that is a bézier curve. Here you can see the relationships between the points and how the angles between dictate the shape.

Because the image below is found online it is raster and will show individual pixels.

LOGOWORKS and LOGOMAKER FINAL FILES

At Logoworks, we provide final logo design files in several image formats. These will be the focus of the specific file formats we will review.

JPG/JPEG or Joint Photographic Experts Group – This is the most versatile format. It is typically the one that can be accepted and viewed by anyone and everyone. That is one of the JPG format’s strong points. This file is raster and therefore will lose quality when resized, especially larger. JPGs are also compressed, with each pixel sharing the information about the pixels around it. This allows the files to take up less storage space, but decreases the quality.

GIF or Graphics Interchange Format – This file type is frequently referred to as a raster file with a “transparent” background. If there is no image in certain parts of the source file for a GIF image, these parts will have no information, or be transparent, in the GIF. This is a smaller file format, commonly used on the internet.

PNG or Portable Network Graphics – This file type is another raster file with a “transparent” background. PNGs have more options and settings available and generally are used with higher resolution applications, but still on the internet.

TIF/TIFF or Tagged Image File Format – This file type is also a raster file. TIFs are commonly used for basic printing, although the colors in a TIF, particularly reds and blues can vary from the original design file. The TIF file format is also typically larger in size.

BMP or Bitmap Image Format – This file format is used typically in Windows. BMPs are raster and are generally lower resolution images.

EPS or Encapsulated PostScript – This is the file format used by our design team throughout the design process. This file format is the only vector file we provide, but includes all of the color information that you need to reproduce an image. This format is typically not used for realistic images, but used to show shape, contour and line. This is why vector graphics are great for branding, logos, and other similar projects. Reproduction can be any size with retained clarity and crispness. Unlike the raster formats, vector formats require vector applications to be opened and edited, such as Adobe Illustrator. Using the EPS file will assure that you have the clearest and cleanest representation of your file.

NOW WHAT?

With this knowledge of file types and formats, you can better use the right file formats for the right application. Understanding the limitations and advantages to each format will allow you to have the best presentation to your audience and help your company look its best.

ABOUT THE AUTHOR

John Van Orman has been with Logoworks by HP for three years. During this time he has worked as both a project manager for custom design projects for one year and for two years as a graphic designer. He has worked as a font designer, on custom design projects for Logoworks by HP customers, and has worked on many HP projects. He currently is attending Brigham Young University where he is in the graphic design program.

Ever heard of steampunking?  We hadn’t either, but after we checked out our clients picture gallery we had a good idea of where to start.  Here’s a few pictures showcasing our client’s unique artistic abilities:

Using Adobe Illustrator, our in-house designer was able to create a killer logo.  This video showcases the process (sped up a bit of course).  See the logo in action on our client’s Evergirl Art website.

Taglines…Gone Wrong

Have you ever driven past a sign or place of business and done a double-take because you couldn’t believe what you read?  Well, here are some of those taglines that make you smile, laugh, or leave you scratching your head wondering what they were thinking:

• Willows Window Washing: So clean you can’t tell it’s there…4 out of 5 dead birds agree.

• Premier Bodyguards: We’ll take the bullet or your money back!

• Coveralls Plumbing Service:  We’ll find the crack before you do!

• Legacy Funeral Home: Prices to die for.

• Ricky’s Online Dating: Be who you always wanted to be.

• Clayton’s Acupuncture: We stick it to you!

• Money Lender: Checking you out.

• Al’s Dump truck:  We bury the competition!

• Lazy Fields Retirement Community: Putting you out to pasture.

• Van Jaden Clock and Watch Repair: We won’t waste your time…

• Bust-A-Gut Improv Classes: We’re serious about joking around!

• Zingo’s Funeral Home: We put the “Fun” in funeral!

• Optimum Vision Care: Here’s looking at you!

Initially Purchased a Platinum Logo Package

This was our very first experience going through a logo creation process and it was fantastic! We truly appreciated all the designers’ insights. Catherine, our project manager, was awesome and it was reassuring to us knowing that she was available via email or a phone call to discuss what we needed. Great experience! We LOVE our new logo!

A Message from Inspired WebWorks shortly after they finished their logo…

I know our project with LogoWorks is complete, but I just wanted to let you know that we’ve already started to receive great feedback from our web visitors.

We re-designed our website and our social media places and the response from our Facebook fans has been terrific!

We have lots of plans in store for promotional goodies with these speech bubbles.  Even in being in business for a long time, I feel like we just got a fresh start to a great brand.

Here’s our freshly designed site:

www.InspiredWebWorks.com

We’ll definitely be applying for the affiliate program so that we can refer our clients to LogoWorks.

Thanks again!

Patty Gale Founder – CEO Inspired WebWorks

Thank you Patty It was a pleasure to work with you too! What can Inspired WebWorks do for the small business owner?

We’ll create and manage your web presence for you in the 4 key areas of internet marketing, allowing you the freedom to run your business.

Web Design
Social Media
Email Marketing
Client Appreciation

You’re busy, we know. That’s why you’re here.

Check out how easy the design process was for Inspired WebWorks…