Just like Frankenstein’s Monster - it doesn’t matter if your site’s filled with eloquent words and a wealth of information. If it’s not well-designed and legible with easy to find information, no one is going to read it.
What is a Frankensite?
Granted, frankensites are in the eye of the beholder--what may be a “design flaw” to one person might be a “feature” to another; however, in general these sites often have design flaws and usability issues. Many frankensites can be found by Googling terms like ‘ugliest websites’ or ‘worst websites’.
How are Frankensites created?
Frankensites can be created by a site being passed through the hands of many developers and agencies that don’t have a unified vision or perhaps they received poor direction on what the design should be. They can also be created by developers who are inexperienced in design or don’t have a discerning eye for what they’re building. No matter which way they’re created their visitors often suffer from a poor user experience. To remedy that, let’s learn about the characteristics of a Frankensite and how to mitigate them.
Characteristics of a Frankensite
There are some aesthetically objectionable sites out there that have great information. However, that information can be difficult to access because it’s not legible or easy to find. Some characteristics of a Frankensite include:
Clashing color schemes
Clashing color schemes and strong background patterns can be very distracting for your user and can make it difficult for your user to interact with the information that you’re presenting.
When a site’s fonts lack a consistent style it can be distracting from the information that you’re presenting. If the size is too small, too large, and inconsistent it can muddy the page’s hierarchy and thus communicate ineffectively to your users.
Cluttered & unfocused pages
When pages are cluttered with images and text, it’s difficult to know what to focus on and can contribute to the user feeling puzzled and overwhelmed.
Difficult to navigate
Without a good navigation bar or menu users can easily become frustrated as they will have trouble finding what they’re looking for.
When there is not enough contrast between the text and its background color or pattern it can be very difficult to read. Same goes for the font size - if it’s too small or too large it can be difficult to follow.
How to steer clear of the Frankensite
It can be difficult to navigate design elements especially if you’re not familiar with web design basics. If you’re not comfortable with web design using a pre-designed template can help guide you and take the stress out of designing your own site. However, if you do want to design your own website these rules of thumb should help steer you in the right direction.
Creating a harmonious color scheme can sound challenging. Take some time to learn about color theory before you start building your site. If you don’t have time for a crash course in color theory there are lots of tools out there that will help you choose the colors that are right for you such as Palleton and Adobe’s Color Wheel. Select a limited palette and use your colors judiciously and consistently. If you don’t want a solid background color try a subtle texture that won’t overwhelm you user. One of my favorite resources is Subtle Patterns.
Choose one or a couple fonts and stick to them. If you’re mixing up fonts then use them consistently. For example, one font for the header and the other font for the footer. Choose fonts that are easy to read and size them at a reasonable font point. Body text in 10 point Garamond would be difficult to read - why not try 16 point Calibri or Ariel?
Let the page tell a story and guide your user for you. Putting everything on the homepage can overwhelm your user, especially when you’re communicating large amounts of information, so breakdown what you want to communicate and where you want to direct your user and go from there. For example, if you want to direct your user to a specific page on your site, use a hero image with a call-to-action. If you want them to keep scrolling down your homepage use a small bouncing arrow to subtly direct their attention.
A clear and concise navigation bar helps guide a user through a site and helps them discover what they’re looking for. Put the nav bar in a place where it’s easy and intuitive to find. If you have secondary links that you don’t want to include in your main nav bar because it’s cluttered, try including them in your footer, or use dropdowns to organize and categorize your information.
Ensure text is legible by making sure there is enough contrast between the color of the text and its background. If the colors are too similar it can be difficult to read. This contrast checker can help ensure that your site is legible for all users. Err on the side of caution and use a standard font that is easy to read like Ariel, Helvetica, or Calibri. If you want to use more decorative fonts like scripts then ensure that they’re large enough to be easy to read.
Some of our favorite Frankensites
Some sites that appear to be Frankensites but they’re actually gems of marketing genius in disguise. My favorite example of this is Ling’s Cars. While wild looking it offers a playful yet cohesive theme reminiscent of Austin Powers with entertaining graphics and a paisley background. If you inspect the site and look at the <head> you’ll see an image of Ling Valentine coded in an HTML comment--what fun! However not all sites are masquerading as marketing genius… I’ll leave you with some of our favorites:
With the trucks used as a background to the sidebar navigation the words are almost impossible to read. It’s not mobile responsive and a couple subpages have some very unpleasant color combinations with large blocks of color which feel randomly dropped in. Others feature red text on a gray background that is difficult to read. While this site contains a wealth of information for its community it’s very difficult to interact with.
When I landed here it made me think of flipping through the yellow pages: lots of boxes with information that my eyes gloss over and don’t know where to land. With so many images crammed onto the page the sidebar with categories is easily lost.
When I landed here I was popped into a time machine and went back to the late 90s. It’s playful and cute with its GIFs of spinning pizzas and a ceiling fan but the flashing text and mixture of Times and Comic Sans in multiple colors on a starry night background is often difficult to read.
Upon landing on the homepage I was taken aback by all of the tightly packed image blocks with a small, almost hidden YouTube video in the middle. The chatbox that appears in the top left side of the window and slowly scrolls to the right which does get a user’s attention but it’s also distracting. Its tiny nav bar is overwhelmed by the graphics, the mixture of colors, and packed images which result in very suffocating feel and baffled user.