updated: May 15th, 2017 / Ross Johnson / 55 Comments

Ten Laws to Design By

— Updated May 2017

As designers we have to be aware of the function of our work and design as much as we care about the aesthetics and visuals. There are a lot of terms for the design of how the site functions and works, from “usability design” to “user experience,” what remains constant is that if we want to become better designers we have to pair these two concepts together.

Using clear and effective design laws as guides we can use proven formulas for better design. These laws both assist in the experience and aesthetic quality of our designs. Furthermore being able to refer and cite these laws when presenting or discussing design can further establish your expertise and justify your design choices.

I’ve identified ten laws that can inform your design process.

1. Hick’s Law

Hick’s law states that with every additional choice the time it will take for one to make a selection increases. In short, the more options your website has the more difficult it will be to use. This law speaks the importance of simplicity.

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 compared to three samples in the control. The researchers discovered that customers purchased more jam when presented with a handful of options compared to the forty plus. Customers opted not to purchase jam rather than pick from such a large selection.

Hick’s law tells us that we should minimize choices where practical. This include removing non-critical pages, links, buttons and elements will make your designs  more effective.

Read more about Hick’s Law.

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

The pareto principal stipulates that 80% of outputs in a complex system are caused by 20% of total inputs. Explained simply, a large percentage of outcomes are caused by a small percentage of inputs (the actual numbers are not always 80/20.) What does this mean for web design? Lots of things.

For one a low percentage of users will perform a high percentage of your desired actions. For example 20% of all users will make up 80% of your contact form submissions or online purchases. 80% of users selecting from a drop down field will select the same 20% of options.

Once you know this disparity exists you can identify places to take advantage of it. The simplest implementation would be to prioritize the 20% of options, be them form fields, pages, links, etc… that get the most activity. Thinking broader, if you can learn about the 20% of high value users you can better optimize your design (and marketing efforts) to support their needs, increasing the amount of conversions you get from the site.

Read more about the Pareto Principal

3. The Rule of Thirds

The rule of thirds is a method of composing elements to be visually pleasing in addition to identifying ways that users eyes will scan across  the page. Photographers have been using 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. This 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 place 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.

Placing elements so that they take up 1/3rd or 2/rds of the space will be more visually pleasing to most viewers.

Read more about the Rule of Thirds.

4. 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 and you should be intentional about both placement and spacing of elements in your design.

If you place two elements in close proximity users will assume the elements are related regardless if they actually are. Web applications often group controls near each other as a convention, yet sometimes those controls relate to completely different functionality. A search button equality spaced next to a “save” and “cancel” button will be assume relationship. For example, maybe the search is for looking up previous version of your work?

Using proximity is not all about avoiding unintentional grouping, it can be used to better inform users as well. Placing headlines closer to their related paragraphs instantly inform users that the text is related to the content below. You can look at the headlines in this blog as an example.

5. Feedback

Industrial designers are masters of feedback, which is giving a user clear indication that something already happened, is currently happening or could happen in the future. Often subtle, feedback is the cornerstone of a positive experience. Consider a coffee maker that didn’t have an indicator that it was on, how would you know if you had successfully started the brewing process?

If interaction points don’t have obvious feedback the user needs to expend mental energy to figure out the current state of the website, which takes energy. Adding  loading indicators, hover states, focus states, active state, visited link styling, validation / error messages, etc… makes the site more enjoyable.

6. Fitts’ Law

fittslawFitts’ Law can be described as “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. Remember that while as web designers we may be extremely proficient at using the mouse and the web, there are a lot of users who still have trouble with these basic functions.

A common misuse 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.

This can work in the opposite way as well, meaning items we want to be difficult to be clicked on (such as cancel buttons / links) should have a smaller clickable area. This is why you often see forms or actions that have large “save” buttons but text based “delete” or “cancel” links. WordPress uses this law extremely well.

Read more about Fitts’ Law.

7. The Golden Ratio

The golden ratio is often confused with the rule of thirds, but make no mistake they are different. The golden ratio looks at what proportions are naturally most visually appealing. 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 0.618.

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

This ratio has been used through out history, in everything from the craftsmanship of violins to the design of the Parthenon and Stonehendge.

It is unlikely that some of these items were created with the golden ratio in mind, rather the creators likely preferred the visual appeal of the design when using these ratios.

Ultimately the golden ratio is more likely to produce visually pleasing compositions.

Read more about the Golden Ratio

8. Occam’s Razor

Occam’s Razor put simply, states that “the simplest solution is almost always the best.” With the flexibility and power of the web and our design tools, it is easy to get carried away. The result is a very complicated 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 accomplishes 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 (see the 80/20 rule earlier).

