Definition
Graphic Design’s primary purpose is to organize, plan and arrange page content into art that will influence or market to an audience.  The key ingredient to graphic art is composition which is the organization, placement, and visual appeal encompassing the ideas you want your viewers to act upon.  Graphic Design is the thread you will see throughout advertising, whether it is your logo, business card, website, commercials, etc. In any of these you will find the following essential graphic design attributes:

• Page layout – aesthetic style and positioning of page elements or objects
• Printmaking - producing printable art; prints are created from single flat medium
• Typography - assembling type or character design
• Web Design -  online appeal and communication
• Visual Arts -  primarily visual three-dimensional objects

History
The historical start of Graphic Design began with the birth of the first written language in the 3rd or 4th millennium BC.   Also, paintings found in Lascaux caves of 14,000 BC. Another significant time in history was the start of printing during the time between 4th to 7th century A.D.   These times have all contributed and influenced to our modern day advances in graphic design.

Contribution to Marketing
Bringing across persuasive ideas in marketing is the very key to having your target market take the actions you are looking for. Graphic Design is what makes it possible to apply the visual appeal of your product or service and create the ‘buzz’ and interest in your brand. The influence of graphic design in advertising and marketing is significant. Many marketing occupations require graphic design background, including Advertising & Publishing Art Directors, Production Designer, Web Designer, as well as, Film Production.

Software Tools
Obviously today’s graphic design world is strongly influenced by software tools.  They are imperative to the modern art world.  What software tools are essential to graphic designers?

Page Layout/Desktop Publishing

• Professional: Adobe InDesign, QuarkXPress
• Long Documents: Adobe FrameMaker, Corel Ventura
• Business or Enterprise:  FrameMaker, Corel Ventura, QuarkXPress
• Home: Print Shop, Sierra Print Artist
• Small Business: Microsoft Office Publisher, Adobe PageMaker,
  Serif PagePlus

Graphics

• Illustration: Adobe Illustrator, CorelDRAW, Macromedia Freehand
• Photo/Images: Adobe Photoshop, Corel Photo-Print

Web Design: Dreamweaver, Microsoft Frontpage

Why does Graphic Design Improve Conversion from Marketing?
We know that graphic design is a major part of marketing, but why and does it make a difference?  Design affects many parts of our life including the buildings we walk into, the billboards we see along the side of the road, to the labels we see in the supermarket, and coming home and watching television. We could continually name its influences, but why are we persuaded more with aesthetic persuasion rather than plan straightforward information. Part of advertising is repeating information over and over, but does graphic design help viewers remember or take action faster to information with visual interest?  Absolutely!  Visual appeal often drives customers to purchase products/services sooner than later.  Studies show that customers buy products/services that appeal to them rather than ones they need. 

Research has proven the psychological process behind the influence of visual persuasion. In the book Visual Persuasion by Paul Messaris, he compiles research speaking about our vision being directly connected to our emotions, which in turn influences our functional, biological, and social needs.   A strong example talked about in the book showing how images can impact emotion, is having a straight-on view of a person in an image.  This appeal’s to our tendency to look back to someone looking at us.  Basically, images are another form of communication, an essential part of language. In advertising images and graphics draw our attention to ads and we associate it to what we feel.  Seeing visuals improves viewer’s ability to figure out and understand the information presented. 

It is obvious from these conclusions why graphic design is an essential part of marketing, it is essential to improved communication by connecting to more emotions of the audience. The brain is able to convert what is seen to better understanding and comprehension. Graphic Design is not only a part of marketing but is the foundation to receiving conversions.  

Nowadays when building a website you want it to captivate and engage the customer from first glance. Your homepage needs to be an attention getter, and you want it to usually stand out and “sell” more than all of your other pages. So what can you do to spice up a simple page that has nothing but text and an image sitting on it? Add some Flash!

Flash has been around since 1996 and the technology has become a popular method for adding animation and interactivity to web pages. Flash is commonly used to create animation, advertisements, various web page components, put video into web pages, and more recently, to create powerful internet applications.

