One of the most important elements of a good movie is the visual appearance of the movie. Directors have invested millions of dollars and countless hours into the cinematography of their movies, resulting in beautiful works of art such as “Dune” and “La La Land.” At first glance, cinematography and web design do not appear to have much in common. However, the principles of art and design apply just as much to websites as they do to movies. Web designers can learn a lot about how to enhance the quality of their websites from the cinematography seen in movies. In this article, we’ll take a look at five principles of cinematography that can help to improve the look of your website.

How Cinematography Can Improve Your Website Design

How Cinematography Can Improve Your Website Design

One of the most important elements of a good movie is the visual appearance of the movie. Directors have invested millions of dollars and countless hours into the cinematography of their movies, resulting in beautiful works of art such as “Dune” and “La La Land.” At first glance, cinematography and web design do not appear to have much in common. However, the principles of art and design apply just as much to websites as they do to movies. Web designers can learn a lot about how to enhance the quality of their websites from the cinematography seen in movies. In this article, we’ll take a look at five principles of cinematography that can help to ensure that your website maintains a clean and modern look.

  1. Rule of thirds
  2. Color coordination
  3. Color psychology
  4. Color contrast
  5. Leading lines

1. Rule of Thirds

The first principle we’ll discuss is the rule of thirds. This refers to dividing the camera frame into thirds, both vertically and horizontally. After dividing the image, you then align the subject with one of the intersections. The human eye is naturally drawn to these areas of the frame, making it the ideal area to place the subject of either a scene or a web page. This technique is used in nearly every movie ever made, but is especially noticeable in “The Secret Life of Walter Mitty” as you can see in the pictures below.
walter-mitting-skateboarding
walter-mitty-on-phone
Previous
Next

The same techniques can be seen on wealthsimple.com and sennep.com. The text at the top of the home pages in both of these websites is located along the left axes of the screen. If you’d like to read more about website layouts, check out my article on five web design layouts and how to use them on your website.

wealthsimple
sennep
Previous
Next

2. Color Coordination

What do Batman and Aflac have to do with each other? They both use the second principle we’ll discuss today: color coordination. Choosing a color palette and using it consistently throughout the entirety of a movie or website adds a degree of congruity and uniformity that makes the movie or website more visually pleasing. Matt Reeve’s “The Batman” has been repeatedly praised for its excellent cinematography, and one of the contributing factors is the consistent red, orange, and black color scheme seen throughout the movie.

batman-is-awesome
batman-saves-civilians
batman-watching-gotham
Previous
Next

A great example of color coordination in web design is Aflac’s website. With the exception of some orange accents here and there, the entire website consistently uses a blue color scheme. If you would like to see some more examples of color coordination, check out the websites I designed for WisperMSG and Octagon Fitness.

3. Color Psychology

The third principle is color psychology. This refers to using colors to convey different kinds of emotions or evoke certain ideas. While not an exact science, it’s generally accepted that each color is associated with certain emotions and ideas, and many directors have made great use of these associations in their movies.
For example, red is often used to indicate danger or evoke passionate emotions like love or anger. This makes it a good choice of color for “The Batman” as it further emphasizes the passion and anger that motivates Bruce Wayne. Red is also used to great effect in the movie “Ex Machina”, when Ava begins to erode Caleb’s trust in Nathan. The frame is filled with a menacing red light as Ava attempts to convince Caleb that Nathan is not his friend. The scene leaves no doubt in the minds of the audience that Ava poses a dangerous threat to Nathan and Caleb.
batman-red
ex-machina-red
Previous
Next
Color psychology is also used in web design, as you can see in the following examples. Red not only communicates passion and danger; studies have shown that seeing the color red also tends to make people hungry. This has led brands like Red Robin and McDonalds to heavily use this color in their branding, as you can see in the pictures below.
Yellow is also used by many brands to grab attention and communicate feelings of happiness and optimism. In the picture below, you can see that Snapchat almost exclusively uses the color yellow on its website.
red-robin-website-top
snapchat1
Previous
Next

4. Color Contrast

The fourth principle is color contrast. This refers to attracting attention by either combining colors on opposite ends of the color wheel or combining light and dark shades. This principle is seen repeatedly in the movie “La La Land.” In the picture below, our attention is drawn to Mia not only because yellow tends to attract attention (as I discussed in the last section) but also because it contrasts so heavily with the dark blue background.

Contrast is one of the most important techniques in web design, and is often used to draw attention to buttons that the business wants you to click. Two examples of this technique are ups.com and greenbeetz.org.
UPS likely knows that one of the main reasons people go to its website is to track their packages. In light of this, UPS draws attention to the “Track” button by highlighting it in yellow, heavily contrasting with the brown background while also going along nicely with its brand color scheme.

Green Beetz is another great example of effective color contrast. On their home page, they highlight the donation and membership buttons in yellow, contrasting nicely with the blue background and effectively attracting the attention of site visitors.

ups-website-top
greenbeetz-website
Previous
Next

5. Line Leading

Lastly, the fifth principle is the use of lines to lead viewers’ attention to the subject. Line leading is used often in movies to direct viewers’ focus to the subject of the scene. Examples of this technique can be seen in nearly every “James Bond” movie ever made. The rifling of the gun barrel inclines viewers to look down the barrel at 007. And, similarly, in “Knives Out”, the knives in this scene form a circle around Benoit Blanc, practically forcing our attention to the famous detective.
bondjamesbond
kinves-out
Previous
Next
While less common on websites, line leading can be a very effective way to direct visitors’ attention towards buttons and information on your web page. One website that serves as an excellent example of this technique is mcaninchcorp.com. The steep angles of the lines almost resemble downward-pointed arrows, inclining visitors to look down and browse the home page.

Conclusion

As you can see, many of the principles of cinematography can also be applied to web design, leading to a much more professional-looking website. Both movies and websites can greatly benefit from being intentional in the use of the rule of thirds, color psychology, color coordination, color contrast, and line leading. Blueprint Web Design uses these principles to create high-quality, appealing websites. Feel free to check out my portfolio or read my web design case studies.

If you’d be interested in having me design a website for you, or if you just have a question about web design, don’t hesitate to reach out! You can reach me at (239) 776-9180 or info@blueprintwebdesign.com.

Leave a Reply

New York City skyline