Being ruthless 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.

Read more about Occams Razor.

9. Fibonacci Sequence

The Fibonacci Sequence is a series of numbers in which each number is the sum of the preceding two. For example if you started with 1 it would go like this:

1, 1, 2, 3, 5, 8, 13, 21, 34, 55, etc…

This is significant as it has been found in many classical creative works, is found commonly in nature and is often used in addition to the golden ratio. Patterns based on the sequence are intrinsically aesthetic and therefor should be used in the composition of our designs.

This sequence can be used to create visual patterns, create shapes, organic figures, build grids or dictate sizing and ratios. The Fibonacci sequence is considered to be one of the most influential patterns in both mathematics as well as design.

Read more about the Fibonacci Sequence

10. Mental Models

The Mental Model law states that it is significantly easier for users to understand and learn something new if they can model it off of something they already understand. This is why the concept of tabs works so well and why operating systems are modeled off of real world office situations (folders, files, desktop, etc…)

We can use this concept in making our designs easier to use as well as more effective visually. There are times where it would be effective to model our designs off of real world situations or objects. Consider designs that mimic desktops, papers or offices. Users can learn, understand and draw meaning from these types of designs because they can relate it to their understanding of the objects in real life.

Use the Laws, Design Better

Are there any laws or design principals that you use when crafting your designs? I would love to hear about them.

Save

Save

Save


Also published on Medium.