Flash has gone through a lot of phases throughout the different versions that have been released. With each version it has improved, getting better and more user friendly. I feel flash started to shine when AdobeMX was released in 2002. Flash wasn’t really popular more then 6-7 years ago, if you saw it on a site you were typically kind of surprised. In the last 5 years flash has been pushed to its limits in what it can do, by communicating with other programming/html languages, animation and movie advancement, and its own build in language, Action Script. Entire sites can actually be created in flash and still function just as well if not better then other formatted and coded sites.

If you take a look at some of the major brand name companies websites, you will notice a lot of flash intros, slideshows and navigations. These alone can keep a visitor’s attention focused on your site. Sometimes just the feel of a page can keep you there. Flash also makes the page feel futuristic, more advanced, and just cooler, because things are typically always moving, glowing, animating, etc.

Flash on a site tends to clue the user in on the site being modern and updated and is a great addition to your already spectacular content, just keep in mind - we do NOT recommend full-flash websites.

How can you use flash to help spice up your page?
Try taking some high quality pictures that match the look and feel of your website. Pick a good order for them to be displayed in and have your design company put together a good 4-8 image flash slideshow for you. Unlike JavaScript, flash slideshows are a lot more flexible. JavaScript slide shows just fade in and out nothing more. Flash slideshows can zoom in/out, pane from left to right, fade at more specific rates, have fancy fade in/out effects rather then just the basic fade, and much more. Typically a flash slideshow will work best on your site’s homepage, without slowing down the page load time.

How much flash do you need?
As great as Flash is, you never want to overdo it on your site. Too much movement on a page can distract the user from making buying decisions or from finding the “booking” or “buying” buttons. That being said, having a flash slideshow added to the header of your page can really “class it up.” It’s important to appeal to the eye, but still maintain a minimum of 150 words on that page to make it rank for your best and most competitive keywords. If you add more than an accent, it’s going to cost way more than its worth, scare your viewer away, or make the site too animated by taking away the focus of your sites original goal with the visitor. Making a site in complete flash with no actual links to other pages and having all links internal in the .swf file will tank your search engine rankings. Google has admitted that they are starting to index flash, but there is some controversy around how much, and exactly how they do it.

How do you know if you really need flash on your site?

• If you feel like your page doesn’t have that extra touch, feel, or presence that your competition delivers.
• If you feel like your ready to leave your site the moment you arrive.
• Your page feels stale and needs some motion, action or more images to it.
• Your homepage hasn’t changed in months/years.
• You don’t have any flash on your site!

What it really boils down to, is that most up to speed, newer generation sites have and use flash on a regular basis on their website in some form or another. You’re really putting yourself above the competition and maintaining and increasing your visitor rate with this new technology. So what are you waiting for?

Every website needs some graphic representation. Let’s say for instance you’re searching for a Florida vacation resort. You find a link and click on it. The first thing you see on the website is this beautiful picture of a beach; white sand, the ocean and a blue sky. It gets your attention right?

A description of the scene can summarize, but cannot replace an image. Images are used to establish a brand, a visual identity for a website. The purpose of including images is to provide information, establish context, and create a look and feel unique to that website.

Your eye is drawn to the images, they invite interpretation. When you look at a page with an image and text, your eye is drawn to the image first. We then try to interpret why it’s there and what it means. When the meaning and purpose of an image is clear, the images are communicating very well.

Although hundreds of graphic file formats exist, web browsers only support a few of them. These are the Graphic formats that are available to web designers.

The graphic file formats supported by most popular web browsers are; Graphic Interchange Format (GIF), Joint Photographic Experts Group (JPEG), Portable Network Graphics (PNG) and vector graphics.

GIF

GIF originated in 1980 and was adopted by web designers in early 1990 as the preferred graphic format for web page design because of its efficiency and widespread familiarity. GIF files use LZW compression that keeps file sizes small for fast loading.

GIFs are limited to 256 colors (8 bits) and support transparency and interlaced graphics. It is also possible to create animated graphics using the GIF format. All browsers can display GIF files.

Advantages:

• Most widely supported graphic format.
• Diagrams look better in this format.
• Supports transparency.

JPEG

JPEG files are compressed and support “true color” (24 bit). JPEGs are the preferred format for photographers, artists and graphic designers where image quality matters. JPEG supports a progressive format that allows for an almost immediate image that will improve in quality as the image loads.

