Starting a new design project can sometimes be a little intimidating.  Here are some tips to help take the mystery out of one of the most important team members on your project and make sure you get the most out of their experience and expertise.

Who’s In Charge?

Before the initial design meeting, your company should appoint one person in charge of all communications with the designer.  Having one gatekeeper to funnel all the opinions of your company’s decision makers saves a lot of time and production hours.

One danger: make sure  you don’t have too many final decision makers! You’re familiar with the term “too many cooks in the kitchen”? The same applies when it comes to websites.  Get everyone’s input during the proposal phase on the major functional components and goals of the website, then assign the handful of people who will approve the design and content.

Be Prepared

While this may seem obvious to you, make sure that your designer has a clear understanding of your business, and what exactly you want the website to accomplish.  The more a designer knows about your business and goals, the better results they can deliver. The following is a list of very common questions that are asked at initial design meetings, and are important to focus a website’s direction:

Business Info

• What are your main products or services?
• Are you national or international? Or do you focus locally?
• How is your company perceived? Is this accurate? Do we need to correct an inaccurate customer perception?
• How many employees are in your company?
• What words or phrases best represent your company?

Target Market

• Who is your target market?
• What state / country / city is your target market?
• What is your brand image with your target market?
• Are you targeting different customers with your website than you traditionally serve offline?

Competition

• Who are you major competitors?
• What sets you apart (competitive advantage / unique selling proposition)?
• Are your offline competitors different than the major online competition?

Marketing Materials

If you have any marketing materials like business cards, brochures or pamphlets, make sure your designer sees them. Having an established visual identity is a great starting place if you want to continue with the same look, or change it completely.

Additionally, does your company have an established brand style sheet with defined colors and usage rules for your logo, tagline and trademarked images?

Designs You Like

Look around at other websites that you feel are well designed or express a company image similar to your own. Having a common visual to discuss and dissect will help the designer understand your thoughts and style. Think of words like clean, minimalist, edgy, grungy, regal, serious, etc… that describe your company or how you want your company to be portrayed online.

Designs You Hate

Is there a color that you cannot stand and should never appear on your website? Are glossy buttons too gimmicky for your company? Let your designer know of anything that should absolutely not be on your website along with websites that you find awful. Having an idea of what you do not like also gives a window into directions that should be avoided. But always remember, your website is not for you, but for your target market.

While this article is not exhaustive in what will be covered in an initial design meeting, it should prepare you to discuss the basics that are needed to effectively brand your company online.

If you read my last article, Improve Your Website in 5 Steps: Photography, you’ll already know how using photography can make a big difference in your website and other promotional materials. Now the question is, where do you get these photos?

There are many different resources for using photography, including hiring a professional, purchasing stock photos, finding free resources online, and even taking photos yourself! Depending on your project, your deadline, and your budget, you can choose the option that works the best for you.

Hire a local photographer

Photo by Dan Higbie

The most ideal solution for photography is to hire a professional. Not only will this option give you the best results, but it will also give you the most control over the outcome of the photos. You can tell the photographer any requirements you need — for example, if you need a tightly-cropped, vertical image for a tri-fold brochure — and they will be able to give you a variety of high-quality photographs that fit exactly what you need.

Using a photographer also will give you the most unique photos. Since you are hiring them for your specific job, the photos will be unique to your business, and will have a better sense of realism than if you purchased generic photos online.

The main benefit for hiring a photographer is for their experience and knowledge. Anyone can purchase an expensive camera, but a professional will know how to properly use lighting, framing, depth of field, exposure, and other techniques that separate an average photograph from a professional photograph.

Purchase a stock photo

Stock photo from Thinkstock

If you need a photo quickly or have a tight budget, purchasing a stock photo can be a good option. There are many stock photo websites — like iStockphoto.com or ThinkstockPhotos.com — that have high quality images for sale. Just search for your keyword, and browse hundreds of photos to find the one you like best!

One of the disadvantages of using stock photography is that you are limited by what photos are available. Stock photos are usually generic so they are useful for many different projects. If you are looking for a very specific shot, you may have trouble finding that photo on a stock photo website.

