Search MailerLite
Start typing to search

No results

Megan · 15 min read · Tips and resources · May 20, 2020

The key elements of a well-structured website

A job well-done is when visitors come to your website and find exactly what they’re looking for while you keep them engaged and guide them towards the desired goal.

You can accomplish this by using a variety of website elements that give your site structure. Instead of building a website and adding content as you go, think about what you want your visitors to do first and structure your site accordingly. 

Website elements go beyond design best practices and include things like how to write effective text elements, picking images that enhance the user experience, installing the best plugins, why you need an About page, and much more. Let’s do a virtual high-five and discuss all the website elements that can help you deliver a top-notch experience. *high fives*

The answer: Fast, very fast. Actually, they scan your page, which is why you need that 1 persuasive element that catches their attention. Let me explain with a hypothetical example.

Look down. Back up. Where are you? You’re on holiday in Italy (exactly, with the man your man could smell like). The sun is burning on your face, the smell of freshly baked pizza lingers in the air and your stomach starts to rumble. After wandering the most beautiful picturesque streets, you’re now standing in this cozy “piazza”.

Restaurants in Italy

There are around 10 restaurants to choose from, all looking cute and selling that same authentic Italian pizza. So which one is it gonna be? You probably won’t investigate each one, but rather scan and make your decision based on a feeling, the price, atmosphere—whatever it may be.

Alright, let’s snap back to reality before we get lost in pizza daydreaming.

The point is, your website visitors do the same thing when making decisions. They quickly scan your website to see if your content speaks to them. If you sell vegan pizzas, that could be your Unique Selling Proposition (USP). Same as having the widest assortment or the cheapest price in the street.

You need that 1 persuasive element and make this directly visible when people enter your website. Potential customers can then decide whether your offer is interesting for them and if they want to keep scrolling to learn more.

Before writing any content, decide on your USP. Then craft your story using as little words as possible. How can you get your message across using only the most relevant information? 

When crafting your web text, ask yourself:

  • What makes my product or service unique?

  • Why do people need it?

  • What questions do website visitors have that I can answer?

  • What’s the goal (conversion)?

Once you have this clear, we can continue explaining how to communicate this information on your actual website, using the 8 most important website design elements.

The 8 key website elements that help your visitors

Is it time to refine the story you created above? Since people mostly scan your web content, it’s important you keep your text short, to the point and easy to read. 

For your homepage text, make sure to:

  • Focus on the customer and their benefits

  • Talk to them directly by using “you”

  • Pick simple words that everyone understands

  • Cut out all unnecessary words

  • Use the active tense

You can use a tool like Readable to check your text’s readability. The easier it is to digest, the better. Even if you’re a fervent writer, it’s better to keep your beautifully written yet complex texts for blog posts, books or essays, not your homepage.

To make text elements more scannable, you can:

  • Structure text with headings

  • Use different font sizes

  • Transform text in bulleted lists

  • Write short paragraphs and sentences

  • Add highlights, or mark words in bold, italic or underline them

This will leave a great first impression with potential customers and should be implemented on your other pages as well, not just the homepage.

We’re excited about the website from coffee subscription service, Dript. Their homepage is fun, easy to digest and tells you everything you need to know. By finding creative ways to show information, like the solid and stoked subscription images, you stay engaged as you scroll.

Drink dript website example

Each landing page should have clear call to action elements. The CTA will vary, as each page has a different purpose. On a signup page, you want people to create an account, whereas on a product page you want people to add items to their basket.

A successful website has 1 call to action per landing page and uses signup forms and pop-ups wisely.

Pop-ups are great for generating leads and building your email list. But they only work when used correctly, otherwise, they can have the opposite effect. In this blog post, we show 7 examples of pop-ups gone wrong (and what should have been done instead).

In our ultimate guide on CTAs, we’ll talk more about how to craft the perfect call to action text.

A good website knows how to balance text with images. You need both but in the right amount.

When creating new pages for the web, pay attention to how much text you want to communicate. If it’s a lot, think about how you can present it so the reader stays interested. 

  • Use easy-to-read typography

  • Distinguish between paragraphs with different font sizes

  • Work with lists, tables for diverse content formats

  • See what text can also be communicated through images

  • Add white space to give text room to breathe

Images should be functional, have a purpose and tell their own story. Just from looking at them, a reader should be able to tell what the page is about. When it comes to dividers, they should add structure or help the reader navigate—not only serve as visual decoration.

Mindvalley is a great example. Even if you wouldn’t read any of the homepage text, you’d still understand their product is about people, videos, courses, mentors and growth.

Mindvalley website element example

Your color scheme communicates your message too. Color theory is a real thing and can help your marketing message

Most websites stick to a monochromatic color palette using 2-3 versions of 1 color. This can be combined with a contrasting color. When you use minimal colors, you can design CTA buttons in a color that pops and catches the reader’s eye immediately.

