Make Buying Fast and Easy

The typical online shopper wants their shopping experience to be fast and easy. Smooth navigation, a mini-cart display, and a simple check-out process will convince your shoppers to become repeat customers. Fred Perry’s elegant, understated design, with a very readable shopping cart layout and check-out page, provides the shopper with a pleasant shopping trip!

Include Valuable, Easy-to-Understand Information

Because online shoppers can’t handle the merchandise, detailed descriptions and photos must close the sale. Sony Style USA perfectly illustrates this concept. The contrasting colors, slick images, and informative product information gives the consumer a fully-developed concept of their product choice. Add in features to configure computers to exact specifications and the ability to compare similar product information right down to consumer reviews, and this site has made the complicated process of comparison shopping in the electronics arena a simple task.

Use a Unique Presentation that Captures Your Product’s Image

If you’re selling a unique product, the visual design of your eCommerce site should reflect its look and feel. Without reading a word, a visitor on your site should immediately know that they’ve found what they’ve been searching for. When you land on the Marc Hansen’s Comic Book site, the cool caricatures and fitting color scheme clearly communicates the purpose of this eCommerce store as well as the style of the product.

Brief and Informative About Page

While consumers want to get to know their online shopkeeper, they’re not willing to spend all day reading through a novel on your “about” page. Keeping it short and sweet is the best policy. Blik, a creator of removable wall graphics for home use, is a great example of brevity. Their customers can easily see what Blik is all about in less than five seconds. Snupped’s site is even better; they don’t even need an “about” page. On their simple, dark home page, the viewer can easily read that they sell customizable laptop sleeves while they see a few snapshots of sample sleeves. What else would you want to know?

Simplicity Rules!

Last, but not least, keep it simple! Allow your brand to take center stage along with the product, but eliminate all clutter and noise. After all, a great product that’s in high demand should practically sell itself. Harry Winston’s eCommerce site turns simplicity into an art form. With a white background that contrasts well with the striking images on the homepage, and the Harry Winston logo at the top of the screen, the message is clear.

By carefully considering which web design techniques work well for the most successful eCommerce sites, you can borrow a few market-tested approaches to make your site more appealing to your customers. Or you can consider earning an education in ebusiness, as eCommerce training is available these days. Don’t be afraid to try something new. After all, an effective branding strategy shouldn’t be a complete copy of another business venture.

When we push a button on a cell phone, for example, the button moves inward, or to a “down” state. Pushing the button triggers an action, such as displaying a letter in a text message. When the button is no longer being pushed, the button returns to its “normal,” unpressed state. We can tell if the button is being pushed by getting a feel for the current “state” of the button. As users, we are accustomed to how buttons behave, but as web developers, we must think about concrete button states in order to successfully carry button behavior over to the web.

All buttons, electronic or non-electronic, share three states: Normal (or Default), Over (or Hover), and Click/Push (or Active). Electronic buttons also have a Focus state. Below is a review of the four electronic button states, and how they relate to their non-electronic counterparts:

1. Normal or Default state – The state when no action is being taken on the button. The button is at “rest.”
2. Over or Hover state – On the Web, this is how the button reacts when the mouse is moved over the button. This state tells the user, “Yes, you are able to click me.” This is the non-electronic equivalent of running your finger over a button to get a sense of how the button “feels.”
3. Click/Push or Active state – How the button reacts and appears when the button is clicked. Usually, the button takes on a darkened or lightened appearance with an embossed outline, or switches to a reverse gradient pattern if the Default button state includes a gradient pattern. This is the same as pressing a button on your mobile phone.
4. Focus state – This occurs when the user tabs to the button with the keyboard, as opposed to navigating with the mouse. The Focus state shares its appearance with the “Hover” state.

As developers, we are accustomed to coding the Default and Hover states of our buttons, but not much attention is paid to the Active state. The Active state is essential for providing feedback to the user, as it tells him or her that the button has been clicked, and action is being taken. If no Active state is provided, users on slower connections, for example, may be left wondering if the button was actually clicked, since so “push of the button” response was given. Keep in mind that users are already familiar with this behavior, since operating system buttons typically account for all four states. For instance, move your mouse over and click the Start button on your Windows OS, and you will see the button change appearance according to the action taken on it.

The good news for developers is that these four states are not difficult to build, as each state can be developed through simple CSS. Below is a description of how to design and develop each state, using examples from a client website I recently developed.

