January 20th, 2012

Business Anatomy of an Effective Logo

Over the years, we have seen thousands if not millions of logos. What makes a logo memorable? Does having a memorable logo sell more products or services? Should we even care? Heck yeah we should! As designers, it is imperative that we understand how our aesthetic perspective can translate into bottom line business results. I would like every designer to stop asking questions like, “What colors do you like?” or even, “What do you want in this logo?” That should be your job. I want to discuss a few key concepts and ideas here that will give our logos more depth.

Is a logo the brand of a company?

My answer is not entirely. Brands are complex creatures that involve a number of components working together to create positive (or sometimes negative) emotions for customers — a logo being one of those components. The logo should embody the brand of a business. When I start to develop a logo, I always try to understand a client’s brand by asking questions about how they want their customers to view their brand. Allowing them to only use adjectives can really help. Asking simple questions like these will help you create an embodiment of their brand in the form of a logo.

What is the demographic for the logo?

This is a crucial component to understand because it will let you know how edgy and creative you can be. If you are targeting male college students, your choice of type font and color will be significantly different than if you’re targeting first time mothers.

Here are some examples that I think are pretty good.

Pampers Logo

GungHo Energy Logo

The energy drink industry has a different target demographic than a company selling children’s products. Each respective company used the principles of design very effectivley to appeal to their core audience.

What seperates your business from your competitors?

The first two questions were broad but helped us get a birds eye view of our customer’s brand. This question really narrows down the most important message of a company. Having a clean answer to this question can really help you get to know the soul of the company. For example, let’s say a new shipping company comes along and they will ship your packages anywhere in the world. They are targeting families and businesses alike. Seems like we have heard this story before until we ask this question. The difference is this company can ship your products twice as fast as any other company using a molecular transport machine. That key point of differentiation should be incorporated into your logo somehow.

There are hundreds of other questions we could ask, however, I feel like this is a good start and we get the idea.

January 9th, 2012

The 3 Types of Logos and What’s Best for You

Your company’s logo is the face of your business and the first impression of your company that most people see. Because of this, logos are very important but what’s in a logo? When working on logo design or logo redesign for your company, there are really just three categories to choose from: text logos, symbol logos, and combination logos. Each category has their own uses, pros, and cons but sometimes it can be hard to decide what is best for your company.

Text Logos

Text Logos - Disney, Dell, Kool-Aid, Google, Oreo, Hershey's, Coca-Cola, Subway, MicrosoftA text logo, commonly known in the design industry as a “word mark”, is a logo made up of the text of the company’s name uniquely styled with specifics fonts. The text is sometimes tweaked with graphic elements such as lines, borders, or gradients, but those elements are minor additions to the text of the logo.

When to use a text logo:

  • If your company has a name that is unique enough to make the logo memorable without adding symbols or icons.
  • If your company offers many different services or products that can’t easily be combined into a single symbol. The more symbols that are added to a logo, the harder it is to make it memorable.
  • If your company’s name includes many words that can’t be easily shortened or abbreviated. If you have many words to include in your logo, purely using text for the logo can help keep it clean and uncluttered.

Symbol Logos

Symbol Logos - World Wide Fund For Nature, Mozilla Firefox, Nike, Pepsi, Toyota, Texaco, NBC, Rolling Stone, Playboy, Apple, Superman, MercedesA symbol logo is just the opposite of a text logo- it includes no text but instead is made up of symbols and shapes. Symbols aren’t as direct as straight text but that also leaves room for individual interpretations of what the symbol can represent.

When to use a symbol logo:

  • If your company has a worldwide presence and you can create a symbol that defines your company without words. Symbols can cross language barriers but only if they’re recognizable.
  • If your company’s branding is already easily recognizable, a simple symbol can be a cleaner alternative to a combination logo. If your company is just starting out, a single symbol could be hard for new customers to remember or understand.
  • If your company has been using a combination logo and you’ve created enough brand recognition around your company to drop the text in your logo.  This combination-to-symbol logo evolution is quite common as companies grow to be large and recognizable.

Combination Logos

Combination Logos - Starbucks Coffee, HP, MasterCard, Pizza Hut, Harley-Davidson, NASA, Amazon, Tostitos, Goodyear, BMWA combination logo is the best of both worlds, combining the use of text and symbols to give a clear message that’s also aesthetically pleasing to the eye. The text can be integrated into the symbol or stand alone beside or beneath the symbol. Combination logos are the most common type of logo.

