Menu Search
Jump to the content X

Applying Interior Design Principles To The Web


Web, industrial, interior… You name it and there are designers for it. We’re all trained in our particular areas (as we should be), but it would do us some good sometimes to look beyond our borders for new approaches to design problems. For a fresh perspective, here we’ll apply several principles of interior design to Web design and see what ideas would help change some of our stuck-in-a-rut design practices.

Balance Link


How It Works Link

In interior design, balance breaks down into two kinds: formal and informal.

Formal balance is simple. It is achieved in a room when objects on one side of a room are a mirror-image of the other side of the room. It focuses on symmetry (creating a mirrored effect) and is the easiest to create — just think of two nightstands on either side of a bed or two sconces on either side of a fireplace. However, it can become overwhelming with too many objects or a busy color palette. Too much can make a good design concept ugly.

Informal balance is an asymmetrical approach based on visual weight. You don’t have to use identical objects to achieve balance; rather, use objects that are different but have similar visual “weight.” For example, you could balance a large couch by putting a large TV in the same room. In Web design, we also seek balance: large type can balance large imagery. Play with informal balance; it can lend intrigue to a seemingly simple design and add quirkiness to a vintage look.

Why It’s Important Link

Balance is one of the first things we notice in a design, often subconsciously. If something seems off-kilter, it may have to do with balance, and it can be difficult to move on and appreciate the design’s other aspects. Balancing color, images and textures gives a look of completion to a design and shows the user that you have an eye for detail.

Hint for Designers Link

Balance isn’t limited to being either symmetrical or asymmetrical. Try radial balance too: center a circular image and add smaller images “radiating” away from it (an example from interior design would be a circular dining table and chairs). Radial balance designates a focal point and almost effortlessly provides for a sense of rhythm or momentum.

Examples Link

Travis Gertz Experimentationalism2
Here, the designer uses visual weight to achieve balance. The word “analog” is extremely big, but it balances out the larger width and length of the camera image — a point-size smaller and the word would have been lost. Below the image is smaller type, but it works because the paragraph spans the same width and height as the image.


Ethno Port Ponzan4
Ethno Port Ponzan’s design uses radial balance, having the sub-page links placed on rings around a central focus. Though the links are placed at different distances, the ring design lends the balance because they lay equidistantly from the center logo. Radial balance can be one of the easiest, fastest methods of achieving balance, and Ethno Port Ponzan is an example of using such balance successfully.


This is asymmetrical balance using text as the design. Here “Always in the loop” is the focal point, and the designer uses the visual weight of heavier fonts, large punctuation and smaller images for balance.


Proportion Link


How It Works Link

Proportion has to do with how the sizes of objects in a room relate to each other. For instance, a large couch shouldn’t be in front of a 16″ TV, and a large bed shouldn’t be between small end tables. The same rule goes for Web design; a large font shouldn’t be put beside a small focal point. We could also consider this when doing “scene” designs, such as a wall with frames and landscape illustrations.

Why It’s Important Link

Proportion is like balance: if it feels off, it’s hard to focus on anything else. Proportion is vital to recreating an environment. If a coffee mug is too big for a desk or a cow too large for the landscape, it’s hard to believe the setting. True-to-life proportion makes a scene believable and a font-graphic relationship appealing.

Hint for Designers Link

Most of us think that flamboyantly large text beside a large image is overbearing, and we tend to “fix” the problem by making one of them smaller. For proportion, though, we should keep large with large and small with small; that keeps the design believable and balanced.

Examples Link

Foxie’s design is a great example of effective proportion because the bookcase area features objects that are generally in proportion and therefore “believable.” The various items in the bookcase (such as the remote and trophy) are meant to establish a whimsical atmosphere, so we can be somewhat lenient in accepting the scene as realistic. That is, despite the few inconsistencies in proportion, we still “buy it.”


Work Awesome11
Much like Foxie, our eyes move naturally from the meat of the design to the information area because we aren’t distracted by disproportion. This scene’s main objects — keyboard, coffee cup, computer mouse — are realistically proportionate. Like the last example, it’s believable.


Unlike Work Awesome (in which a large part of the design focuses on the information area), RZMota’s design relies heavily on the believability of the scene. Making all of the objects proportional is not easy, especially with so many of them, but RZMota shows us that it can be done.


Rhythm Link


How It Works Link

In interiors, rhythm is created by placing a unifier in the room, such as a color, pattern or texture. A sense of movement is created when the unifier is repeated throughout the space; the eye doesn’t stop on one piece but rather alights here and there on pieces of the unifier. We can do this in Web design as well by taking a texture, pattern or form and repeating it throughout a design.

Why It’s Important Link

