Birth of a Frankensite

Just like Frankenstein’s Monster - if your site's not well-designed and legible with easy to find information, no one is going to read it.

Birth of a Frankensite

Kim Koga 10.31.2019

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?

If we think about how Frankenstein was created that will help us define what a Frankensite is. Frankenstein was born of alchemy, chemistry, and unorthodox scientific techniques which resulted in the reanimation of body parts combined to create a creature that’s rejected by humanity. Therefore, a Frankensite is created from HTML, CSS, and JavaScript to the same end: an aesthetically displeasing, malformed, pieced-together site.

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.

Mismatched fonts

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.

Illegible text

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.

Color Schemes

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.

Fonts

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?

Page Layout

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.

Navigability

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.

Legible Text

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:

1. MGBD Parts and Services

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.

2. Arngren

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.

3. Dino’s Tomato Pie

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.

4. Safer Wholesale

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.

Experience a Headless Content Management System, Join Zesty.io.


Start a Sandbox Now

More from Mindshare: Content Marketing

Placeholder image

The Complete Guide to Content Modeling

Having a structured content strategy won’t just benefit your consumers; it will also help your marketing team deliver higher quality

Read Article
Placeholder image

How Much Does a Website Migration Cost?

Scoping a website migration from one CMS to another can be tricky. This guide will help you figure out how

Read Article
Placeholder image

SEO Content Writing: The 2018 Rulebook

Increase your chances that your content will be seen and shared, that it will be seen favorably by Google, and

Read Article
Placeholder image

Do not let your Marketing Website become a Frankensite

Empower your website to send data to and from other systems

Read Article
Kim Koga photo

Kim Koga

Solutions Engineer, Zesty.io

Experienced writer, editor, and solutions engineer. I love to write instructional documentation to help customers achieve their dreams. Github: https://github.com/kakoga ... Learn More

Speak with an Expert


Chat with Us

To speak with someone in sales and marketing, use the chat popup on this page. To speak with a developer, join https://chat.zesty.io

Exploring content solutions? Looking to replatform?