When to use a combination logo:

  • If your company doesn’t have the brand recognition to carry a single symbol but you want more than text in your logo. Combination logos can be easily converted into a symbol logo when a company grows large enough.
  • If your company wants to make customer think of your business name when they see a certain symbol.
  • If your company wants to copyright your logo with ease. Combination logos are easier to copyright because the symbol will always be used with the company name.

What Do You Think?

What do you think about logos? Does your company have a text, symbol, or combination logo? What are some of your favorite or most memorable logos? Please share with us in the comments!

December 19th, 2011

Comic: Chrome Becomes More Popular than Firefox

Earlier this month, StatCounter reported that Google Chrome had finally overtaken Mozilla Firefox in use in the worldwide market. Poor Firefox. Some of our developers have also said goodbye to Firefox, converting over to Chrome as their main browser on their home and work computers. As a tribute to the waning rule of Firefox, we created this comic:

Firefox Comic

What About You?

What do you think? Are you sad that Firefox is seeing a decline or do you think it’s about time that Chrome has become more popular? Have you ever used the Firefox’s useful web development add-on Firebug and do you like it? Share with us in the comments!

December 12th, 2011

Browser Wars – May Compatibility Be With You

A long, long time ago, in a cyberspace galaxy far away… Mosaic was born—the first global web browser.  So it really wasn’t that long ago, only back in 1993, but in Internet terms, it was a millennium. Since then, dozens of web browsers have come into existence, and most have faded into a distant memory. Today there are really only a few major browsers left:

  • Internet Explorer
  • Firefox
  • Opera
  • Chrome
  • Safari

    Browser Wars - May Compatibility Be With You

So what’s the difference? Why are there so many competing browsers?

I think most of it has to do with branding. If you use a product from a certain company, you feel familiar with that company and will buy more of their products, so major companies develop their own browsers to make you familiar with their company hoping you’ll buy from them in the future.

As web developers, the biggest difference we see in browsers isn’t the branding, it’s in the compatibility with our code. Not all browsers are created equally. Various browsers interpret our code differently, which causes them to display web pages with subtle, and sometimes not-so-subtle, differences.  As a general rule, the older the browser is, the less compatible it is.

Browsers continually have updates to newer versions with improved stability, security and support for newer technologies, as well as web languages continually being updated to offer more features.

What does this mean to me?

As the saying goes, “out with the old, in with the new.” Your computer you purchased in 2000 that’s running Internet Explorer 6  has had a long and happy life serving you, but to get the best web-browsing experience, it’s time for an upgrade. Few, if any, web development companies support IE6 anymore, and IE7’s time is running short.  With only 6.25% of internet users using IE7, and less people using older browsers, it’s not often worth the company’s time or your money to develop for outdated browsers.

When developing your website, ask yourself “is it worth paying the company $X-hundred dollars to make this page look right for that 6.25%?” If it is, we’ll be happy to accommodate you and develop that support for older browsers.  If not, just tell yourself “that 6.25% is probably not part of the technological generation anyway. They probably only use the internet to check their email.”

And whatever your favorite browser is (*cough* Firefox), be sure to check for updates often to make sure you get the best web-browsing experience available.

What About You?

What do you think? Do you have a favorite browser? Which one do you use most often and do you keep it updated? Share some browser opinions and insights with us in the comments!

December 5th, 2011

Infographic: Shopping Cart Abandonment and Tips To Avoid It

As we move into the holiday season, owners of ecommerce systems might want to make sure that they’re doing everything possible to make their online stores easy to use for the thousands of people browsing and purchasing online for this gift-giving season. Don’t let your shopping carts be abandoned on the verge of a sale! The helpful people over at Monetate have created this great infographic full of interesting stats and useful tips:

Shopping Cart Abandonment

You can find the original post/infographic here: Shopping Cart Abandonment and Tips To Avoid It.

What do you think?

What is your take on this infographic? Do you agree with these shopping cart tips? Do you have any of your own to add? Please let us know your thoughts in the comments!

November 28th, 2011

Exciting New Features in CSS3

