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.

In this article we will take a look at creating some great looking product photos on a budget. We will outline how to shoot a basic product shot. The emphasis will be on background, lighting, and the positioning of the product itself. You can use any small object to shoot that offers a great example to highlight the basics of lighting and shooting an isolated product photo. I have chosen a small friendly shaped incense burner.

Lets take a look at our final photo (unedited):

Our final photo (unedited).

Equipment rundown:

In both set ups I am using single lights – one diffused, one bare. Keep in mind that multiple light set ups can really increase your quality of lighting, and your budget. So for the sake of this article we are using one light, per example.

Example 1: Basic Lighting – single ‘bare’ light:

These are basic non-diffused light set ups. You can get some great quality lighting from these, and also use them as a platform to start your lighting set up. You can later add soft-boxes or umbrellas to these lights.

My single 'bare' light

You can purchase a set from amazon for around $40.

In action:

single 'bare' light set up

Example 2: Advanced Lighting:

There are so many more lighting options as your budget increases… you can use soft-box lighting or umbrella lighting, Continuous or flash. The list goes on. I used our in-house soft-box set up. Typically an umbrella setup is a bit cheaper with similar results.

Soft-box

Umbrellas around $80 to $100 on amazon

In action:

Single soft-box set up

Reflecting light:

You can find many things to use to reflect light, but hardly any will be as easy to use or as versatile as an actual reflector. And for about $30 on amazon you can get some great ‘5 sided’ reflectors. These will make a huge difference no matter how you shoot. If you purchase nothing else for your photos, purchase a reflector.

'5 sided' reflector

Location:

For our backdrop I used white paper on a roll. Very inexpensive and very reusable. There are many “portable” photo studios or “product booths” but those are pretty limited in size of product and a bit overpriced if you ask me. Our clean white paper will do just fine.

Our backdrop

Set Up Breakdowns:

Set Up 1 – Bare light:

Lets take a look at shooting our ‘product’ with our single bare light set up.

Bare light

I have left this image a bit underexposed to show how harsh your shadows can be with the bare light set up. But hard shadows aside, we don’t have a bad start to a great product photo. Let’s add a reflector to this set up.

No Reflector

With Reflector

You can see in these images with no other change than the reflector being added opposite of our light source, what a huge difference reflected light can make. There is still a somewhat harsh shadow on the paper from our single light. This is a great single bare light set up and a perfect one on a budget. Those shadows will disappear with our next set up, but so will some of your cash. So while there is a bit of shadow, this is still a very professional set up for some great shots.

Set Up 2 – Diffused Lighting:

Single soft-box

Compare this to our ‘bare’ light shot and you can see a huge difference in the lighting quality. I placed the soft box above and to the left of our product for this shot. You will first notice the wonderful soft shadows and great even lighting that we have with this set up. But it can get better.

With gold foil reflector

Notice in the image above I am using the gold side of the reflector, this helps to “warm” the lighting of our product. It also washes out the softer but still somewhat visible shadows on the white paper.

Once you have experimented around a little bit and have your set up adjusted to your liking, you should be taking some great product photos.

Final

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?

When it comes to advertising, there are a number of ways to promote your business. Make the most of your advertising budget by creating ads that specifically target your potential customers.

There is no universal advertising solution that works for all businesses, because every business has a unique audience. Once you define your market, you can start thinking creatively to target more customers with your advertisements. For example, a local daycare center may find that advertising on the back of a school play program is more effective than advertising on the radio, because the school program specifically targets parents in nearby schools.

This article will go over many types of advertising media that you can use to promote your business.

Out-of-Home Advertising

Out-of-Home advertisements, or outdoor advertisements, are any type of ads that are in public places. These ads work best in urban areas, where each advertisement is seen by a large number of residents and commuters. Some are designed to reach a mass audience, such as a billboard in a popular intersection, but you can also use out-of-home advertising to target specific types of people. For example, a stadium ad would be seen by sports fans who are predominantly male.

More examples of out-of-home advertising:

• Billboards (Traditional, Digital, and Mobile)
• Bus Shelters
• Benches
• Bus Wraps
• Car Wraps
• Taxi Tops
• Stadium Ads
• Gas pumps
• Aerial Advertising (Airplane Banners, Blimps, and Skywriting)
• Mall Advertisements
• Movie Theatre Screens
• Window Clings
• Floor Graphics

Online Advertising

Online advertising includes any type of promotion that uses the internet. Many companies today already have websites, but there are countless other ways to market your business online. One of the benefits of advertising online is that it’s much easier to track how many people are viewing your ads, and how many people click on them.