Rhythm keeps the room cohesive and allows the eye to move easily about the room to experience all parts of the design. Rhythm is as important to Web design as it is in physical places. In a unified design, finding information happens naturally and at a rhythmic pace.

Hint for Designers Link

The single most important thing to remember is to add variety to the repetition. If the color white is your unifier, then use it in textures, images, CSS, etc. A little variety is healthy and keeps a website from becoming boring.

Examples Link

The rhythm on Interaktionsdesign’s site extends past the yellow accents. Rather, the careful repetition of the small arrows allows the eye to flow around the page and lends cohesiveness to the design. By using small arrows in the header, sub-headers and as links in the bottom left corner guide the visitor to the information they need. The yellow acts as a supplement, a highlight to these areas and backup plan in case the arrows didn’t catch visitor attention.


Digital Podge18
Like Clandrei, Digital Podge’s repetition of shapes creates cohesion and makes the eye move about. But this website showcases another perk of rhythm: no matter what is being repeated (i.e. no matter what the unifier), it can be used to highlight links and other information that is imperative to the user experience. On Digital Podge, the circles either indicate links to other pages or showcase an area that the visitor needs to see.


Bard Hole Standal20
The yellow color and slanted lines give this website its rhythm by dancing around the website to attract attention. This shows that a website can have more than one major repeating feature to create rhythm. The yellow is present in a variety of elements, which themselves repeat.


Emphasis Link


How It Works Link

Emphasis is the same thing as focal point. TVs, fireplaces, artwork: we all have an idea of what qualifies as the focal point of an interior space. It is typically in the center of the space and is the first thing to catch your eye. In Web design, as in interiors, we sometimes create focal points unintentionally. This can be caused by a central or large object in a design, or a central or large text area in a code-heavy layout. Try to complement your focal point with other features such as color, form and texture.

Why It’s Important Link

While focal points are often chosen for their aesthetic value, they serve a larger purpose in design. The focal point is the anchor of the space, and the item around that should influence all other design decisions.

Hint for Designers Link

Your secondary pieces don’t have to fall behind. By choosing a large focal point and centering it, you give the space its foundation; this allows the surrounding images to be quirky, without altering the atmosphere or making the design seem “hodge-podge.” Use different border colors to your advantage, or place your surrounding images in a way that appears random.

Examples Link

Kobi Benezri Studio23
The focal point here — the typewriter — is the first place most of us will look. This happens for two reasons. First, it is one of the largest images on the page and so demands your attention. Secondly, there is more white space in that image than in any of the others, which creates contrast. The surrounding images are set in the same monochromatic palette, which throws them into relief.


Marc Ecko25
Ecko’s name and photo are the central points of focus. They act as the anchors in this design and make the rest of the images look haphazard and cluttered but still thoughtfully chosen and professional.


Pretty Production27

The emphasis here, the dog, does not act as an anchor or hover around the middle, as many points of focus do. But it’s multi-colored brightness and size demand instant attention, as well as act as a break from the gray tones in the rest of the layout.


Color Link


How it works Link

Colors work together in many ways. The countless combinations influence our thoughts, opinions and feelings. Because color does so much, our discussion of it has to be limited here: we’ll talk about what it does to the amount of space in your design.

In interiors, the use of warm or cool colors is dictated by factors such as how much light the room gets, how much time you spend in it and how big it is. We Web designers don’t have to worry about these determinants, but we should consider color’s spatial influences when working with heavy or lighter layouts. If your layout is heavy with text, texture, images and the like, go for cooler tones, such as blues, aquas, turquoise and sage. These will make the space seem larger and balance the heaviness. Use warmer tones (red, orange, yellow) to create the appearance of extra space in a minimalist design.

Why It’s Important Link

The color in our home offers a glimpse into our personality. Our websites are our technological homes, so why would we put any less effort into their color scheme?

Hint for Designers Link

If you’d like to know whether certain colors go together, look to nature. Think of the beach, and you’ll realize that turquoise, beige and cream go together. Think of fields in autumn, and you’ll think of red, orange, brown and green. Purple, brown, magenta and green are eggplant-themed, while violet, navy and green remind us of hydrangeas. Grays, blacks and browns will always anchor other colors and provide relief. In addition, because of their neutrality, anchor colors don’t have to be included in the palette count; they allow for diversity. The color schemes of our websites also influence users by making them feel calm (with cool tones) or energetic and upbeat (with warm tones). For more information on color combinations and schemes, check this out30.

Examples Link

Saskia Music31
Saskia’s layout is wide and has a fair amount of information and graphics. The blue background makes the amount of information less daunting by “expanding” the space. Imagine this website in red — wouldn’t the space have looked smaller and more cluttered?



