Blizzard recently designed a new website for Chula Vista Resort. Here is a screenshot:
The website features a Wordpress content management system and:
OK, I admit it. I am color challenged. I know great color when I see it, but am not confident in my own abilities to pick colors. Recently I have been using online color tools to find new and better color schemes.
Kuler by Adobe is a handy tool that lets you choose different colors to base your palettes on:
to create color palettes like these:
Another similar program that I like even better is Color Scheme Designer. It has a slick color selector and shows off the colors intuitively:
You can take your palette and see what it would look like on a website too:
Find our other favorite tools in our Toolbox.
“Mind the gap” is a warning to train passengers to remind them of the sometimes significant gap between the train door and the station platform. Just as this term is used in train stations, it’s important to ‘Mind the gap’ with your website. When redesigning your website there are things you should not overlook!
What gaps does your site have that a redesign will fill? The following is a list of points to consider when redesigning your website.
Budget
Is a complete redesign within your budget? Your budget may determine the extent of your redesign. Do you need a new look, more traffic, higher ranking by search engines, a blog, a tracker, more pages, better photos, a reservation engine, hosting and maintenance? All of these, and more, should be considered when redesigning your website to help fill the gaps.
Simplify your navigation.
A simple navigation is like giving really good directions that will take a visitor from point A to point B. If your visitor can get around your site quickly and easily you have given them great directions and they will repay you by staying at your site for a longer amount of time which is what you want. Simplify and clearly define the meaning of each title in your navigation.
Site Map
A site map is a representation of the architecture of your website. The site map helps visitors and search engines find pages on your site.
Contact Information
Tell the visitor who you are, where you are and how you can be reached. It’s only polite.
Call to Action
Your phone number or email may be a call to action. Reserve or book now button. Join our newsletter. Seasonal specials available. All of these require the viewer to take action. Get the viewer involved.
Email Marketing
Email Newsletters can create a bond between your Hotel, Inn or Resort and your reader. Promote news and specials that are useful and convenient to the reader. Most newsletters are quickly scanned. Keep it brief and give them an option to unsubcribe if they choose.
Blog
If you have a blog. Keep it going. Post weekly. Create a community of readers. Write about what is relevant and time sensitive. In the hospitality industry you can post specials or write about the daily happenings in and around your resort. Wordpress is an open-source (free) blogging software that makes your blog easy to use and maintain.
Cosmetic
Does your website need a facelift? That first impression is a lasting one. Know your target market. Create an image that appeals to your target market and promotes credibility for your business. Choose fonts and colors for your website that are clean and friendly to the viewer. Professional photos always improve a website. Choose photos that showcase your Inn, Hotel or Resort. Keep the file size small for quick loading times. The text content of your site should be kept to a minimum but enough to convey a clear message. Viewers scan text for information rather than actually reading it. Check spelling and grammar. If you have any pages that are not working correctly, fix them a.s.a.p. Unify pages by consistently using the same format. Fonts can be easily formatted with CSS.
Online Presence
SEO experts can help your website get a better ranking by search engines. High ranking by search engines means more viewers can find your website faster. Meta tags and H1’s that are managed by experts will help your website get more hits or viewers, leading to more reservations.
Tracker
Tracking and analyzing your website traffic enables you to maximize the effectiveness of your online marketing. The tracker works by including a small amount of html code to each page of your website. The tracker records first time visitors, returning visitors, visitors that made a purchase among other statistics.
Reservation Engine
If you choose to have a reservation engine that takes the viewer to a new page, design that page to have the same look and feel as your site. Headers, fonts and colors should match your site. Here at Blizzard the team has developed BRE; Blizzard Reservation Engine. BRE is a product that allows your booking engine to be customized and SEO friendly.
Maintenance
The last gap you want to fill is maintenance. You have a beautifully designed site now and you want to keep it up to date and well maintained. Keep your photos and specials up to date with the seasons. Have a SEO expert examine your site every couple months to improve your online presence. Correct any spelling or grammar mistakes immediately, and anything else that is not working correctly. Take the time to care for your site and it will reward you with frequent visitors who will return often.
“mind the gap” image courtesy markhillary
How many pages does your website have? Five? 10? 40? The truth is, the more pages that you have, the more expensive and time consuming your website updates will get if your site isn’t properly setup for content management. For example, if you wish to change the phone number on your website which appears on the bottom of over 40 pages, your webmaster will have to open up 40 files and manually change out your phone number. This will cost you quite a bit for such a small change.
What is Content Management?
Content management is the process of separating website content with its design elements. To better grasp this concept, let’s dissect a typical webpage:
1. Header – This is typically where your logo and your navigation will appear.
2. Content – This is where your text and images will appear.
3. Footer – This is where your contact and copyright information typically appears.
To keep the website consistent, we are going to separate these three elements by making them separate files or putting them separately into a database. For this example, we are going to put them into separate files (header.inc, mycontent.inc, footer.inc). Now let’s put it all together with the help of server-side programming:
Within this page’s code, it calls to “include” header.inc, mycontent.inc and footer.inc. So now going back to our first example regarding the phone number change, let’s say that we have setup our 40 page website with content management in mind. Instead of your webmaster having to manually open up 40 files, they will only have to open up one file to make this change (footer.inc). Once saved and uploaded back onto the server, the change will appear throughout the entire site, which will save lots of time and money on website maintenance.
Planning Ahead For The Future.
A majority of the time pages may look inconsistent on sites not setup for content management. This in turn looks unprofessional to your site’s visitors and may not give them the confidence to make a purchase. If you get a different designer to add a new page, this can also add to the inconsistency and lead to a website maintenance nightmare.
With a content managed website, expanding your website gets easier down the road if you want to add new pages. A site setup with content management in mind allows all new pages to be consistent with the rest of the website. Not to mention that it saves a lot of time for your web designer as well.
Now let’s say that your site is looking a bit outdated. No problem if your site is setup for content management. Since you have separated your content from your design, all you will have to modify are your design elements (header and footer). This also relieves the headache from your web designer since they won’t have to spend too much time retrieving the content from your old website.
Database-Driven Content Management Systems
In the above example, we separated the content and the design elements into files. Unfortunately, this can get kind of hard to manage, when you have numerous files on your server. Therefore, it is a good practice to put your content into a database so that it can be easily managed without the clutter. There are a lot of content management systems or CMSs out there that provide certain functionality. Among the vast selection, there are three that are widely supported, constantly improving and the best part is, they’re free!
Drupal
Drupal is a feature-rich open source content management system. Among its features, it provides search engine friendly urls, blogging functionality, discussion forum support and tracking and statistics reports. This CMS is not platform dependent, so you can install it on just about any server operating system. It is also database independent, meaning that you can install it on MySQL, PostgreSQL or any other SQL database.
Joomla
Joomla is another great open source content management system that is setup best for community-based functionality. It features search engine friendly urls, a simple installer, document management and a wide range of community support. Out of the box, Joomla is not setup for blogging, but that feature can be added with their extensive extension directory full of great add-ons.
Wordpress
Wordpress is another open source CMS built originally as a blogging platform, but evolved to be a great content management system. Out of the box, blogging functionality is setup by default and its interface makes it relatively easy to get started. It provides the ability to setup search engine friendly urls and provides a file structure that is easy on the developer. With a wide-range of supported plugins, this CMS can provide just about any type of functionality.
Content management should be an essential step when you design your website. When it comes to growth and page consistency, you will be ready. Not only is it a good practice, it will save you a lot of time and money down the road.
Source Links:
http://www.wordpress.org
http://www.joomla.org
http://www.drupal.org
Your website is a source of information about your product. In the hospitality industry that could be your resort, inn, hotel, or rental property. You want your viewer to have a sense of clarity, order and trustworthiness. You can achieve this with type, images and space. Typography creates a visual logic between the written word and the space it is presented in. Shape, size, color and contrast all play a part in what the viewer understands and is drawn to.
Typography for the web differs from the printed page. A person reading a magazine, for example, usually will take more time to read a headline or paragraph to understand the meaning of the type. Lines of text in several columns are generally shorter, smaller and closer together. This is not always true for the web. What is your product? If it is an Inn, the website viewer will decide whether they want to view a rooms and rates page within the first 90 seconds. The style, font, alignment, size, emphasis, color and contrast of your text will play a major role within these first few moments.
First we see shapes and color then the eye begins to pick out more specific information. Images are seen, blocks of text, then maybe a headline. An interested viewer will continue to read the text.
After viewing an image of your beautiful Inn you want to invite the viewer to discover its many distinctive qualities. Using words to convey a message you want to keep the viewer engaged as long as possible. Make it easy and quick to understand.
Contrast
Contrast is the first cue. Type that is a continuous paragraph without breaks or change in font size or emphasis has no structure. Contrast gives the viewer a sense of where to begin and where to end. Create a visual road map with contrasting blocks of text and precise placement. Usually a grid is used to visually balance these
blocks.
White Space
White space is space between elements on a page. Space can make reading text easier and gives the viewer a visual break between ideas or thoughts. It also sets a mood of sophistication and elegance. White space creates balance and harmony.
Fonts
Font. In print some may refer to it as a “nasty four letter word”. If the printer doesn’t have your font they cannot complete the job. In web design the fact that each computer and browser views a font differently is an issue that can be dealt with by only using a few fonts universally. Arial, Verdana, Times, Georgia. All computers should have these fonts. When the first is not available you can choose a second, third, forth, or generic (serif or sans-serif). Specify fonts in order of preference. These fonts will make up your headlines and body copy. Most other decorative style fonts will be images the designer will create in a program like Photoshop or Illustrator.
What you do with that font is critical. Size, emphasis, color and alignment are several ways to manipulate a font. Some fonts are more legible on screen than others. Traditional fonts like times may be easily read on printed paper but screen resolution may distort it. Fonts such as Georgia and Verdana are more suited for screen display. Larger than Times they are visually appealing to the eye and readily understood.
Emphasis
Emphasis may be given to the font. A headline might be bolded to attract the viewer’s attention to a specific topic or area of text. Italicized text attracts the eye because it contrasts with the shape of the surrounding text, stressing importance on a word or group of words within a paragraph.
Colored text may be used to create more subtle subheadings. Very often colored text is a visual cue for a link to another area of a website. Use color sparingly within the body of a paragraph, if at all.
A block of text may be aligned left, right, centered or justified. Left aligned text is used most frequently. Lists are usually presented this way. The reader’s eye is most apt to follow about 3-4 inches of text in a line. By keeping line lengths shorter the reader can swiftly view and comprehend the text and continue to the next line of text.
Kerning and leading are important also. Kerning is the space between the letters. Leading is the space between the lines. A small amount of kerning and leading make text easier to view especially on a computer monitor. The resolution of the monitor makes the letters slightly fuzzy; by separating the physical letters in relation to each other the text becomes more legible.
Headlines and body copy may or may not use the same font. Designers will generally use up to three fonts in one design. A headline could be a serif font combined with sans serif font for body copy or vice versa. A third font may be a decorative type.
CSS
CSS (Cascading Style Sheets) are a great way to ensure consistency of text font, style, and formatting throughout your site. Larger sites that have multiple pages may be a bit confusing to navigate. If the viewer sees different styles of type they could become disoriented, thinking they have left your site. Keep you text clean and orderly with CSS. Review our brief introduction to CSS for more information.
Good typography helps the reader view and comprehend the words that are used to convey ideas. The viewer has been lead through your website one step at a time by the use of shape, size, color and contrast.
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:
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
Graphics
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?
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?