Pay per click (PPC) advertising allows you to target a specific audience with keyword phrases that are related to your products or services, such as ‘Women’s Clothing’ or ‘Texas RV Dealer’. You can also advertise on other websites or list your business in online directories that are related to your field.

More ways to promote your business online:

• Banner Ads
• Online Directory Listings
• Search Engine Optimization
• Pay-Per-Click Advertising
• eNewsletters
• Email Marketing
• Social Networking Websites (LinkedIn, Facebook, Twitter)
• Creating a Company Blog
• Posting Videos on YouTube or other video websites
• Posting expert articles on community websites related to your product or service
• Distributing online coupons
• Submitted a product feed to Google Base
• eBay and other Online Classified Sites

Broadcast Advertising

Broadcast advertising uses audio or video communication to create ads. These advertising spots are purchased from a television or radio station. Radio advertising tends to be more affordable and faster to produce than a television advertisement, but pricing for both varies based on production costs and pricing for the time slot. With either medium, your ad can broadcast on stations or channels that target your demographic.

Types of broadcast advertisements:

• Television Ads (Cable, Local, and National)
• Radio Ads
• Sallellite Radio Ads

Print Advertising

Print advertising includes any promotional material printed on paper. Advertisements in newspapers can target a broad range of local readers, while magazines are able to target subcribers based on interests. Direct mail advertising sends print materials directly to targeted recipients. These lists can be purchased, or developed by the business. Print media can also be handed out at events or given to customers who are interested in your business.

One benefit of print advertising is that the potential customer receives a physical copy of your message that they can keep and refer back to for contact information, rather than hearing or seeing your ad for a fleeting moment.

Types of print advertisements:

• Newspaper Ads
• Magazine Ads
• Program Ads for Events
• Yellow Pages Ads
• Brochures
• Flyers
• Postcards
• Newsletters
• Booklets
• Business Cards
• Posters
• Coupons
• Local Directories

Discovering your target audience will help you promote your business more effectively, because your efforts are concentrated on people who would be interested or could benefit from your solutions. With some creative thinking, you can target these customers with your advertisements and discover which medium yields the best results for your company.

Empty plastic bags roll through a cracked and patched pavement parking lot. Shopping carts are scattered about… some maneuvering themselves unmanned through the rows of unpopulated parking spaces of the Electronics-O-Rama. The store signage is in disarray, and the glass of the storefront is fogged and dirty. The color scheme of the decrepit building is like that of a circus tent, plastered with fliers and promotional signs made with poster-board and Sharpies. However, on the inside of this dilapidated place of business is the brightest team of individuals ever to be in customer service, and their product is one in a million. No one comes close in either quality or customer satisfaction, but few customers have even thought twice about giving them the chance to prove themselves.

Electronics-O-Rama suffers from poor perceived credibility. The surface of their business, the “visual handshake,” is lacking a quality that the competition offers, though the competition can’t offer the same quality product or service.

Just how important is perceived credibility? Many small retail establishments have faded over the years to flashier, bigger, chain retailers providing the same products with worse customer service, or in some cases worse products (and customer service). What makes Best Buy more credible than Joe’s TV’s? The answer…

Perception:

A Stanford University study found that 41.6 percent of people from a total of 2684 surveyed stated that design was of high importance when related to perceived credibility. Something interesting to note from the study is that  your users will judge a website by its design. Even though the old saying goes, “You can’t judge a book by it’s cover,” it just isn’t true for the web because the internet is so much more visually rich than books.

Layout, color, consistency, and style all play a major role in the  image you portray to your users. Your website shouldn’t just be a beautiful image, but the right one to represent your company. And while image and style are important, they aren’t the only factors that play a part in your user’s perception. You must also carefully craft your website’s content for quality information, keep your content fresh and relevant with updates, make sure it is easy to use, and keep errors in check. The study discovered looks matter; this of course varied based on the type of site, with banks and financial institutions having the most design importance and reviewers of blogs and opinion sites not placing as much emphasis on design. Users directly relate your credibility to the look of your website. Just as much as you would not have stepped foot into Electronics-O-Rama, your users won’t visit or remain on your site if it doesn’t look credible, regardless of how good you are.

The next highest area of perceived credibility was information architecture.  Your customers need to get around your site too, without becoming frustrated with poor navigation or illogical information flow. It is these things that added up to the two major slices of the credibility pie. Other important factors to remember are information focus, information accuracy, as well as usefulness and clarity. Your information needs to be straightforward, unbiased and accurate, your users can quickly discern the difference between being flashed over with fancy talk and receiving the real deal.

