The holy grail of all web design tips - MORE WHITE SPACE!!!
Great web design is just as much about the spaces you leave “un-designed” as it is about the spaces you fill up with content and imagery.
White space (also called negative space) is essentially referring to the “gaps' ' between your design elements; the space between images and content, the padding between sections and the margins that determine how far away from the edge of the screen your content sits etc…
This intentional use of space helps the user navigate a page layout more efficiently. It creates the necessary pause in digesting what’s in front of them, allowing them to focus on a certain area before moving ahead to the next. Effective use of white space can immediately make a design look and feel more premium and put together. Unless you’re going for a maximalist design where clutter and chaos are part of the concept, white space will always be your friend - use it!
One of the key goals of a strong website design is to give the user a good experience. This can’t be done if the user can’t tell which piece of text is more important from the other.
Type hierarchy is the technical term for organizing your written content by priority using size, color and font selection to show a user which piece of text they should read first. Without this balance, the user is met with a large wall of text that they will most likely skim right over.
To do type hierarchy properly you want to focus on 3 key aspects:
There’s no real way to beat around the bush on this one - the days of pixelated, grainy imagery are gone. You need good quality imagery in your designs. Whether you select images from a stock website or hire a photographer to take new photos, good imagery can make or break a user’s experience. We are primarily visual creatures and process images up to 60,000 times faster than text (source) and so it is key that the images your users see are good.
But not only that, you want them to align with the brand - from the tones of the images to the subject matter, it’s no good if the image is super high resolution and looks great, but is totally off-brand and out of context.
All three of the images below are for jewelry brands, but all three have a different look and feel. When choosing or art directing your website’s images, consider the brand carefully as well as the audience who will experience them.
In web design we often talk about the 60/30/10 rule which is a great starting point for designers to use when selecting colors for their designs. Whether you get given a color palette from the brand guidelines of the business you’re designing a site for, or you’re tasked with selecting a new palette, this rule will stand you in good stead for success.
it works like this:
60% of the design should be the dominant color, 30% should be the secondary color and 10% the accent color. See this rule in action below:
In theory it can be applied as follows:
I don’t mean literally telling them they’re doing a great job while scrolling… I mean users are always searching for clues that they’re going in the right direction. In the digital world, because it is far less tactile than the real world, we rely on digital methods of receiving information about our actions online.
This “feedback” can take the form of hover states on buttons and clickable elements, states on form fields that tell us if what we’ve typed in will work or not, and subtle clues that helps us understand where on the website or page we’re at, such as a nav link changing colour. These small details help users feel safe and informed during their time on the website.
it is a common misconception that these states are something that gets left for the development phase, but that would be incorrect. It’s vital that you consider these details early on and design for them appropriately so that you ensure your developer (if it’s not you) implements them properly.
Small details like this take a website to the next level and can make it feel more dynamic, alive and interesting to interact with. Check out this YouTube Short we did on making cool looking buttons in Webflow.
I see too many designers neglect their footers. This is a key aspect of a website’s success and is often the last things a user sees if they make it to the bottom of your pages. A great footer can keep your user engaged, provide additional value and can even help you rank better on Google!
A great footer can include the following information if you’re stuck for ideas:
Don’t shy away from footers! They can be as large or as small as you’d like but should be designed carefully and intentionally and definitely not neglected!
Following on from having a great footer, you also want to ensure your navigation is clean, easy to use and most importantly; easy to find! There is nothing more frustrating that not being able to find your way around a website.
Here are some basic tips for a great nav:
It should go without saying but I’m adding it in here anyway. When designing, always keep your users in mind. What works for one audience, may not work for another. Make sure you’ve done proper research into who you’re designing for (your client’s clients) and then check every design decision you make to ensure you’re keeping them top of mind. Ask yourself:
The world of web design is ever-changing and as technology advances and as businesses change web design will change too. But the fundamentals of great design probably wont. When in doubt, go back to the basics and get those right first. Once you’ve mastered the basics you can start breaking the rules with style.
If you want to learn how to design and deliver incredible websites, check out Web Design Becoming a Professional - our pro course on leveling up your web design business and creating sites that are totally brag-worthy. We’ll see you inside 😇
This handy E-Book will help you pick the right color for every occasion