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.
- Rule of thirds
- Color coordination
- Color psychology
- Color contrast
- Leading lines
1. Rule of Thirds


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.


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.



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




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.

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.


5. Line Leading



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.
