4 Web Page Design Elements to Make Your Page Pop

4 Web Page Design Elements to Make Your Page Pop

Creating an effective website involves the strategic planning of design elements. This consists of more than using colourful images or adding a video: everything from the layout to how to get users to continue scrolling needs to be planned. In this article, we outline some major design elements that look great and add value to your website.

1. Implement Typographic Hierarchy

Typographic hierarchy is the practice of structuring text or data to emphasize important information. This is a common practice used on websites used to ensure critical information is drawing the needed attention.

For example, the Cognitive & Interpersonal Therapy Centre (CITC) works closely with individuals struggling with anxiety, depression, and other mental illnesses. As you can see in the image below, their header text uses a typographic hierarchy. The main goal of the CITC is to help individuals manage their mental illnesses, so the first and largest text immediately offers this added value.

With the smaller text, we elaborate on how CITC helps people manage and reduce stress. This order allows us to draw attention to major points, then transitions them into reading the additional related text.

2. Subtle Animations

Subtle animations are a great way to be creative while catching a user’s attention. Now, before elaborating, let’s be clear on what a subtle animation is: subtle animations are small movements applied to design aspects of the website. This could be as large as using a video in your header, or as small as having icons bounce up and down.

Another example is having your copy be “pulled” onto the screen so it appears as users scroll. Either way, subtle animations should be applied strategically to essential pieces of content.

The purpose of subtle animations is to capitalize on the innate need for the human eye to focus on moving options. We are naturally built to be drawn to moving objects in our peripherals. Due to this, animations not only draw attention but also entice people to continue scrolling!

This is a crucial part of ensuring your page flows and that people are viewing the valuable content. However, there is a downfall to subtle animations: depending on the animation type, and how many are used per page, animations can slow your site’s load speed. This can thereby affect your bounce rate and overall SEO if not executed properly.

3. Emphasize Text & Imagery With White Space

The most underappreciated design technique is the utilization of white space. A common misconception is that a good website has pages that are filled with an endless array of images and limitless copy. However, this often leads to overwhelming and overcrowded websites.

Instead, the best means is to tactfully integrate the white space to draw a user’s attention to important sections.

For example, if you are listing your company's values, you don’t want to crowd the text with images. By doing so, users will have a difficult time focusing on the values, and therefore be less likely to actually read them.

As you can see in the following image, Marathon Insurance Group implements this strategy effectively on their page. Rather than having a full banner image crammed with certifications, they minimized the imagery in an artistic way. Now, the user’s eye is immediately drawn to the text, then the certifications. Once they’ve seen the certifications, the shape of the image points them down the page to continue their scrolling journey.

4. Use A Prominent Colour Scheme

The colour scheme of your website has a significant impact on its visual appeal due to three primary reasons. The first is that it aligns with your brand. This is important to uphold branding and thereby improve your brand recognition and brand recall.

The second reason relates to the impact different colours have on users’ emotional responses. This is a practice that has been implemented in marketing following further research. The psychology of colours elaborates that colours such as blue will generate a calming response, whereas green is perceived as natural and healthy. Or if you want to establish a positive website, you wouldn’t want black to be a prominent part of your colour scheme.

Finally, your colour scheme will build off of the above points. On your website, ensure that text or buttons use colours that catch people's eyes. This could be as simple as black text on a white background, or as complex as implementing primary colours into your call-to-action buttons.

As seen below, Sigma Container Corporation was able to use its own brand colour to accent key points. Most notably, they used their shades of red as colour accents for major selling points, icons, and buttons to draw attention!

Planning for a high-value website can be difficult without the right guidance. Due to this, we at TechWyse are committed to educating companies on the ever-growing website best practices. By considering the above elements, you can tactfully assess your website and make informed decisions to improve it. Do you need additional support to make your website POP? Contact TechWyse today to learn more about our proven website design services.

It's a competitive market. Contact us to learn how you can stand out from the crowd.

Read Similar Blogs

Post a Comment

16 Comments

  • avatar

    “Useful post” Courtney if we use good tips for making our website POP by implementing small things to the site.

  • avatar

    It is certainly valuable to include in your website design elements that “pop”. However, it can also detract from the page’s purpose. Each element chosen needs to help enhance the content, not take away from it. It is a great idea to use these elements, as long as you’re careful.

  • avatar

    Hi Courtney, nice tips for making the website effective by implementing simple things like simple design, color combination, etc.

  • avatar

    Good article tips and tricks are always welcome, I try to learn new things all the time. You never know when you will find just the nugget you need to make a good site better.

  • avatar

    These are excellent tips, hope people take heed. The main thing one must remember is to keep it SIMPLE. If there’s too much stuff on one page, people don’t know what to focus on and may leave the site entirely.
    Also, remember to avoid Flash. It makes sites slow and can cause problems like crashing.

  • avatar

    I love all of your great tips lisa! Websites that look old and outdated always give an impression that the owners don’t care much about their digital marketing. Also, mobile versions of websites are completely necessary in today’s world because everyone views websites on their smartphones!

  • avatar

    Some very useful tips on web design. I think the color scheme is often dictated by a company’s existing color pallet from their print media.
    I think the quick load is essential as you point out. Please none of those annoying ‘Loading’ message before playing some irrelevant video. Get to the point.

  • avatar
    BlackSolaris 

    on 

    Most of the people fail on the color schemes they want for the design and also overload it details, when most of the time it’s better to just use a simple and elegant website which can be used on the most efficient way possible.

  • avatar

    This is where my love for WordPress really pays off! Updating your site is so much easier when using a CSM as opposed to custom HTML. You get to see and test the new theme before making the conversion, making the decision to upgrade your site that much easier. For me, it was simply a matter of going thru a checklist of requirements, buying a theme that met those needs and then making a few minor tweaks. WordPress theme designers are the best!

  • avatar

    I agree with making sure your site elements load quickly. I haven’t even though about how my site looks on mobile. This article placed me in the right direction of what I need to work on, a mobile site.

  • avatar

    I agree with everything that Lisa mentioned but I would like to add to it as well. You should also fill out the descriptions for the pictures that you post so that the reader has a better understanding of the meaning behind the picture and also you should post videos relating to your content. Site visitors love videos, plus it keeps them on your webpage longer 😉

  • avatar

    Thanks for the useful tip..

  • avatar

    They should be big enough for readers to understand, but small enough not to be annoying! 😉 And be sure to use HTML code tags like H1, H2, H3, etc for the sizes.

  • avatar

    These tips are great! I agree with all of them. I especially like the tip about using whitespace on pages. I tend to be more focused on websites that have whitespace because the text is more legible. There’s nothing more frustrating than coming across a website with loud colors. It can be distracting and it takes away from the site’s content. Thank you for the tips! I am right on board with you.

  • avatar

    I find these tips very useful. I had one question: How can I test if my website will load quickly on mobile sites?

  • avatar
    vida_llevares 

    on 

    Thank you for your very helpful tips.
    Just a quick question. How big should website fonts be? Any tips?

Ready To Rule The First Page of Google?

Contact us for an exclusive 20-minute assessment & strategy discussion. Fill out the form, and we will get back to you right away!

What Our Clients Have To Say

L
Luciano Zeppieri
S
Sharon Tierney
S
Sheena Owen
A
Andrea Bodi - Lab Works
D
Dr. Philip Solomon MD