Adapted from Field
Guide to Nonprofit Program Design, Marketing and Evaluation
“Marketing” — A Commonly Misunderstood Term
Before you learn more about marketing, you should get a basic
impression of what marketing is. See What’s
"Advertising, Marketing, Promotion, Public Relations and
Publicity, and Sales?". Basically, you might look at
marketing as the wide range of activities involved in making sure
that you’re continuing to meet the needs of your customers and
are getting appropriate value in return. Think about marketing
as "inbound" and "outbound" marketing. (In
the following, consider "product" to be either a tangible
product or a service — nonprofits often refer to these as "programs".)
Inbound Marketing Includes Market Research to Find Out:
What specific groups of potential customers/clients (markets)
might have which specific needs (nonprofits often already have
a very clear community need in mind when starting out with a
new program — however, the emerging practice of nonprofit business
development, or earned income development, often starts by researching
a broad group of clients to identify new opportunities for programs)
How those needs might be met for each group (or target market),
which suggests how a product might be designed to meet the need
(nonprofits might think in terms of outcomes, or changes, to
accomplish among the groups of clients in order to meet the needs)
How each of the target markets might choose to access the
product, etc. (its "packaging")
How much the customers/clients might be willing pay and how
(pricing analysis)
Who the competitors are (competitor analysis)
How to design and describe the product such that customers/clients
will buy from the organization, rather than from its competitors
(its unique value proposition)
How the product should be identified — its personality –
to be most identifiable (its naming and branding)
Outbound Marketing Includes:
Advertising and promotions (focused on the product)
Sales
Public and media relations (focused on the entire organization)
Customer service
Customer satisfaction
Too often, people jump right to the outbound marketing. As
a result, they often end up trying to push products onto people
who really don’t want the products at all. Effective inbound marketing
often results in much more effective — and less difficult –
outbound marketing and sales.
Protecting Ownership of Your Products/Services Intellectual Property
(Patents, Trademarks, Copyrights, etc.)
The following, miscellaneous information which may be helpful
as an overview of various aspects of business law in the United
States of America. Businesses requiring legal advice should contact
an attorney.
Very simply put, copyrights are to protect ownership (authorship)
of written words, eg, in books, pamphlets, etc. Patents are to
protect ownership of processes or technologies. Trademarks are
to protect ownership of names, titles, slogans, images, etc.
It’s easy to become confused about these terms: advertising,
marketing, promotion, public relations and publicity, and sales.
The terms are often used interchangeably. However, they refer
to different — but similar activities. Some basic definitions
are provided below. A short example is also provided hopefully
to help make the terms more clear to the reader.
One Definition of Advertising
Advertising is bringing a product (or service) to the attention
of potential and current customers. Advertising is focused on one particular product or service.
Thus, an advertising plan for one product might be very different than that for another product.
Advertising is typically done
with signs, brochures, commercials, direct mailings or e-mail
messages, personal contact, etc.
One Definition of Promotion
Promotion keeps the product in the minds of the customer and helps
stimulate demand for the product. Promotion involves ongoing advertising
and publicity (mention in the press). The ongoing activities of
advertising, sales and public relations are often considered aspects
of promotions.
One Definition of Marketing
Marketing is the wide range of activities involved in making sure
that you’re continuing to meet the needs of your customers and
getting value in return. Marketing is usually focused on one product or service.
Thus, a marketing plan for one product might be very different than that for another product.
Marketing activities include “inbound marketing,” such as market research
to find out, for example, what groups of potential customers exist,
what their needs are, which of those needs you can meet, how you
should meet them, etc. Inbound marketing also includes analyzing the competition,
positioning your new product or service (finding your market niche), and
pricing your products and services. “Outbound marketing” includes promoting a product through
continued advertising, promotions, public relations and sales.
One Definition of Public relations
Public relations includes ongoing activities to ensure the overall company
has a strong public image. Public relations activities include
helping the public to understand the company and its products.
Often, public relations are conducted through the media, that
is, newspapers, television, magazines, etc. As noted above, public
relations is often considered as one of the primary activities
included in promotions.
One Definition of Publicity
Publicity is mention in the media. Organizations usually
have little control over the message in the media, at least, not
as they do in advertising. Regarding publicity, reporters and
writers decide what will be said.
One Definition of Sales
Sales involves most or many of the following activities,
including cultivating prospective buyers (or leads) in a market
segment; conveying the features, advantages and benefits of a
product or service to the lead; and closing the sale (or coming
to agreement on pricing and services). A sales plan for one product might be
very different than that for another product.
An Example of the Definitions
The following example may help to make the above five
concepts more clear. I recently read that the story comes from
the Reader’s Digest, a quote found in "Promoting Issues
and Ideas" by M. Booth and Associates, Inc. (Thanks to Jennifer
M. Seher, participant in the CONSULTANTS@CHARITYCHANNEL.COM online
discussion group.)
"… if the circus is coming to town and you paint a sign
saying ‘Circus Coming to the Fairground Saturday’, that’s advertising.
If you put the sign on the back of an elephant and walk it into
town, that’s promotion. If the elephant walks through the
mayor’s flower bed, that’s publicity. And if you get the
mayor to laugh about it, that’s public relations."
If the town’s citizens go the circus, you show them the many entertainment
booths, explain how much fun they’ll have spending money at the
booths, answer their questions and ultimately, they spend a lot
at the circus, that’s sales.
A new spot for the insurance company Axa, “Evolution”. Realized with the technique of the origami, publicity follows stage by stage the transformations of humanity. A work of the TronicStudio studio to be discovered in the continuation of the article.
Usability and the utility, not the visual design, determine the success or failure of a web-site. Since the visitor of the page is the only person who clicks the mouse and therefore decides everything, user-centric design has become a standard approach for successful and profit-oriented web design. After all, if users can’t use a feature, it might as well not exist.
Effective Web Design
In order to use the principles properly we first need to understand how users interact with web-sites, how they think and what are the basic patterns of users’ behavior.
How do users think?
Basically, users’ habits on the Web aren’t that different from customers’ habits in a store. Visitors glance at each new page, scan some of the text, and click on the first link that catches their interest or vaguely resembles the thing they’re looking for. In fact, there are large parts of the page they don’t even look at.
Most users search for something interesting (or useful) and clickable; as soon as some promising candidates are found, users click. If the new page doesn’t meet users’ expectations, the Back button is clicked and the search process is continued.
Users appreciate quality and credibility. If a page provides users with high-quality content, they are willing to compromise the content with advertisements and the design of the site. This is the reason why not-that-well-designed web-sites with high-quality content gain a lot of traffic over years. Content is more important than the design which supports it.
Users don’t read, they scan. Analyzing a web-page, users search for some fixed points or anchors which would guide them through the content of the page.
Web users are impatient and insist on instant gratification. Very simple principle: If a web-site isn’t able to meet users’ expectations, then designer failed to get his job done properly and the company loses money. The higher is the cognitive load and the less intuitive is the navigation, the more willing are users to leave the web-site and search for alternatives.
Users don’t make optimal choices. Users don’t search for the quickest way to find the information they’re looking for. Neither do they scan web-page in a linear fashion, going sequentially from one site section to another one. Instead users satisfice; they choose the first reasonable option. As soon as they find a link that seems like it might lead to the goal, there is a very good chance that it will be immediately clicked. Optimizing is hard, and it takes a long time. Satisficing is more efficient.
Users follow their intuition. In most cases users muddle through instead of reading the information a designer has provided. According to Steve Krug, the basic reason for that is that users don’t care. “If we find something that works, we stick to it. It doesn’t matter to us if we understand how things work, as long as we can use them. If your audience is going to act like you’re designing billboard, then design great billboards.”
Users want to have control. Users want to be able to control their browser and rely on the consistent data presentation throughout the site. E.g. they don’t want new windows popping up unexpectedly and they want to be able to get back with a “Back”-button to the site they’ve been before: therefore it’s a good practice to never open links in new browser windows.
Effective Web Design
1. Don’t make users think
According to Krug’s first law of usability, the web-page should be obvious and self-explanatory. When you’re creating a site, your job is to get rid of the question marks — the decisions users need to make consciously, considering pros, cons and alternatives.
If the navigation and site architecture aren’t intuitive, the number of question marks grows and makes it harder for users to comprehend how the system works and how to get from point A to point B. A clear structure, moderate visual clues and easily recognizable links can help users to find their path to their aim.
2. Don’t squander users’ patience
In every project when you are going to offer your visitors some service or tool, try to keep your user requirements minimal. The less action is required from users to test a service, the more likely a random visitor is to actually try it out. First-time visitors are willing to play with the service, not filling long web forms for an account they might never use in the future. Let users explore the site and discover your services without forcing them into sharing private data. It’s not reasonable to force users to enter an email address to test the feature.
3. Manage to focus users’ attention
As web-sites provide both static and dynamic content, some aspects of the user interface attract attention more than others do. Obviously, images are more eye-catching than the text — just as the sentences marked as bold are more attractive than plain text.
The human eye is a highly non-linear device, and web-users can instantly recognize edges, patterns and motions. This is why video-based advertisements are extremely annoying and distracting, but from the marketing perspective they perfectly do the job of capturing users’ attention.
4. Strive for feature exposure
Modern web designs are usually criticized due to their approach of guiding users with visually appealing 1-2-3-done-steps, large buttons with visual effects etc. But from the design perspective these elements actually aren’t a bad thing. On the contrary, such guidelines are extremely effective as they lead the visitors through the site content in a very simple and user-friendly way.
Letting the user see clearly what functions are available is a fundamental principle of successful user interface design. It doesn’t really matter how this is achieved. What matters is that the content is well-understood and visitors feel comfortable with the way they interact with the system.
5. Make use of effective writing
As the Web is different from print, it’s necessary to adjust the writing style to users’ preferences and browsing habits. Promotional writing won’t be read. Long text blocks without images and keywords marked in bold or italics will be skipped. Exaggerated language will be ignored.
Talk business. Avoid cute or clever names, marketing-induced names, company-specific names, and unfamiliar technical names. For instance, if you describe a service and want users to create an account, “sign up” is better than “start now!” which is again better than “explore our services”.
An optimal solution for effective writing is to:
use short and concise phrases (come to the point as quickly as possible),
use scannable layout (categorize the content, use multiple heading levels, use visual elements and bulleted lists which break the flow of uniform text blocks),
use plain and objective language (a promotion doesn’t need to sound like advertisement; give your users some reasonable and objective reason why they should use your service or stay on your web-site)
6. Strive for simplicity
The “keep it simple”-principle (KIS) should be the primary goal of site design. Users are rarely on a site to enjoy the design; furthermore, in most cases they are looking for the information despite the design. Strive for simplicity instead of complexity.
From the visitors’ point of view, the best site design is a pure text, without any advertisements or further content blocks matching exactly the query visitors used or the content they’ve been looking for. This is one of the reasons why a user-friendly print-version of web pages is essential for good user experience.
7. Don’t be afraid of the white space
Actually it’s really hard to overestimate the importance of white space. Not only does it help to reduce the cognitive load for the visitors, but it makes it possible to perceive the information presented on the screen. When a new visitor approaches a design layout, the first thing he/she tries to do is to scan the page and divide the content area into digestible pieces of information.
Complex structures are harder to read, scan, analyze and work with. If you have the choice between separating two design segments by a visible line or by some whitespace, it’s usually better to use the whitespace solution. Hierarchical structures reduce complexity (Simon’s Law): the better you manage to provide users with a sense of visual hierarchy, the easier your content will be to perceive.
8. Communicate effectively with a “visible language”
In his papers on effective visual communication, Aaron Marcus states three fundamental principles involved in the use of the so-called “visible language” — the content users see on a screen.
Organize: provide the user with a clear and consistent conceptual structure. Consistency, screen layout, relationships and navigability are important concepts of organization. The same conventions and rules should be applied to all elements.
Economize: do the most with the least amount of cues and visual elements. Four major points to be considered: simplicity, clarity, distinctiveness, and emphasis. Simplicity includes only the elements that are most important for communication. Clarity: all components should be designed so their meaning is not ambiguous. Distinctiveness: the important properties of the necessary elements should be distinguishable. Emphasis: the most important elements should be easily perceived.
Communicate: match the presentation to the capabilities of the user. The user interface must keep in balance legibility, readability, typography, symbolism, multiple views, and color or texture in order to communicate successfully. Use max. 3 typefaces in a maximum of 3 point sizes — a maximum of 18 words or 50-80 characters per line of text.
9. Test early, test often
This so-called TETO-principle should be applied to every web design project as usability tests often provide crucial insights into significant problems and issues related to a given layout.
Test not too late, not too little and not for the wrong reasons. In the latter case it’s necessary to understand that most design decisions are local; that means that you can’t universally answer whether some layout is better than the other one as you need to analyze it from a very specific point of view (considering requirements, stakeholders, budget etc.). Some important points to keep in mind:
-according to Steve Krug, testing one user is 100% better than testing none and testing one user early in the project is better than testing 50 near the end. Accoring to Boehm’s first law, errors are most frequent during requirements and design activities and are the more expensive the later they are removed.
-testing is an iterative process. That means that you design something, test it, fix it and then test it again. There might be problems which haven’t been found during the first round as users were practically blocked by other problems.
-usability tests always produce useful results. Either you’ll be pointed to the problems you have or you’ll be pointed to the absence of major design flaws which is in both cases a useful insight for your project.
-according to Weinberg’s law, a developer is unsuited to test his or her code. This holds for designers as well. After you’ve worked on a site for few weeks, you can’t observe it from a fresh perspective anymore. You know how it is built and therefore you know exactly how it works — you have the wisdom independent testers and visitors of your site wouldn’t have. Bottom line: if you want a great site, you’ve got to test.
DESIGN
1. Precedence (Guiding the Eye)
Good Web design, perhaps even more than other type of design, is about information. One of the biggest tools in your arsenal to do this is precedence. When navigating a good design, the user should be led around the screen by the designer. I call this precedence, and it’s about how much visual weight different parts of your design have.
A simple example of precedence is that in most sites, the first thing you see is the logo. This is often because it’s large and set at what has been shown in studies to be the first place people look (the top left). his is a good thing since you probably want a user to immediately know what site they are viewing.
But precedence should go much further. You should direct the user’s eyes through a sequence of steps. For example, you might want your user to go from logo/brand to a primary positioning statement, next to a punchy image (to give the site personality), then to the main body text, with navigation and a sidebar taking a secondary position in the sequence.
What your user should be looking at is up to you, the Web designer, to figure out. To achieve precedence you have many tools at your disposal:
Position — Where something is on a page clearly influences in what order the user sees it.
Color — Using bold and subtle colors is a simple way to tell your user where to look.
Contrast — Being different makes things stand out, while being the same makes them secondary.
Size — Big takes precedence over little (unless everything is big, in which case little might stand out thanks to Contrast)
Design Elements — if there is a gigantic arrow pointing at something, guess where the user will look?
2. Spacing
Spacing makes things clearer. In Web design there are three aspects of space that you should be considering:
Line Spacing
When you lay text out, the space between the lines directly affects how readable it appears. Too little space makes it easy for your eye to spill over from one line to the next, too much space means that when you finish one line of text and go to the next your eye can get lost. So you need to find a happy medium. You can control line spacing in CSS with the ‘line-height’ selector. Generally I find the default value is usually too little spacing. Line Spacing is technically called leading (pronounced ledding), which derives from the process that printers used to use to separate lines of text in ye olde days — by placing bars of lead between the lines.
Padding
Generally speaking text should never touch other elements. Images, for example, should not be touching text, neither should borders or tables. Padding is the space between elements and text. The simple rule here is that you should always have space there. There are exceptions of course, in particular if the text is some sort of heading/graphic. But as a general rule, putting space between text and the rest of the world makes it infinitely more readable and pleasant.
White Space
First of all, white space doesn’t need to be white. The term simply refers to empty space on a page (or negative space as it’s sometimes called). White space is used to give balance, proportion and contrast to a page. A lot of white space tends to make things seem more elegant and upmarket, so for example if you go to an expensive arhitect site you’ll almost always see a lot of space. If you want to learn to use whitespace effectively, go through a magazine and look at how adverts are laid out. Ads for big brands of watches and cars and the like tend to have a lot of empty space used as an element of design.
3. Navigation
One of the most frustrating experiences you can have on a Web site is being unable to figure out where to go or where you are. I’d like to think that for most Web designers, navigation is a concept we’ve managed to master, but I still find some pretty bad examples out there. There are two aspects of navigation to keep in mind:
Navigation — Where can you go?
There are a few commonsense rules to remember here. Buttons to travel around a site should be easy to find – towards the top of the page and easy to identify. They should look like navigation buttons and be well described. The text of a button should be pretty clear as to where it’s taking you. Aside from the common sense, it’s also important to make navigation usable. For example, if you have a rollover sub-menu, ensuring a person can get to the sub-menu items without losing the rollover is important. Similarly changing the color or image on rollover is excellent feedback for a user.
Orientation — Where are you now?
There are lots of ways you can orient a user so there is no excuse not to. In small sites, it might be just a matter of a big heading or a ‘down’ version of the appropriate button in your menu. In a larger site, you might make use of bred-crumb-trails, sub-headings and a site map for the truly lost.
4. Design to Build
Life has gotten a lot easier since Web designers transitioned to CSS layouts, but even now it’s still important to think about how you are going to build a site when you’re still in Photoshop. Consider things like:
Can it actually be done?
You might have picked an amazing font for your body copy, but is it actually a standard HTML font? You might have a design that looks beautiful but is 1100px wide and will result in a horizontal scroller for the majority of users. It’s important to know what can and can’t be done, which is why I believe all Web designers should also build sites, at least sometimes.
What happens when a screen is resizes?
Do you need repeating backgrounds? How will they work? Is the design centered or left-aligned?
Are you doing anything that is technically difficult?
Even with CSS positioning, some things like vertical alignment are still a bit painful and sometimes best avoided.
Could small changes in your design greatly simplify how you build it?
Sometimes moving an object around in a design can make a big difference in how you have to code your CSS later. In particular, when elements of a design cross over each other, it adds a little complexity to the build. So if your design has, say three elements and each element is completely separate from each other, it would be really easy to build. On the other hand if all three overlap each other, it might still be easy, but will probably be a bit more complicated. You should find a balance between what looks good and small changes that can simplify your build.
For large sites, particularly, can you simplify things?
There was a time when I used to make image buttons for my sites. So if there was a download button, for example, I would make a little download image. In the last year or so, I’ve switched to using CSS to make my buttons and have never looked back. Sure, it means my buttons don’t always have the flexibility I might wish for, but the savings in build time from not having to make dozens of little button images are huge.
5. Typography
Text is the most common element of design, so it’s not surprising that a lot of thought has gone into it. It’s important to consider things like:
Font Choices — Different types of fonts say different things about a design. Some look modern, some look retro. Make sure you are using the right tool for the job.
Font sizes —Years ago it was trendy to have really small text. Happily, these days people have started to realize that text is meant to be read, not just looked at. Make sure your text sizes are consistent, large enough to be read, and proportioned so that headings and sub-headings stand out appropriately.
Spacing — As discussed above, spacing between lines and away from other objects is important to consider. You should also be thinking about spacing between letters, though on the Web this is of less importance, as you don’t have that much control.
Line Length — There is no hard and fast rule, but generally your lines of text shouldn’t be too long. The longer they are, the harder they are to read. Small columns of text work much better (think about how a newspaper lays out text).
Color — One of my worst habits is making low-contrast text. It looks good but doesn’t read so well, unfortunately.
Paragraphing — Before I started designing, I loved to justify the text in everything. It made for nice edges on either side of my paragraphs. Unfortunately, justified text tends to create weird gaps between words where they have been auto-spaced. This isn’t nice for your eye when reading, so stick to left-aligned unless you happen to have a magic body of text that happens to space out perfectly.
6. Usability
Web design ain’t just about pretty pictures. With so much information and interaction to be effected on a Web site, it’s important that you, the designer, provide for it all. That means making your Web site design usable. Adhering to Standards
There are certain things people expect, and not giving them causes confusion. For example, if text has an underline, you expect it to be a link. Doing otherwise is not good usability practice. Sure, you can break some conventions, but most of your Web site should do exactly what people expect it to do! Think about user tasks
When a user comes to your site what are they actually trying to do? List out the different types of tasks people might do on a site, how they will achieve them, and how easy you want to make it for them. This might mean having really common tasks on your homepage (e.g. ‘start shopping’, ‘learn about what we do,’ etc.) or it might mean ensuring something like having a search box always easily accessible. At the end of the day, your Web design is a tool for people to use, and people don’t like using annoying tools!
7. Alignment
Keeping things lined up is as important in Web design as it is in print design. That’s not to say that everything should be in a straight line, but rather that you should go through and try to keep things consistently placed on a page. Aligning makes your design more ordered and digestible, as well as making it seem more polished.
8. Clarity (Sharpness)
Keeping your design crisp and sharp is super important in Web design. And when it comes to clarity, it’s all about the pixels.
In your CSS, everything will be pixel perfect so there’s nothing to worry about, but in Photoshop it is not so. To achieve a sharp design you have to:
Keep shape edges snapped to pixels. This might involve manually cleaning up shapes, lines, and boxes if you’re creating them in Photoshop.
Make sure any text is created using the appropriate anti-aliasing setting. I use ‘Sharp’ a lot.
Ensuring that contrast is high so that borders are clearly defined.
Over-emphasizing borders just slightly to exaggerate the contrast.
9. Consistency
Consistency means making everything match. Heading sizes, font choices, coloring, button styles, spacing, design elements, illustration styles, photo choices, etc. Everything should be themed to make your design coherent between pages and on the same page.
Keeping your design consistent is about being professional. Inconsistencies in a design are like spelling mistakes in an essay. They just lower the perception of quality. Whatever your design looks like, keeping it consistent will always bring it up a notch. Even if it’s a bad design, at least make it a consistent, bad design.
With the power of the Web, and more eyes watching than ever, it’s important for a business to communicate its unique message clearly. The easiest way to recognize a company and distinguish it from others is by its logo. Below, we go through 10 common logo design mistakes that you should avoid if you want to create a successful and professional logo.
1. Designed By An Amateur
Avoid websites that promote ridiculously cheap logo packages. You get what you pay for.
A professional business should look professional. New business owners often invest a lot of time and money in property and equipment, but do not often match it by investing suitably in their logo.
Here are the most common reasons why many logos look amateurish:
* The business owner wanted to save money by designing the logo quickly themselves.
* A friend or relative who claims to know a little about graphic design does it as a favor.
* The wrong people are commissioned. (Local printers are not likely proficient in logo design.)
* The business outsourced the job via one of several design competition websites, which are mostly populated by amateur designers.
* The job was given to an online company that offers really cheap logos.
All of the above can result in disastrous outcomes. If your logo looks amateurish, then so will your business. A business should know where to look when it wants a new logo. David Airey offers great insight on how to choose the right logo designer for your requirements.
Here are the advantages of hiring an established and professional logo designer:
* Your logo will be unique and memorable.
* You won’t run into any problems down the line with reproducing it.
* Your logo will have a longer lifespan and won’t need to be redesigned in a couple of years.
* Your logo will look professional.
2. Relies On Trends
Focusing on current logo trends is like putting a sell-by date on a logo.
Trends (whether swooshes, glows or bevels) come and go and ultimately turn into cliches. A well-designed logo should be timeless, and this can be achieved by ignoring the latest design tricks and gimmicks. The biggest cliche in logo design is the dreaded “corporate swoosh,” which is the ultimate way to play it safe. As a logo designer, your job is to create a unique identity for your client, so completely ignoring logo design trends is best.
Logolounge has a great section on its website in which it updates current logo design trends every year. Being aware as a designer of the latest crazes is important, mainly so that you can avoid them at all costs.
3. Uses Raster Images
An example of how raster graphics can limit reproduction.
Standard practice when designing a logo is to use vector graphics software, such as Adobe Illustrator or Corel Draw. A vector graphic is made up of mathematically precise points, which ensures visual consistency across multiple sizes. The alternative, of course, is use to raster graphics software, such as Adobe Photoshop. A raster graphic — or bitmap, as it’s commonly called — consists of pixels.
Using raster images for logos is not advisable because it can cause problems with reproduction. While Photoshop is capable of creating very large logos, you never know for sure how large you will have to reproduce your logo at some point. If you zoom in enough on a raster graphic, it will appear pixelated, making it unusable. Maintaining visual consistency by making sure the logo looks the same in all sizes is essential.
The main advantages of vector graphics for logo design are:
* The logo can be scaled to any size without losing quality.
* Editing the logo later on is much easier.
* It can be adapted to other media more easily than a raster image.
4. Contains Stock Art
Using stock vector graphics in a logo puts your client at risk.
This mistake is often made by business owners who design their own logo or by amateur designers who are not clued in to the laws on copyright. Downloading stock vector imagery from websites such as VectorStock is not a crime, but it could possibly get you in trouble if you incorporate it in a logo.
A logo should be unique and original, and the licensing agreement should be exclusive to the client: using stock art breaks both of these rules. Chances are, if you are using a stock vector image, it is also being used by someone somewhere else in the world, so yours is no longer unique. You can pretty easily spot stock vectors in logos because they are usually familiar shapes, such as globes and silhouettes.
5. Designing For Yourself Rather Than The Client
Never impose your own personality onto a client’s work.
You can often spot this logo design sin a mile away; the cause is usually a designer’s enormous ego. If you have found a cool new font that you can’t wait to use in a design, well… don’t. Ask yourself if that font is truly appropriate for the business you’re designing for? For example, a great modern typographic font that you just love is not likely suited to a serious business such as a lawyer’s office.
Some designers also make the mistake of including a “trademark” in their work. While you should be proud of your work, imposing your personality onto a logo is wrong. Stay focused on the client’s requirements by sticking to the brief.
6. Overly Complex
Highly detailed designs don’t scale well when printed or viewed in smaller sizes.
What better analogy for thumbnail images than fingerprints? You’ll notice the intricacies of your fingerprints only when looking at them really close up. As soon as you move away, those details are lost. The same holds true for highly detailed logo designs.
When printed in small sizes, a complex design will lose detail and in some cases will look like a smudge or, worse, a mistake. The more detail a logo has, the more information the viewer has to process. A logo should be memorable, and one of the best ways to make it memorable is to keep things simple. Look at the corporate identities of Nike, McDonald’s and Apple. Each company has a very simple icon that can easily be reproduced at any size.
7. Relies On Color For Its Effect
Without color, your great design may lose its identity.
This is a very common mistake. Some designers cannot wait to add color to a design, and some rely on it completely. Choosing color should be your last decision, so starting your work in black and white is best.
Every business owner will need to display their logo in only one color at one time or another, so the designer should test to see whether this would affect the logo’s identity. If you use color to help distinguish certain elements in the design, then the logo will look completely different in one tone.
8. Poor Choice Of Font
Font choice can make or break a logo.
When it comes to executing a logo, choosing the right font is the most important decision a designer can make. More often than not, a logo fails because of a poor font choice (our example shows the infamous Comic Sans).
Finding the perfect font for your design is all about matching the font to the style of the icon. But this can be tricky. If the match is too close, the icon and font will compete with each other for attention; if the complete opposite, then the viewer won’t know where to focus. The key is finding the right balance, somewhere in the middle. Every typeface has a personality. If the font you have chosen does not reflect the icon’s characteristics, then the whole message of the brand will misfire.
Bad fonts are often chosen simply because the decision isn’t taken seriously enough. Some designers simply throw in type as an afterthought. Professional font foundries, such as MyFonts and FontFont, offer much better typeface options than those over-used websites that offer free downloads.
9. Has Too Many Fonts
A logo works best with a maximum of two fonts.
Using too many fonts is like trying to show someone a whole photo album at once. Each typeface is different, and the viewer needs time to recognize it. Seeing too many at once causes confusion.
Using a maximum of two fonts of different weights is standard practice. Restricting the number of fonts to this number greatly improves the legibility of a logo design and improves brand recognition.
10. Copies Others
This is the biggest logo design mistake of all and, unfortunately, is becoming more and more common. As mentioned, the purpose of a logo is to represent a business. If it looks the same as someone else’s, it has failed in that regard. Copying others does no one any favors, neither the client nor the designer.
Quality is a word that a lot of people like to use when describing their web design services. But what is quality, how do you know if a design is quality or not. Well, I think that there’s quite a few ways to spot quality within web designs. Once you can see just what goes into making a quality web design, you can use the techniques to perfect your own style.
01. Spacing
One of the main things that I look for within a good website design is clever use of spacing with design elements. Paying close attention to how certain things are spaced out and lined up can really make a difference to the overall appearance and sense of quality of your design.
I think the key to getting your spacing right is to look at all of the elements within your design. Looking at the bigger picture really can help you get a good idea of how best to space your elements. Sometimes zooming out and taking a different look at your designs can be a great help.ther a few pointers, and collected some examples to explain just how I look for quality within a website design.
Examples of Excellent Spacing
Great Spacing on the Good.is Website
As you can see here, there is a very clean and open feel to the content here. This is completely down to the designer allowing a good amount of space around the text & images.
A very well spaced out Digital Mash Website
Having well spaced out elements can make them a lot more attractive, and a lot more clickable. Digital Mash is a great example of a very welcoming website.
Creatica Daily has heaps of space
Again the great use of spacing here really helps let the content speak for itself. There isn’t a lot of content in each post, but they’ve not been afraid to give the content a lot of space. Just because you only have a few lines of text, doesn’t mean it can’t use a lot of space.
Lots of Space on the Postbox Site
Taking a close look at the Postbox website, you can really see how space there is around the edges. There’s actually a 60px padding here. It sounds like quite a lot, but when you see it in action it looks great.
Getting Spacing Wrong
The main mistake people make when it comes to spacing is having their content too close to the edges. No matter how well you’ve styled your content, if you cram too much in, it loses a lot of it’s style and quality.
Example of not using enough spacing
We showed in the previous section how good the spacing was on the PostBox website, but we’ve made the mock-up below to show how it would look with less spacing. And you can see just how much bad spacing can effect your design. It takes a lot away from the design and certainly removes the quality feel from it.
Tips on Effective Spacing
Deciding on how much spacing to use is something which will vary from time to time, you really need to train your eye to allow for the correct amount of spacing for each element, and use it effectively to fit the design. It’s touch but something you can pick up with practice.
• Design using a grid system
Using a grid certainly helps you to understand the importance of spacing
• Try & Try again
You can always use a method of trial and error until you find what looks right.
• White Space isn’t a wasted space
Just because you have an empty area, it doesn’t mean you have to fill it.
• Less really is More
Rather than trying to fit more in an area, fit less, give it space and keep just the vital important information.
02. Pixel Perfect Detail
You can really tell when someone has put real effort into the finish of a web design. Sometimes it’s the subtle things that really make a difference, and a lot of people might not even notice. What I mean when I talk about Pixel Perfect Detail is the method of paying close attention to lines, edges and borders. Rather than just have a simple line, sometimes adding some small details, whether it be subtle gradients, or something as a simple 1px shadow or highlight can really make your work stand out. Some designers of note that are really good at this are: Collis Ta’eed, David Leggett and Wolfgang Bartelme.
Examples of Pixel Perfect Details
A close look at the detail on Envato
If you look in the examples I’ve cut out, you can see in Example 1, how the green bar has a 1 pixel lighter green line on the border. Example 2 uses a soft gradient shadow on the inside of the box and leaves a 1px clear white border at the top. Clever, using a shadow to give the impression of a highlight above it. The green area behind has a very soft subtle shadow which helps draw attention to the clean and crisp detail within the white box below. Although it doesn’t seem like much these thing really do help to make everything look that little bit more polished, they give a sense of 3D and realism, almost like the elements are placed onto the page, rather than just a flat and static layout.
The Details on Tutorial9.net
David Leggett has a great understanding of how to really make pixel’s pop. His recent redesign of tutorial9 is a great mix of so many pixel popping techniques. In Example 1 you can see how he’s made the tabs look that little bit slicker by adding a simple 1px highlight to the top. Example 2 see’s a variety of techniques. A Drop shadow on the camera icon, a shadow highlight on the white area, and a 1px highlight on the top of the navigation bar.
Pixel Perfect Buttons & Separators on RedBrick Health
This beautiful navigation, created by Ryan Scherf is another great example of using pixel perfect details to get that feel of quality in your design. The pink button has a 1px highlight, and the separating lines between the links have the same level of quality and detail, as you can see rather than just having a gray line separation, Ryan has included a 1 pixel highlight below it to prevent it looking flat and 2 dimensional.
Pixel Perfection Applies to Grunge too: AvalonStar
Here we have the beautiful AvalonStar: Distortion blog, which uses a great grunge style. But even with a dirty & grungy design using a 1px highlight can still make a big difference. If you look at Example 1 you can see how a shadow gradient has been used on the brown top area, the green box which lies below it has a 1px highlight at the top. The combination of the shadow above and the 1 pixel highlight really make the boxes look that little bit more polished.
Quick tips for Perfect Details
Practice makes perfect in this case, as you can see from the examples something as simple as a 1px highlight line can add some really cool depth to your designs, you don’t need to rely on really over the top bevels and gradients to give the impression of something with a bit of depth.
• Keep it Subtle
Small details that compliment the content are the key.
• Think in Pixels
Borders, gradients, lines and shadows etc don’t have to be huge to be effective.
• Before & After
Compare your results to how they looked before you applied the effects. Then you can see just how effective they are.
03. Well thought out Typography
Although the actual content of the website won’t be written by the designer, they play just as important role in the overall quality of the content. Their role is to make sure that the content is displayed in a way that is easy to follow and read through. There are many ways that you can ensure your type is readable and usable, and while I’m not going to list a set of rules and regulations on what, and what not to do, I will give you some examples of where clever typography really does make a difference.
Examples of Well Thought out Typography
Big & Beautiful on The Netsetter
Titles are important within web design, especially when you are designing for a blog. A recent trend in web design is to use big & bold fonts for titles. This works in a number of positive ways, not only does it tick all the right boxes from a usability point of view, but it helps to create space and define structure within a design. This example from Netsetter is a great illustration of these points, you can see how the title creates a lot of white space around it, and naturally it’s very easy to read.
Leading & Spacing with your Text
The Viget website really is a beautiful example of how important typography is within web design. The example we see below (taken from their portfolio showcase) shows once again how using a larger sized font helps to create and open space. Even with the thin, crisp font they have used you can see just how much space has been created in that area. The actual typeface itself is very slick, and is a great choice of font. The other thing that stands out here is their attention to detail with the line height (Leading), the spacing between each line of text has been increased from the default value to create a lot more space and make the text much more readable. A trick which you could try in your next design.
Web Design Ledger, Fonts to Fit your Mood
Finding the perfect font can be done through trial and error, or you can make your choices based upon the different moods certain fonts help bring to a design. The example here, Web Design Ledger, has a retro and worn look to it, while still having a very open and modern feel to it, so choosing fonts that help evoke a similar moods to these is essential to it’s success. Henry Jones (the designer) has chosen a popular transitional serif typeface: Georgia for the titles which compliment the retro & worn aspects of the design very well. The modern feel to the website comes from using a very different font to the titles, the main content body is written in Helvetica, a sans-serif typeface with a very rounded, open feel to it. The two choices of typeface in this example are very clever and really help to compliment and set the mood of the design.
Quick check list for Typography in Web Design
Spotting good typography within web design becomes a little easier when you’ve seen some great examples of typography (above) But when exactly is it that makes these examples so good, and what should you be looking out for when you come to design your next website?
• Is it Readable?
Don’t be scared of making your titles big and bold.
• Have you thought about spacing?
Spacing can vastly improve readability.
• Do your fonts fit the mood?
Make sure your fonts compliment the design.
There are probably a thousand more tips out there, but I don’t consider myself an expert in this area, I think I’ve just learnt to appreciate the impact of good typography. If you want to learn more about the things to look out for and see some better examples i strongly suggest you check out this post from Smashing Magazine.
04. Organization of Elements
Being a designer appeals to many because of it’s creative nature, and sure it can be a lot of fun. Now I know that Organizing doesn’t sound at all creative or fun, but once you get into a habit of good organization it doesn’t have to be as dull as it sounds. The way you organize the elements in a website is always going to be different, it depends on what type of site it is, and how important certain features are to the content of that website.
Although there’s always a variation in how and where you place things, there are some things you can do to make organizing your content very easy. The first thing you need to do is decide what you want your design to achieve. For example, are you designing to sell a product, are you designing for content, or are you designing for signups & referrals etc.
Designing to Sell: 37Signals
Taking a look at the massively popular 37 signals website it’s easy to see that it’s no coincidence they are selling their products so well. They’ve made it as easy as possible for you to see what’s for sale and help you to make the final decision to buy. Everything you want from a site designed to sell.
In the Example image you can see that the site has 4 key features that make it ideal to encourage you to buy. Attention is the first thing, they’ve made a very dark box with a quick summary & big bold titles. Next they generate your Interest by listing some benefits of each product with a lovely illustration. Desire is the next point, and this is archived by placing quotes & testimonials, and as in this point some videos of “What our Customers have to say.” The final feature to keep in mind is Action; on 37Signals there are various action points throughout the page, also nice to see that as the page is quite long they even have some action points in the footer.
Designing for Content (Blog): Well Medicated
When you’re designing for a blog it’s a completely different story. You don’t need to spend time convincing and re-assuring your users about your product, your “product” is already on display, your content is your product. Make it easy for your users to see your posts, explore them and connect with you & your blog.
Content should be (one of) the first thing(s) you see on a blog. In this example a nice bold pink title font really draws your eyes straight to the content. There’s a good sized preview image and a good 2/3 paragraphs of text followed by a “Continue Reading” link. There’s also the standard date & author information. For me this is one of the most perfect examples of what I would class as quality “Content Design.” Attention can be directed to anything of interest, here the nice big subscribe icons are the focus and help the users to stay connected with your content. Plus it without doubt will increase the amount of subscribers, so it works on two levels. Encouraging your users to Explore is quite simple, you can use anything from tabbed recent or popular content in the sidebar, to drop down menu’s or simple & effective lists. It’s easy to do, but very effective, especially on a blog. Blogs tend to be very personal things, so allowing your visitors to Connect with you in a variety of ways can be a big plus, and can help encourage people to get to know you, and visit
Tips to Help with Organizing your content.
Of course there’s always times where you’ll need to do things differently and break the norm. But there are some simple tips you can follow to keeping a well structured and well ordered design.
• What are you designing for?
As we’ve shown above, decide the goal of your design
• Design using a Grid
Grids allow you to make the most of your space.
• Test the Placement of Elements
Be the visitor, would you be able to use it.
• Remove any unnecessary Elements
Anything that isn’t essential should be removed, or out of the way
• Balance of Attention
Some things need to stay simple to allow others to shine
05. Restraint & Subtlety
Designers are always looking for ways to make an impact with a unique design or special effect within a design. But sometimes you can make a bigger impact by restraining yourself. There comes a point where something crosses from being good to being too much. A good designer can spot when the line has been crossed, and avoid putting too much into a design or special effect.
Examples of Subtle Effects within Web Design
Soft Gradients on “Things” Website
I’m always on the look out for subtle effects on all the websites I visit. Sort of sad maybe, but I can’t help but pick out all the little details for future inspiration. Gradients are often over used and really in your face, but used correctly gradients can add a element of reality and depth to a design. Most people might not even spot the gradients, and those for me are the best ones.
Drop Shadows on Icon Dock
Icon Dock is a smorgasbord of subtlety. Pixel highlights, gradients and drop shadows. But for the sake of this example we will focus on the drop shadow, it’s not very big, and it’s opacity has been reduced to just put the highlight on the content box and bring it forward very slightly. It’s a beautiful example.
Subtle Background Textures; Scouting for Girls
Having a textured background can make or break your design. A lot of times the background becomes too much of a distraction that it actually takes away from the quality of the design. So it’s often a good idea to keep your background textures subtle and soft. The Scouting for Girls website does a great job of using a texture to compliment the overall style & quality of the design.
A hint of Wear & Tear: Viget Advance
I don’t think you can ever be too subtle, any amount of detail no matter how subtle will be noticeable, and whether people are aware of it or not it does have an impact. This example from the Viget Advance blog shows some hints of wear & tear, just a very small amount of wear, but without it the paper would look flat and dull. It’s the small imperfections that make it more believable and real.
Watercolours on WebDesignerWall
When using watercolours it’s always nice to make sure you mix the colours and keep the colours very soft, faded, and well… Watery. Using watercolours can benefit your design in many ways, it allows you to inject some subtle colours and bring in some texture, which is why it’s become quite a popular choice for many designers to include.
Subtle Floral Elements; Dara’s Garden
This is a brilliant example of subtle floral detail within a design. There are some more vivid floral illustrations that are also quite stunning, but in this example we are focusing on the lighter & softer details in the background. This really shows the importance of subtlety, the soft colour and worn look to the pattern means that your eye is aware of the detail, but it isn’t the main focus.
Tips for Subtlety in your Design
For me, subtle details in a design can really push a design from being good, to being amazing. If you’re looking for a way to inject something special into your design, subtle details really are the way to go. Here are some tips to keep in mind when including subtle details in your design.
• Build up your layers
Never just use one brush or texture, build your details up.
• Experiment with opacity & Colour
Sometimes even 3% opacity can have a positive impact.
• Don’t worry, Be Brave
Done be afraid to be too subtle, or too faded.
06. Using Colour to it’s Full Potential
People often judge colours on their personal taste, which is a huge mistake. If you’re ever in a situation where you need to decide upon what colours look good in a design your mind should always be on the brand, and building a theme and mood using a colour scheme.
Brilliant uses of Colour In Web Design
Real Estate can be Real Colourful: Oypro
The thing I like about the Oypro website is that it proves that a “boring” subject doesn’t have to have a boring design. All too often corporate sites have a reluctance to allow designers to really put across some creative flair in their designs. There seems to be a need to keep things simple, flat, and gray. But this design proves that you can still have a corporate looking website, without the need to hold back.
Keeping your Colours Relevant: Tennessee Summertime
Summertime in Tennessee is a vibrant, bright and very warm website. Everything you’d want to associate with a site that is promoting summer activities. There are a lot of different colours in play here, but all of them are relevant. Good quality designs have a colour scheme that is relevant to the service or product that they are designing for. Sometimes it’s the obvious colour choices that make for the better design, a good example of my point is Hell Design – it wouldn’t make sense being any colour than a firey red.
Variety in your Backgrounds: Saturized Studio
It’s not enough just to have colour in your background and expect that to make it interesting. Some of the best backgrounds are those that have a bit of variety, in this example we see that the beautiful orange/red colour is subject to all sorts of lighting effects and gradients. It gives an extra something to the background, and prevents it from looking stale and flat. Important to note here too that the contrast between the dark & deep orange works really nice set behind the much lighter content area.
Tips for using colour in design
Colour is always a good area for exploration and trying different possibilities and variations, but it’s always important to keep a few things in mind when choosing colours and a colour scheme.
• Experiment
A boring topic doesn’t have to have a boring colour scheme.
• Variety
Try using gradients, patterns, brushes on your colourful backgrounds. Colour alone doesn’t make something look good.
• Stick to a Theme
Make sure your colours are relevant to your product/service.
07. Doing something Nobody else has done
Some of the best websites around are those that are out of the ordinary, strange and somewhat bizzare. But those that challenge the norm may end up changing what the norm is. But being truly original and creating something nobody else has done before is the toughest thing to do in design.
You could end up making something of amazing brilliance, or you could end up with a design that’s worthy of nothing but criticism. It’s a very thin line between success and failure; I mean there are reasons something’s never been done before, and it’s usually because it’s a shit idea. You’ve got to be brave to step away from what people know and love, and here are a few examples of that point:
Unique Navigation on MB Dragan
Not exactly your average site navigation, but would the website look as good if it just had a standard navigation. I’d say it was a bit of a risk having the navigation in such an unusual way, but it does fit in with the site, it is relevant, and it’s done to such a standard that it’s hard not to appreciate how well it works with the overall design.
Visualbox & their very Visual Navigation
Visualbox have one goal in mind, showing you their brilliant work. So they’ve got very little text, on first look all you see is their Name and a selection of their work. The preview box changes when you hover over it to reveal details of that project, so it’s actually a very effective and functional solution, and much more appealing then just having a list of links.
Straight to the point with Nikola Mircic
So you’re a interface designer, you want people to see your work, and hire you. Nikola Mircic shows us how getting straight to it makes for a really impressive site. You are greeted with a wide variety of his work, his name & what he does at the top, and a contact link. There’s no mass of text or fancy words to convince you to use his services, he literally lets his work talk for itself. Of course you can click on the images to see more & get some text, but the layout if very unique and I love how it works.
Tips for trying something new
The examples above are not meant to be “inspiration” for unique ideas, just simply a couple of sites that I found that I’d deem to be quite unique. The fact is you can’t really search around for inspiration on new ideas, as it kind of spoils the point of it. So really you can just ignore this whole section if you are trying to think up something new!
• Keep it Relevant
If you’re going to do something very new and unique, ask yourself “does it make sense” and “does it fit with the branding?” if so then go do it!
• Ignore everything you know!
Okay maybe not everything, basic principles may stay the same, but there’s no point looking for inspiration on new ideas, you’ll just be heading in the wrong direction.
• Keep a level of quality
I think generally if your new idea looks good, and works well it’s much easier for you to justify.
What Do you look for in a Quality Design?
There are so many things that can make a design stand out as quality, I’d say I’ve just covered a few of the base points. So I’d love to see your ideas and thoughts about what you look for when you decide whether a design is good or not.
We have changed the look and feel of Vide-Woo.
The last Vide-Woo list made in JavaScript, so the page will keep the fix height.
This is a place where we put the videos we like, part directly from Youtube and part from Woobicha Out-Community added videos.
It’s a ONE page, and not a site; previous videos will open in a new tab, and you will be redirected to the place where we got the video from.
Your video might also get in here if you have an account on Out-Community.
RocketDock is a smoothly animated, alpha blended application launcher. It provides a nice clean interface to drop shortcuts on for easy access and organization. With each item completely customizable there is no end to what you can add and launch from the dock.
Now with added Taskbar support your minimized windows can appear as icons on the dock. This allows for better productivity and accessibility.
Watch it in Action:
Features:
* Minimize windows to the dock
* Real-time window previews in Vista
* Running application indicators
* Simple drag-n-drop interface
* Multi-monitor support
* Supports alpha-blended PNG and ICO icons
* Icons zoom and transition smoothly
* Auto-hide and Popup on mouse over
* Positioning and layering options
* Fully customizable
* Completely Portable
* ObjectDock Docklet support
* Compatible with MobyDock, ObjectDock, RK Launcher, and Y’z Dock skins
* Runs great on slower computers
* Unicode compliant
* Supports many languages and can easily be translated
* A friendly user base
* And best of all… its FREE!!!
