KICKASS DESIGN - Mobiloitte Blog

7 Secret Design Principles That Will Take Your Breath Away

Are you ready on another Insider’s look, this time coming from our design team? Whenever we mention the term web design, most people associate it with creativity, abstractness and lack of clear definition about how something is being done. Guess what! Great design (you can check our design portfolio) can be defined and even confined for easy reproduction. There is a certain set of universally applicable design principles which are responsible for everything you think looks good around you.

The best of all is that these design principles can find their application within many practical aspects of everyday live. Get ready for an amazing lesson of some of the most stunning design principles. You will be surprised how all of them are already present next time you look around you. Give us High Five if we manage to put you in such euphoria. Let’s roll…

1. The Pareto Principal, or the 80 / 20 Rule

You are well aware of one of the most famous principles design  principles originating from the Theory of Economics. The Pareto principal instructs that a high percentage of users will perform a low percentage of actions on your website (tweet this). This means that most of your users are going to go to a small percentage of pages, or in terms of web applications that most of your users will perform a small percentage of tasks.

RECOMMENDED FOR YOU3 Most Epic Android Design Failures

Using this design principle we can recognize what that small percentage of actions that most of the users are performing (with analytics, research, interviews, etc…) We can then put more weight on those tasks and actions to make the site easier to use. What can possible be done afterwards would mean inclusion of a new navigation, or altering the homepage to make finding and accomplishing those tasks easier. This can also lead to the pair down and removal of content and features from a website.

2. The Rule of Thirds

rule of thirds

The Rule of Thirds is a technique of constituting elements to be visually pleasing in addition to identifying ways that users eyes will scan across a webpage. Photographers have been “secretly” this principal for years to create more visually interesting compositions.

The Rule of Thirds is used by breaking up a design into thirds both vertically and horizontally which builds a grid of intersecting lines. The rule states that a viewer is more likely to be drawn to the intersection of those lines. Additionally it is a good rule of thumb to position those elements along the lines and intersections as well as avoid placing anything in the dead center of the composition or have a horizon diving the composition in half.

Here is a quick takeaway from this law – Placing elements so that they take up 1/3rd or 2/rds of the space will be more visually pleasing to most viewers (tweet this).

3. Fitts’ Law

The definition of Fitts’ Law is  “The time required to move to a target is a function of the target size and distance to the target.” We can apply this to web design by looking at the hit area of our objects. Meaning the larger we can make the clickable area of key links and navigational elements the easier they will be to click on (tweet this).

A common misappropriation of Fitts’ Law is when a design is coded so that the text of a menu bar is clickable but the tabs themselves are not. Rather than just making the text clickable it would be a great idea to add padding to that link element to increase the clickable area. Sometimes this means turning the anchor into a block level element and wrapping details inside.

4. The Golden Ratio

golden ratio

The Golden Ratio is often confused with the Rule of Thirds. In fact, they are different The Golden Ratio looks at what proportions are

naturally most visually alluring. This ratio has been used in design, architecture and engineering for hundreds of years. It even has been tied to what features we find most attractive in people (both facial features and body types).

The Golden Ratio can be described as a ratio with in the elements of a form, such as height to width, approximating 1.618 (tweet this).

When applied to rectangles you can continue to create smaller dissections of the shape using the 0.618 ratio, which creates a natural spiral pattern. This can be seen in nature by examining sea shells.

5. Proximity

The Law of Proximity is often neglected, even by experienced designers. This law states that elements that are near each other will appear related (tweet this). What this means is that you must be very aware of how much space you are placing between elements within your design. If you have a series of elements that are too close together, users will accept that this was done so on purpose and that those elements are related. This is often an problem in web applications, where buttons or controls are grouped together yet have disparate functionality. The result is that users get confused when trying to use and understand the application.

For example a search button that is too close to a save and cancel will likely get the notion that the search is related to saving or canceling. Some users may think that the search is for searching earlier versions of your work or that it is specific search for help, etc…

Proximity can be extremely powerful in design, so use it wisely.

6. Hick’s Law

hickHick’s law declares that with every additional choice which is given the time it will take for one to make a selection further increases. This means that the more options a user has when using your website or web application the more difficult it will be to use. This is where the good old paradigm of simplicity mattering the most is proven once again.

The classic case study for Hick’s law involves a grocery store which put out free jam tasting for customers. In one case they had 40+ jams to sample and choose from, and in the other only a few samples. What they discovered is that customers purchased more jam when presented with three to four options over the forty plus. Most customers chose not to purchase jam at all rather than pick from such a large selection.

What this means for you designers is that you should minimize the amount of choices a user has to select from. Removing any unnecessary pages, links, buttons or selections will make your designs much more effective.

7. Occam’s Razor

Occam’s Razor in its essence, states that “the simplest solution is almost always the best (tweet this).” With the flexibility and power of the web and our design tools, it is easy to get taken away. The result is a very complex site or design that may have a lot of functionality and information, but is difficult to use, build and maintain. Despite the fact that one might think the site can do more, it actually achieves less.

This is commonly an issue where companies feel the need to put everything they possibly could up on the website in the rare case that someone wants the information. What gets ignored is that the overwhelming majority of the users will access about 20% of the content on the site (a reminder of the 80/20 rule mentioned above).

Being merciless about the value that a page or piece of content provides and removing anything that is unnecessary will make significantly stronger and more effective designs.

Additionally this rule speaks to the age old saying that “A design isn’t finished when there is nothing more to add, but when there is nothing left to take away.” Design simplicity is elegant, sophisticated and much more effective than the complex decorative style that is so prevalent on the web these days.

Tell us more. Did you find these principles super useful? Do you find yourselves surrounded by them. Does it suddenly feel like surrounded by magic or underlying harmony?

Share your thoughts on what constitutes a great design, or a design principle which we could have missed here.