Nine years ago, I entered college as a journalism major. I quickly learned, however, that a sense of invention and creativity aren’t exactly valued qualities in a respected journalist and switched my major to Visual Communication Design (a fancy way to say ‘graphic design’). At the time, I thought that I had essentially wasted the first two years of my college experience pouring over the written word. I received failing grades when I accidentally spelled a source’s name wrong and sifted through seemingly endless bits of information to craft things they referred to as ‘nut grafs’.

I know now, of course, that time spent while learning should never be thought of as a waste — in fact, time spent specifically learning the ins and outs of the English language is especially valuable to those who consider themselves ‘graphic designers’. We are an industry (and by extension, a world) of appearances — we design and redesign our brochures, websites and posters until they appear to be the best they can possibly be (or in some cases, even better than they actually are).

If, within the span of our career, we expect to encounter even just one written word, we should not only be familiar with how they work individually (i.e. how they are spelled, what they mean), but how they function within a group or series of groups (sentence structure, punctuation, paragraphs, pages, etc.).

I don’t claim to be a grammar expert by any means and I love spell-check menus as much as the next person. I do, however, attempt to take a genuine and proactive interest in every bit of copy that I work with — from client projects, to e-mails and even something as trivial as a Facebook status. Using correct English simply makes you, and by extension your client, appear smart and professional.

Below I’ve compiled a handy guide of what I think are the most common grammatical or spelling mistakes made by designers and their respective solutions.

“Your my very favorite client”

If you’re unsure about when to use the contraction “you’re” vs. the possessive “your”, try substituting in the full phrase: if “You are my favorite client” makes sense and retains your original meaning, then the contraction is correct. If it does not, for example: “You are pants are in my front lawn“, than the possessive “your” is the word you need.

“But its not my job to keep track of your pants”

The same substitution trick works when deciding between its and it’s. It’s is a contraction for “it is“, for example: “But it is not my job to keep track of your pants” is what we are trying to say. If you’re trying to indicate possession, for example: “We are never going to that bar again. Its stools are very uncomfortable,” leave out the apostrophe.

If you’re trying to indicate the plural possessive, their (not thier or there) is your word: “Do you remember those guys we met last night? Their Taz tattoos were awesome.”

“I just really “love” adding “extra” punctuation……. doesn’t it make me look “smart”????”

Punctuation is the work horse of grammar; use it sparingly and only when necessary. Why only use one question mark when seven will do??????? Because it looks sloppy and informal, that’s why.

Use exclamation points only when you want to truly convey (not manufacture) excitement.

An ellipses is used to indicate that information has been removed, or to represent a pause in thought. A true ellipses is always three consecutive periods and many typefaces even have one available — use it, instead of making your own.

Quotation marks are used to enclose an actual quotation and when used incorrectly can make your words seem “suspect” or not “genuine” — the placement of question marks with quotes follows logic. If a question is in quotation marks, the question mark should be placed inside the quotation marks, for example “Does anyone remember where I put my baby?” she asked.

Random Bits

• Spell out numbers under 10 (four, two, seven) and use numerals for everything else (427).
• Generally, use “more than” (not then) when referring to numbers (more than 70) and over when referring to distance or measurement (over there).
• Hyphenate compound adjectives, such as four-year-old girl. Unless, of course, you mean to say that you have four, year-old girls or four-year, old girls.
• Effect is a noun, as in “the effect of her new hair was startling.” Affect is a verb, meaning to influence, as in “the new hair color really affected her ability to attract a man.“
• Capitalizing Every Word In Your Sentence Is An Effect To Be Used Sparingly, such as, in a title or subhead. Randomly capitalizing Words that aren’t Proper nouns is Just confusing and wrong.
• Use only ONE space after a period, before beginning a new sentence, unless, of course, you’re still using a typewriter.

Yes, we are designers, not writers, but if we learn about how the Internet works in order to design usable websites, shouldn’t we learn about how the English language works in order to design coherent, readable pieces? As far as I’m concerned, the minute you type a word on your computer or hit send on a e-mail, you’re responsible for the content — image, type or otherwise. The only way to be absolved of responsibility is to never work with a single word and with a degree that so prominently includes the word “communication”, that’s never going to be an option for me.

For more information: Numbers vs. Numerals |  Why Two Spaces? |  Hyphens |  Quotation Marks |  More Than vs. Over |  En/Em Dashes |  Ten Words You Need To Stop Misspelling

We have all heard that you shouldn’t judge a book by its cover. But what about apps?

Unlike books, an app needs to be quickly found while swiping through pages and also stand out amongst its peers in the App Store/Marketplace. The icon of an app should give a visual indication of quality and contents — therefore, apps can and should be judged by their icon.

So what should you look for? What does an app icon really need to do? Here are a few things worth noting about icons in regards to content, simplicity and technology.

SAY IT UP FRONT:

What does the app do? You should be able to immediately gather basic information about the app, just by glancing at it. With an existing brand, sometimes the logo is enough to know exactly what to expect. There is probably little to no confusion about what these apps do:

