With so many wonderful shades and hues out there, it’s easy to go overboard with color. Though bright and bold color schemes are at the cornerstone of many designers’ aesthetics, when you put too many colors too close together, the visual noise that is created overpowers the rest of the web design.
Stick with a simple color palette and neutral background colors. A toned-down background makes instances of color — such as colors on call-to-action buttons, menu items, or other design elements — stand out and get the attention they deserve. Sometimes all you need is a simple white, black, or neutral background.
Made in Webflow, this website for the hairstylist Emi Styles is a great example of how a simple color scheme can project a sense of calm and order. To better understand how to best use color in your own web design, read up on color theory to help you make better decisions about your own color schemes.
The photos that are integrated into a web design layout have a huge impact on the overall look and feel of a website. Poorly shot images with fuzzy focus and questionable composition can diminish even the most brilliant of designs. Generic stock photos can drain the life from a design, leaving it bland and uninspiring.
Using high-quality photos is a simple way to improve your designs.
There are plenty of great options out there if you want to use stock photos. But don’t just plop them down into your designs as they are. Make sure you crop and edit them. Use filters, adjust the saturation, change the warmth, bump up the contrast, and use other photo editing techniques to make the images better fit in with the harmony of a web design.
Additionally, make sure that whatever images you choose fit within the context of the content they’re appearing with. If a photo doesn’t relate at all to the section it’s being placed into, you may need to find one that fits the content better.
Lastly, pay attention to the file types you’re using. Know the difference between a JPG and a PNG. Implementing the correct file types can make a huge difference in how fast your pages load.
We know you didn’t devote yourself to the art of web design to be bothered by search engine optimization. But how you put together a web design can have a great impact on SEO.
As a web designer, a few things you should know about search engine optimization include:
Of course, we can’t distill the complexities of SEO into three bullet points. If you’d like a helpful introduction to search engine optimization, please check out our blog post “9 SEO best practices for your Webflow website.”
There are many devices out there with varying screen sizes. No matter how someone is accessing your web design, it should offer a similar experience no matter what it’s being viewed on. Instead of putting a huge amount of effort into overly complex animations and hover effects that may not work on every device, it’s better to spend that time improving UI and UX for everyone.
Following the tenets of responsive design means your website will be user-friendly and offer an optimized experience across desktop and mobile devices.
To learn more, check out our course material “Intro to Responsive Design” to help you understand how to make your own designs more accessible.
When we sit down to read a book, we expect that every page will follow a sense of order. The text will be the same size, set with exact spacing, and follow the same repeating format. This sense of congruity keeps us engaged, offering an uninterrupted experience in reading through a book’s pages.
Similarly, the typography in a web design also needs to have a sense of order and consistency. Headers, body text, links, and other text need to follow the same styling from one page of a website to the next. Additionally, padding, line spacing, size, color, and weight should be identical for a given type of content.
We’re fans of setting up a universal style guide page for each website you create. By doing so, you can make sure typography is consistent across a web design.
For reference, Webflow’s style manager is a handy tool in managing text styles like headers and body copy — making it easy to keep track of all the text styles you have in place.