Unlike a GIF file, the compression for JPEG files produces a sliding scale of graphics compression, and can be controlled by the web designer, which allows for different levels of picture quality and file size. All browsers can display JPEG files.

Advantages:

• Larger compression means faster download speeds.
• Produces excellent quality for photographs and complex drawings.
• Supports 24-bit color.

PNG

PNG is a fairly recent format that was introduced as an alternative to GIF files. PNG supports up to 24 bit color, transparency, interlacing and can hold a short text description of the image’s content for use by search engines.

Unfortunately, most browsers do not support PNG and the ones that do support it, don’t support all of its features yet. This should change over the next few years, but do not make a commitment to PNG graphics until you are sure that most of your viewers are using browsers that support PNG.

Advantages:

• Overcomes the 8-bit color limitation of GIF.
• Allows text description of the image for search engine use.
• Supports transparency.
• Diagrams look better than they do in JPEG.

Vector Graphics

Most web graphics are raster images or bitmaps, which consist of a grid of colored pixels. Drawings and illustrations, used mainly for repeat backgrounds on websites, should be created as vector graphics with programs such as Adobe Illustrator and Macromedia Freehand. Vector graphics consist of mathematical descriptions for each element that make up the lines, shapes and colors of an image. These programs are the graphic artist’s choice for creating drawings. Vector graphics must be converted to GIF, JPEG or PNG format to be used and placed on a web page.

It is recommended that a web designer should choose to use either the GIF or JPEG format as these are supported by most internet browsers. However, since the file size of a GIF is usually smaller than the file size of a JPEG, most web designers tend to lean toward the GIF format for non-vector based background images, frames and any other graphical elements that look fine using 8-bit color.

Designers may select the JPEG format for photographs and illustrations where the compression doesn’t change the visual quality of the image.

As PNG becomes supported by most web browsers, it will probably replace GIF as the web designer’s choice for non-photographic page elements. However, GIF will still be used for animation.

swirl graphic  flikr

Flower Image:  SantaRosa OLD SKOOL

Fish Image  tarotastic

With the creation of HTML newsletters, it is imperative to incorporate text, many of the following factors may interrupt the viewer’s ability to view the visual aspects of images and graphics and therefore the text is imperative: 

• Code compliance differences with various email programs
• Viewers differing computer settings
• Viewers who can’t or choose not to view the images of your newsletter

Because of these factors, it is imperative that text of your newsletter be accessible to the viewer whether the images are visible or not.  Below are a few do’s and don’ts when creating your html newsletters:

DON’T:

• Make your entire newsletter graphic based
• Leave your pictures without description
• Forget to create a text version of your html newsletter

DO:

• Make you newsletter text based and have minimal graphic or picture based text 
• Add detailed alt description tags to your images and graphics
• Test your newsletter to make sure text will show correctly in various email programs without the images/graphics appearing
• Create a text version of your commercial html newsletter

Disability Reasons
Not only is it important to have text based newsletters for viewing purposes, but also for various disabilities and functional limitations, such as the visibly impaired, physical, language, and cognitive disabilities. Some users may not be able to use a mouse, while others may be listening to your newsletter using a screen reader that sends information to a text-to-speech synthesizer or refreshable Braille display. The blind depend on text versions. For text emails, it is important to have alt tags used to describe images. Having image descriptions helps the visibly impaired ‘see’ pictures through screen readers. Give your viewers every opportunity to access your newsletter.

Code Compliance Reasons
There are many different email programs that your newsletter will be sent through - Yahoo, Gmail, Hotmail, Outlook, AOL, etc.  It is important to realize each program has code requirements and therefore you want to create an html commercial newsletter compliant in various versions and programs.  Testing and sending your newsletter to different programs will help you see what improvements to make.

• HTML Inline styles & table tags versus CSS Style sheets & div tags
   
  The main code compliance that will help improve newsletters to work well in various programs is to use HTML tables and inline styles versus CSS style sheets and div tags. Keeping all styles inline, as well as, replace all CSS div tags with table tags.  This will make a significant difference with email program compliance. For example, the newest version Outlook 2007 no longer recognizes CSS and therefore any style rules or div tags will not be recognized and the newsletter will be distorted aesthetically with the CSS code not being recognized.