What about apps for lesser known brands? Using objects, or an icon representative of your service/genre is key. This way, the user can automatically understand the purpose of the app without having to read the description before downloading.

KEEP IT SIMPLE!

Whatever you do, DO NOT MAKE IT MORE COMPLICATED THAN IT NEEDS TO BE! App icons are small — even with the best resolution and perfect eyesight, these icons can get complicated and messy very fast. There is only so much space — remember that your app will be on a page with other applications (without or without a background) and the more cluttered the space, the more necessary simplicity becomes.

The GOOD

Keeping it simple is one of the most useful ways to make an app stand out. Bright colors and simple details (if any) will always stand out brilliantly. Looking at the Nike+GPS app, there is no confusion that 1. it’s a Nike app and 2. that it involves some sort of GPS or mapping technology.

WebMD Baby uses a wooden toy block with a large B to indicate that this is an app dealing with children-related issues, while the Amtrak app adds a personal touch with a stylized train conductor — ready to assist you with all of your train traveling needs.

The newly re-designed aol instant messenger (aim) icon is the model of simplicity, with enough interest in the typography and coloring to keep it from being boring.

When shown with their full name located below (as they almost always are displayed on your actual device), they present a clear, simple and informative peak into what’s inside, without junking up your screen. Smarter, better, faster, stronger.

The BAD

With as much history and impact as the NFL and NBA logos have, you would think that they would both be strong enough to stand on their own. Unfortunately, the NBA icon forces the title of the app into the icon — did they not realize that it will also appear directly below the icon on the device?

The NBA-DL logo tries to cram in even more words — not to mention how illegible they are due to sizing, color choices and stroke weights.

The NFL logo says NFL 2011 or FANTASY below it. Why bother when the two colors already separate the apps visually? Also, does the icon really need to say NFL twice? Three times if you don’t forget the title below, which all of these app designers seem to have done.

And the UGLY

The Call of Duty Zombie app relies too heavily on the brand and would benefit from some thoughtful editing. Seven words may not seem like a lot, but on a phone screen, it’s a lot to read and the “of” between Call and Duty starts to look like a bullet point, even at the larger size shown above.

The Kindle App starts with a fairly recognizable logotype, but begins to get overly complicated when coupled with a fairly detailed illustration of a person reading by a tree. Keep it simple Amazon, from A to Z.

By trying to cram too much information into a limited space, you may end up with an unnecessarily complicated and ugly icon. Slapping the word “Pro” on the 1password icon, or using the peel effect (like textfree), dilutes the initial impact and negatively effects comprehension.

ADVANCE THE MEDIUM

The glossy, shiny app look is an Apple classic by now. With high resolution screens and new tablet sizes, however, icons can begin to take on a different look — there is more opportunity for variation and indication of depth than ever before.

This is a hands on device, why not create a visual effect that represents a physical aspect of the app? Apps that have a matte finish, or a very subtle texture to them begin to stand out — like the Find My Friend and Project Noah apps. When seen on Apple’s Retina Display, the “stitched” badges have a dimensionality and realistic texture to them that is quite nice.

Similarly, the newly updated Instagram app is instantly recognizable as a vintage, Polaroid camera and iTunes U takes on a formal look when “branded” into “wood”.

As a result, the glossy button apps (like, NASA’s Earth Now, Waze and Trapster) begin to look cheap and uninteresting, especially when compared side-by-side with a textural icon. Even the simple icon for the ESPN Winter X Games begins to feel a little too safe and boring.

Advance the medium by trying new things — with new apps entering the marketplace every day, it becomes that much more important to create a stand out icon. It is oftentimes necessary to judge an app by its icon and and in most cases your first impression won’t fail you.

A well-designed icon must stand out from the crowd and in seconds, convince users to purchase and download your app. As with any design project, apps take time and effort — don’t sell your work short by misrepresenting it or cutting corners. The icon design should be considered from the beginning of the design process, and should never be an afterthought. When you put quality first, you will never be disappointed in the results.

Do you agree? What are your favorite apps and/or icons? Any successful, unsuccessful, memorable or innovative icons that we’ve missed?  Let us know on Facebook or Twitter what you think.

Back in the golden age of video games, most cover art was atrocious. Nowadays, developers spend more money on the cover and overall design than what it cost to make an entire game back in the 80′s. But there’s really no excuse for poor art and design.

The artwork usually committed one of the three offenses (or sometimes all three) as follows:

1. Artwork done with no regard to the game inside.
2. A complete and blatant rip off of something else.
3. Done with such lack of artistic skill that you wonder if it was done by a 10-year-old.

MEGA MAN ?

I’ve included a few of my personal favorites, from the ridiculous to the just plain awful. My all time favorite terrible cover in the history of everything is for the U.S. version of Mega Man.  I’m not sure how everything that could have went wrong did, but man did it go wrong.

