Color has a huge impact on how customers react to a product. Understanding how colors affect consumer purchasing behavior is highly important for marketers. As the following graphic (via Kissmetrics) shows, 93% of customers place visual appearance and color above other factors when shopping. Customers are persuaded by visual cues, the strongest of which is color

So how does color affect consumer behavior? Different colors are associated with different types of products and shoppers. When designing your product, packaging and logo, make sure to consider who your customers are and what colors will have the greatest influence on them.

Now that we know color is important, what about other factors that influence consumers purchases? Overall design also plays a significant role in consumer purchase decisions, particularly for online shoppers. This graphic shows that 42% of online shoppers base their opinion of a website on overall design alone and 52% said they would not return to a site if it had bad overall aesthetics.

Whether your designing a website, product, or logo, make sure you are using colors and aesthetics that speak to your target customers.

Have more questions about color? Ask us.

Cheers,
The Ruby Porter Team

Think back to that time in high school, when you would be sitting in class with a textbook open in front of you, pouring over the words, words, words. Read a chapter of history, a chapter of science, a chapter of this or that, and with all that information comes a whole lot of text. For this edition of website winners and bloopers, we will look at how text can be used as a graphic element, ...and when it should not. Looking at two history websites, we will see how organizing a lot of text can be an interesting design puzzle.

WINNER:  Our first website brings us back to good old 1776. PBS has a section on their website devoted to the American Revolution called Liberty. The website is organized into four sections with a black background and “Liberty” written in a scrawly hand. Silhouettes of soldiers and a tattered flag are against a blue bar at the top. What’s really interesting about this website, though, is how the information is displayed.

In the first section, the website displays important events as if they were in an early newspaper. The paper is torn and yellowing, and the headlines look as if they were just freshly printed by Gutenberg himself. The article, however, is written in a modern typeface that is easy to read, set up very similarly to a modern newspaper. The key to being able to use interesting and unusual fonts is to not overuse them. Having the body copy in a simple font allows the headline to stand out, making it more than just information and actually a design element on the page. The article couldn’t be easily read if it were in a similar font to the other, and the impact of the headline would be diminished if it were mixed with something else with a lot of character. In this way, pick one thing you want to stand out on the page.

BLOOPER:  For our website blooper, we’ll visit The Victorian Web. Now here is a website with a LOT of text. With countless sections and articles and lists of dates, The Victorian Web offers a plethora of info. But it doesn’t offer a lot in the way of design. Does a website devoted to presenting knowledge need to look pretty? Well, perhaps not, but it does have to be organized and easy to read.

The visual organization and presentation of your text will reflect on how your reader thinks about and reads the text itself. The writing may be very good, but if it is presented poorly, the reader may question the website’s credentials. The wall of text that sometimes occurs on The Victorian Web could be intimidating and difficult to find information.

Be kind to your readers, and use a smaller box to present your information, instead of having it stretch across their browser regardless of resolution. Also, their opening page has little blue blocks set up in a diamond shape, with links to each different section. The text within the blue is sometimes too small or hyphenated, which makes it harder to read. This is a case when an unusual font hinders the overall message of the website, because it is squished into too small a space and against a garish color, so you can’t really derive the right mood from it.

When dealing with a lot of text it can be difficult to juggle design elements and the information you need to get out. Have fun with it, though. Just because you have a lot of text, doesn’t mean you can’t have a visually appealing website. Keeping in mind that less is more with fonts, you can showcase the perfect type to create the right feel for your website.

Until next time,
The Ruby Porter Team

It’s easy to get carried away with flashy graphics and moving pictures, especially when it comes to website design. For some reason, the restaurant community has particularly embraced this idea, perhaps because there isn’t a whole lot of reason to stick around on a restaurant website and just look at food instead of going out and eating it. For this edition of Website Winners and Bloopers we will look at the good, the bad, and the ugly of flash animation on restaurant web design and see how it can be used well, not enough, or perhaps, to induce seizures.

For our winner we will travel across the globe to Greece, where a little restaurant called Arxontiko uses a flash animation intro to great effect. The website is simple. First, a faded moss green baroque pattern covers the background, while a single white plate appears in the center. Scraps of a frilly napkin are used for all the navigation titles, and these appear onto the page. An old crank phonograph pops up in the corner inviting you to play some appropriately old world music. The concept and presentation is simple, and yet so much is communicated. A mix of old and new, tradition and modernism, make it look true to the history of the food, but with a flair for the modern kitschy, funky trend. Animation is used, but it is subtle and not distracting or nauseating.

For our blooper, we have Soup du Jour, a website that simply doesn’t capture the mood of the restaurant. The picture of the place looks very nice, all track lighting and redish wood furniture, but the website doesn’t emulate this in any way. The background looks like stained paper, in a yellow shade, with the titles in that 1997 bright blue. There are about five different fonts, and the size of the screen is adapted for a very small computer, making it look strange aligned against the left. This website doesn’t need a big long Flash intro, but bringing in more design elements to give viewers a sense of what the food is like would greatly improve it. The kind of food this restaurant has isn’t immediately apparent, and even though it’s called “Soup du Jour,” the focus isn’t really on the soup. What the viewer is really confronted with is the giant “Click here for our kids’ menu” which appears very large above a photo of their restaurant. What is nice about using flash animation, is that it guides the viewer’s eye exactly where the designer wants it. But without animation, web designers must also think about where they want the viewer to look first, second, and so on. The kids’ menu may be important, but an introduction to the restaurant itself, like when you’re first meeting a person, would be more appropriate.

