Websites are a crucial part of our day-to-day online experience. Without any websites, there’d be no online experience to speak of, after all. Nowadays, almost no business can function effectively without their own website, which makes web designers highly sought after.
To become a respected web designer and create websites that people enjoy, you’ll need to learn to balance tried-and-tested functionality with your own creativity. If you focus too much on creativity, you risk alienating users with complicated and counterintuitive site navigation, while focusing on functionality will leave your readers cold.
In this guide, we discuss the practices, which will serve as your foundation for building a reliable website. You can find additional information and other helpful tips and tricks in the Skillshare course “Understanding Web Development: A Beginner’s Guide to the Web.”
Use readable and web-friendly fonts 👀
The role of typography in web design can’t be understated. Using the right fonts exemplifies your brand personality and immediately grabs your audience’s attention.
However, it’s not just about looking good. The typefaces you use in your web design also needs to be functional and readable. After all, if the user has to squint just to see your text, they’re likely going to struggle to connect with your message.
You should try to take advantage of "web-friendly fonts". To explain, web-friendly fonts are ones, which maintain legibility at any size and work well across both mobile and desktop.
Examples of web-friendly fonts:
- Arial
- Helvetica
- Courier New
- Times New Roman
Utilise the "F" pattern 🖥️⬅️👀
Humans are creatures of habit—and the way we consume content is no exception. A study into eye-tracking revealed that when we scan the information on a website, the majority of us do so in F-shaped pattern.
This means we first read important headlines along the top of the page, then scan down the left side of the page at any numerals, bullet points or sidebars, then across the page again at any bolded text or sub-headings.
In web design, using an ‘F’ pattern involves mimicking the eye’s natural path so as to not disrupt the visual flow. This is especially important on landing and sales page, where conversion is the ultimate goal.
Or the "Z" pattern 🖥️⬅️👀
While the ‘F’ pattern is a common eye-scanning pattern, it’s not the only one. The ‘Z’ layout is another important design principle. This is when the eye scans from left to the top right, forming an imaginary horizontal line. Then, it goes down to the left side of the page, creating an imaginary diagonal line. Lastly, it trails back across to the right again, forming a second horizontal line.
So, when would you use a ‘Z’ layout over an ‘F’ one? While the ‘Z’ layout tends to perform best for landing pages, the Z-pattern is generally better suited for pages with very minimal information where the main takeaway is the call-to-action.
Use negative space 🔲
Sometimes, you can turn a negative into a positive! This is certainly the case with using negative space in your website design. Also known as blank space or white space, this is the empty areas between the visual elements in your design (for example, the photos, text and icons)
This principle has been around as long as art itself, but it plays a particularly important role in web design. Overly cluttered and complex websites tend to overwhelm your user and prevent them from taking action—which is the exact opposite of what you want! Meanwhile, using negative space draws their attention to the most important content, increases text readability and creates a seamless user experience.
Keep your design consistent 🌊
You already know that consistency is key in web design. But it’s important to note that this means more than just keeping your fonts, colors and icons uniform across your branding. It also means keeping the spacing consistent in your layouts, too. This helps give your website a polished and professional feel, which boosts brand credibility.
❗ Canva’s built-in alignment features makes it easy to make sure your text and paragraph spacing is consistent in your design.
Simple and logical page navigation 🧭
A website without clear navigation is like a maze without a map. It makes perusing your website unnecessarily difficult and confusing for your visitors. On the other hand, a well-designed website navigation makes for a streamlined and relaxing user experience.
This can take many forms—whether it’s a drop-down menu, sidebar or sticky navigation. The key is that it’s easy to locate, works well across all devices and isn’t overloaded with different options.
Use a complementary color palette 🎨
The color palette you use sets the mood of your web design. For example, using lots of dark browns and blacks can create a rustic, moody feel, while pastel colors can look quite playful and modern. Whatever vibe you go for, it’s important to make sure the colors you use work well together.
Sometimes, this means sticking to similar shades but opposites can also attract (for example, orange and teal) Whether you go for colors that are opposite or next to each other on the color wheel, they need to be complementary.
Keep the audience in mind 🤔🧑🤝🧑
Good designers know that it’s not just about creating a website that they think looks good. To really create a website that cuts through the noise online, they must speak directly to their audience through design.
Put yourself in your audience’s shoes and ask yourself what their biggest needs, desires, and fears are. This should dictate your design choices, from the fonts and colors you use, to your button text and website navigation.
Optimize buttons and calls-to-action 🔧
While buttons are often the last thing to be added to a web design, they play an indispensable role. They can be the deciding factor as to whether the user continues to navigate your website or closes the window.
The buttons on your website should shout, not whisper. That is, they should stand out against the other visual elements on the page and be easy to find and click.
Maintain a visual hierarchy 🔺👀
We touched on visual hierarchy when we mentioned eye-scanning patterns and navigation. However, it’s such an important principle that it deserves a point of its own!
While website design should be aesthetically-pleasing and innovative, it also needs to be logical. That is, you need to deliberately structure your content in a way that makes sense to the user—even if it’s only on a subconscious level.
Pay attention to the details 🔎
The big picture is undoubtedly important when it comes to web design. After all, it’s how all the visual elements come together that dictates the overall look and feel of your website.
However, it’s important not to overlook the little things. Paying attention to the finer details like your footer icons, text spacing, and micro-interactions really helps to set your website apart.
Use Fitt’s Law 👨⚖️
Coined by psychologist Paul Fitts in 1954, Fitt’s Law states that the amount of time it takes to move to a target directly corresponds with not only its distance but the size of the target, too.
Although this theory originally related to the human motor system, it’s now a central principle of UX (user experience) design. Often used in relation to buttons, the idea is that the elements you want to be easily selectable (for example, your primary calls-to-action) should be large and positioned close to users.
Choose your images wisely 🖼️🤔🖼️
They say a picture paints a thousand words and this is certainly the case in website design. Imagery can serve so many purposes in web design, whether it’s telling a story, demonstrating how a product works, evoking emotion or creating atmosphere.
However, it’s important to keep in mind that not all photos are created equal. Be sure to thoughtfully select the photos you use in your web design. They should not only be of professional quality and high resolution, but they should fit your overall aesthetic and have a clear objective.
Prioritize the user experience 👨💻
User experience isn’t just for UX designers. Anyone who wants their audience to take action on their website (whether it’s subscribing to a mailing list or buying something) should pay attention to the customer journey.
The good news is, this doesn’t necessarily have to be a complex or highly technical process. It’s simply about making it as easy as possible for your audience to take the desired steps.
Consider using grid systems ♟️
Using a grid layout is a foolproof way to make your website look neat, organized and professional. Essentially, these are intersecting horizontal and vertical lines that serve as guides to place and align the elements in your composition. This is a powerful visual tool that creates consistency and order in your design—which can be particularly useful when there’s a lot going on!
Avoid big chunks of text 😵
You only get one chance to make a great first impression on a new website visitor. This is why it’s so important to make your brand offering immediately clear to your audience. While this partly comes down to your copywriting (the written content), your website design plays an important role, too.
For this reason, using big chunks of text on your website is a definite no-no— especially on your homepage. Not only can it dilute your brand message, but it can make your website look cluttered and messy.
Use invariance 🔲🟥🔲
The principle of invariance is when you put one different option amongst an otherwise homogenous group. This can be an indispensable tool when designing pricing tables on your website.
Hick’s Law 👨⚖️
Outside the design world, this principle is generally referred to as ‘decision fatigue.’ Named after British and American psychologists William Edmund Hick and Ray Hyman, it’s the idea that ‘with every additional choice increases the time required to take a decision.‘
So, the more you overload your user with too many different options (whether that’s buttons or menu options) the longer it’s going to take to entice them to take action.
And as you generally only have a very narrow window of opportunity to make an impression, this is not a good thing! This is why it’s so important to limit your calls-to-action, and make the ones you do use as effective as possible.
Use symmetry ⚖️
While there’s a time and place for more abstract, asymmetrical designs, you can’t go wrong with symmetry. Referring to when two halves of a whole perfectly mirror each other, it’s an easy way to immediately make your website design look more balanced, neat and professional.
Design for both web and mobile 🌐📱
If you pay heed to only one website design principle, make it this one! Smartphones aren’t going anywhere - in fact, they’re increasingly becoming the most popular way we consume content. This is why it’s so crucial to design with both desktop and mobile in mind.
This means ensuring your headers and paragraphs work well across both devices, that no images or other visual elements have been cut off and that your buttons are easy to use on a small screen. It also involves making sure your website loads quickly on both devices.
Optimizing your website for mobile sometimes mean using different layouts to desktop. You can see this in action in the mobile-friendly version of the above example. Here, they have used a full-screen image and grid-design specifically to enhance the mobile experience. This shows why it’s so crucial to treat design for mobile and web as two separate entities
And there you have it - 20 web design tips for making a website look good! We hope you found this guide helpful and can use these practices to show off your creative spirit within the constraints of web design functionality.
If you’d like to learn more about web design, consider this a reminder to check out the Beginner’s Guide to Web on Skillshare. If you enjoyed this guide, leave us a clap or two, and visit our Medium account for plenty more guides on practical skills from the digital world!
