10 Key Principles of Web Design For Every Designer
Elevate the look and feel of your next website by learning 10 key principles of web design and training your eye for good design with relevant examples.
Joe Chen
Elevate the look and feel of your next website by learning 10 key principles of web design and training your eye for good design with relevant examples.
What makes a good website design, and what makes a bad website design? Most people can easily discern poorly designed websites; websites that look outdated, aren’t readable, and confusing.
Many novice web designers often make mistakes because their eyes haven’t been trained on how to identify quality design. To avoid these mistakes, let’s explore successful web design examples that follow ten website design rules that create a delightful experience for the user. You will see how a simple interface and beautiful design can guide website users on a delightful journey that’ll also accomplish the website’s goals. Master the following 10 fundamentals of web design and you’ll create an unforgettable website.
Before you get started designing the website, you first have to define a clear purpose for the website. Once you know the purpose, you will be able to use the other 9 principles of web design to achieve the purpose.
If you’re designing for a client, you can ask them 3 simple questions that’ll help you discover the website purpose:
Ultimately, the purpose of the website should be to solve your clients’ problems. For example, if your client is a travel writer, and they want a website, their answers might look like this:
“I currently don’t have a place to feature my travel blog posts. I want to use the website to build my personal brand as a free and joyful traveler, and I want to grow an audience of women who are busy but want to learn how to travel more.”
Based on the answers, you’d be able to strategically design the website with the purpose of solving their problems. For example, while following good web design principles, you’d select typography, colors, images, and layouts that appeal to busy women who want to travel more — since it’s a travel blog, you’d also want to make sure these principles of web design work together to create an enhanced reading and photo viewing experience.
Successful web designs have simple interfaces because it makes interacting with the websites intuitive and enjoyable. Simple interfaces are interfaces where all unimportant design elements are removed – in other words, each design element should have a purpose and be strategic.
The most famous example is Google’s homepage, which features a prominent search bar in the center of an almost empty white page. Novice web designers often make the mistake of trying to fill in all white space because they fail to understand the importance of it. Thanks to Google’s use of white space, users' eyes are immediately drawn towards the search bar, which helps them accomplish their goal of asking questions on the internet.
Another strong example of a simple interface is what users see when they click “Write” on Medium.com, a publishing site for all writers.
Once again, there’s an almost empty white page to allow their users to focus on writing without any distractions, which is one main purpose of the website. This simple interface also effectively communicates that content is king, which is one of Medium’s key values.
Dribbble.com, a website for designers to showcase their work, also has a simple interface.
Dribbble features a clean navigation bar at the top that allows users to select a category, and their card-based design below allows users to intuitively scroll through a variety of works without any distractions. It's a great design because rather than overwhelming the users with information about the works, most information is hidden until the user hovers over or clicks on one of the cards.
It doesn’t matter how pretty a website looks – if there isn’t quality content, people will quickly lose interest in the site. Quality content can be defined as any content that gives value to the website visitors, such as website copy, images, videos, and blog posts. Besides giving value to users, other purposes of quality content include keeping users engaged, boosting the website’s SEO, and helping users make informed decisions or purchases.
The best way to see the purpose of quality content in action is to analyze the content found on our own web design course landing page.
At the top of the page, the copy makes a bold promise to site visitors that they’ll be able to design great websites confidently after taking the course. There’s also an engaging, professionally made video that shares what people can expect from the course so they can make informed decisions. At the very bottom of the landing page, there is a FAQ section that also gives value by anticipating all the questions one might ask prior to buying the course. Although quality content takes time and effort to create, it’s worth it because it helps establish the website’s reputation and drives sales.
Effective web design uses images and infographics to convey powerful stories and emotions – images are powerful because we process images 60,000 times faster than written text, and the images stay in our minds for much longer than words.
Skilled web designers will set image guidelines so that all website images showcase the brand’s personality, which is often one goal of websites. For example, Pabio, an interior design subscription service based in Switzerland, hired a web designer to redo their website because their previous website failed to communicate to visitors that their furniture was affordable. The web designer, Carlos, solved this problem by showcasing images of spaces that felt lived in, friendly, and approachable.
One of the most important images on the website is the hero image, or the image featured above the fold on your website’s home page. Choosing the right hero image isn’t as simple as picking any high-resolution stock image and calling it a day. Skilled web designers know how to compose original images, and crop and edit them in a way that makes them more intriguing.
For example, GameStop, a video game tech company, uses an original composition of an astronaut, moon, sun, and earth as the hero image for their upcoming digital marketplace landing page. The web designer chose the space theme because it’s a metaphor for GameStop’s own journey in exploring a new frontier in technology. The web designer continues telling GameStop’s brand's story through details such as the astronaut reaching their hand toward the viewers, as if to invite them to join, and the sun rising in the horizon, which marks a new beginning.
Many web designers will also craft shareable infographics that add value to website visitors and drive more traffic back to the website. For example, Ivypanda, an education company, features a beautifully designed “How to Actually Enjoy Studying” infographic on their website to build a trusted relationship with their website visitors.
Although typography can probably be the most difficult thing to get right in web design (because bad typography will kill the design), the journey of finding the perfect typography for your website is worth it. If you need a refresher on what typography is, check out our blog post on that topic here because we’re about to dive deeper on the role of typography in web design.
Experienced web designers are not afraid to choose fresh, professionally made typefaces, because those will capture the attention of visitors better than the popular fonts that people see all the time. However, be careful not to choose a typeface that is too strange, because it’s human psychology for people to not like things that are too new. Plus, there’s nothing wrong with using tried and true typefaces if you want to play it safe; pushing the boundaries of typography without pushing it too far is a fine art to balance. You can only get better with practice and looking at good examples.
One tip for finding the perfect typeface for your next project is to browse the page that is selling the font so you can read up on its history and see it in action on example projects.
Once you find a typeface, make sure to follow this golden rule: Never leave the typeface in its default settings! Skilled web designers will play around with the settings such as tracking (the space between letters in a word), line height, and weight class.
If you want to create an attention grabbing headline for your website, one way to do that is to play around with pairing two different fonts together, such as the example below.
Wyre’s website, a company that helps businesses adopt crypto, recently won Awwwards’ site of the day on May 10th. Notice how the web designer mixed and matched a sans-serif and serif font to create a catchy headline. This design choice also serves as a metaphor for the brand’s story of helping businesses transition between the old (serif) and the new (sans-serif) economy.
Notice also the website description’s text line length. It’s not too narrow nor too wide. A good rule of thumb is each line having anywhere from 50-75 characters. Following these website design rules will increase your design’s readability and engagement.
The best web designers not only understand color theory, but they also understand color psychology. Successful web designs choose colors that set the mood for website visitors to feel emotions; whether that’s sadness, happiness, or excitement, it depends on the website’s goals.
Warm colors can evoke a wide range of feelings, from happiness to anger, while cool colors can evoke sadness or peace, depending on the surrounding visual context.
For example, SDX Kenkyu-Jo’s website uses blue and green to evoke a feeling of peace and trust, which is relevant to their business of improving hospitals’ patient experiences.
It’s often not necessary to go overboard with the colors, and sometimes a restricted color palette will be the better choice. For example, you could choose one or two base colors and then use shades and tints of those colors to complete the design.
One great resource for training your eye so you can choose beautiful colors is the website color combinations by Obys Agency. The site also shares the emotions the shades can evoke so you can leverage color psychology more effectively in your next project.
Users shouldn’t struggle to find what they need on websites. However, effective navigation in web design is more than just making sure your website has menus, links, and buttons. You need to understand the goals of the website and use the basics of web design to create a visual hierarchy that helps users delightfully navigate the site.
Let’s look at a particularly creative example of effective navigation by analyzing the website omswami.com, which is a portfolio website with the goal of sharing who Om Swami is.
When you first open the page, there is only one navigation option for you to click, which is “Enter.” This page is not only a good trick to give the rest of the website time to load, but it also entices your curiosity — now you want to click enter to see what the rest of the website holds. The copy on this page also supports the navigation experience by encouraging you to enter.
Upon entering the website, you’re greeted with classical music and a gorgeous illustration of Om Swami. Rather than using a horizontal navigation bar with the different pages to explore, what makes this website so creative is it automatically scrolls through your navigation options one at a time. First, you will see the big “Explore Monk” button which expands if you hover over it, and this subtle animation lets you know that it’s clickable and improves the navigation experience.
A few seconds later, it will automatically scroll to a new image with a new navigation option, “Explore Author.”
This website is also an excellent UI & UX design because notice there is a progress bar in the bottom left corner which tells you where you are on the website. There’s also text that says “Scroll to navigate” in the bottom right corner; typically, people already expect that they have to scroll to navigate websites, but because this website is breaking people’s expectations or existing mental models by automatically scrolling, the web designer is reminding users that they can still manually scroll if they want to.
Finally, this website uses an expandable navigation menu where people typically expect it to be (either in the top left or right corner). The designer made the button a contrasting color from the artwork in the background to help it stand out, but the designer was careful not to choose a color that would make it stand out too much because the menu is not that important in this particular website. Upon clicking on the menu to open it, the menu takes up the entire screen and uses pictures and numbers to guide the user on an immersive journey.
This website example demonstrates that effective navigation can greatly enhance the experience users have on your website; and it’s okay to break users’ expectations if you use design elements to guide them!
In 2022, every website must look good on computers, tablets, and phones. Responsive design is how the website will adapt as the screen size changes.
Croptrust’s report website does responsive design beautifully using a flexible container-based design. On mobile view, notice that each container takes up almost the whole screen to create an immersive experience. On tablet view, three containers feature text whereas the other five containers just feature illustrations until you tap on them for more information. Finally, on desktop view, all containers have text in them. This example illustrates one tip of removing unnecessary information as the screen size shrinks to avoid your design feeling too cluttered on smaller devices. This website also chose to use an expandable hamburger menu in the top left corner so that the design is easily scalable up or down.
One of the best tools for developing responsive websites is Webflow. You can learn Webflow for free at Webflow University, or take a deeper dive with us in our Webflow Masterclass.
Web designers will often start their web design by thinking about what type of grid layout they will use to organize their design elements. Check out our in-depth guide on grids here.
Sometimes the grids will be invisible, and other times it will be visibly incorporated into the web design.
For example, both beginner and skilled web designers can use the popular 12 column grid layout in any design software, such as Figma, to organize their content.
Apple’s website is a perfect example of using invisible layouts to organize text and images in a way that is aesthetically pleasing to our eyes. In the picture below, we can see 4 distinct sections that are created through invisible grids: One for the main heading, one for the second heading, one for the description, and one for the photo.
You can also make your grids visible if it fits the aesthetic of the website project. The website below by Obys Agency is the perfect resource for exploring grids because you can toggle on or off the invisible grids to help train your eyes on how grids are used in web design.
A slow website load time will not only hurt your website’s SEO, but also kill any chance of making a positive first impression on visitors. Google finds that websites that take three seconds to load result in a 30% greater chance of visitors leaving the website than if the website took just one second to load.
A tip for improving the load time of your website is to design a loading landing page, just like the one we saw on Om Swami’s website in the effective navigation section. The benefit of this is that the other web pages can load in the background. Similarly, you can design a pre-loading animation that viewers find enjoyable to watch while they wait for the rest of the site to load.
Many websites suffer from a slow loading time due to large image files. The solution is to use a website like tinypng.com to easily compress your images up to 80% smaller. Another hack is to make the images load only when they appear on screen, rather than loading in the background as soon as the website opens. This is possible with custom code or with a feature called “lazy: loads on scroll” that is available on Webflow.
Now that you’ve learned about the key principles of web design and reviewed examples, the two ways to improve on these principles is through practice and training your eyes to identify quality design. Besides looking at web designs, seek inspiration from book covers, magazines, movie posters, documentaries, and nature.
There’s no shortcuts to mastering these principles, but you can fast-track your path to becoming a web design pro with our expertly structured course taught by Ran Segall, who has been a web design freelancer for 17 years. Not only will you hone in on the principles of web design that we covered here, you will also learn the complete web design process from your first discovery call with your client to the final site handoff process.
Many course modules will have assignments and resources to help you practice what you learn. A huge perk is you can share your completed assignments with the Flux Community to receive feedback on your designs from friendly people around the world.