The Octonauts site is very busy: We have a patterned background, busy header image and two columns of featured news. However, what cools this business are the blue tones throughout. In addition, aside from the few bursts of warm tones, the layout uses mostly cool tones: sage green, light gray, teal and white. Featuring the same layout in warmer tones would have amped up the busyness, and with this much going on on the site, cool tones were a necessity.


ft designer35
ft designer uses black as its anchor color, which allows it to incorporate multiple colors (blue, green, white and yellow-green) without becoming overbearing and rainbow-esque.


Texture Link


How It Works Link

The key to success is to mix different textures. This is as true for the Web as it is for interiors. Pair rough with slick, patterned with plain, coarse with fine, fuzzy with silky and shiny with matted. Don’t be afraid to experiment with unlikely combinations. You’ll be surprised how well textures bring out the best in each other.

Why It’s Important Link

Texture is a strong determining factor in a user’s emotional response to a design. Balance, proportion, rhythm, emphasis and color are the basic principles, and texture is a necessary enhancement; it’s the cherry on top.

Hint for Designers Link

The need for texture almost doubles when using a monochromatic palette. Monochromatic palettes can easily become boring, whether in interiors or on the Web. But they can be intriguing and multi-faceted, and one of the easiest ways to make them that way is to give them plenty of texture.

Examples Link


Coraline features a variety of textures, but the diversity doesn’t take away from the concept. Running with an old-world, grass-roots advertisement motif, Coraline uses stained papers, the look of ‘placarded’ posters, a run-down suitcase with velveteen lining and thin brass nameplates. In so doing, Coraline shows that designers don’t have to sacrifice a strong theme for variety.


Five Cent Stand40
At Five Cent Stand, the layering of old papers and pictures with a soft patterned texture is interesting, not overbearing.


Rose Fu42
Rose Fu uses multiple textures in its monochromatic palette. Had there been more colors, so many textures might not have been necessary.


Lines Link


How It Works Link

Popular places for lines in a room are the floor, upholstery and, more notably, the walls. They’re a simple addition, but lines say a lot about a space. For instance, horizontal lines often give a casual vibe, while vertical lines express formality. Curvy lines can add grace or whimsy, while diagonal lines provide rhythm and movement. You can get creative by using atypical methods to create lines, as seen in the image on the left.

Why It’s Important Link

Lines help create a mood in an interior space and can provide the same benefit online. The best thing about lines is that they can be as understated or as powerful as you’d like, so it’s one of the less daunting design choices you’ll make.

Hint for Designers Link

Don’t be afraid to combine lines to find a good balance. For instance, adding horizontal lines can calm the strong formalities of vertical lines, just as curvy lines can add playfulness to casual horizontals. In addition, verticals and horizontals can be applied in a grid-like pattern for the appearance of structure and cleanliness.

Examples Link

Vyniknite uses curvy lines to represent blowing wind, giving a whimsical feel to the design.


Daniel Kusaka47
Kusaka’s website uses diagonal lines around the square images, creating movement in a layout that could have easily felt stagnant. This simple alteration is enhanced by the various colors of the lines, making them more noticeable and therefore more effective.


What’s Up Cupcake?49

What’s Up Cupcake? isn’t about adding a combination of lines to combine or ease certain vibes. Rather, the site uses lines to add to an already formal feel: While ornate picture frames and formal curves around the logo and link area supply the formality, and the vertical lines emphasize it.


Showcase Link

Balance Link





Nico Hagenburger55




Proportion Link

Erguvan Platin Elveri59




Saizen Media63


Outsource Corporation65


Studio E-Space67


Rhythm Link

Halo Creative Agency69


Alabama State University71




Emphasis Link



Looks Like Good Design77


Cloud 365 Project79








Color Link

KANTOR Group87


M Studio89


Textures Link

Teddies in Space91


Gianni’s Steakhouse93


Lines Link

Random Thought Pattern95


The Toke97






Resources And Further Reading Link

  • Design Rules by Elaine Griffin
  • Discovering Home with Laurie Smith by Laurie Smith
  • Domino, The Book of Decorating by Needleman, Costello and Caponigro
  • House Beautiful: 750 Decorating & Design Ideas by House Beautiful
  • New Decorating Book by Better Homes and Gardens
  • Ready, Set, Decorate by House Beautiful
  • Simple Home by Mark and Sally Bailey
  • iStockphoto103, an image resource for interior pictures
  • Discover Interior Design104, a blog by interior designer Kristen Warbington
  • Paula Grace Designs105, a blog by interior designer Paula Grace
  • Interior Decorating: The Basics106, an article by “The Interior Design Society”
  • The Principles of Design 107, an article by Joshua David McClurg-Genevese at “Digital Web”.


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73,men_livestrong
  74. 74
  75. 75
  76. 76
  77. 77
  78. 78
  79. 79
  80. 80
  81. 81
  82. 82
  83. 83
  84. 84
  85. 85
  86. 86
  87. 87
  88. 88
  89. 89
  90. 90
  91. 91
  92. 92
  93. 93
  94. 94
  95. 95
  96. 96
  97. 97
  98. 98
  99. 99
  100. 100
  101. 101
  102. 102
  103. 103
  104. 104
  105. 105
  106. 106
  107. 107