1. Design for the “default,” “hover,” and “active” states. A good starting point is to design your “default” button, change the text color for the “hover” state, then lighten or darken the button’s background color or gradient for the “active” state.
2. Instead of placing your button as an image directly in your HTML, create a link with an id.
   

   <div class="button"><a href="services.jsp" id="services"><!--empty--></a></div>

3. Now in your CSS, assign a height and width for the link using the ID you assigned to the link. Assign a different background image for each of the three button states. Use the pseudo-class “:hover” for the mouse-over state, and the psuedo-class “:active” for the active state. I use the “outline:none” property to remove the dotted outline that surrounds the link when clicked in most browsers, but this is a matter of personal preference.
   

   #services{

    background: url(../images/services_btn.jpg) no-repeat top;

    display:block;

    height:41px;

    width:138px;

   }

   #services:active{

    background: url(../images/services_btn_active.jpg) no-repeat top;

    outline:none;

   }

   #services:hover{

    background: url(../images/services_btn_over.jpg) no-repeat top;

   }

4. You should also pre-load each button image using a traditional Javascript or newer CSS approach. This will prevent the button from disappearing and reappearing between state changes.

The bonus of using this method of switching button states is that it is also compatible with Internet Explorer 6 (IE6), since all actions are taken on links. IE6 is notorious for only allowing pseudo-classes to work on links, and not on divs or other HTML elements.

With just a little added effort, all online buttons can reflect the behavior of offline buttons. As buttons continue to grow in popularity and replace text links, more attention will need to be paid to how these buttons are used. While the design of a button may change, its behavior will not, and users will continue to count on the feedback from a button-click or push to know that their transaction is being processed, or that their comments are being submitted. If the user is satisfied, then our added time and efforts have been well spent.

It goes without saying that Web site statistics should be regularly reviewed for changes in traffic patterns, but other evaluation methods should be used to ensure that your Web site is properly reaching your target audience:

• Evaluate your Web site on the newest versions of each of the popular Web browsers: Display capabilities change with each new browser version, so it is imperative that you stay on top of how your Web site appears on the latest browsers. At a minimum, test on the latest Microsoft Internet Explorer, Mozilla, Mozilla Firefox, and Netscape. If you have access to a Mac, be sure to test Safari as well. Some advanced statistical packages will also tell you which browsers are being used to view your Web site. If you are getting significant traffic using an alternative browser such as Opera, be sure that your Web site works with it as well.
• Evaluate your Web site at different screen resolutions: There are several display resolutions currently being used by the vast majority of Web surfers. Change your Windows display resolution to match some of the different resolutions and visit your Web site. If you have a difficult time finding information on it at a different resolution, chances are that your visitors are too.
• Search for and compare with online competitors: Just because you’ve always faced the same competition from the same firms since the inception of your business doesn’t meant that there aren’t new competitors out in cyberspace who are taking your business. You may be pitted against many competitors that you’ve never heard of and your Web site might not be stacking up well.
• Determine what questions an interested member of your audience would be seeking answers to on your Web site and determine if the answers are easy enough to find. Many Web site owners approach their Web site as being a method of “telling visitors what I want to tell them”, but the most effective Web sites are constructed to easily allow visitors to find answers to questions that they have. After all, your visitors are the reason that the site is there. If they cannot find the information they are looking for, then your Web site is not doing its job.

Tools

There are many powerful tools that are inexpensive or even available at no cost that can help you evaluate and evolve your Web presence:

Evaluation Tools

• Google SiteMaps. This free service from Google allows you to learn a great deal about the searchability of your Web site and even allows you to “push” new content to Google instead of waiting for their spider to revisit your Web site every few months.
• Advanced search engine. An advanced search engine that shows the popularity of searches will help you determine what your visitors are looking for but cannot find in any other way than through the search engine. These results will allow you to more properly position and develop your content.
• Advanced Web statistics. An advanced statistical package will show you which browsers at what screen resolutions are being used to view your Web site, which pages are being visited (and which ones aren’t), and more. Services such as WebTrends and Web Side Story can help you evaluate the effectiveness of new marketing campaigns and edited Web site content.
• Feedback solicitations. Perhaps the best way to gather feedback about the effectiveness of your Web site is to solicit feedback on every page of your Web site. This will not only make it easy for your visitors to submit their comments, but will show them that your company is committed to delivering the content that they are seeking. Survey tools can also be used to solicit feedback.
• Link checkers. Most modern Web sites are built in such a way that internal links (links to other resources on the same domain) are always accurate, but even if yours is built in this manner, mistakes can still happen and external links (links to pages or resources on another domain) are always at risk of being broken.
• Browser checkers. There are many resources available to automatically check the appearance of your Web site in multiple browsers, platforms, and screen resolutions.