Another disadvantage is that because stock photos are created to be used by many different people, they often are. It’s likely that the photo you purchase is being used by other businesses to promote their products or services.

Photos with a Creative Commons license

"rollerblade 03" © 2008 Andy Liang, used under a Creative Commons Attribution-ShareAlike license: http://creativecommons.org/licenses/by-sa/2.0/

Another option that’s often overlooked is using photographs with a Creative Commons license. A Creative Commons license allows you to use the photograph as long as the original photographer is credited properly, and it follows all the conditions that are specified. There are many different types of Creative Commons licenses, including some that can be used for commercial work, and some that are allowed to be modified.

Flickr.com is one website that allows you to search over 100 million photos based on the different types of Creative Commons licenses. Make sure to follow all of the conditions specified under the license. If you aren’t sure if you can use the photo, you can try contacting the photographer to ask for permission.

Please note: Just because a photo is on the internet, does not mean it is public domain. Google Images, Bing Images, and other search engines are not acceptable ways to find photos for your project. Unless you have permission from the photographer, it is copyright infringement!

Take your own photos!

If you own a digital camera and feel confident about your photography skills, why not take some photos yourself? Especially for blog posts and social media pages like Facebook, taking your own photos is sometimes the best option.

Photos can play an important role in delivering your website’s message, whether you are trying to persuade the visitor to buy your products or services, or simply trying to educate them on important information. By using photos thoughtfully, you can support the text on your page and deliver a stronger message.

Using photos to tell your story

There is a reason why people say “a picture is worth a thousand words.” Sometimes a photo can convey a message faster than text. This is important for websites, because you only have a few seconds to convince online visitors to stay and browse your website more. The faster you can present your information, the better!

Can you guess what this website is for without being able to read it?

Take a look at the image above. Even if you can’t read Japanese, it’s apparent from the main photograph that this is a website about education. The photo of three people studying in a library delivers that message before you even have a chance to read about the university. And since the subjects in the photo represent their target demographic (young adults), the photo also immediately reassures the visitor that they would be welcome at the university, and would fit in with the rest of the students.

Here is another example of using photography on a website:

Moo uses photos to explain what they do

MOO is a printing company that prints your photos on different types of cards. On their about us page, they chose to explain what they do with a small graphic: Your photos + our company = a stack of custom printed cards with your photos. It’s a simple way to explain their business, and much more memorable than a few paragraphs of text that explains the same message.

Using photos to grab attention

Photos are great tool for grabbing a visitor’s attention. You can place photos on your website near important information and links to draw their attention to that area. If it’s an interesting photo, that will make the visitor want to read more.

The CNN.com website uses photos to highlight featured articles

The new CNN.com website uses images to highlight important stories on their homepage. You can see how the stories with photographs catch your attention more than the links without images — simply because the photos are visually more interesting than paragraphs of text.

Using photos to break up text

It’s no secret that visitors want to read less online. Articles based on “Top 10 lists” are becoming increasingly popular, and some even choose to get news in a format that limits text to 140 characters. People browse websites quickly, and generally don’t want to spend a lot of time reading long passages of text.

The Nook product page on www.barnesandnoble.com

So what do you do when you have a lot of information that you want to present?

You can make a long article look less daunting by adding photos throughout the page. The photos help divide the text into smaller pieces of information, which makes the page look less time-consuming to read.

Barnes & Noble uses photography to spice up the product page for their new e-Reader, the Nook. There is actually quite a bit of text on this page (over 450 words), but instead of listing all the features in one long article, they divide it up in smaller sections with product photos. By breaking up their information this way, it looks like there is less text on the page, which means it looks easier to read. The photos also help to illustrate each of their features, which make a more memorable and attractive features page.

Using photos in your own website!

So if you have a photo-less website, now is the time to change that! Whether you have a website for your service business or trying to sell products online, using photography will create a more pleasant experience, and will encourage your visitors to spend more time on your website.

Websites are a great advertising medium, they can communicate a great deal of information along with reinforcing your company’s branding. What separates websites from more traditional print advertising mediums is their dynamic instead of static nature.