Ballpark

I know nothing of BallPark (image to the left), the quality of their product, or customer service. What I do know is that they appear extremely credible. Their website has a very well laid out and beautiful user interface with easy to find and understand information. It all helps to make a great first impression and this site is a breeze to explore. Take a look for yourself. If you were in the market for a similar product or service they would seem very worthy of your attention. Isn’t this the image we would all like to present? Beautiful, professional websites that make users want to stick around for more and leave lasting impressions.

Give your users engaging visuals, well crafted content, and world class usability, and you’ll have more and more of them in no time at all.

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.

This has been a busy year so far for companies trying to get noticed. Now I can understand with the recession that there is cause for concern and more reason to bring attention to your business. But attention alone doesn’t make a customer suddenly what to do more business with you. There is something to be said about familiarity too as well as what kind of attention you bring to yourself.

Original and now new again Tropicana packaging on the left, new but now old generic branding on the right.

Eariler this year Tropicana brought attention to itself by switching it’s packaging. A whole new look brought much attention for this orange juice icon. However, the attention was not positive. Amazingly, Tropicana was not able to have the foresight to realize that trading in a premium branding campaign built up over decades with a generic branding campaign anyone could have come up with wasn’t a good idea. It makes it harder to justify a premium price too if your branding reflects a generic brand. Customer outcry made them realize the mistake and a few months later, and a bunch of marketing dollars shorter, and the original branding is back.

I’m driving to work and pass by the local Wal-Mart Super Center – what the heck is that funny new logo? Oh my gosh, did they paint over the trademark blue on the outside of the building? I just can’t help thinking this is a change for the sake of change without any business reasoning behind it. I’ve never seen a shortage of cars in their parking lot and I’ve never stood in line for less than 30 minutes just to buy a pack of batteries. Love ‘em or hate ‘em, the new branding is just going to further irk detractors and alienate core customers, in my opinion. Wal-Mart is too much of an institution than a store – maybe more of a tradition as generations of families have been brought up under it’s roof. You just don’t mess with tradition. I’d love to see the price tag for this re-branding vs. how much more it actually adds to their bottom line.

How about that new Pepsi logo? Kinda weird, huh? Ok, they have always tended to market mostly to a younger demographic, so I’m not going to be too critical of their new branding. It may not appeal to me, but then again, I haven’t had a soda of any kind in about a decade or so. I’ll remain neutral on this one.
Even Maxwell House!

Even Maxwell House can't resist a major tweek to their branding.

I dislike their overpriced coffee and over-sugared specialty drinks like Frappacinos, but have always loved Starbucks coffee-flavored ice cream. I mean, I really love the stuff. But Starbucks has played musical branding with it’s packaging – each time getting more generic in appearance and each time I end up seeing less of it being stocked in the ice cream isle at my local supermarket. Hmmm…. Then, about 6 months ago it disappeared altogether from the shelves for a few months. I must have bought every other coffee ice cream brand known to man when magically Starbucks coffee ice cream reappeared on the shelves with what’s that, yet another packaging design (and what I swear is a different taste too). Why can’t they just leave well-enough alone – all these improvements are making it worse.

You’d think I was an anti-new-brander by this blog post so far, but I’m really not. I love pointing to the rebranding that UPS did a few years back. They took their tradition with them, enhanced their logo and made the color brown kinda cool. There was no re-adjustment, no “that’s weird” stage – everything was the same just better. You didn’t feel like you were doing business with a different company – they maintained their identity.

Now these are big multi-billion dollar corporations with established identities at stake, but what about the small business owner? What is the identity of your brand – do you have a brand identity?

Usually small business owners start on a small budget and logos and branding tends to be at a lower importance level than other factors in getting the business up and running. But as your business grows, the importance of your branding grows. As you become more established in your field, your premium rises. Just as Tropicana can charge more money for their better known, premium orange juice, your rates for your products or services will increase too. As your rates increase your customers will expect your branding to reflect this new premium. Tropicana spent a lot of money learning this lesson – don’t expect a premium while presenting in a generic fashion or stripping away your established identity.

If you are new to the game then you are in a good position to start off on the right track. Working with a good design team you can establish the look of a premium brand before you really are one. Upfront costs in this case are more, but you can save yourself a lot of retooling of your brand down the road.

What does your brand say about you? Are you a generic, a premium, or somewhere in the middle?

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.