Text Version Send-Outs
A text version newsletter does not have html code; it basically is taking all the text from your html version and placing it as a separate newsletter to send out. Newsletter programs will send the text version at the same time the html version is sent out. Any subscriber with a text base email will receive the text version.

Branding Logo Graphics
Many fonts are not accessible through basic inline-style font-families.  For this reason often-times main headers or company names/logos are graphics.  This is when alt tags are crucial with describing the newsletter images and graphics.  Any text that you make an image, it is important to have alt tags describing the text-image, especially your logo and company name. Your logo is crucial for company branding, if the image is not showing, alt tags become a crucial aspect to branding your product, name, and logo.

ALT Tag for Header Image

Header Image
 

 
Conclusion
Text is the basis of newsletters and communicating your message whether the commercial aspect can be viewed or not.  Keep text the center focus as you create your newsletter. Always make your information accessible no matter what computer settings or email program a client uses. Clients are less likely to fully open an email if they can’t see what it’s about or the company it is coming from. Text will broaden results and the actions you would like your cliental to take! This is just one more step to success with email newsletters!
 

There are many reasons to redesign your website, but the two major ones are when the original design becomes outdated and when the site becomes less user-friendly than it once was (or it’s not up to the current standards for site usability).  Usually these two reasons go hand in hand.

We recommend a business site redesign every 2-3 years.  This may not seem like a very long time, but here in the web world things move very quickly.  Design trends and usability standards can sometimes change from month to month. 

Let’s take a look at one of Blizzard’s recent redesigns and see how an overhaul of both the site form and site function benefited the client. 

We took on The Rusty Parrot Lodge & Spa of Jackson, Wyoming as a client in 2004.  They purchased marketing, maintenance and hosting plans with us.  Another company had recently built their site and so it was relatively fresh and fucntional.

During the course of the next 4 years the site grew considerably.  Problems with it surfaced as we added new pages, content and images.  A blog was also added, which had a different set of navigation and code to maintain than the main site.

When the Rusty Parrot management decided it was time for a redesign in late 2007, Blizzard was excited to take on the project.  Together with the client we developed a long list of things that needed to be changed. 

The Rusty Parrot is one of the most luxurious and unique properties in Jackson.  They’ve won countless awards for their high level of service and are known for their friendly staff.  However, the look and feel of the old site did not convey the quality of the property.

Additionally, the old website did not properly showcase the natural beauty of Jackson, Wyoming.  Nestled at the base of the Teton Mountains, anyone who has ever visited this part of the country knows that it is stunning. 

From a usability standpoint, the navigation was somewhat tricky to use.  Several levels of fly-outs on the main menu proved to be overwhelming and sometimes difficult to click on.  Users could easily become confused when looking for specific information.

Technically, the site was cumbersome to maintain.  Originally built in Microsoft FrontPage, there were hundreds of lines of excess code per page, making design and content changes more time-intensive than they should have been.  Also, there was no content management system implemented to allow the Rusty Parrot staff to do some of the updates themselves. 

Changes to the aesthetics of the site include an updated layout that is restricted to 800 pixels wide, fitting the vast majority of monitors, unlike the old site.  The new design also floats in the middle of the screen instead of being left aligned. 

On the old homepage, several small photos were laid out randomly all over the screen. On the new one large, professional photos rotate one at a time in a slide show.  The darker green background conveys a mountain feel better than the former lime green background.  The page footer was condensed to include only the most relevant contact information, unlike the old footer which was almost 600 pixels wide and contained a lot of unnecessary text.  
 

 The resulting look and feel of the new design is much more unified and clean.  The new photos “wow” the user in a way that the old site never did.  The buttons are classier and more subtle.  The finished product is much more elegant and contemporary than the old website. 

Usability-wise, the navigation was completely reworked.  Abandoning the old fly-out style of menu, the new site incorporates a multi-tier system of navigation that only shows the buttons that are relevant to the area of the site that the user is currently on.  When you click one of the main buttons at the top left of the page, it takes you to a new page that displays a submenu to the left of the content.  For instance, when you click on “Lodging”, a submenu appears that includes only the buttons “Rooms”, “Rates” and “Around the Lodge”.  Studies have shown that this style of navigation is easier for the visitor to use and understand than the old fly-out method.