Every aspect of a print ad can be controlled from the size, paper, ink colors and medium. Take a magazine ad for example; there is a defined target market including gender, income level, education, likes, and world view that is meticulously researched and defined. The size is 11×13” on glossy paper, the ink colors are controlled to look exactly the same on the designer’s monitor as they do on paper. Once printed, the circulation lasts about a month, and every end user sees the same ad, on the same page, in the same magazine context. The whole user experience has been controlled to produce constant, reliable results.

Web sites on the other hand are dynamic and ARE changed according to the end users. The HTML code that constitutes a website can be interpreted differently by the end user’s browser. Color is dependent on monitor contrast and brightness settings, along with the operating system (not to mention CRT vs. plasma or LCD). The website’s size can be changed based on the monitor size and resolution, which can range from 800 x 600px to 1600 x 1200px. By changing browser settings, the end user can choose to disregard images, increase or decrease the text size, and block structural and functional code like Javascript or CSS. In the end, your website is a very fluid medium with a lot of potential.

Going into the web design process knowing that fluidity is the nature of the beast can save you a lot of time and frustration. An experienced web designer knows the quirks of all major browsers along with how to make your design appear similar and functional across the most popular modern browsers. We will work with you to create designs that can be flexible across different monitor sizes and resolutions along with providing colors with enough contrast to be differentiated for most users, despite differences across monitors.

One of the first lessons a skilled web designer must learn is to give up the type of absolute control a print designer enjoys.  We do this by embracing the challenge and excitement of the web’s fluidity.  As a client and website owner, it is equally important for you to understand and accept that your website is built for delivery on screen via a browser – not as a printed piece.  And while you may not have absolute control over where your text line breaks, or the spacing between your letters, the digital nature of a website gives you far more control over metrics and conversion tracking.

Business cards are an extension of your branding, lending potential clients your information in a memorable package.  While business cards are usually an afterthought for conventions, business cards should be seen as small, personal advertisements for your company.  I believe that an effective business card clearly answers the following three questions in order:

1. What do you do?
2. How do I contact you?
3. Who are you?

What Do You Do Exactly?

The main focus of your business card is to quickly (think a millisecond glance) communicate your company’s service or product.   While an effective logo and/or descriptive company name can help with recognition, a name like “SunTech” does little to elicit a core purpose. Since most company names do not fully communicate their core service, these three devices are usually employed to help with recognition:

1. Taglines add a creative summary of your core services
2. Photography / Illustration of your core services for a fast visual comprehension
   

   An Illustration helps make the core service apparent along with a fun tagline "Tame Your Technology" instead of "We Fix Computers"

3. Media changes from the standard sized paper card can add instant appeal and create a memorable business card.
   

   Changing the media to an electrical wire made this business card memorable while advertising their core service

   A note on changing the media – while it makes your business card stand out, it also limits the use as the 2.5 x 3” business cards are standardized to fit into wallets and Rolodex for later retrieval.

How Do I Contact You?

There is a wealth of contact information that you can present to a viable customer including phone numbers, toll free numbers, cell numbers, fax numbers, physical addresses, emails, websites, and social media accounts. Unfortunately, business cards are small and space is precious. Usually a main phone number (local or toll free) along with an email address provides the two optimal venues of communication.  Contact information should be legible (larger than 6 point type) and easily located.

Who Are You?

With business card in hand, your potential client is looking to contact YOU, and probably needs a little memory jogger as to your name. Your business card should clearly display your name along with your position within the company for reference. Some industries, like real estate which depend on personal connections, also include portraits to aid in further visual recognition.

Other Design Considerations

While a business card is a great place to showcase creativity and design, keep in mind that the three main questions must be answered legibly. Black text on a white background has the highest contrast. Also san serif (no feet) fonts reproduce better at smaller point sizes.

Finally, the back of your business card can be seen in one of two lights:

1. A blank space to write notes or leave a personal message
2. A venue to review services or have larger graphics

How you decide to use the back of your business card will have more to do with your particular business and contact goals, but keep in mind that the back of your card can also reinforce and answer the three questions addressed above for maximum effectiveness.

Whitespace—or, negative space—is the open space between elements in a design. The space can be a color other than white, as long as the area is void of elements.

It’s common for whitespace to be seen as “wasted space,” especially when you are working with a limited area. After all, why wouldn’t you want to take advantage of every inch of space in your advertisement / brochure / website?

