Invisible design quote by Jared Spool

The quote emphasizes the intertwining of good design with good user experience. Aesthetics which was usually a more abstract concept is now becoming a 3-dimensional reality. Gone are the days were color, hue and scheme dictated good aesthetics, nowadays, its more like loading time, button size and navigation.

While there remains this thin line of difference between web design and user interface, they seem to overlapping much more. So what makes a good responsive design ‘good’. Is it just pleasing to the eye? Is is just using the correct color scheme? Is it just about right CSS breaks? Is your job done when your page loads across Apple, Samsung, HTC, OnePlus, Microsoft and god-forbid a blackberry?

Invisible design is to web designing what emirates is to commercial aircrafts. When your user gets what s/he wants from all the information you have provided that he subconsciously enjoys the visit or when s/he moves so smoothly from one page to the next that they forget that there is an interface at all.

Having said that, responsive design is both a product of the invisible design as well as a prerequisite. Since there is no standard measurement of a good or invisible design, you get the creative liberty to produce impeccable design. Here are top 5 mistakes you can avoid to create an invisible design for your next responsive project:

1. Trying to impress with design

For any designer creating that wow design involves adding the much needed ‘zing’ to the webpage, while making sure that it sticks or works in responsive mode is pretty slick task. Creating the ultimate parallax and adding multiple hovers can surely lead to an edgy design. But, isn’t is trying to hard? Nothing defeats a responsive user experience as much as plethora of elements. While these elements are all individually good; combining them creates more of a distraction that an asset.

The image shows bold color in plenty to avoid mistakes in invisible design

2. bold colors in plenty

Bold colors is not just a summer thing. Most designers love to experiment with colors. Brand logos that involve distinct bold colors, give you an opportunity to use it on the web page. In their absence, you can add a highlight color to your theme pallet. Either ways adding color is always a sure shot way to prep up a web page. It could be in your in icons, images, interactions, content, buttons or even background.

However, what does not work is adding a bold color in every one of these elements. It creates distraction in the eye. Using bold colors is an easy way to highlight your webpage, but can also be a tricky tip. It can kill your page, if not done right.

3. Not following the Golden ratio

The golden ratio is the illogical mathematical principle that has given the world the most beautiful paintings, sculptures and art forms. The golden ratio is widely related to the Fibonacci series as is explained as the ratio of 1:1.61. It defines beauty that is pleasing to the eye across cultures. If you consider it carefully, all your screen are rectangle. Be it desktop, laptop, tablet, smartphone both in vertical and horizontal layouts. This ratio when used to divide your screen size or create elements within your screen size can provide great results. This is one of the few rules of aesthetics that seem to work like magic, every single time.

Images shows the golden ratio of Fibonacci series

4. Confusing Cues

Adding ‘cues’ to your design inculcates the much needed intuitiveness to the design. Where users adapt or follow the path you intent them to go through. Cues come as handy signboards that help a visitor to navigate an airport. However, too many sign boards can make you feel lost.

While designing your cues, keep them limited to one format. For example, use plus icon to provide more information about your product. Now adding an arrow to expand the text while providing more information can lead to a ‘confusing cue’ situation. Keep to the most common or rather widely used cues, so that all generations of users- millenials, Gen X, Gen Y can easily adapt to your responsive website.

the image show the various cue-options

5. Simplistic copy

There is a difference between simple and simplistic. While simplistic design may work, simplistic copy usually fails. When everything else in your design plate seems to work towards creating a good user experience your content should not disappoint user. For example, do not tell the user ‘click here’ when your button can say ‘buy now’. Make sure your design and your content complement each other to create an awesome user experience aka-  The Invisible Design.