Finally, the new site was designed using Wordpress, which is an open-source blogging software product that can also be used for content management.  The main site and the blog (”Local Reviews”) now share one set of code and navigation, which is less time consuming to maintain.  Additionally, the Rusty Parrot’s staff can now make changes to the content and photos of the site without contacting Blizzard all the time, which will in save them money in the long run. 

The website went live in April 2008 and the management has been extremely pleased with the results thus far.  Jim Promo, the general manager, commented on what he likes best about the redesign.  “I think the site is much more representative of the property than the old one.  The new look is also more contemporary in feel, which will impart a fresh look for out repeat visitors.” 

A site redesign is one of the top ways to convert site visitors to customers.  The Rusty Parrot is already seeing the results as their reservations increase

A call-to-action is often the most important thing on a website. You want the visitor to do something and many times that something is to email you. Back in the day, web designers could just publish an email address on the site.

However, this led to problems with spam filtering and limited the visitors that used web-based email services. Most often, when a visitor did send an email, it contained very little detail. These problems can now be resolved by implementing a contact form, instead.

Contact forms allow the website visitor to fill in as much information as you require of them. Then, the user simply hits the Submit button and the form data is sent directly to your email address. Currrently, forms are a website must-have to get a response from site visitors. Many web designers, however, overlook critical issues and make common, yet costly mistakes.

The Thank You Page

There have been countless times where I have submitted a form and was taken back to either the homepage or an ugly page that showed only the form output. Be sure to create a response page that matches your website template. A Thank You page should also tell the user that the form was submitted successfully and when to expect a reply. Keeping the user informed should be a top priority.

Form Validation

It is terribly annoying when I submit a form and am presented with an error page that tells me to hit Back and fill out fields that I left blank. Be sure to use JavaScript or AJAX to provide validation when the form is submitted on the original form page. This way the user isn’t directed to a page telling them to hit the Back button. Alternatively, you can perform server-side validation that will take the user back to the form page and explain what areas need to be corrected so that the information can be successfully submitted.

CAPTCHAs

Spam control is important when it comes to contact forms. There are numerous types of auto submission software that will post random bits of information on contact forms. Many are setup to post comments on blogs to advertise their products or to gain backlinks for search engine ranking purposes. This is where a CAPTCHA comes in handy. A CAPTCHA is a puzzle that will check to see if there is an actual human being on the other end submitting the form. These “puzzles” can range from words to simple math equations.

Hijacking Prevention

A majority of online contact forms can be hacked and used for evil purposes. Hackers can change the recipient, who the email is from and the message of the email. The spam sent using a hacked form can be traced back to you, which could result in your web host kicking you off their servers or even lead to a legal dispute. Make certain that your form processing has filters that will detect, prevent and notify you when a form hijacking has occurred.

Testing Out The Forms

Testing is one of the most overlooked things when it comes to contact forms. I have seen web sites with absolutely fantastic designs, but contact forms that do not work. It’s not unusual for a designer to check a form in only one web browser. More often than not, the form code may be poorly written and interpreted differently in other web browsers. Test, test, test.

Print Only Forms

Some inexperienced web designers have no clue how to make a contact form work or how to prevent hijacking and spam attacks. So, they create a form just for printing. Do you think that any online visitor will visit a site, fill out a form, print it out and send through regular mail?

Missing “Submit” Buttons

Have you ever filled out a long contact form only to find out that there are no “Send” or “Submit” buttons for it? This frustrates visitors and doesn’t give them a good reason to return. It’s shocking to know that one of the most important parts of a form can be one of the most overlooked. Prevent this by thorough testing.

In the web world, contact forms are a necessity. but common mistakes that web designers make when it comes to forms happen every day. So let’s review: make sure your forms have “Submit” buttons, don’t make your form print-only, thoroughly test forms in different browsers, make sure that your form processing has hijacking prevention, use CAPTCHAs to kill spam, provide on-page form validation and always supply the user with a “Thank You” or confirmation page.

By correcting these ever so common mistakes, you can ensure a better web site performance for you and a better experience for your visitors.