Cascading Style Sheets (CSS) is a style sheet language used to describe the look and formatting of website. The earliest drafts for CSS3, the newest version of CSS, were published in June 1999 but even today most browsers only partially support CSS3. Because not all browsers support CSS3 yet, developers still have to do some work-arounds to make sites look the same in all browsers, but there are some pretty neat things in the newest implementation of CSS that will really give developers more artistic freedom, as well as increase load time and improve user experience. Here are just a few new style rules implemented in CSS3.

Multiple Background Images

Oh, how many times have I wished I could apply multiple backgrounds to one element, rather than putting a div inside another div just to layer backgrounds!  Multiple backgrounds can be created using the normal background-image style and comma-separating background images:

background-image: url(image1.jpg), url(image2.jpg);

Image1.jpg will be the top background image, image2.jpg will be the bottom background image. Those backgrounds can then be positioned using background-position and comma separating their positions:

background-position: left top, right bottom;

Rounded Corners

In the old days, any elements designed to have rounded corners had to have a background image with rounded corners to make it look right.  This was a real pain with tabbed navigation.  You’d have to put one background behind the anchor and one background behind the list item, or just make each tab its own image, which wasn’t a very dynamic option. In CSS3, there is a new style element called border-radius.  Just specify the radius of the 4 corners of your box and watch the magic happen:

border-radius: 10px 5px 8px 15px;

The numbers correspond to (in order) top-left, top-right, bottom-right, bottom-left.

Drop Shadows

A step in the right direction, but not completely where I’d like it to be, the new box-shadow style allows block-level elements to create a drop shadow. Where this falls short is if you have, say a PNG image and put a box-shadow style on it. Rather than putting a shadow of the image below the image, as a normal drop shadow does, it will put a drop shadow around the box the image is in. Hopefully, in the future this will be addressed.  To use box-shadow, specify the distance on the x-axis, then the y-axis, then the amount of blur, then the shadow color:

box-shadow: 10px 5px 8px #333;

Text Shadows

Self explanatory: generates a drop-shadow behind text.  Text shadows are created using the text-shadow style and specifying the distance on the x-axis, then the y-axis, then the amount of blur, then the shadow color:

text-shadow: 10px 5px 8px #333;

Opacity

This new style rule in CSS3 can make an element’s opacity anywhere from completely visible to completely invisible.  This can make for some interesting Web 2.0 looks. To use the opacity rule, simple define the percentage of visibility you want the item to have in a decimal point (i.e. .5 is 50%):

opacity:  .35;

What I would like to see now is a background-opacity rule rather than using RGBA values.

What About You?

These are only some of the new rules implemented in CSS3, there are plenty of other new style rules in the web developers toolbelt. Now, we just need the browsers to support all of the rules… Check out http://www.css3.info/ for more CSS3 news and info.

But what do you think about CSS3? Have you ever used it or thought about using the new style rules? Do you agree about these rules or think they should work differently? Are you curious to know more? Let us know in the comments!

November 21st, 2011

Tech Support: I Don’t Understand You

I used to work tech support with my brother back in the days when the internet was just born. We supported a dial up internet service (this was before DSL came out) and I remember receiving a lot of calls where people would ask me how to type a capital letter or help them fix their ‘TV” (by which they meant their computer). One call, though, stood out more than any other. My brother took this call and even though this was over twelve years ago, I still remember how many heads were shaking after this call.

Did That Need to be Plugged In?

It started off innocently. A woman called and said she couldn’t connect to the internet. My brother asked a few basic questions and determined that the problem was that her computer wasn’t properly connected to a phone line. My brother asked her to make sure the phone was connected. She said it was connected. He asked: is it plugged into the wall? She confirmed, again, that it was hooked up. They spent forty-five minutes reinstalling everything short of the operating system, unplugging and reconnecting both ends of the phone line, and making sure the phone had a dial tone. Finally, out of sheer frustration, my brother asked her to physically follow the cord from the computer to the wall, thinking that maybe the phone cord was damaged somewhere. When she made it to the end, he asked her what she saw. Her reply: “I see my phone cord taped to the wall.”

While it is easy to quickly assume that the woman was not competent enough to own a computer or that my brother should have been more clear, the truth is that there’s a wide disconnect between how a regular computer user thinks and how an experienced computer user thinks. The gulf between a programmer and your grandmother can seem like an impossible language barrier, but it doesn’t have to be.

Tech Support