55 thoughts Ten Laws to Design By

  1. Pingback: Tweets that mention Ten Laws to Design By « Web Design Marketing Podcast & Blog -- Topsy.com

  2. Pingback: Design by the law. | webtoolkit4.me

  3. Some great laws that I think most skilled designers know inherently…but have never put to paper or defined. This makes it much easier as a tool to explain concepts to clients.

    I’d also like to add….”And remember, first and foremost…be sure to break all the rules. This is, after all, Design” ^_^

  4. Thanks for this post! I’ve been a big proponent of using the laws of Proximity, the Rule of Thirds, and mental Models but I didn’t even realize that I have some work that I’ve done which falls more along the lines of Fibonacci Sequence and the Golden Ratio without even knowing it.

  5. Thanks for posting this interesting article. The rule of thirds and hicks law are such well established concepts that it’s almost intuitive to follow them whilst creating a design. I had never heard of Occam’s Razor rule, but i definitely agree with it.

  6. All great comments and I agree, a lot of designers use these concepts with out thinking about it. It is important however to be aware of them consciously for at least two reasons… One so you can defend your design decisions, ie: “I removed these elements because Hicks Law states that it will make the interface easier to use.” and you can use them with intent. This might be actively thinking about “How do I group these elements so that they all look related?” or “How can I make the hit area of this link large enough where it is hard to miss.”

    Ross Johnson
  7. Interesting post, thanks.

    Maybe you should merge points 7 and 9 though, since it tends (literally) to be the same thing. 😉

  8. I always have Miller’s Law ni mind when designing, similar to Hick’s Law and he argues that the average human could hold 7±2 objects in working memory, so more than 7 tabs could overwhelm users in making a decision, also not a law but I enjoy using the KISS.

    Danilux
  9. @Danilux – Great point. Miller’s law is an great law to consider and keep in mind. I plan to write a post about it in the near future.

    @Fabien – Actually that is a awful awful misconception. I wrote a post about how they are VERY different, you should check it out!

    Ross Johnson
  10. Thanks for highlighting the most useful rules for design. We, designers, often use them intuitively not even realizing which law exactly it is! This page will definitely stay as my resource 🙂

  11. having read the title of the article I assumed it’d be something about typography, palettes, illustrations, i dunno… Well, it turned out to be much more insightful. Kudos to the author for the great advice.

  12. Oh and your comment form doesn’t have any explicit feedback.

  13. @Writingexpert – Prefer not to rehash the same boring stuff that has been blogged about a thousand times.

    Ross Johnson
  14. Awesome collection. All of these come naturally to me personally except number one: Hick’s Law. Even though I’m known for clean and minimalist designs, it’s hard for me on the larger, informational sites to simplify things when there is just so many topics to include in things like the navigation, side navigations, etc.

    It’s not something I have trouble with – just something I have to continually pay attention to. We’re all a work in progress!

  15. And that is a really important thing to know as well, where you tend to have design weaknesses. That way you can anticipate and be conscious of your tendencies and try and correct them.

    There are no perfect designers so we should all strive to identify them like you have and improve.

    Ross Johnson
  16. Great Article. Not too long. I have been using some rules but had no clue of the other. Mostly there are long articles written about each which makes its boring to read them but this article perfect.

  17. Glad you liked it Harish. Sometimes lengthy posts are more than what is needed, we wanted to introduce people to the idea and let them read more if they wanted too.

    Ross Johnson
  18. great article. I agree I like how its not too long, touches on lots of the great web design rules and a few that I did not know of. thanks again, going to share this.

  19. Great post. I was not aware with these laws before reading this. Thanks for sharing this with us.

  20. Great article, thanks for posting. Not too long, just right and on point! Learned some new stuff.

  21. Pingback: Stoff für das Wochenende #3 | daswebdesignblog.de :: Artikel, Tutorials, Freebies und Interviews

  22. Its very hard to find great articles like these explaining ‘why’ we should do something in the way we do rather that ‘what’, ‘how’ to do. A very nice article!

    Thanks. It helped me a lot.

  23. Very harsh law! Yet so helpful and effective in web designing!

  24. Great and complete article, very nice read, thanks!

  25. Great read… Had read it all before but here its is nicely put together, not that we HAVE to use all the laws all the time, depends on the project we are working on, but it still is a nice guideline though

  26. Golden ratio is really Fibonacci sequence, they should be in the same rule. Golden ratio is Fibonacci sequence convergence at infinity.

    1, 1, 2, 3, 5, 8, 13, 21, 34, 55

    21/34 = 0.61765,
    34/55 = 0.61818

    further you go, closer to Golden ratio you are. In practice is 5/8 (0.625) good enough value for Golden ratio.

  27. really simple explanations, straight to the point yet detailed. Thank you

  28. What a great yet simple collection of rules that will help in web designing. Thanks!

  29. Pingback: Ten Laws to Design By

  30. Very nice blog,
    i use most of the inspire websites
    on my layouts…
    thanks 🙂

  31. Your graphic illustrating the golden ratio actually illustrates the fibonacci sequence.

    Patrick
  32. @Patrick & @Norbert – The Fibonacci sequence can be used to create a series of devisions and ratios that is very close to the Golden Ratio but there is a difference. It also can be used in ways other than just proportions and sizing, which the Goldren Ratio is used almost explicitly for.

    Ross Johnson
  33. A useful and well thought out article. More of the same please!

  34. Pingback: Random Little Tidbits #11 « i heart constance

  35. Pingback: How To Design Using The Fibonacci Sequence « Web Design Marketing Podcast & Blog

  36. Pingback: When A Thousand Words Is Worth A Picture - Smashing Magazine

  37. Pingback: When A Thousand Words Is Worth A Picture | 

  38. Excellent collection of rules applicable in all sorts of design fields.
    fresh in the game as I am, many of them were new to me. Thanks!

  39. Pingback: When A Thousand Words Is Worth A Picture | LionWebMedia.com

  40. Pingback: When A Thousand Words Is Worth A Picture | Internet technology trends

  41. Thanks for sharing these laws.I have never heard of these laws before. The only law i learnt is to keep the site and design user friendly.I never knew these laws ever exist.Thanks for sharing.

  42. This is an excellent article that all designers should read. And if you want the other 115 laws to follow pick up “Universal Principles of Design” on amazon – http://amzn.to/fCcQHx

  43. Pingback: Listed on FAQPAL.com

  44. Hi, ‘blowing the dust a bit to come back and ask where I can find this article you’re mentioning in this comment: http://www.3point7designs.com/blog/2010/07/ten-laws-to-design-by/comment-page-1/#comment-71676

    As far as I know, the golden ratio is based on Fibonacci sequence, one is geometry while the other one is algebra so I don’t quite get what you mean…

    Thanks for your insight or a link. 🙂

  45. I really like your blog.. very nice colors & theme. Did you create this website yourself or did you hire someone to do it for you? Plz reply as I’m looking to design my own blog and would like to find out where u got this from. thank you

  46. Designed it myself 🙂

    Ross Johnson
  47. Communicating your design can be tough, try some design nerd language: http://t.co/6xVFIPlv

  48. The first game-changing resource @mehraban covers is @3pointross’s Design and Strategy blog: http://t.co/rpecnFlQ #LA2M

  49. Link vd Dag – 10 design wetten om je werk te verbeteren (een oudje, maar nog steeds leuk):… http://t.co/MAIKHHtU

  50. Ten Laws to Design By « « Web Design Marketing Podcast & Blog http://t.co/Y4gZgxh3 (via Instapaper)

Comments are closed.