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

Typography is everywhere, and, without realizing it, it dictates to us the mood and essence of whatever we’re looking at. Much studied and loved by many graphic designers, typography is more than just the words on the page, it can tell a story. Different fonts are like the different characters, making us read differently, with different tempos, different voices, and different moods.

In this campaign from Think! Road Safety from the UK, typography is used to create two different characters and thus a whole back story. The first font looks like one that would be used in a “See Jane Run” book, while the written font looks like the hand of a child drawing with paints. The juxtaposition of the two with the severity of the message creates a compelling argument to be aware of your actions to set a good example for your children. In this example especially, we are confronted with how different fonts have a voice all their own. As you read, switching from one font to the other is like reading a text book to hearing the sound of a child’s voice. When choosing the right font for your branding or advertising, be sure to think of the voice that you want to be heard and how you can play with that to create a strong brand essence.

Cheers,
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

No one ever wants to find themselves in the position of having their brand badmouthed to the public, but it still happens frequently. Once your brand has been badmouthed, what do you do next?

First you need to acknowledge the problem and show what you are doing to fix it. This must be done immediately. Being slow to react will make the public lose more trust in your brand. Second, be honest and transparent. This means sharing everything you know about the problem. You want to be the one sharing this information with the public, not a third party.

Recently, HP announced that they are going to discontinue their struggling TouchPad tablet and WebOS smartphone business and that they have plans to spin off their PC business. An onslaught of press coverage followed these announcements. The result has been a huge loss of consumer trust which can be seen in HP's plummeting stock price.

So, how has HP reacted? They have been open about the fact that they find themselves unable to compete in the technology market and that they are undergoing a period of significant transformation. Their Chief Executive, Leo Apotheker, referred to it as a "needed transformation." He has spent time selling this idea to shareholders in an attempt to regain shareholder trust.

Reacting to a situation like this is an ongoing process. HP must continue to be transparent about future plans to rebuild their business in order to start regaining consumer trust. It will be interesting to see how they continue to handle this situation.

Has your brand ever found itself in an unflattering situation? Share with us your experience.

Cheers,
The Ruby Porter Team

Recently, Bu-Ya Bookkeeping came to us for help with creating a logo. They're previous logo wasn't really capturing who they were, and because of this, they were lacking brand recognition. Bu-Ya Bookkeeping wanted to portray that they are fun and upbeat while maintaining their professionalism. We examined logos of other companies in the industry and noticed a trend: extremely simple and often flat out boring logos. We wanted Bu-Ya to stand out among this landscape of simple logos. To do this we created a logo that is a little different than most in the industry. We were able to get their fun attitude and professionalism across in this logo, and it is sure to stand out! Here is what we came up with:

In addition to creating a logo, we also designed a new business card for Bu-Ya Bookkeeping that incorporated the new logo. Their previous business card was busy with too many colors and images. The images used did not portray exactly who they are and what they are all about. And, the type was difficult to read as it was set in a very small serif typeface. We designed a more refined business card with a simplified color palette that better conveys the Bu-Ya image. Here is the before and after for the Bu-Ya Bookkeeping business card:

Having a logo that represents your business well is an essential piece of branding your business. A logo allows customers to easily identify you from your competitors. And having your logo live on a business card that is truly useful and functional is like the icing on the cake.

Need help creating a logo for your business? Contact us to find out how.

Cheers,
The Ruby Porter Team

LinkedIn company profiles are very beneficial. It is another way for your small or large business to get its brand noticed through social media. A LinkedIn company profile can be great for any business regardless if you’re service based or product based.

Here’s why we think LinkedIn company profiles are beneficial:

• Build Credibility -- LinkedIn offers the opportunity for companies to receive recommendations from anyone whether they are a client, employee, business partner, etc. These recommendations will be visible to everyone who views the page.
• Increase Brand Awareness -- Have your brand and logo on the company page so that viewers can see what your company is all about. Also, post information about the services or products you offer and link those items to the corresponding pages on your company’s website.
• Extend Your Reach -- You can connect each of your employees to your company profile. Doing this serves two purposes. First, you can channel inquiries to the appropriate people within your company (direct link = better business). Second, your employees can become brand ambassadors thereby creating opportunities for your company to be viewed by a wider audience.
• Highlight Products/Services -- You can highlight all of your products/services and show viewers why you're the expert in your field.
  

We recently updated the Ruby Porter LinkedIn company profile. Check it out and give us feedback.
We'd love to hear your thoughts.

Another example of a LinkedIn company profile that is product based: Pink Butterfly Aprons

Thanks!
The Ruby Porter Team

What is differentiation? Differentiation is a product or service that offers higher quality levels and/or has unique features and characteristics than the competition. Benefits of differentiation include increased market share, customer loyalty, decreased price sensitivity and less rivalry.

According to McMilland and McGrath in their article Discovering New Points of Differentiation there are six stages to the buying process: purchase, delivery, use, supplements, maintenance and disposal. At each of these stages a brand can differentiate itself based on consumer productivity, simplicity, convenience, risk, fun and image, environmental friendliness and more.

Where does your brand fit in the buyer utility map? Where does your competition fit? Are there any gaps in your industry that your brand could fill? Ask these questions to determine how your brand can use a differentiation strategy. First, select just a few characteristics that are widely valued by your target market on which to differentiate your brand. Next, concentrate on what differentiates your brand in all of your communications (marketing, advertising, etc.) so customers know what makes you special or unique.

Here are some great examples of brands that have differentiated themselves by using packaging to create a fun image:

Kleenex and Diet Coke both face fierce competition in their respective markets, yet they have managed to differentiate themselves by implementing a creative design with their packaging. There are many differentiation strategies out there, fun and creative packaging is just one example.

Questions on how your brand can differentiate itself? Contact us to find out how.

Cheers,
The Ruby Porter Team

Here at Ruby Porter we love learning new things! So we were really excited when we learned about Google's take on the new model for the buying process. Google recently released a long document about the new buying model for both business to consumers and business to business. The old or traditional buying model consists of three standard steps:

1. Stimulus - the advertisement you see or the article you receive in the mail about the product.
2. First Moment of Truth - you're at the shelf looking at the product deciding if you want to purchase it or not (your first interaction with the product or service)
3. Second Moment of Truth - you've made your purchase and are now experiencing it. Was it everything the advertisement said it would be?
   

The new buying model, as explained by Google and executives from large multinational corporations, inserts a fourth step called the Zero Moment of Truth or "ZMOT" between the Stimulus and the First Moment of Truth. ZMOT consists of written reviews, word of mouth, mobile searches, opinions of people you talk to, etc.

Why make the change? Simply stated, we don't shop the way we used to. With the abundance of online reviews, mobile device applications, etc. that allow us to take a more educated position in our buying choices, we have changed our patterns and expectations. And the stats don't lie. According to research presented by Google, 70% of people use reviews before purchasing an item and 79% of people use a cell phone while shopping. And more importantly, these same studies have shown that people trust reviews from other people more than they trust advertisements.

What does that mean for businesses?
We need to be aware of what is written about us online, and we need to actively participate in the discussion via social media. Some businesses fear that there will be negative comments online and so shy away from it altogether. But the fact is that people have always talked and continue to do so on or offline. It is better to be a part of the conversation so you can demonstrate your customer service versus having it out there unchecked or addressed. A wound left untreated will only get infected if you know what we mean. It's best to just be honest. Admit to any wrong doing and offer to make it better. Customers will appreciate that.

Here's a perfect example: Very recently, Dominos Pizza decided to put its customers' feedback, unfiltered, live on a Times Square billboard. Pretty brave, huh?

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