It could be due to the fact that the artist had no concept of proportions and human anatomy. Or maybe it was a complete lack of the understanding of perspective. I think it could be that the main character is holding a laser gun (he didn’t carry a gun) and he isn’t even the correct color palette as he appears in the game.  Also, it kind of looks like a 8th grader’s first attempt with watercolors. Whoever approved this must have never seen the game, or maybe they couldn’t because they were blind.

SPACE… RIGHT?!

Here’s one guilty of the the first offense: the artwork has nothing to do with the game inside. Phalanx is a space shooter that came out for the Super NES, but wanted to stand out amongst other space shooters. So, instead of putting the expected space ship, lasers, and intergalactic space battle on the cover, they place an old hillbilly playing the banjo.

It’s either the dumbest or smartest marketing move you can make. Sure, maybe it stood out, but having your package reflect what it contains is never a bad thing. I’m pretty sure every 10-year-old they were trying to market to passed this one up in favor of something with a space alien on the front.

JUST MAKE IT LOOK LIKE THIS

I suppose in the 80′s, the world was a nicer place and videogame developers thought they could rip off movie art and characters without resulting legal action? We aren’t even talking inspiration or reference, I’m talking straight blatant carbon copies slapped on the box and called by another name.  I have included my three favorite examples below, including “the source material”:

Contra (1987) box art vs. Predator poster. Arnold is apparently the main character, but in Contra, he wears a headband. Also as a bonus the Alien from Alien also makes an appearance in the background.

The Metal Gear (1987) box art totally rip offs a still from the main character in 1984′s Terminator.

Last but not least is the 1987 game Xenophobe, riding the back of the successful Alien franchise by slapping one on their cover. But I’m sure that was just a coincidence.

If you’re a tech-geek like me then you’re probably sad that this years Consumer Electronics Show in Las Vegas ended today, but here are a few things that I am still excited about.

Ice Cream Sandwich style guide

In addition to laying out the building blocks and design principles of Ice Cream Sandwich, this guide offers advice for buildings apps with details on suggested iconography, patterns, colors, typography, and writing styles. This is awesome and will help developers make cooler, better looking apps faster can’t wait to see what they come up with. Read more.

The Wii U

I was excited last year when Nintendo announced the Wii U at E3, but I haven’t heard much about the new system since. Until now that is — Justin Rubio at IGN got the chance to take the Wii U for a test drive and give us some insight on the new system. Read more.

James Bond 50th Anniversary Blu-ray Set

This collection showcases fifty years of Bond packaged into one sleek, collectable box-set featuring all six iconic James Bonds. Produced using the highest possible picture quality and audio presentation, the collection includes all 22 James Bond feature films. You can pre-order now at Amazon and save $100.

For a complete recap of CES 2012 go here and here.

Web design is an exciting field. Over the last decade, so much has changed for the better. The technology is in a constant state of evolution, shaped by the very people who make websites.

After years of hacks and workarounds, we finally have the tools to build websites that look and function as we desire in a semantic way. It is easier than ever to build more and more complex websites. The following are some of the reasons why:

HTML5 and CSS3

Ever since we started building web pages, we have yearned for more control over their appearance. The paradigm has completely changed multiple times over the last 20 years.  From html tables filled with images and inline styles, to flash, to responsive design, what once was right is now obsolete.

Along the way, in an effort to separate content from style, CSS joined the mix and has made many attempts to replace the old ways with better, more sustainable ways of making websites prettier. At the same time, HTML has evolved to make the web more accessible.

Keeping these two separate is crucial, but only when they work together can they accomplish web nirvana. HTML5 allows for new ways of semantically presenting content, while CSS3 allows us to shape that content in fascinating ways, all in the browser. No first-party technology, no nested tables, just pure function and form working together hand in hand.

Mobile and Responsive Design

The way we use the web is changing. Whether IOS or Android, smartphone or tablet, people are connecting to the web with new devices every day. This creates new opportunities for design and function that are tailored to the user. Regardless of how the user accesses the web, we can provide them a seamless experience, optimized for whatever
size or type of screen they have in front of them.

Web Fonts

Just a couple of years ago, every site I built came in only a handful of font flavors. Now, there are hundreds to choose from, with more foundries joining in all the time.

Yes, inexperienced designers can now go font-crazy just like the early days of desktop publishing, but this will only help make professionally designed sites with carefully selected typography stand out.

Internet Explorer

Believe it or not, I’m thrilled at the current state of Internet Explorer. IE6 recently dropped below 1% usage in the United States and IE7 can’t be far behind.

While we’re stuck with IE8 until the last PC running Windows XP finally kicks the bucket, working around its limitations as a browser is a walk in the park relative to supporting IE6 and IE7.

IE9 has an unprecedented level of support for current web standards, and that is exciting. IE has promised to auto-update its browsers going forward, putting it right on par with the competition. After years of ruining all the fun of web design, IE has made great strides recently toward making the web a better place.

Looking Forward

These are just a few of the most exciting things going on right now on the web. I couldn’t be happier to be a part it. I don’t know of any other field where there is such a community and a desire to share information with one’s peers — it’s hard not to get excited about the progress we are making every day. What we are doing is making a difference. Now that’s inspiring.