Evolution Tools

• Web content management (WCM). Web content management is a simple solution that allows your Web site to be changed as quickly as the market demands it to.
• Dynamic reorganization of content. Your Web site can be set up so that popular searches and links appear more prominently on your Web site automatically to help visitors easily find what they are looking for.
• Personalization. Each visitor has his or her own unique needs and viewing preferences. Allowing your visitors to personalize your Web site to their tastes will allow them to stay more informed about your company. The drawback to personalization is that a login is required.

NuRelm offers complimentary, personalized assessments of Web sites with no obligation. To request a free assessment, please visit NuRelm’s Website assessment page and one of our Web experts will be in touch to present a professional analysis of the strengths and weaknesses of your Web site.

1. Create primary points of focus – keep names the same. Using creative names detracts from usability. Also, avoid design that will be distracting or confusing for the user to understand and find what they’re looking for quickly.
   1. Once you figure out what parts of your website are “primary” and what parts are “secondary,” you can establish a visual hierarchy that enhances usability.
   2. Primary links are usually accessible from every page and located near the primary links. This shows the user that this information is important.
   3. The prime idea would be to design the secondary links likewise to show a hierarchy of importance.
2. Include A Search Box, typically on the right side of the website as a part of the navigation.
3. Avoid “Surprise” Drop-Down Menus. Drop-down menus  are quite prevalent in modern design because they simplify cluttered layouts.
   1. Visually indicating whether a navigation link will reveal a drop-down menu when the user mouses over it is best practice. This is most simply accomplished with a downward-pointing triangle, but whatever works for your design is fine also.
4. Before you design a horizontal navigation menu, consider link names, section hierarchy and any other factors that could affect usability.

When it comes to designing your own navigation bars though, common sense is key. What may make sense to you might not make sense to a user. Although horizontal navigation is now mainstream, having a vertical navigation isn’t out of the question if it works for your design. As long you have your hierarchy of importance set and it is obvious to the user, the sky is the limit. I personally do enjoy horizontal navigation bars and the fun things you can design to go with them;  Apple being one of my favorites for clean looks and simple navigation.  Last, who knows what the future holds for us web developers, for the internet is an ever-changing beast.

Type

Type is the basic building block of any piece, and often one of the most compelling features of design on a page. The major question is how do you know which typefaces work effectively together? There are typically three types of relationships between typefaces: concordant, conflicting, or contrasting.

Concordant – is the relationship between typefaces where you use only one type family without much variety in size, style, weight, etc. This gives the piece a subtle, more formal feel.

Conflicting – this relationship occurs when you have two similar typefaces in weight, size, etc. The similarities are there but the visual attraction is quite different, therefore they conflict with one another.

Contrasting – in this relationship you combine two unlikely and separate looking typefaces and elements that are distinct from one another.  By choosing visually appealing typefaces, you already have a lot of contrast built in. When paired with another typeface that contrast is emphasized.

Even though most designers typically wing type combinations, you can recognize the problem quicker and fix the problem faster when you are able to name the problem.

Categories of Type

While there are thousands of types available in this day and age, most typefaces can be dropped into one of six categories. Knowing each of the categories will help you in deciding what typefaces works well with another, and so on.

Oldstyle – Based upon the hand letter of scribes, Oldstyle always has serifs,including on lowercase letters. Imagine writing with a wedge-tipped pen, therefore giving the letters a slanted angle ending. There is also a thick/thin transition where the stroke of letter has a slight variation. Oldstyle has a diagonal stress (which means you a draw a line through the thinnest parts of the curved strokes). Typically if you are going to have a lot of text that needs read you’ll want to choose an Oldstyle because of it’s easy of readability.

Modern – These typefaces have serifs but are a horizontal lines instead of the penmanship slant of Oldstyle. The serifs are very thin, causing a radical contrast between the thick/thin strokes and giving a perfectly vertical stress. Giving a cold and elegant look, modern fonts give a striking appearance but are not good for large amounts of body copy.

