Screen Recording 2025-08-13 at 23.36.03.mov
My Github was playing up and I was unable to upload a preview of my website so I decided it was best for you to see how it works from a screen recording
http://127.0.0.1:5502/test.html - website preview
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Saul Bass - Less is More in Design</title>
<link href="<https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap>" rel="stylesheet">
<style>
/* Global Styles */
body {
margin: 0;
font-family: 'Roboto', sans-serif;
line-height: 1.6;
background-color: #fff;
color: #222;
}
header {
background-color: #f94144; /* Bold Saul Bass style red */
color: #fff;
padding: 3rem 1rem;
text-align: center;
}
header h1 {
margin: 0;
font-size: 3rem;
}
nav {
background-color: #f3722c; /* Bright orange navigation */
display: flex;
justify-content: center;
padding: 1rem 0;
position: sticky;
top: 0;
z-index: 100;
}
nav a {
color: #fff;
margin: 0 1.5rem;
text-decoration: none;
font-weight: bold;
font-size: 1.1rem;
}
nav a:hover {
color: #fff200; /* Yellow hover effect */
}
section {
max-width: 900px;
margin: 3rem auto;
padding: 0 1.5rem;
}
section h2 {
font-size: 2rem;
margin-bottom: 1rem;
color: #277da1; /* Blue accent for headings */
}
section img {
width: 100%;
border-radius: 10px;
margin: 1rem 0;
border: 5px solid #f9c74f; /* Yellow border to mimic Bass style */
}
ul {
margin-left: 1.5rem;
}
li {
margin-bottom: 0.5rem;
}
footer {
text-align: center;
padding: 2rem;
background-color: #277da1;
color: #fff;
}
/* Smooth scrolling */
html {
scroll-behavior: smooth;
}
</style>
</head>
<body>
<header>
<h1>Saul Bass: Less is More in Design</h1>
</header>
<nav>
<a href="#opening">Opening</a>
<a href="#background">Background</a>
<a href="#getting-started">Design Start</a>
<a href="#movie-titles">Movie Titles</a>
<a href="#logos">Logos</a>
<a href="#today">Today</a>
<a href="#conclusion">Conclusion</a>
</nav>
<section id="opening">
<h2>Opening Thoughts</h2>
<p>Saul Bass is one of those designers whose work just sticks with you. He didn’t overcomplicate things — instead, he focused on clear, strong visuals that immediately communicated an idea. From movie title sequences to logos for big companies, Bass showed that simplicity could be far more powerful than complicated designs. This essay looks at how he used minimalism, why it works, and why people still talk about him today.</p>
<img src="<https://images.unsplash.com/photo-1595617810683-5bcbe1526bbd?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D>"
</section>
<section id="background">
<h2>Background and Philosophy</h2>
<p>Before Bass, movie titles were mostly boring and literal — they showed actors or scenes with lots of text and decoration. Bass brought a different approach. Inspired by modern design trends like Bauhaus and Swiss Style, he focused on clean shapes, clear layouts, and only including what was necessary.</p>
<p>Minimalism in design is all about cutting out anything extra. Bass applied this to film and logos by breaking down big ideas into simple images. Each line, shape, or motion in his work had a purpose. By removing the clutter, he let people focus on the story or the message.</p>
<img src="<https://mundelldesignhistory.wordpress.com/wp-content/uploads/2017/11/saul-bass.png>"
<section id="getting-started">
<h2>Getting Started in Design</h2>
<p>Bass studied design under György Kepes and then moved to Los Angeles. He started by designing print ads for movies, but his big break came with <em>The Man with the Golden Arm</em> (1955). Instead of showing the story literally, he used a jagged white arm on a black background to represent heroin addiction. Paired with animated black bars and a jazz score, it immediately set the tone for the movie. This title sequence changed how people thought about movie openings — they could be creative and part of the storytelling itself.</p>
<img src="<https://janetdodrill.wordpress.com/wp-content/uploads/2013/05/saul-bass-google-results.jpg>"
<section id="movie-titles">
<h2>Movie Titles as Storytelling</h2>
<ul>
<li><strong>Vertigo (1958)</strong>: Bass used spirals coming from a character’s eye to show obsession and psychological instability. The simple shapes created a strong emotional effect.</li>
<li><strong>Psycho (1960)</strong>: Sharp black-and-white lines sliced across the screen, matching the film’s violence and tension. No extra imagery was needed to make viewers uneasy.</li>
<li><strong>North by Northwest (1959)</strong>: Lines formed grids and dynamic typography moved across the screen, giving a sense of energy and suspense.</li>
</ul>
<img src="<https://www.indiewire.com/wp-content/uploads/2017/08/screen-shot-2017-08-09-at-11-44-14-am.png?w=794>"
</section>
<section id="logos">
<h2>Logos and Corporate Design</h2>
<ul>
<li>AT&T (1983) used a striped globe instead of a bell, showing global communication clearly.</li>
<li>Girl Scouts (1978) used a trefoil with profiles hidden in the negative space.</li>
<li>United Airlines (1973) created a “tulip” made of shapes forming a “U.”</li>
</ul>
<img src="<https://blog.weditt.com/wp-content/uploads/2024/08/Saul-Bass-The-Master-of-Motion-Graphics-1024x576.jpg>"
</section>
<section id="today">
<h2>Why His Work Matters Today</h2>
<p>Bass changed both movies and branding. He made title sequences part of the story and showed that logos could capture the essence of a company with just a few shapes. Modern designers still look to him for inspiration. In a world full of information and noise, his philosophy — saying more with less — is still relevant.</p>
<img src="<https://www.cafilm.org/wp-content/uploads/2020/06/bass_post.png>"
</section>
<section id="conclusion">
<h2>Conclusion</h2>
<p>Saul Bass shows that “less is more” isn’t just a saying. Whether in film titles or logos, he used minimal design to communicate big ideas. His work is simple, memorable, and purposeful. For anyone studying design, Bass reminds us that clarity and intention often make a design stronger than complexity ever could.</p>
<img src="<https://www.logodesignlove.com/wp-content/uploads/2017/01/saul-bass-life-film-design-01.jpg>"
</section>
<footer>
<p>© Brady Chambers | Inspired by Saul Bass</p>
</footer>
</body>
</html>
