For ecommerce business owners, taking an active role in your own website design can be a rewarding way to watch your vision come alive. But sometimes novice designers can fall into an all-too-familiar trap: you’ll make a color adjustment here, maybe swap out some images over there, and before you know it, your thoughtfully-chosen theme looks jarring and messy. What went wrong?
Most flawed web designs can be traced back to the same set of fundamental issues. If your web design doesn’t look quite right but you’re not sure why, check to make sure you haven’t made one of these common web design mistakes.
1. Not Using Enough White Space
White space is the negative space between photos, paragraphs, and the other visual elements on your website. Essentially, it’s all the blank space on the page. It’s common for novice web designers to underestimate the amount of white space a design needs before it can “breathe,” because when you’re in the weeds with your design, the right amount of white space can sometimes feel like too much. Trust that it won’t come across that way to the user, and add healthy, consistently-sized margins to your photos, banners, headers, and body copy.
If you’re overlaying text on top of header images or other photos, make sure the image itself contains plenty of white space, too. Try to avoid adding complicated imagery under the part that will include text. One of the reasons flat lay photos are so popular in web design is because they offer plenty of breathing room for unobstructed text.
2. Including Too Many Competing Elements
One theme you’ll see popping up in all of these tips is consistency. That begins with the design choices you make at the highest level when you’re selecting the look and style that will reflect your brand. Once new designers get exposed to the full treasure chest of options in their toolkits—like stock photos and illustrations, custom fonts, or fancy buttons and icons—it’s natural to want to pick out everything that looks great and throw it together on the same page. This, however, is a recipe for disaster. Pick a style and stick with it, finding other brands to use as your inspiration if you need it.
3. Incorporating Photos That Don’t Use Your Color Palette
So you’ve made some updates to your design settings, and now you have a standard color palette set for your logo, header text, body copy, menu, buttons, and internal links. That’s it, right? Here’s the mistake that has been known to cause a lot of head-scratching: the photos themselves need to work with your color palette. If you’re working with a lush green color palette but your product or lifestyle photos feature a lot of red, the results will be jarring. Similarly, including very colorful photos may result in too many off-palette color additions to feel seamless.
To avoid this misstep, think color first when you select your images. Most popular stock photo sites let you search by hex code to browse only the images that feature a certain color. Use this to your advantage to create a collection of images that integrate with your site and look great together.
4. Using Inconsistent Image Sizing
The fastest way to send a beautiful template off-course is to start uploading images without paying attention to their size. To correct the issue, grab the size recommendations for the image slot in question and crop your image to the exact specifications prior to uploading the photo to the site. Never rely on a platform’s auto-crop feature to do this for you. While the size of many of your images will auto-adjust to a fixed size, there are always exceptions to the rule. Besides, auto-crop features won’t give you full control over how your image is cropped, so the composition of the end product may not be what you want it to be.
5. Overusing Fancy Fonts
Remember that when it comes to fonts, readability is key. That means the fonts that often feel the most “boring”—high-contrast, sans-serif, and simple—are actually your best options. Many designers like to pair a minimalist font for body text with a more distinctive font for headers and other large text. This keeps readability and usability at the forefront while providing some room to set your brand apart.
Final Thoughts
When in doubt, remember that simplicity and consistency are key; you want your design to amplify the clarity of your brand story, not obstruct it. As you edit your own work, keep your eyes open for opportunities to unify and simplify the elements you’re using. Experiment and test changes against each other, and eventually you’ll find the balance that helps your brand shine and converts more customers.