Slab serif - Slab serif has very slight thick/thin transitions if any at all. Slab serif fonts are usually very heavy in visual weight but can be used in an extensive amount of text because of their easy readability. These fonts are often used for children’s books because of their clean, easy and  straightforward look.

Sans serif- “Sans”  means “without” in French, and “sans serif” means “typefaces without the serif endings on the letters.” These typefaces are typically “monoweight,” meaning they are the same thickness all the way around. Alternatively, there are a few sans serif fonts that do have a slight thick/thin transition. Use caution with these fonts because of their similarities between classic Oldstyle fonts. Sans serif fonts have a lot of versatility and can be very helpful with all their font weight options (ex. thin, extra thin, bold, extra bold, heavy, black, etc.)

Script – This typeface is any that tends to look like it’s been handwritten whether via calligraphy pen, brush, or pencil. Scripts are fonts that should be used sparingly, and never in all caps or large blocks of text.  However, Scripts are a font that can look striking when placed in large text.

Decorative – One of the easiest types of font to recognize. Because each of these fonts are so distinctive, their use is rather limited, although anytime you want to make a bold statement or have something stand out, a decorative font is a good choice. When using a decorative font, try to go beyond what your first impression is and see if you can make something new come out of it.

The Contrasts of Type

Going beyond aesthetic appeal, type  enhances the communication of a specific piece. The reader should have a clear concept of organization, purpose, and flow of information.  All of which should be recognizable at a single glance.

Size – A contrast in size can make a big impact, so don’t be afraid.  If you contrast too little, people can think it is a mistake and not what you’re trying to convey, so make it obvious.  Alternatively, you don’t have to make the type large to have a contrast in size. You can have a small line of type on a large page, which still creates contrast.

Weight – Weight refers to the thickness of strokes. Most type families have a variety of different weights. Don’t go for the regular type with the semi-bold counterpart, use the extra bold or black version.  By efficiently using weight, you can visually organize the information on the page (via headings, sub headings, etc.). If you lack the room to put graphics or other visual elements in an otherwise drab and boring newsletter, bold the key phrases or headings.

Structure – Structure refers to how a letter is built.  One major rule to remember is to never put two typefaces from the same category together on the same page.  An easy rule of thumb would be to choose a serif font and a sans serif font until you get the hang of the different type categories.

Form – The shape of the letters is referred to as form. One of the easiest ways to think about it is lower case letters versus capital letters. An example would the form of a “G” capitalized and lower case, some fonts have the letter form the same for both capital and lower case (just slightly smaller).

Direction – The obvious choice for direction would be to type from a slant, but another interpretation of direction would be how the type is set on a page horizontal for straight across and vertical direction for when you use columns.

Color – Color has obvious interpretations as well. When choosing a color to include in your piece, knowing the meanings of colors is helpful.  Warm colors are forward whereas cool colors recede.  Also just having black text is still considered a “color” and is considered the most sophisticated of them all.

Combining the Contrasts

All in all, don’t be wimp, the most effective layouts take advantage of contrast. For good inspiration, leaf through a magazine and check out the articles and advertisements. Verbalize what you see, if you can name the dynamics and relati0nships you have power over them. Before trying a better solution identify the problem. Go ahead, experiment!

What now?

If you’re still confused or need help please don’t hesitate to call Liz at NuRelm 724.430.0490! Or email Liz at liz@nurelm.com.

In steps CSS3 …

The newest family member to the style sheet family is CSS3. With the possibility of new and exciting things when it comes to designing and how you design, things look hopeful on the horizon. Word on the street is that with CSS3, you can create more diverse styles sheets for large variety of occasions and much much more.  All of this information can be found at css3.info more in depth and detail.

If you don’t want to wade through all the details, here’s a summary for Web developers and Web users broken down into website parts:

Borders

• border-color: in Firefox there is now an option for a fading gray border, a very common effect that is now achieved in somewhat kludgy ways.
• border-image: this feature can define an image to be used instead of the normal border of an element. This feature is actually split up into a couple of properties: border-image and border-corner-image.
• border-radius: a new feature in CSS3, which allows you to create round corners on box-items (very sexy stuff … if you’re using Firefox or Safari, check out how that works here, a page that helps you roll your own “themes” on the site of our favorite Javascript library, jQuery).
• box-shadow: another new feature in CSS3, gives you the option of setting up a shadow on a box-item and varying the options … once again, a very common activity that is currently done in unsettlingly dirty ways.

Backgrounds