You may be surprised to know that the space that is empty is just as influential as the space that is filled with text and photos.

Using Whitespace to Your Advantage

When there are too many elements in a design—whether those elements are photos, fonts, or headlines—it appears cluttered and crowded. Imagine a room filled with people that are talking at the same time. Would you know who to listen to first? How long would you stay?

Removing unnecessary elements in your materials not only de-clutters the design, but it also places more emphasis on the most important message.

One company that has learned this lesson is Apple. Their advertisements are famous for their simplicity and use of whitespace. Take a look at their homepage from October 2009:

Immediately, you are presented with three things: An interesting image that grabs your attention, a short explanation of their latest product, and their call to action, “Watch the iMac video.” They are using whitespace to direct their customers to the most important information within seconds, and to show them where to click next.

Now, Apple has the advantage of being a household name with millions of fans worldwide who are already familiar with their products. Most businesses will probably need to present a bit more information, in order to convince potential customers that their products or services are worth the price. However, the same concept still holds true — adding unnecessary information only distracts from the goal you have set; whether that goal is to click on a link, call your phone number, visit your website, or buy your latest product.

Why Simplicity is Important

Billboards are an example of one medium where a simple message is absolutely necessary. Drivers are — hopefully — concentrating on the road, and only glancing up at signs and billboards for just a few seconds. If you can’t condense your advertisement into 6 words or less, then the driver won’t have enough time to read your entire message.

Designing for websites is similar. The average user will decide whether to stay or leave your website within just a few seconds. That means you need to immediately grab their attention, reassure them that your website has the information that they are looking for, and convince them to stay on your website a little longer.

The only way you can accomplish all this is to decide on the most important information, make it the most prominent part of your marketing piece, and get rid of anything that is a distraction. By de-cluttering your designs, you are able to guide your potential customers to the information that you want them to read, and create truly effective promotional pieces.

Some Tips for Reducing Clutter

• Use headlines and sub-headlines to break up large areas of text. This allows the reader to quickly scan the text to get a summary, and to skip to the section that interests them.
• Use simple language. Make your text easy to read and understand, and avoid overly technical language that would be overwhelming and confusing. If your text looks like a lot of work to read, your readers will simply go elsewhere.
• Create a focal point. If you have several images on a page, your viewers won’t know where to look first. Make one or two of your images more prominent, and place your call-to-action nearby.
• Create Relationships. Group related items (like a photo, description, and link) together so they are seen as one element instead of three. You can do this by making the space between these elements smaller than the space that surrounds them.
• Add Whitespace. Make sure there is enough space in your margins, between paragraphs, and around your elements so the overall design is clear and easy to understand.

Logos are everywhere working 24 hours a day, 7 days a week to brand items for easy company recognition. But creating an effective logo is not easy. Below are the five main criteria to keep in mind with any logo design. In order to illustrate these points I have created two different logos for a fictitious Leaf company.

The "Good Logo" (left) was created in Adobe Illustrator and follows the below principles, while the "Bad Logo" was designed in Adobe Photoshop and ignores the below rules

1. Scalable

Your logo needs to be flexible enough to support just about any media at any size (think tiny business cards through massive billboards). This is why photograph based logos are not the greatest choice, at some point the pixels that constitute any raster image will enlarge enough into recognition and become “pixellated” or grainy. In contrast, quality  logos are created by utilizing vector images, which are based off of mathematical equations that define shapes and display crisp and clear at any resolution. Raster graphics are typically saved as .EPS or .AI (Adobe Illustrator).

Both leaf logos magnified 500%, notice how the "Good Logo" (left) is still crisp while the "Bad Logo" (right) has become "pixellated" or grainy

2. Recognizable

Logos end up being reproduced in many different formats, the least common denominator of which is the fax machine. While your logo may look amazing in full color with glares, reflections and gloss, at some point it will be faxed in only one color, black.  Your logo should be consistent whether it is reproduced in one color, two color, or full color, and should be attractive and effective whether it is embroidered on a shirt or printed on your outdoor sign.

In this fax simulation notice how the "Good Logo" (left) is still recognizable while the "Bad Logo" (right) has become a large black blob with only the word LEAF recognizable