Erykah Badu’s website is a great example of minimalism combined with contrasting colors. It’s calming for the eye and you are immediately drawn to the web elements that matter.

Erykah Badu website example

Good user experience means that your web pages are easy to digest, clear to read and quick to understand. One glance at your web design should give the reader an idea of the topics and mood you want to convey.

Talking about picture elements, make sure all your imagery is responsive and automatically resized to fit any screen size. If a user views your images on their smartphone, they should see everything correctly and in high-quality as well. When using a builder like MailerLite’s website builder, your design is automatically responsive.

When you publish a page, double-check it on your smartphone or tablet. Responsive images stack on top of each other on smaller screens, which makes your layout different. Make sure the text and images go well together, even when their order is different. 

Below you can see how the website of gratitude journal app Happyfeed changes depending on what device you open it on. When the 3-column element is opened on a mobile device, the images and text are automatically stacked below each other.

Happyfeed website screenshot

A navigation bar is a crucial element that helps people navigate and find things with ease, therefore: this website element should be curated with care.

Rules for creating a great navigation bar:

  • Less is more, 5-10 menu items is an optimal range

  • Make the items clear to see (use a solid background if the menu is fixed and scrolls along)

  • Use titles that make it clear what page will be shown

  • Keep the navigation menu consistent throughout

  • Add shadow to create depth and make the bar stand out more

  • Highlight the page the reader is currently on (underline, bold, different text/background color)

  • Decide on a vertical or horizontal menu bar

  • Optional: Use icons

When you feel lost in menu items, it helps to draw a tree-like structure. Jot down all your pages and see how they relate and can be best categorized. 

Khan Academy keeps it simple, though they offer a great amount of courses. This first becomes visible upon clicking the Courses menu item.

Khan Academy website example

Let’s end with a quick case study

Using the website of one of our email marketing customers, Estonian record store Bitt Me.

👍 The contrasting navigation bar clearly shows on what page the reader is and is designed in the same playful style as the actual record store. 

👎 The menu itself is a bit too long. Things like Cart and Checkout can be left out, as people will click the shopping cart to find this information. The menu item named Week shows new releases, therefore it’s better to title it exactly that. The last item, Biit Me Record Store, is their About page and could also be shortened to be named About.

Bitt Me website example

Your homepage, features, pricing and signup pages will probably attract far more visitors than your about page, but that doesn’t mean this page isn’t important.

Your about page tells readers who you are, which is especially important for new businesses. Here’s where you can establish trust and authenticity. Tell readers how your business idea came about, share real pictures of yourself and your team, and add testimonials from happy customers.

We love this simple, yet creative About page from Dutch fashion store Patta. They show that when you use interesting imagery, minimal web design doesn’t need to be boring.

Patta website example

Like the about page, your contact page is essential too. Make it easy for people to contact you, whether that’s through a simple contact form, email, phone number or on social media.

Even when you don’t have a support team to answer all inquiries, you’ll need to display the contact information clearly on your website. If you don’t, people get suspicious, which will hurt your credibility.

If you lack the resources to quickly answer incoming messages, you can mention this on the page, set up an automatic reply email workflow or add a success message to your signup form.

“Range” author David Epstein notifies readers up front that he’s overwhelmed with messages (not so surprisingly, it’s a great book!).

David Epstein website example

You can also lower the number of incoming requests by creating an FAQ page where the most common questions are already answered. An expandable element helps to keep this information neatly organized. Like on lifestyle and cute-family-overload blog Love Taza.

Love Taza FAQ website element example

If you have a large community, you can even think of a separate support center where different topics are explained and people can browse through questions. Below you see how manifestation expert Lacy Phillips does this on her community FAQ page.

To be magnetic community support example

Now that you’ve put all that effort into creating an effective website using all the essential web elements, we need to talk Search Engine Optimization. It’s important to rank your website because that’s how people find you organically on Google.

In short, research keywords that describe what your website is about. Then write texts around these topics that add value for customers. For the longer answer, head over to our guide to doing basic SEO for your website, where we’ll explain the topic in clear language so you know exactly how to grow your website and get people to come over.

8 must-have web design elements for a good website
  1. Write short, easy to read, effective and if needed, persuasive text

  2. Have a clear call to action on each web page

  3. Make your images and text complement each other

  4. Use responsive design that’ll adjust to every screen size

  5. Carefully select the navigation menu items

  6. Create trust and authenticity on your About page

  7. Let people know how to contact you

  8. Optimize your texts so your website gets traction

Comment below with what web element you’re struggling with to get right on your website. We’re here to help!

Megan de Graaf

I’m Megan, Senior Content Writer at The Remote Company. Ever since I started working remotely, I pick my homes depending on the seasons: Europe during spring and summer, NYC for autumn, and winter escapes in Mexico.