• background-origin/background-clip: this property is going to be used to calculate background-position of a background in a certain box. A feature in this property is used to determine whether the backgrounds extends into the border or not.
• background-size: You can specify this size in pixels, width and height, or in percentages of a background.
• multiple backgrounds: this snazzy new feature allows the implementation of multiple backgrounds on one element.

Color

• HSL (Hue, Saturation, Lightness): using hexadecimal colors as well as HSL colors are going to be implemented in CSS3.
• HSLA (Hue, Saturation, Lightness, Alpha): similar to the HSL feature it allows a fourth value, which sets the Opacity (via the Alpha channel).
• Opacity: this feature can used by implementing HSLA & RGBA colors.
• RGBA: similar to the HSLA feature where there is now an alpha channel option to create opacity.

Text Elements

• text-shadow: eliminates the need for Photoshop when all you want to do is a simple shadow.
• text-overflow: for this particular feature sometimes when text will have to be clipped you can place a  “…”  to show there’s more text.
• word-wrap: this feature allows the extremely large words or sentences to wrap much cleaner and more efficiently than in previous versions.  For example if the text is in a box you can constrain it to said box.

User-interface

• box-sizing: you can force the browser to instead render the box with the specified width and height.
• re-size: yet another new feature of CSS3 that allows you to deem a box re sizable.
• outline-offset: this new element allows the offset to be rendered away from the edge of the specified element.

Selectors

• attribute selectors:[att^=val],[att$=val] and [att*=val] are the three new attribute options added to the mix in CSS3 to matching substrings in the value of an attribute.

Other Modules

• media queries: this new feature makes it possible to change style sheets based on for instance the width and height of the viewport (such as firefox, iphone, etc.).
• multi-column layout: this feature allows text be fitted into columns, in two ways: by defining a width for each column, or by defining a number of columns.
• web-fonts: by using @font-face website makers can use any licensed TrueType (.ttf) or OpenType (.otf) font in their pages.
• css speech: this feature is used for creating style in speech synthesis in aural user agents (e.g. screen readers). There were several additional properties added to this new media type.

In short, it looks as though there are a lot of exciting things on the horizon for Web designers and Web surfers alike.  However, you may not want to go right out and create your first rounded-corner, drop-shadow enabled Web page quite yet, as it’ll be a while before browser software writers agree on, let alone implement, these new ideas (here’s a slightly dated, but pretty darn good compatibility table, in case you’re interested in the details).

But, Rome wasn’t built in a day … and in fact CSS3 will take way less time to adopt than it took to build Rome, so keep your eyes peeled.

Reviewing C.R.A.P.

Be bold.  Leave plenty of blank space for a place for the eyes to rest.  Be asymmetrical,  it typically makes your efforts stronger.  Don’t be afraid to make text or images big or  small.  Proximity is where related items should be grouped together.  Separate items that are not directly related.  Alignment: make sure to keep pieces unified and keep alignment with other elements on the page. Repetition is the stronger form of being consistent,  see what you already consistently use and make one of the elements stronger.  Contrast draws the eye to the page, the strong black versus white space.

Extra Tips & Tricks

Identity Packaging - the most prominent features of an identity package are cohesive repetition throughout.

Business Cards – Use second colors sparingly. Talk to the print shop on how to set up your business cards on a page.  Standard business card size is 3.5 inches by 2 inches (vertical or horizontal).  Some pitfalls to avoid on business cards are to keep things out of the corners,  avoid using Times, Arial, or Helvetica typefaces.  They’re dated. Try to avoid using 12-point size font business cards. Typically, 10-point or smaller is used.  Finally, don’t feel like you have to use the entire space. There’s no need to have the words email or website on the card. A left or right alignment gives a more professional look than a center alignment.  Use periods instead of dashes or parentheses, it gives a much cleaner look.

Letterhead & Envelopes – Use a similar format on the letterhead, envelope and business card.  Make one element dominant, but avoid having the boring center aligned across the top layout.  If you make a second page take a small element from the first page and use it alone on the second page.  Since you’ll invariably be faxing or copying your letterhead avoid dark or speckled paper.