3. Expressive

Template logo designs fail in the aspect that many other companies (possibly even major competitors) could be using the same exact logo template. This makes your company look generic or contrived instead of unique and innovative. Your company offers customers a unique product, experience, or other service, and your logo needs to communicate this.

Sumpter & Gonzalez LLP (left) and Stylegala (right) used the similar fonts, positioning, and letter treatment resulting in very similar logos

4. Dependable

Reflections (2000), swooshes (1999), and starbursts (1998) are all graphic design fads that have passed. Your logo should not be visually stuck in the past with them. Design trends come and go every year, and affixing your company’s look and feel to the latest and greatest trend will only date it later in life.

The John Deere logo has stayed true to it's original form for over 133 years

Conversly, Pepsi has changed it's logo with different fads over the years with no similarities between the original or the current iteration

5. Memorable

Can you describe your logo over the phone? Does your logo require a fact sheet to decipher it’s visually cryptic metaphors?  The point of any logo is to give your company a visual for clients to recognize and remember easily. Simple, intuitive marks should visually leave behind your one (and only one) big claim to clients.

Even without colors, names or captions, I bet you can name the famous brands behind these logos

Your logo is your company’s identity, the face presented to the crowd.  A good logo will go along way toward building trust, brand integrity, and customer recognition. Will your company make a good first impression and stand out from the crowd?

Favicons (condensed from  “favorite icons”) are extremely small, 16×16 pixel graphics that help support your online branding in a very large way. Favicons function as an important visual reminder of your brand for users both on and offline.

Favicons are Everywhere

In all modern browsers (Internet Explorer 7,8, FireFox, Opera, Safari) your single favicon is used in a myriad of places.

Address Bar - Favicons appear in every modern browser’s address bar to reinforce on each and every page that visitors are still on your site.

Tabs - When a user opens a new tab, your favicon is displayed above your page

Favorites - When a user creates a favorite of your website, your favicon is displayed next to your link in the favorite’s panel.

Favicons are not limited to online internet browsers. When a user drags your website onto their desktop, your site’s favicon becomes your offline “application” icon or short-cut.

Favicon as a Desktop Icon.

Designing Favicons

Unfortunately, favicons are difficult to design because of their extremely small size. The usual practice of taking a logo and shrinking it to fit the sixteen pixel square area can result in an undecipherable mess of colors. Instead, having a designer create a new design pixel by pixel produces a much sharper and memorable icon. Some company logos do not lend themselves readily to favicons. Logos that are just text or have large complicated graphics usually need to be interpreted into a new design that features the color scheme or style of the company.

Case Study: Connecting Point Church

Connecting Point Church's Logo

Fig. 1 - Logo shrunk to fit

Fig. 2 - Favicon Optimized

Connecting Point Church’s logo features a four point graphic that was the logical choice for their favicon. When the four point graphic was brought into Adobe Photoshop and shrunk to fit the space, pixel definition was lost with the result of a blurry image (figure 1). To achieve the optimized image (figure 2), I had to manually manipulate the pixels that made up the four curves resulting in a much sharper depiction of their graphic.

With multiple avenues of continued branding at stake, not having a favicon or having an undecipherable favicon places your website at a disadvantage. To maximize your online exposure even the smallest details like favicons should be optimized to make you look your best.

No matter how optimistically it is presented, no matter how often it is mentioned that “everyone’s onboard” and no matter how much you want to believe it will work for the better, design by committee is a process that delays the completion of a website that no one involved will be happy with.

I have seen this situation play out countless times on website development projects throughout the years. When a committee is involved everyone has to compromise to some degree yet no one wants to. Someone has to sign off on design work yet no one is willing to do so until everyone is in agreement. Someone has to direct the design team and provide timely feedback yet no one wants do so independently without a scheduled meeting.

Everyday, sites with a single point of contact move quickly through the system. There is less spreading out of the information that is shared, so consultations have more impact. Impromptu meetings can occur on a moments notice. Feedback is immediate. All involved in the project stay engaged from start to finish.

Don’t let your website development project become a burden and use your committee as an excuse to procrastinate until later – have a single point of contact for your website that is committed to it’s delivery.