Tech Support Tips

Here are a few simple tips for helping you help technical support to fix your problems:

  1. Give information. The more information tech support has, the better off everyone is. If you see something that doesn’t work the way you think it should, play with it see how you can make it happen again. If you can’t make it happen again, write down what you were doing when you saw it happen and any words you remember being on the page. Screen shots are a huge help if you know how to do it. The web address of the page with the problem is gold.
  2. Read the errors. Technical words can seem like a jumble of gibberish more often than not. IE6 JS console anyone? But even if those errors seem to be completely random letters strung together, they can be a solid compass in the right hands. The more words of the error you can relate to tech support, the faster they can fix it, in most cases.
  3. Be clear. A lot of people want to hear an apology up front for something being broken, but computers don’t care about feelings. So, if your interest is to get something fixed, leave feelings out of it at first and stick to the facts and the numbers. Once you’ve given tech support the data and answered any other questions that they might ask, give them a chance to pass it off to a person who will work on it. Then, you can let them know how you feel. Just remember, tech support agents are people, too.
  4. Be patient. Personally, I hate it when I can’t get something fixed quickly because I know problems with a web site can mean a lot of lost money for clients. Most tech support agents try hard to fix issues as soon as possible because it reflects directly on their company, especially in this customer service-based world, so please believe us when we say that we really do want to fix your problems for you.

Most of these tips are pretty straight forward but in the heat of the moment, they can be hard to remember. But try these things they next time and see how it effects the process. Clear communication can cut hours off the time spent finding problems before anyone can start fixing it.

What About You?

What do you think? Have you had any terrible tech support experiences, from either end? What are some other tips that you’ve found useful for communicating with tech support agents?

June 30th, 2011

How Payment Gateways Work

If you are planning on getting an ecommerce website setup soon, and were wondering how the whole gateway process works, below is an illustration of how payment gateways work and the process.  To be able to process transactions online, you will need to have a merchant gateway set up.  The gateway is like a virtual credit card machine that process credit cards online.  The gateway then authorizes the card transaction and processes it through a merchant.  Some popular merchant gateways are Authorize.net, ECHO, etc.

After the transaction is processed, the merchant gateway sends the money to your bank.  After about 24 hours, the money will show in your bank account.

Setting up a gateway account is easy.  There is just a form we have our clients fill out, and we take care of the rest.  We integrate the system into your site and set it up to communicate with your bank.

Click on image for full size view:

How the Payment Gateway Process Works

How the Payment Gateway Process Works

June 28th, 2011

Web Typography

While the phrase ‘web typography’ is large and fancy-looking, it really just means the use of fonts on Internet websites. Fonts, the size and style of the typeface in which something is written, are already familiar to us because literally everything written has a certain font. But applying fonts to text on the web can be a little tricky.

Web-safe Fonts – Why Are There Only a Dozen Choices?

Because of the wide range of computer operating systems, there are only a handful of fonts that are considered ‘web-safe’- safe to use on websites because they are installed on all major operating systems. Web-safe fonts include:

  • Arial
  • Arial Black
  • Comic Sans MS
  • Courier New
  • Georgia
  • Times New Roman
  • Trebuchet MS
  • Verdana

While other fonts that can be found on the Internet are a lot more interesting, not everyone is assured to have a specific downloaded font on their computer. It’s good practice to use one of the fonts above so the text will be seen the same no matter who views it.

So What Do the Web-safe Fonts Look Like?

One of the best resources to test and view web-safe fonts is Typetester, which not only lets you dynamically test the text you want, but also has controls for color, size, alignment, background color, etc. Using this tool, you can narrow down had you want your text to look on your website with ease.

What are Your Thoughts?

Do you have a favorite web-safe font? Do you have a favorite font you wish was web-safe? There are a few known of ways to include a non-safe font on a website- do you think these work for everyone and are they worth it? What do you think about fonts, web-safe or not?

April 29th, 2011

Infogenix on Social Media

Did you know that Infogenix loves social media? We have a Twitter account and a Facebook page that we’re constantly posting to. We share SEO articles, posts about web design and web designers, interesting videos, and anything else interesting we can get our hands on. We also connect with our current clients and local businesses in Utah and we like helping out with questions and providing customer service through social media.

We love engaging others, please visit our Twitter or Facebook pages and contact us any time!