Applying Interior Design Principles To The Web

Advertisement

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

Screenshot1

How It Works

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

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

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

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.

Screenshot3

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.

5

Zee6
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.

Screenshot7

Proportion

Screenshot8

How It Works

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

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

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

Foxie9
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.”

Screenshot10

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.

Screenshot12

RZMota13
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.

Screenshot14

Rhythm

Screenshot15

How It Works

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

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

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

Interaktionsdesign16
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.

17

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.

Screenshot19

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.

Screenshot21

Emphasis

Screenshot22

How It Works

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

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

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

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.

Screenshot24

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.

Screenshot26

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.

28

Color

Screenshot29

How it works

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

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

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

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?

Screenshot32

Octonauts33

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.

34

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.

36

Texture

Screenshot37

How It Works

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

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

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

Coraline38

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.

39

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

Screenshot41

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

Screenshot43

Lines

Screenshot44

How It Works

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

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

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

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

Screenshot46

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.

Screenshot48

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.

50

Showcase

Balance

ISO5051

Screenshot52

Indiofolio53

Screenshot54

Nico Hagenburger55

Screenshot56

Kashmir57

Screenshot58

Proportion

Erguvan Platin Elveri59

Screenshot60

Serj61

Screenshot62

Saizen Media63

Screenshot64

Outsource Corporation65

Screenshot66

Studio E-Space67

Screenshot68

Rhythm

Halo Creative Agency69

Screenshot70

Alabama State University71

Screenshot72

NikeStore73

Screenshot74

Emphasis

Delete75

Screenshot76

Looks Like Good Design77

Screenshot78

Cloud 365 Project79

Screenshot80

Good81

Screenshot82

Kerobia83

Screenshot84

Vectroave85

Screenshot86

Color

KANTOR Group87

Screenshot88

M Studio89

Screenshot90

Textures

Teddies in Space91

Screenshot92

Gianni’s Steakhouse93

Screenshot94

Lines

Random Thought Pattern95

Screenshot96

The Toke97

Screenshot98

IDFA99

Screenshot100

Gummisig101

Screenshot102

Resources And Further Reading

  • 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”.

(al)

↑ Back to topShare on Twitter

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

    0
  2. 3

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

    0
  3. 4

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

    0
  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.

    0
    • 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.

      1
      • 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.

        0
  5. 10

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

    0
  6. 11

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

    0
  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.

    thanks.

    0
  8. 13

    So inspired. Thanks.

    0
  9. 14

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

    0
  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.

    1
  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

    0
  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 : )

    0
  13. 18

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

    0
  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.

    0
  15. 20

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

    0
  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!)

    Thanks!

    0
  17. 22

    Wow… Amazing article.

    0
  18. 23

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

    0
  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.

    0
  20. 25

    Like always: Awesome!

    0
  21. 26

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

    0
  22. 27

    Great article! I loved how you related the two.

    0
  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.

    0
  24. 29

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

    0
  25. 30

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

    0
  26. 31

    Nice article..!! :)

    0
  27. 32

    thanks, its very useful.

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

    0
  28. 33

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

    0
  29. 34

    Probably one of my most favourite posts on SM!

    0
  30. 35

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

    0
  31. 36

    don’t know how this happened but the “analog” snapshot links to my website, davidg.ro

    :)

    0
  32. 37

    So are there principles specific to, or at least mostly associated with, interior design that can be applied to Web design? I’m thinking that if there are any (I’m not a designer, so I honestly don’t know), they might have to do with three dimensional space. How do three-dimensional design ideas translate into the two-dimensional world of the screens we use to look at Web sites?

    0
  33. 38

    Very cool and informative. Definitely one of my favorite articles on here. It was a total surprise to find it was written by a fellow OSU alum :)

    1
  34. 39

    Shout out from C-Bus, Katie! Congrats and great article! I love to look at other types of design, and you draw some interesting concepts and useful tips.

    0
  35. 40

    Thanks so much! It was written in a manner that was easy and interesting to understand.

    0
  36. 41

    Thank you for well-researched and extremely useful article. This will help me greatly, both improving my design as well as my flat.

    0
  37. 42

    Foxie’s design does not have a remote in it, it has a DECT-style phone on a charging base. If you cannot see that correctly, how are we supposed to take the rest of your observations seriously. To be honest, many of the designs you liked looked horrible to my eyes.

    0
  38. 43

    Thanks!!!!!! I have to pay more time on improving my skills!!

    0
  39. 44

    gr8 advice, tips and information.i’m gonna flow you.

    0
  40. 45

    Great stuff!!! Liked to read it.

    0
  41. 46

    Foxie has one bad bad bad site. The homepage took a good 30 sec to load. At first I just saw boxes to where the images were going to load. Everything is small and not usable. That design is good for a magazine ad, but not for web. blah

    0
  42. 47

    Found the article very informative as well as interesting. I plan on trying these concepts out in my next design.

    0
  43. 48

    There are some nice sites here, we’ve been talking about interior design tips on our blog this week and one of the similarities that I noticed was that a picture of graphic above the fold draws the user in to the website and a poorly designed landing page can put people off straight away – just like the entrance to a house can make a good or bad first impression.

    0
  44. 49

    The Beer Soap Company

    July 14, 2010 5:19 pm

    Those are some pretty wonderful website designs. So colorful. Your article was very interesting.

    0
  45. 50

    This makes for appeal but I would love to see an article on the concepts that relate to store visual display and merchandising layouts as they relate to the effectiveness of e-commerce site design and conversion!

    0
  46. 51

    Cristopher Rathje

    November 15, 2010 5:59 pm

    Wow! Image looking yahoo all night in this and that i lastly thought it was in this article!

    0

↑ Back to top