Flyers - With flyers the sky is the limit. You want your piece to stand out because it has to compete with all the other readable junk out there.  Most of all you want to call attention to your headline.  Some pitfalls to avoid: boring typefaces, putting characters in boxes, instead of hyphens or bullets try zapf dingbats instead, don’t center everything (boring),  avoid  ho hum gray contrasts, watch your line breaks so there are no unnecessary hyphens. Try using interesting new typefaces. Use a big graphic element or typeface in a huge way.  If you draw the reader in with interest they will read the text.  Try to use subheadings that contrast so the reader can scan,  make a strong focal point,  use repetition for typefaces even if the typeface is bold or different.  Finally, make sure to choose one kind of alignment.

Newsletters - The main element when designing a newsletter is consistency. Each pages should look like it belongs.  That doesn’t mean everything needs to look exactly the same, though.  Also don’t forget your white space. Your flag or masthead sets the tone for the rest of your newsletter. It should tell your readers who you are.  Use contrasting type, but use your type consistently throughout the newspaper.  Make sure to have your headlines and sub heads bold and contrasting so the reader can skim.  Avoid using a sans serif typeface for the body text as it’s hard to read.

Brochures – Before making a brochure you should sit down and fold a piece of paper to determine how you want your brochure to look.  Choose the style for the front and back panel and how it will open.  Be careful though, the fold measurements aren’t the same on the front as they are on the back.  Be aware of the folds. You don’t want information getting lost in the folds.  You will need a “gutter” to keep you from losing text in the folds.  On the other hand, feel free to have graphics flow from panel to panel. As always keep alignment consistent throughout the whole brochure and keep the text size under 12-point.

Postcards – Postcards are a great way to grab attention.  Be different.  Use an odd sized postcard to make it stand out.  Be specific with your message but keep it brief.  Use color to attract the eye. The guidelines for business cards can also be applied to post cards.  Be brave in your design and don’t forget your white space.

Newspaper Ads -  White space is a must. It gives the reader something to land on.  Be clever with your headlines, be clear on your purpose, and be brief.  Readers want simple and to the point.  Avoid reverse type (white type on black background).

Websites – As always repetition and clarity are important. Websites must be inviting and easy to navigate. Consistency is also a key factor is designing websites.  Line lengths of text are actually shorter than what is used on paper.

What now?

If you’re still confused or need help please don’t hesitate to call NuRelm 724.430.0490!

Preview of next article:

How to design with typefaces and make them work effectively.