CSS stands for Cascading Style Sheet. It’s a mark up language used in all of today’s website designs which allows you to alter the way a website is formatted through a cascade of elements specified on a style sheet or ‘rule sheet’. A cascading style sheet is an external or internal ‘rule sheet’.

This rule sheet tells one or several pages of a website how to display information. With CSS, the way to style a website is endless. CSS also makes creating a multifunctional, user friendly and consistent website easy, even for a beginner.

Recognizing the basic form and function of CSS is key to adding style to the included elements. For every element in your website, you have a tag which separates each bit of information on a web page. For instance, you may want to add a paragraph. To begin this paragraph you must have a tag to mark the beginning of the element to be styled and a closing tag to close the element. I have included an example below so you can see what the tags look like when added to HTML code.

The <p>tag in HTML stands for ‘paragraph’:

Example: <p>This is the first paragraph<p>

I’ll walk you through how CSS enables you to style one element as a simple example of how it works. Let’s say you want the text of your website to be red, with bold purple in some areas. In your style sheet, you must create a rule that will make the text red. First, come up with the name of the style. Since we are styling the text of a paragraph, we could call the style ‘ptext’. In CSS, a style is written with a period before the name, so on our style sheet it would read:

.ptext

As with the tag element, you will need something that marks the beginning and the end of a style or rule on your style sheet. We use what are called curly brackets to mark the beginning and end of a rule in CSS. Anything included within the curly brackets will be a command for the particular element of the website to which this style is connected.

This is how you would write the rule on your style sheet:

.ptext { }

There are a couple of ways you can include your command within the style sheet - inline style which means it’s on the same line and external style. With an inline style, your rules are included within the tag of your HTML document, instead of in an external style sheet.

For this example I will also add the style of font we would like to use - verdana. We are making the text red, so we need to be sure we include all the rules we want to make for the text. We also need to make certain that we spell everything correctly and include all the necessary elements of the rule. Even the smallest mistake will make the style malfunction.

This is how the style rule would look within an inline style. Remember the rules go within the tag of what you want to style:

<p class=”font-family: verdana; color: red;”>

When creating a style, you must also include a colon (:) and a semi colon (;). These determine the beginning and end of a rule within a style. Without these two punctuations added to the style, it won’t work.

An inline style can get confusing, especially when you start adding pages or get into more complex styles. Therefore, get into the habit of using an external style sheet, instead, and writing it like this:

.ptext {
font-family: verdana;
color: red;
}

As you can see from the above example, putting each rule of the style on a different line not only helps organize it, but also makes it easy to add and remove rules without spending too much time searching for the beginning and end.

Let’s go back to our HTML again:

<p class=”ptext”>This is the first paragraph</p>

As you can see by adding the style tag element to the p tag and labeling it ptext, the sentence takes on the commands outlined in the rule of the style sheet for .ptext.

Let’s try another example. This time we will keep the .ptext style rule but we also add another style rule for a second paragraph. Since we are adding paragraph #2 we will call the style rule for this paragraph .ptext2We will say we want the text in the 2nd paragraph to use the same font (verdana), but that the text will be purple, bolded, and larger than in the 1st paragraph.This is how the style rule will look on your style sheet for paragraph 2:

.ptext2 {
font-family: verdana;
color: purple;
font-weight: bold;
font-size: 18px;
}

Now, we add this element to the tag for the second paragraph. I’ll include the first paragraph and the second paragraph so you can see the differences;

The rule elements of the style have commanded the text of the second paragraph to follow the rules of the .ptext2 style.

Your CSS document should look nice and clean, like this:

Creating a style sheet can be quite easy if you use just a few basic elements and know how each style should be set up. The CSS rules I have included in this beginning explanation were just for text in paragraphs and will not necessarily apply to an entire webpage.

When using a style sheet, you can also create rules for multiple pages. Commanding the text on all pages to appear alike is an ideal way to create a cohesive look throughout the entire website.

Stay tuned for my next article, in which I’ll continue to explain the basic elements of CSS styling and touch on other important elements of a web page, such as how to set up an HTML webpage, which elements to include in your CSS and how to include the style sheet on the page so that the rules created in your style sheet cascade throughout your entire website.