It’s important to note that these tips are more like guidelines than strict rules. Web design is a creative process, and sometimes stepping outside of these suggestions can lead to unique and effective results. Let’s dive into some practical insights that you can explore to improve your designs!
When picking colors for your website, focus on functionality, not just what looks good together. Each color should have a specific job—like a background that’s easy to read, a brand color that represents you, or an accent to highlight important actions. Think about contrast and accessibility to make sure everything’s readable, and use colors to guide users where needed. By giving each color a role, you’ll create a practical, cohesive palette that improves the user experience.
Start with a few key colors and expand as needed to maintain a cohesive design. Use various shades of the same color for different elements, like hover states or background variations, to create depth and interaction cues. This approach ensures both functional and aesthetic consistency without overwhelming the user.
Keep it simple when choosing fonts for your brand. Pick ones that match the vibe you’re going for, and if you’re unsure, stick to one font with a range of weights—use a bold one for headings and a lighter one for body text. If you want to mix things up, two fonts can create contrast and interest, but make sure they’re either similar or very different in style.
Also, create a type scale for your website—start basic and add complexity as needed. This will save you a lot of time in your projects, even if they’re fairly small.
Keeping your headings and paragraphs narrower than 800px is crucial for readability. When lines of text get too wide, it becomes harder for users to follow along, causing eye strain and making it more difficult to absorb information. Narrower text blocks create a more comfortable reading experience by allowing the eye to easily track from one line to the next, improving focus and flow. This simple adjustment can make a big difference in user engagement and overall site usability.
Example: When a paragraph stretches too wide across the screen, it becomes increasingly difficult for the reader’s eyes to easily track from the end of one line to the beginning of the next. The wider the text block, the greater the distance the eyes have to travel horizontally, leading to a disjointed reading experience where the flow of information is interrupted.
For consistent vertical white space at the top and bottom of containers, pick an amount of padding that feels comfortable for your project (usually 60-120px) and keep it uniform across your design. Start with a specific number within this range, and then fine-tune it based on how things look visually, making adjustments to account for optical balance.
For horizontal spacing, ensure that your gutters— the space between columns or elements—are consistently aligned, with equal white space on both sides to maintain a clean and organized layout. This attention to consistent white space helps create a more polished design.
To determine the correct border-radius for a box nested inside another, you can use the equation:
The outside border is the border-radius of the outer box, while the gap is the space between the two boxes. By dividing the gap by 2 and subtracting it from the outer border-radius, you get the appropriate radius for the inner box, ensuring the two boxes align perfectly and maintain a consistent, smooth appearance. This approach helps maintain visual balance and ensures the inner box fits neatly within the outer box’s rounded corners.
The outside border is the border-radius of the outer box, while the gap is the space between the two boxes. By dividing the gap by 2 and subtracting it from the outer border-radius, you get the appropriate radius for the inner box, ensuring the two boxes align perfectly and maintain a consistent, smooth appearance.
In web design, keeping similar or related items close together is a fundamental principle that enhances user experience and clarity. While it may seem like a simple concept, it’s surprisingly easy to overlook, and I see it countless times when reviewing designs in the wild. Disjointed layouts or items that are too far apart can confuse users, making navigation harder and the overall experience less intuitive. Ensuring that related elements are grouped together is essential for a clean, organized design that guides users naturally through the content.
Sliders or carousels should generally be avoided, especially if they contain important information. Users often skip over them without fully engaging, and because the content changes automatically or requires interaction to view, key details are likely to go unnoticed. Even if your message is crucial, it’s better to display it in a static format where each slides content is instead stacked vertically so it can be easily accessed and digested by visitors, rather than relying on a slider that might be missed entirely.
Ideally, each section of your site should have one clear focus. When you cram too much content into a single section, none of it stands out or serves its purpose effectively. Instead, it’s best to separate different pieces of content into distinct sections, allowing each one to have the undivided attention it deserves. This approach not only improves readability but also ensures that users can easily absorb and engage with the content, making the overall experience more impactful.
“Life is really simple, but we insist on making it complicated.”
– Confucius
One of the best principles to follow in web design is to keep things simple. In design, less truly is more—especially when it comes to creating a clear, focused user experience. Every element you add to a design should serve a purpose. Before including something, ask yourself if it enhances the message or if it’s just adding noise. Overcomplicating a design can distract users and muddy the core message. By stripping away the unnecessary and focusing on what’s essential, you make the experience cleaner and more effective, allowing users to engage with the content without feeling overwhelmed.
In web design, it’s crucial to work in the principle of “Know, Like & Trust,” especially on the homepage above the fold. This means that when a user lands on your site, they should immediately understand where they are (brand recognition), feel positively about what they see and read (like), and experience a sense of trustworthiness through the design and content (trust).
Seeing real people’s faces, for instance, can significantly enhance the “like” and “trust” elements, as it humanizes the brand and makes the experience feel more personal and relatable.
Trust signals, like clear messaging or customer testimonials, also play a key role in conveying credibility.
Without these three elements—clarity in branding, an engaging design, and trustworthiness—users are less likely to stay or take meaningful action on the site. By focusing on these aspects right from the start, you build a strong first impression that encourages further engagement and conversions.
As a web designer, exposing yourself to truly good design is essential for developing your skills and intuition. The more you immerse yourself in high-quality work, the more you’ll naturally begin to make better design decisions. In his book Steal Like an Artist, Austin Kleon encourages creators to “steal” from the best—by borrowing ideas, techniques, and styles from other designers and making them your own. This doesn’t mean copying, but rather combining various elements of good design to create something unique. It’s much easier to build on the ideas of others than to reinvent the wheel from scratch, and over time, these influences will help shape your personal design approach.