↑ Back to top Tweet itShare on Facebook

Katie Thompson has a BA in journalism and design from Ohio State University. She has written for both print and online media, including Ohio-based CityScene Magazine and Web Designer Depot, and has more than seven years experience in web design and development.

  1. 1

    great tips… I will surely apply in my next design

  2. 3

    Superb Article!! Very Interesting and resourceful !! Thank You Very Much

  3. 4

    Wow! Never seen so much stuff all together…thank you!

  4. 5

    Good article, although these are not interior design specific principles, but are the general principles applicable across all design fields. Here, the link with interior design is simply serving up these basic principles on an alternative plate without appearing too repetitive of previous articles. No bad thing, as some readers may find it more accessible in this guise.

    • 6

      Right On! How is all this directly linked with interior design?
      Its called DESIGN ELEMENTS & PRINCIPLES! Go back to school.
      This article is good for those who didn’t study design.

      • 7

        I don’t think so, they are all design elements and principles but it is always good to see how these principles are used outside of your chosen discipline.

        If you spend all your time looking and how other websites implement design you become a copycat designer.

  5. 10

    Some really nice inspiration there, not just on the Web Designs, but from the Interior Design photos too! Thanks :)

  6. 11

    Ethno Port Ponzan -> Ethno Port Poznan.
    Poznan (Poznań in polish) it’s city in Poland :)

  7. 12

    DazzleCat Digital Agency

    June 21, 2010 1:52 am

    What a great twist for an article.

    Web designers can take great inspiration from other industries and this is what you have shown very well.


  8. 13

    So inspired. Thanks.

  9. 14

    Some reasonably sound advice, but the interior design metaphor is quite poor and incredibly simplistic in my opinion.

  10. 15

    Sharif Choudhury

    June 21, 2010 3:57 am

    Good article although I have to agree with Jase that these aren’t just interior design principles – they are the most basic of design principles applied throughout many if not all fields.

    Also, those who have a natural flair for creativity will apply these principles on a subconscious level without even realising that they’re doing it.

    It’s a bit like looking at a design and thinking, “hmm something doesn’t look quite right” and then you move one item slightly and it looks perfect.

    It’s a good place to start if you’re learning the absolute basics but those who call themselves ‘designers’ should know these fundamentals without question.

  11. 16

    Damnit, just noted down this topic an hour ago to write my own blog post about thinking it would be new… Now everybody knows it already :D

    Nice post

  12. 17

    Really Interesting! I look to interior design when I need some extra inspiration for a site, rather than other websites or graphic design. I have always found magazines like Frame and Elle Deco to get my creative juices flowing. Since reading this article, I get a better understanding of why : )

  13. 18

    Thanks so much for the tips they are very interesting indeed.

  14. 19

    Howard Wiggins of Hearthstone Interior Design

    June 21, 2010 7:07 am

    I am an Interior Designer in Nashville TN. ,and everything you stated is true.

  15. 20

    I really liked how you approached web design from a different angle here, very enlightening– thank you

  16. 21

    Excellent fresh way to explain the basics of web design…and it makes a lot of sense if you enjoy interior design (like me!)


  17. 22

    Wow… Amazing article.

  18. 23

    Great article and showcase of beautiful sites that follow good design practices. Thanks SM, I love you guys! 

  19. 24

    Um… these aren’t interior design principles. These are general design principles. I could write another article about using web design principles for interior design and use the exact same headings.

  20. 25

    Like always: Awesome!

  21. 26

    Great article, and great idea using interior design to exemplify relevant web design concerns!

  22. 27

    Great article! I loved how you related the two.

  23. 28

    Interesting to see this article as I was a successful Interior Designer before moving my hand to Web Design, I agree with most of your points but fail to see the interior design in some of the website designs you featured; perhaps it’s because I was more a minimalist.
    Nice article.

  24. 29

    Somewhat relative to the article… I would love some feedback on my new portfolio site Thanks!

  25. 30

    An excellent and fresh way to look at web designing.
    Great article.

  26. 31

    Nice article..!! :)

  27. 32

    thanks, its very useful.

    (Note for editor: It must be “Platin Evleri” instead of “Platin Elveri”)

  28. 33

    super! its always good to look beyond one’s own backyard

  29. 34

    Probably one of my most favourite posts on SM!

  30. 35

    These aren’t interior design principles, the listed above are the basic design principles :)


↑ Back to top