So while design is all about breaking the ‘rules’ and making your own, all designers should bear in mind a few fail-safe web design concepts. To order to create polished and usable websites that reach the audience, these tried and tested principles are essential. Read on for 20 basic concepts of web design to guide your next creations.
01. Use readable and web-friendly fonts
Can’t understate the importance of typography in web design. Using the right fonts exemplifies your brand personality and immediately catches the attention of your audience. It isn’t all about looking fine though. The types you use when designing your web also need to be functional and readable. After all, if the user only has to squint to read your text, they’ll probably be struggling to communicate with your post. All examples of web friendly fonts are Arial, Helvetica, Times New Roman and Courier New. This means that they remain legible at any size and work well across mobile and desktop.
Typography for writer and author Matt Steel takes center stage in the design of this website. He used a versatile serif font that remains eye-catching when used in small and lightweight applications, or large and bold.
02. Utilize the ‘ F ‘pattern
Human beings are habit creatures – and the way we consume material is no exception. A research by the Nielsen Norman Group on eye tracking showed that most of us do so in F-shaped pattern when we search the details on a website. This means that we first read important headlines along the top of the page, then scan any numerals, bullet points or sidebars down the left side of the page, then scan any bolded text or subheadings across the page again. Using a ‘F’ pattern in web design involves imitating the natural path of the eye, so as not to disturb the visual flow. This is particularly important on landing and sales pages, where the ultimate goal is conversion.
03. Or pattern ‘Z’
While the ‘F’ pattern is a common pattern for eye scanning, it isn’t the only pattern. A further important design principle is the ‘Z’ layout. This is when the eye scans to form an imaginary horizontal line from left to top right. Them, it descends to the page’s left side , creating an imaginary diagonal line. Finally, it again trails across to the right, creating a second horizontal line.
So, when are you going to use a ‘Z’ layout over a ‘F’? Although the ‘Z’ style appears to best work for landing pages, the Z-pattern is usually better suited to pages with very limited details where call-to – action is the key takeaway.
04. Use negative space
Even a negative can be converted into a positive! That is certainly the case with using negative space in the design of your website. Also known as blank space or white space, these are the empty spaces in your design between the visual elements ( e.g. photos, text and icons)
This concept has been around for as long as art itself, but plays a special role in web design. Websites that are excessively cluttered and complicated continue to confuse the users and discourage them from taking action — which is the exact opposite of what you want! The use of negative space, meanwhile, directs their attention to the most relevant material, increases readability of text and provides a smooth user experience.
05. Maintain uniform style
You already know web design is key to consistency. But note that this means more than simply keeping your fonts , colors and icons uniform across your branding. This also means keeping the spacing of the templates consistent. This helps give a polished and professional look to your website, which boosts the reputation of your brand.
06. Simple and logical navigation on page
Without clear navigation a website is like a labyrinth without a map. It makes it unnecessarily difficult and confusing for your visitors to peruse their website. On the other hand, a well-designed navigation on the website makes the user experience smooth and comfortable. Whether it’s a drop-down menu, sidebar or sticky navigation, this can take many forms. The key is that location is easy, works well across all devices and is not overloaded with various options.
07. Use a complementary palette of colors
The color palette that you’re using sets your web design mood. Using lots of dark browns and blacks, for example, can create a rustic, moody feeling whereas pastel colors can look quite playful and modern. Whatever look you ‘re going for, it’s important to ensure the colors you ‘re using work together well. Often, this means sticking to similar shades, but opposites may also attract (e.g., orange and teal) If you’re on the color wheel with colors that are opposite or next to each other, they need to match.
You can use several different colors and still build a website which is visually appealing.
08. Keep an eye on the audience
Great designers know it’s not just a matter of making a website they think looks fine. They have to talk directly to their audience through design to really create a website that cuts through the online noise. Place yourself in the shoes of your audience, and ask yourself what are their biggest needs, wishes and fears. This will determine your choice of design, from the fonts and colors you ‘re using to your text button and website navigation.
09. Optimize buttons
Although buttons are often the last thing to attach to a web design, they do play an important role. They can be the deciding factor as to whether the user is still browsing your website or closing the window. The buttons should yell on your website, not whisper. That is, they should stand out and be easy to find and click against the other visual elements on the website.
10. Keep a visual Hierarchy
When we discussed the eye-scanning patterns and navigation, we touched on visual hierarchy. It’s such an essential idea however that it deserves its own point! Although the design of websites should be aesthetically pleasing and imaginative, it must be rational, too. That is, you need to organize the content purposefully in a way that makes sense to the user — even if it’s just on a subconscious level.
11. Details
Without doubt the big picture is important when it comes to web design. After all, it is the way all the visual elements come together that defines the website’s overall look and feel. It’s important not to overlook the small things though. It really helps to set your website apart by paying attention to the finer details like your footer icons, text spacing and micro-interactions.
12. Use Fitt ‘s Law
Coined by psychologist Paul Fitts in 1954, Fitt ‘s Law notes that the amount of time it takes to travel to a target correlates directly to the size of the target as well as its distance. While this idea initially addressed the human motor system, it is now a fundamental concept of UX design (user experience). The notion that the items you want to be easily selectable (for example , the primary calls-to-action) should be wide and placed near to users is also used in relation to buttons.
13. Choose your images wisely
They say a picture paints a thousand words, and website design certainly does. In web design, imaging can serve so many purposes, whether it is telling a story, demonstrating how a product works, evoking emotion or creating atmosphere. It’s important to bear in mind, though, that not all photos are created equal. Make sure the images you use in your web design are chosen carefully. They should not only be of high-resolution, professional quality, but should fit your overall aesthetic and have a clear objective.
14. Put the user experience first
UX is not just for designers. Anyone who wants their audience to act on their website (whether they subscribe to a mailing list or buy something) should pay attention to the client’s journey. The good news is this doesn’t necessarily have to be a highly technical or complex process. It’s simply about making your audience take the required steps as easy as possible.
15. Consider using grids
The use of a grid layout is a foolproof way of making your website look professional, organized and neat. This essentially intersect horizontal and vertical lines which serve as guides for placing and aligning the elements in your composition. This is a powerful visual tool in your design that creates consistency and order — which can be especially useful when there’s a lot going on!
16. Avoid big chunks of text
On a new visitor to the website you only get one chance to make a great first impression. That is why it is so important to make your brand offering clear to your audience immediately. While this partly comes down to your copy writing (the written content), it also plays an important role in your website design. Because of this, using large chunks of text on your website is a definite no-no-especially on your homepage. Not only can it dilute your message about your brand, it can also make your website look cluttered and messy.
17. In-variance use
The in-variance principle is when you put one different option in a group that is otherwise homogeneous. When designing pricing tables on your website, this can be an indispensable instrument.
18. Hick ‘s Law
Outside the world of design, this principle is generally referred to as ‘decision fatigue.’ Named after British and American psychologists William Edmund Hick and Ray Hyman, it is the idea that ‘with each additional choice, the more time it takes to make a decision.’ Therefore, the more you overload your user with too many different options (whether they are buttons or menu options) the longer it takes. And because you usually have only a very small window of opportunity to make an impact, this is not good! That’s why limiting your calls-to – action is so important, and making those that you use as effective as possible.
19. Use symmetry
Although there is time and place for more abstract, asymmetric designs, symmetry can’t get you wrong. Referring to when two halves of a whole mirror each other perfectly, it’s an easy way to make your website design look more balanced, neat and professional right away.
20. Design for both web and mobile
If you pay attention to a single theory of website design, make it one! Smartphones don’t go anywhere — in fact they are becoming increasingly the most popular way we consume content. That is why designing with both the desktop and mobile in mind is so crucial. This means ensuring that all apps fit together through your headers and paragraphs, that no images or other graphic elements have been cut off, and that your buttons are easy to use on a small screen. It also includes ensuring that the website loads on all devices quickly.
Taking these ideals of architecture on board does not make you a stickler to the rules. It just means that you have a good base down pat, so you can take chances and play where it counts.
- 10 UX Glossary Of Terms You Should Know
- 20 SEO Glossary Of Terms You Should Know By Now!
- 5 Best Beer Packaging Designs
- A Beginner’s Guide to the UX Audit
- All Websites Are Created Equal
- Apple TV Remote: Ridiculously Symmetrical and Highly Unusable
- Best Practices for Constructive Design Feedback
- Boost Your Conversion Rates with these 15 Website Design Best Practices
- Design Principles for Web
- Error Messages Design: Best Practices
- Five Absolutely Fantastic Cosmetic Packaging Designs
- Form Without Labels: Don’t Use The Placeholder Text!
- Is UI Designer same as UX Designer?