Julian Miller
Creative Director – South County Creative
Building a website on a platform like WordPress, Wix, or Shopify makes the process a breeze. You can quickly drag and drop content and get a website up in no time. But one of the drawbacks is a lot of the time the content looks very “blocky”. Almost like you are given a bunch of Lego pieces and asked to make a house with them. Creating a modern, sleek, and visually appealing website on one of these Content Management Systems (CMS) involves several key strategies to avoid that blocky and outdated look that can sometimes plague websites.
Whatever CMS platform you choose, you will have many options for themes. A theme is basically the colors, fonts, layouts, animations, and general look-and-feel of the webpage. One of the best parts about picking a theme is all you have to do is replace their stock content with your own. Many times you can get away with keeping the same layout and flow.
There is a drawback however. If you want to add additional content or sections to the page that didn’t come stock with your chosen theme. You will need to add the content understanding the overall flow and style of the website.
This is where the blocky nature of homemade websites begins.
When adding content to a theme that doesn’t already exist, CMS platforms like WordPress, Wix, Shopify or literally any other drag-and-drop website platforms offer “blocks” to include. These blocks are pre-built and pre-styled components that you just plop in wherever you like. This freedom can impact the design and look forced and many amateur web designers will add background colors, not enough padding or margins between block elements which interrupt the design and begin to feel blocky.
All web building platforms offer plugins. Depending on which platform you choose you will have a number of free and premium options. Some free options may entice you to purchase their “pro” version offering which opens up many new options for your website. Using WordPress as an examples, page builders like Elementor, Beaver Builder, and Divi are very popular plugins that allow you to create custom layouts with drag-and-drop functionality, giving you more control over the design of your website. These are literally referred to as “Block Builders”! See how they encourage this Blocky behavior!?!?
These tools offer a wide range of design elements, such as columns, sliders, and galleries, which can help you create a more dynamic and visually appealing layout. By using a page builder, you can avoid the rigid, blocky appearance that can result from using default WordPress layouts by offering many ways to stylize your additions.
Again, the goal is to avoid thinking about each one of these blocks as independent of the overall theme of your website. There are many other types of plugins like ones for security, image optimization, and backups, but the ones we are focused on are block element related.
Another important aspect of avoiding the “blocky look” and that dreaded 90’s dialup website look is by the use of high-quality images and graphics. Visual content plays a crucial role in making a website look professional and engaging. Invest in high-resolution images and consider using stock photo websites like Unsplash, Pexels, or Shutterstock. Additionally, incorporating custom graphics and icons can add a unique touch to your site. Tools like Canva and Adobe Spark can help you create visually appealing graphics that align with your brand’s aesthetic.
We go into a deep dive to this topic of image selection and image optimization in this article How to Optimize your Images.
Also known as fonts, typography also plays a significant role in the overall look and feel of your website. Choosing modern, clean fonts can make a big difference in how your content is perceived. Google Fonts offers a wide selection of free fonts that you can easily integrate into your website. Some of the more popular fonts used today are: Inter, DM Sans, Roboto, Raleway, Open Sans, and Poppins.
Stick to a limited number of fonts to maintain a cohesive look, and ensure that your text is easy to read by using appropriate font sizes and line spacing. Consistent and thoughtful typography can greatly enhance the visual appeal of your website.
Best practice is to pick a font style for your headers (H1-H6) or display text and another one for the body, accent, and sub header text. Websites like Pair and Compare, Font Fabric and Font Comparer allow you to place two or more fonts next to each other and see how they look. Sometimes you can find the perfect match this way.
One of my favorite topics is how to incorporate whitespace (or negative space) effectively. This is in my opinion one of the best key strategies to utilize to avoid a cluttered and outdated appearance. Whitespace refers to the empty areas between design element blocks. It helps to create a balanced and organized layout, making your content more readable and visually appealing.
It is very important to give your design elements room to breathe. This minimalist approach can make your website look more modern and sleek by simply adding a bit more margin to the top and bottom of your block section
Adding whitespace to the the left or right of your block containers can help by creating an offset look. Be bold, but also cautious. If the flow allows it then great! Otherwise you may need to find multiple parts of your website to incorporate this look. Otherwise it will feel totally out of place.
In the web design world there is a trend to design “mobile first” which makes sense if we assume most of the visitors to our website will be on their phones. Most website platforms like WordPress, Wix, Shopify to name a few take the opposite approach and have a “desktop first” approach. The difference between the two is simple. Either you lay out your content for phones and build up to a desktop or laptop view or the opposite where you build the beautify desktop layout first then realign the content to be viewed on smaller screens.
If you are using a platform like WordPress then you are in a “desktop first” environment. You will layout your content for a desktop view then re-align and re-design for smaller screens.
Many platforms will automatically adjust content based on screen sizes, but just keep in mind on a platform like WordPress if you want to make any additional adjustments it will cascade down to smaller screens. For example if you change the font size to 40 pixels on desktop then it will automatically adjust for smaller screens. If you change the font size to 40 pixels on mobile then go back to the desktop view and change the font size to 60 pixels, that 60 pixels will cascade down and automatically readjust the size on mobile devices which can be frustration.
Pro Tip: Design one element at a time starting at Desktop view, then switch to Tablet view and make adjustments, then finally switch to Mobile view and make your final set of adjustments. Always start top down. It will save you a lot of heartache.
Ensuring that your website is mobile-friendly is essential in today’s digital landscape.
Author breaking the 4th wall: Chances are you are reading this on your phone. Since we are on the topic of Mobile friendly
These are all questions you should have in the back of your mind when designing your website. Put yourself in the another persons shoes.
With a significant portion of web traffic coming from mobile devices, it’s crucial that your site looks and functions well on smartphones and tablets. Most modern WordPress themes are responsive by default, but it’s important to test your site on different devices to ensure a seamless user experience. Tools like Google’s Mobile-Friendly Test can help you identify any issues and make necessary adjustments.
Pro Tip: assume everything will stack. You can determine the order if it is a side-by-side block element. For example on desktop you may have an image above text or to the left or right of the text. On mobil these elements should stack. Do you want the image above or below the text on mobile. Either is fine.
You may need to adjust these image and text elements. Ask yourself these questions: Does the font now look too big or too small? Does the content sit on the left side and should really be in the middle of the screen? Does the text only take up 60-80% of the screen when it really should extend 100% from left or right? Should the text alignment be justified, centered or left aligned.
These minor tweaks may seem like a waste of time, but the website visitor will subconsciously notice these things and it could make your website feel weird. Don’t be weird.
We saved the best for last. Update your website frequently. This goes beyond simply catching broken links or outdated content. Regularly updating your website’s design and content is crucial to maintaining a fresh and modern appearance. Trends in web design evolve over time, and what looked cutting-edge a few years ago may now seem outdated. Keep an eye on current design trends and be willing to make changes to keep your site looking contemporary.
There are many places you can get inspiration. My favorite websites to keep current on trends in design are: Behance, Siteinspire, Awwwards, Dribble, Best Website Gallery and Designspiration. If you don’t find inspiration or design ideas from one of these sites, then you aren’t trying hard enough. Seriously, just go back and look again.
If these tips and tricks still seem overwhelming or you have better things to do than learn about web design and have no interest in managing your website, then hire a pro like me. You can always reach out an schedule a 15-minute chat with us or visit my website and learn more about the services I offer like Branding and Digital Marketing.