Now we’ll go to the opposite end of the spectrum, with a gyro and panini restaurant in Astoria, New York called Pita Pan. With a simple orange background, the intro asks us if we want fresh? Fast?? And then nearly blinds us with the answer: Pita Pan! With flashing white and orange backgrounds. Then it goes through what seems like the entire menu, flashing orange and white and various foods. With slightly overlapping and not-quite-centered titles, this website almost works in a quirky kind of way. But it does bring up the idea that you have to know your audience in order to decide whether or not to use flash animation or any kind of complicated intro. This place seems to serve a younger crowd, perhaps a similar target audience to Taco Bell or Carl’s Jr., but with a healthy twist. For that reason, it works. Had this website been used for either of the first two restaurants, it would have fallen flat.

So, when designing your restaurant’s website, be sure to always take into consideration who you are catering to. What is your audience like? Are they going to sit through a 30-second intro with music and flashing lights or will they get annoyed and go elsewhere? Website animation can be used to evoke a lot of moods, so don’t write it off too soon, but always be aware of your audience and your brand image and make sure your website graphics are in line with that.

Until next time,
The Ruby Porter Team

Recently we worked with the West Eugene Village Homeowners Association (WEV HOA) to do a complete makeover of their website. When WEV HOA contacted us their site functioned poorly and did not convey who they were. It had no formatting and featured colors that would immediately drive viewers away. After giving the site some serious TLC, we made it over into something that is easy to navigate, aesthetically pleasing and clearly conveys who the WEV HOA is. Here is the drastic transformation:

Talk about transformation! The site we designed allows users to easily navigate and find any information they may need. It also provides users with visuals of the homes and neighborhood. We designed the site to convey a friendly and informative feel which their association members are enjoying using.

Does your website need a makeover? We're here to help.

Cheers,
The Ruby Porter Team

No one wants to go to the orthodontist. But somehow, in this great nation, braces have become a rite of passage in that awkward phase during late middle school and early high school that almost every kid has to suffer through. With that said, the orthodontist niche is an interesting one: They must appeal to both teens and their parents. For this time around, website winners and bloopers will be looking at a few orthodontists’ websites and seeing how the graphic design of their pages affects the overall mood and experience of the services advertised.

For our winner, we have firstclassbraces.com, Tracy Ouyang’s website for her work at Sylvan Orthodontics and Happy Valley Orthodontics. The home page is very lively, with blue and green swooshes on the top and bottom of the page, and a swirling brown background. The lines are clean, the information is well organized, and the slide show of images really shows the benefits of braces through its smiling faces and happy kids. Basically, it looks professional. Looking professional for any online business is important, but when it comes to the medical field, it is absolutely imperative. Ask yourself: Do I trust this person with my teeth when they can’t even keep the same font on every page of their website? When I can’t find their information or their pictures are too small or don’t look quite right? It may sound silly, but without a clean, organized, graphically pleasing website, how can your potential patient find the information they need and have the confidence to choose you? What’s good about this website, is that the home page has a nice introduction to the practice, which is a great jumping off point for a new patient.

For our bloopers, we have rogerwooley-orthodontist.com, a website that has a lot of good content, but doesn’t have a very consistent or clean layout. The website has a white background with a horizontal stripe of green for its navigation, and Roger’s name on top with a little dotty graphic beneath it. Simple, yes, but it doesn’t really do anything. In fact, this is a good example of “don’t avoid design to keep from messing up.” This is a common strategy among those who don’t think they know anything about design. Making something plain without reason doesn’t make it disappear or less obvious. The white background could be used well, as was done with firstclassbraces.com, but at rogerwooley-orthodontist.com, there is no frame, no border, so the graphics are just kind of floating there without rhyme or reason. On the home page, there is an additional vertical navigation bar, but because it is only text on white, it doesn’t really read that way. There is also no way to get back to the home page, which isn’t really a problem here, since there isn’t any pertinent information on that page anyway… but that’s a problem in itself. Having a welcome page for something like orthodontics, or anything medical, is a good step to making the patient more comfortable. It can also lead them to the next step in setting up an appointment or learning more about the services available.

Another blooper: before and after shots. No, no, NO! www.parksideortho.com is guilty of this one, displaying prominently on their homepage some pictures of teeth and gums changing from messed up to nice and straight. Nice idea, but we don’t want to see that, thanks. Firstclassbraces.com also had a before and after section, but you had to click on it to look at it, so we felt like we weren’t barraged by overbites the minute we went to their site. This is something that is sometimes lost in translation between doctor and patient. Doctors look at that stuff all the time, and it’s not weird or gross, in fact, it’s probably interesting and would seem informative to them. But to a patient it’s, well, unpleasant. We thought that firstclassbraces.com’s approach of showing smiling people with great teeth and no braces on their homepage to be a really effective one. You see the outcome of having braces without seeing a lot of mess in between, which is really the most important part.

