Design Tips: Less is More

Welcome to the 21st Century

As you may, or may not, have noticed, the design standards landscape has changed a considerable amount since the birth of the internet. The internet was originally created via contracts with the Department of Defense, with the purpose sharing digital documents, but quickly took a life of it’s own. People strayed away from making Word styled documents and moved more towards, rich, media filled websites that you would never see in a word processor. This worked well for a while, but the designs were often busy, gaudy, and clunky. Trying to download a website full of images is like peeing through a pin-hole, painful. Obviously, something had to change, not only the document structure for HTML, but also the methodology for designing all together.

Trying to download a website full of images is like peeing through a pin-hole, painful

Enter HTML5 & CSS3

Within the last couple years the spec for HTML and CSS have come leaps and bounds to evolve the internet as a resource to share documents, to a full fledged, application interface. Things that once took several images or gif animations can now be done with standard, cross browser, CSS and HTML. Also rearing it’s head around this time period is the mobile market, most notably headed by Apple with their Iphone. Though the original Iphone is quite literally child’s play with today’s hardware / software, it helped introduce people to a whole new way of looking at application design and with Apple’s high standards for the applications allowed on their market, it helped push this methodology into the mainstream. With all of the pieces in place the internet has become a powerful application design tool as long as the proper attention is put towards designing an interface that caters to the new standards of intuitiveness that Apple helped introduce.

Though the original Iphone is quite literally child’s play with today’s hardware / software, it helped introduce people to a whole new way of looking at application design

The Do’s and OH DEAR GOD DON’Ts

When designing a new project it can sometimes be hard to think about what is really necessary in the interface. Too many controls, people feel lost and overwhelmed, too few, and people feel like thing are missing or cumbersome. So to aide you in this we have devised a little list of things that we do and things that we have made it a point to never do. This wasn’t drawn up randomly, but was compiled after years of designing and learning what works and what doesn’t.

DOs	DON’Ts
Flat – Flat is in so ditch the gradients and complex graphics and simplify, your users will thank you. Icons – A picture is worth a thousand words and that’s why sometimes it is better to go with something that conveys the idea clearly, like an icon, we use Font Awesome. Simple Palette – It is really easy to go overboard with color (look at our site…) best rule of thumb is to use a primary color and a highlight. Animations – Instead of a flashy color, use a subtle animation to attract attention, try Animate.css. Count Clicks – Coined by Blackberry this is a saying to live by. If it takes more than a few clicks you want to redesign your interface. Intuitive – This one is more of a feeling. If it doesn’t feel natural or you need a manual then it’s back to the drawing board. Spacing – This can make the difference between a cluster fuck and a clean design, use tastefully	Text Links – Avoid these like the plague, users would rather have a button in most cases. Count Links – Similar to count your clicks, count your links is VERY important. Imagine the links as a fraction, if you have 100 links on a page then you have a 1% chance that the user clicks where you want them to Assume – This rule is broad and powerful, never assume intent, wants, or interaction. The best way to make a great interface is to design per the end-user’s wants / needs.

DOs

DON’Ts

Flat – Flat is in so ditch the gradients and complex graphics and simplify, your users will thank you.
Icons – A picture is worth a thousand words and that’s why sometimes it is better to go with something that conveys the idea clearly, like an icon, we use Font Awesome.
Simple Palette – It is really easy to go overboard with color (look at our site…) best rule of thumb is to use a primary color and a highlight.
Animations – Instead of a flashy color, use a subtle animation to attract attention, try Animate.css.
Count Clicks – Coined by Blackberry this is a saying to live by. If it takes more than a few clicks you want to redesign your interface.
Intuitive – This one is more of a feeling. If it doesn’t feel natural or you need a manual then it’s back to the drawing board.
Spacing – This can make the difference between a cluster fuck and a clean design, use tastefully

Text Links – Avoid these like the plague, users would rather have a button in most cases.
Count Links – Similar to count your clicks, count your links is VERY important. Imagine the links as a fraction, if you have 100 links on a page then you have a 1% chance that the user clicks where you want them to
Assume – This rule is broad and powerful, never assume intent, wants, or interaction. The best way to make a great interface is to design per the end-user’s wants / needs.

Until Next Time

Hopefully this was an enlightening read for you, as I know I had a blasty blast crafting it. If you have some dos and don’ts that you follow we would love to hear them. If you really appreciated this read, please follow us on your favorite social network (In the Footer Below). I hope to revisit design tips in a while for some more insight, but that is all for now. Thanks for reading, until next time! ^_^