One real statistic that should be the real motivating “fear factor” is that as of March 31, 2009, over 251,290,489 North Americans are online, according to the Internet World Statistics Consortium (http://www.internetworldstats.com).  That’s 74.4% of the population, meaning that 3 in 4 of your customers and prospects are using the Internet and that if your competitors offers more on their Web sites than you do, you’re putting your firm at a distinct disadvantage.  Also, according to AC Nielsen, the Internet is now third in media consumption, ahead of newspapers and magazines, and trailing only television and radio, and each of those two most popular forms of media has continued to lose ground against the Internet.  You can read more about AC Nielsen’s findings at this Web address: http://www.marketingpower.com/live/content21023.php.

Overcoming Web Phobia

Questions such as “Where do I start?”, “How much will this cost?”, “What if the finished product isn’t what I had in mind?”, “What guarantees are there?”, “How do I choose a vendor?”, “What do I put on my Web site?”, and “What’s the ROI on a Web site?” may be some of the first thoughts that someone has when considering a Web site.  These are all common questions that those shopping for a Web site should be asking.  The answers are easily found, and finding them can help set expectations and reduce the fear factor of purchasing a Web site.

Here are some ways to become more confident about your Web decisions:

Get out there and use the Internet! If you only use the Internet to check your email or for a few favorite sites, try visiting some unfamiliar Web sites to get a feel for what’s out there.  Spending a few minutes a day on the Web can help you become comfortable with Web sites and what they can offer.  Soon, you’ll determine what you think is useful and you’ll begin to visualize your ideal Web site.

Don’t fear the price tag. Quality, custom design prices have fallen sharply over the years as supply has increased to match demand.  If you compare the cost of your up-front investment on a Web site to the cost of one radio, television, or print campaign, you’ll find that the costs are considerably lower, but the life of a Web site is much, much longer.  To make a Web site even more budget-friendly, many companies are now offering lower up-front fees with monthly service fees that, even after many years, will not equal the up-front fees that were charged only a few years ago.

Arm yourself with information. The first step in curing your fear is research.  The Web provides a free, convenient way of conducting this research.  Researching competitors, the wants and needs of your target audience, the industry, and users can be as easy as typing a few words into Google.

Plan your Web site to help alleviate burdens on you and your staff. A Web site doesn’t have to be a simple advertisement – it can be a utility that can make your company operate more efficiently.  For instance, if your administrative personnel are often spending a great deal of time talking with callers who want employment information, a job listing may be a feature that you would like to have on your Web site.  The limitations are nearly endless, and your Web site can help to alleviate or eliminate a wide array of inefficiencies.

Grow your Web site as your needs evolve. The one-time limitations that apply to print advertising do not apply to the Web.  You can change your Web site at any time you wish – meaning that corrections and changes can and should be made well after the Web site has launched.  A quality Web site will include ways for you to change your Web site, and a quality vendor will offer a phased approach to development so that you don’t have to incue a large initial cash outlay.

Choose a vendor who can handle any need and who can offer guidance through the process. A quality vendor will not only abide by your wishes, but will also present alternatives and opinions based on your plans that may increase your Web site’s effectiveness.  When choosing a vendor, consider their prior work in your decision.  If a vendor’s previous work all seems very similar and resemble a “cookie-cutter” style, that vendor may not be able to help you grow your Web site as your needs evolve.  You should be looking for a custom tailor, not a factory.  Also, if your vendor makes the process seem complicated, you may want to consider using another. A good Web designer should make it easy for you by removing any complexity from the process.

Be ready to promote your Web site and gain visitors – on a budget. Return on investment is directly linked to the amount of traffic that your Web site gets and it’s a little known fact that you can generate Web traffic yourself, or with the help of an intern or administrative employee.  One of the secrets of increasing traffic is to get your site linked to related Web sites.  Not only will visitors of those sites be presented with your company, but the search engines count each link to your Web site as a vote for it and will place your site higher in its rankings.  The logic is that if your Web site wasn’t any good, why would someone link to it?  Getting linked can be as simple as finding related Web sites and requesting a link via email.  If your Web site contains some free information, such as articles written by your staff about your industry, the other Web sites will be more willing to link you.

Some other inexpensive ways of getting the word out about your Web site are to list it on your business cards, print advertisements, and all other “traditional” media, make references to your Web site in all press releases, send out email newsletters, and to announce it on bulletin boards and in chat rooms.

Set realistic expectations. Realize before you start that a Web site is like any marketing expenditure – success cannot be guaranteed and the effects of a new Web site will probably not be felt immediately.

Just because it hasn’t been done doesn’t mean that it can’t or shouldn’t be. You may have some great ideas for your Web site, but you haven’t seen any examples of it through your research.  It is very possible that your idea could be very useful to your target audience and you should consult with your vendor about implementation.  Don’t be afraid of asking questions or making suggestions – every idea for the Web hasn’t been thought of yet.

If you follow these recommendations, you will have learned a lot about the Web and will be ready to make an informed, fearless decision about your company’s Web strategy.

proximity shows how the text is related to the rest of the layout, contrast is the difference in text weights used, alignment is how all the text is left aligned at the same margin, and repetition is how the color is used throughout the layout.

The Four Basic Principles

As taken from Robin Williams’ The Non-Designer’s Design Book, there is an awkward yet memorable acronym to recall the basic design principles. The four principles are Contrast, Repetition, Alignment, and Proximity, or C.R.A.P for short. Very rarely will only one of these principles be used, since all are really interconnected with one another.

Contrast

The point of contrast is to avoid putting multiple elements together that are considered similar. Contrast is one of the most effective ways to put visual interest into a page. The most important rule in order for contrast to be effective is that it must be strong. To add contrast, you can use your typeface choices, line thickness,  colors,  shapes,  sizes,  space, etc. By adding these elements into your piece, it draws your reader in and aids in the organization of information for the reader.  Some things you should avoid when using contrast are to stay away from the “too similar.”  Brown text against black visual elements is an example. Another example is using two similar typefaces.  Make each different and it will create a much more pleasing piece.

Repetition

When you repeat visual elements of a design throughout the whole piece, you create unity, which makes a stronger, more organized piece.  Elements such as a bold font,  thick line,  color,  formatting,  spacial relationship, etc.  are some things you can use to tie your piece together.  The visual element can be anything the reader will visually recognize. Another way of thinking about repetition is consistency.  When you keep all your headers the same size and use the same font,  you are implementing repetition.  One point to avoid with repetition is that you don’t want to be overwhelming and overbearing. “For instance,  if the woman is wearing a black evening dress with a red hat,  earrings, red lipstick,  a red handbag,  red shoes and a red coat – the repetition would not be a stunning and unifying contrast -  it would be overwhelming and the focus would be confused,” says Robin Williams.  The point is to make the piece look interesting.  Once you do so, the more likely it will be read.

Alignment

It has been stated that with alignment, nothing should be placed on the page arbitrarily. Every item on the page should have a visual connection with something else on the page. With alignment,  even if certain elements are separated by space,  there’s an invisible line that connects them.  Just by using careful alignment,  you can create a sophisticated, serious,  funky,  or formal look.  So when laying out your work,  be conscious of where things are placed and aligned,  as  it can make a huge difference. When using alignment try not to use more than one alignment for text,  such as centered and right aligned,  in one layout.  Also, try to  break away from using the standard center aligned text unless  you want a formal and sedate feel.

Proximity

The idea behind proximity is the grouping of related elements together.  This is so that the items can be seen as one cohesive group. Organizing is the primary purpose of proximity.  Some points to consider when using proximity: avoid too many separate elements on a page, don’t put items in the corners or the middle of the page, avoid leaving equal amounts of white space between elements unless each element is part of a subset, don’t let a split second of confusion occur with the relationship to a headline, and finally, don’t create relationships with elements that don’t belong together!  Using this principle will give your readers a logical progression defining a beginning to a logical end.

Pulling it all together!

So when it comes down to making a newsletter or sending out a memo, take your time! Remember to use your C.R.A.P. principles. Everything should be placed where it is on a page for a reason. If you still need help,  please don’t hesitate to call NuRelm – 877-268-7356.

Preview of next article:

A brief review of our previous content combined with many tips and tricks to help with all of your design projects.

Web 2.0 Explained

Web 2.0 is more than just current trends in website design. In fact, 2.0 includes current Web phenomena like social networking websites (MySpace, Facebook, and LinkedIn),  blogs, wikis, and video-sharing websites.  According to Wikipedia, Web 2.0 is “characterized as facilitating communication, information sharing, interoperability, user-centered design, and collaboration on the World Wide Web.”  To sum it up, Web 2.0 is all about simplicity and getting more done with less.

2.0 Design Principles

The characteristics of Web 2.0 lend themselves to the design innovations of 2.0.  Aside from the glossy buttons, rounded corners, and reduced clutter,  some of the trademarks of a 2.0 design include:

• Larger font and ample white space  that allow the user to quickly scan a website to locate what he or she is seeking  instead of reading through paragraphs of 12pt text just to locate one line of information.  Many current sites use sans-serif fonts (Arial and Verdana, for example) since these fonts are generally easier to read on-screen, and they retain their crispness at varying font sizes.
• Strong Colors:  Solid, vivid colors are often used to highlight areas of importance or interest. While gradients are used for background effects and special objects such as buttons, solid colors are used for call-outs on other essential areas of the website.
• Bold Logos: Since font sizes in general are larger amongst modern web designs, a company’s logo needs to stick out more than ever.  Many companies account for this by re-working their logos and using bolder, rounded fonts. Usually, these logos are again surrounded by a decent amount of white space to prevent crowding, and to allow their logo to flow with the rest of the site’s text and graphics.

Branding with 2.0 in Mind

Today, many companies are looking at the design fundamentals established in Web 2.0 websites, and are incorporating them into their own marketing campaigns.  One of the most popular and most recent examples is Pepsi’s logo re-design.

The new Pepsi cans and bottles feature a revamped Pepsi logo against a simple blue background, with the word “Pepsi” to the lower left of the logo in rounded, lowercase letters. The text aspect of the logo, and the solid blue color of the can, is very similar to 2.0 web design.  All lowercase letters,  in a strong,  sans-serif font,  highlighted by the solid blue can and offset by the new Pepsi logo itself,  remind one of a simple 2.0 website.

Other companies are following suit. Examples of  companies that are using 2.o styles in their branding decisions include Wayfaring, Pando, Mozilla, and Eventful. Notice how each makes uses of clean, rounded fonts in their logos, which mesh well with the rest of their site’s design.

Think Outside the Web

Although the design elements in Web 2.0 may give way to different design methods further down the line, it is easy to see that what is online today has a large impact on branding decisions in all forms of media. Keeping your web and print branding consistent can go a long way toward solidifying an impression in your customers’ minds, and will make you look more professional in today’s rapidly evolving medium.