Well, it’s been fun, everyone. Don’t forget to pay attention to the minute details of your website’s layout. Have fun. Try things. Don’t be afraid to do something bold, because sometimes that can come out far better than the safe, plain route.

Until next time,
The Ruby Porter Team

Here at Ruby Porter we have been very busy. Here is a little bit of what we have been working on.

Trusted Hands Day Spa is a client of ours located in Atlanta, GA. They came to us for help with their website and logo. Their website had become out of date and they wanted something modern and fresh that would be easier to use and more aesthetically pleasing. They also wanted a logo that better conveyed to customers the services they provide. Here are the before and after photos of the work we did for our client:

What a transformation! We designed a logo that better conveys what Trusted Hands Day Spa does, massage therapy. For their website we designed a site that has more modern and professional feel. Additionally we made it much easier for customers to navigate. For more of our recent work check out our Facebook page.

 Want to improve your businesses website? Contact us to learn how, we’re here to help.

Cheers,
The Ruby Porter Team

I remember my early days of Internet shopping, around 2000, when I forgave website designers their artistic errors. Giving your credit card information to a website using all Courier New font, centered, on a lime green and Crayola purple background seemed worth it when it meant buying that perfect, out-of-print Japanese import CD. But nowadays, the game has changed. To create your brand, stay competitive, and tie your online business together, your website should have a cohesive graphic strategy, and what better way to show it than on your home page.

This week we're looking at website winners and bloopers, and we’ll examine how the graphic layout of a home page can either form a strong image of your brand, or lead the audience down a narrow, winding road of confusion. The two websites are adorevintage.com (winner) and fuzzielizzy.com (blooper), two online vintage clothing shops that use history as the appeal of their clothing. While Adore Vintage looks a little 1907, with soft colors and crisp photographs, Fuzzie Lizzy still looks a little 1997.

When you first look at the Adore Vintage website, you are immediately presented with photographs of the dresses, all pink and white, hanging in a closet, along with three different time-worn photos below advertising their features, which are regularly rotated. This layout both prominently shows the product and gives the audience a strong sense of who this company is without bogging us down with a lot of text and information. You can see the importance of history, not because they tell us, but because of the small details they show us through the imagery. The pictures serve to entice us into the store, much like a window display in a physical store.

For Fuzzie Lizzy—first of all, what is that name? What does that mean? A silly or weird name would be fine, or even fitting for a vintage shop, if the website itself were going that direction, but the rest takes itself very seriously. The home page is all blue, set up kind of like a blog with a header and navigation on top, and a 1920’s photo of a young girl and guy on the side. The biggest problem with the layout here is that the subject matter wasn’t being taken into consideration when the graphics were chosen. The font is plain and modern, and not in the 1960’s Scandinavian, IKEA way. The picture is really good, but it gets lost with all that text next to it and the writing over it, and again, it doesn’t look like the time period at all. If I couldn’t read the text, I would have no idea what this website was about, and that’s a bad sign. The information is really good, and the pictures are well chosen, but without a clear graphic direction, it falls flat.

So, when you’re designing your website, remember that your visual designs say as much about your brand as your content. The photos and layout you use can communicate a feeling or style that words sometimes cannot.

Until next time…
The Ruby Porter Team

We often get asked the question, "I have a website but I don't think anyone is really going to it. How do I get people there?" It's a common misconception that just because you have a website people will automatically find it and you'll start making money. The truth of the matter is that launching a website is just like launching any other business. Getting people to "visit" you takes time and hard work. You have to let people know you exist in order for them to care.

So how do you let people know your site exists? There are many things that can be done to increase your site's Search Engine Optimization (SEO). Here are five easy things you can do to start making a difference:

1. Make sure your site's pages are coded with appropriate keywords (the search terms someone might use to find your information or products). Don't flood each page with keywords that are not relevant to the content.
2. Make sure each page on your site has a title containing keywords that tie to the content and to your brand. For example, instead of a page title of "About Us" try one such as " About Us | ABC Realty Company, Eugene Oregon". (Note: a page title is the content you see on the tab of your Internet browser). If you must include your company name, make sure it comes last.
   
3. Create and post content on other sites that point people back to your site for more information. For example, write a blog post and supply a link to the rest of the article that resides on your website.
4. Increase the number of links that point to your site. If you belong to a Chamber of Commerce and they have an online directory, that listing for your business is an example of an inbound link. Other inbound links can come from your Facebook, Twitter and LinkedIn profiles, or other social media sites, business directories, clubs, etc.
5. Fresh content can help improve your rankings. Add new, useful content to your pages on a regular basis. Content freshness adds relevancy to your site in the eyes of the search engines.

If all of this seems like too much, send us a note. We're here to help.

Cheers,
The Ruby Porter Team

Today we launched our new website. We will continue to add content but some new features include a client of the month being highlighted right up on the front page, a blog (which you're reading now *grin*), a more interactive portfolio, and a soon to be growing list of resources for our clients. We hope you enjoy the changes and find our site to be a useful tool.