When you work with a great copywriter to produce new webpages, they don’t just send you a document with plain text. They’ll think about the layout of your pages and create copy that works well in some of the most common design elements — and they’ll suggest which elements could really make your copy sing. This makes the web design process a whole lot easier.

If you’re not sure what those design elements look like, you’re working with a copywriter who hasn’t provided design suggestions, or you’re writing your own copy and you’re looking for design inspiration, then take a look at these basic design elements. Mixing and matching these elements and interspersing them with basic text blocks and headings can take your webpages to the next level without the need for really expensive, custom graphic design. (Of course, you might benefit from that too — it depends on your industry and target audience — but I’m not a graphic designer so I’ll steer clear of that arena!)

Space-saving elements

Accordion

The accordion is very useful design element that can enable you to display a large amount of information in a small space. Accordions are really popular for FAQs but they have lots of other uses too. You might display event details in an accordion or you could describe the benefits of your product’s/service’s features.

Often, you will have a narrative or flow that you want to maintain in order to keep your target audience moving through your content. But there are also times when certain members of your target audience might need more information. By minimising the space your content takes up, you can maintain that flow while also providing the necessary extra information.

Chances are, you’ll end up using a range of space saving elements based on the type of information you’re conveying.

Accordions like this are a popular choice for FAQs, while lightboxes are popular for displaying lead magnet call-to-actions and samples. Flip cards are perfect for features and benefits and tabs are great for information that your audience might need to switch between multiple times.

Most blog posts don’t need space-saving elements. When you need to provide more information, you’ll usually just link to that information. Many webpages can benefit from these design elements though. Just don’t go overboard and use them at every opportunity. Always carefully evaluate whether one of these design elements will improve the user experience.

There are many ways to include design elements in your webpage. The most technically demanding is to create them using HTML and CSS. However, many content platforms, such as WordPress, offer much easier ways to accomplish the same thing. As an example, there are a variety of WordPress plugins that can help you add these kinds of design elements even if you have no programming skills. Page builder plugins like Elementor are perfect for this. Usually, the best way to implement design elements like these is to ask a web developer to do it for you. Or if your copywriter/content writer has relevant skills, they may be able to offer a similar service in a more cost-effective way. (For instance, I offer this kind of addon service for clients who have a WordPress website.)

Flip cards

Flip cards are fantastic for drawing attention to key information while at the same time, providing more detailed information for those who need it.

When you hover over a card, or click on it if you’re on a mobile device, it flips over.

You might use a flip card to tell your reader about the benefits or features of your offering. Or you might use it to draw attention to important or interesting information.

And, if you just need to draw attention to something without providing extra details, you can use a similar card layout without the ‘flip’ functionality.

Benefit

A short description of the benefit

Benefit

A description of what that benefit means to your reader

Feature

You might use this section to describe a feature of your offering

Feature

You might describe how the feature benefits your reader

Key info

You can include an image or icon, heading and body text and align them in different ways

Or you can mix and match the elements to include just the information you need to display

Tabs

Tabs are a fantastic design option if you need to display several categories of information and you know your target audiences either need:

  • different sections of information; or
  • to be able to quickly navigate back and forth between each section.
  • Basic
  • Nested tabs
  • Exotic combinations

You can display basic text and images inside tabs. And you can include as much, or as little, content as your target audience requires without negatively affecting the design.

If basic text and images isn’t right for your needs, you can nest tabs inside tabbed layouts.

  • Tab 1
  • Tab 2
  • Tab 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, neque qui velit. Magni dolorum quidem ipsam eligendi, totam, facilis laudantium cum accusamus ullam voluptatibus commodi numquam, error, est. Ea, consequatur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, neque qui velit. Magni dolorum quidem ipsam eligendi, totam, facilis laudantium cum accusamus ullam voluptatibus commodi numquam, error, est. Ea, consequatur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, neque qui velit. Magni dolorum quidem ipsam eligendi, totam, facilis laudantium cum accusamus ullam voluptatibus commodi numquam, error, est. Ea, consequatur.

You can even include all sorts of more exotic content types. As just one example, you could include two pricing tables with a toggle.

Monthly
Annual

Basic package

A tagline here.
$99 / month
  • Unlimited calls
  • Free hosting
  • 500 MB of storage space
  • 500 MB Bandwidth
  • 24/7 support

Pro package

A tagline here.
$249 / month
  • Unlimited calls
  • Free hosting
  • 2 GB of storage space
  • 2 GB Bandwidth
  • 24/7 support

Basic package

A tagline here.
$999 $1188 / Year
  • Unlimited calls
  • Free hosting
  • 500 MB of storage space
  • 500 MB Bandwidth
  • 24/7 support

Pro package

A tagline here.
$2499 $2988 / Year
  • Unlimited calls
  • Free hosting
  • 2 GB of storage space
  • 2 GB Bandwidth
  • 24/7 support

A lightbox is another great way to give your target audience access to more information without taking up more space on the page. Maybe you want to display a map with directions to your shop. Or maybe you want to present a sample of your prize-winning architectural designs. Or maybe you define a term without interrupting the flow of your argument. Lightboxes can allow you to do all this and more.

Probably the most common use for a lightbox is to deliver a popup that offers a lead magnet in exchange for an email address. This kind of lightbox usually pops up automatically after a certain amount of time or when you leave the page. But lightboxes can also be actived with a click, as is the case with the one below (click the image of the mouse).

Other useful design elements

Features list

A features list is a popular way to, as the name suggests, display the features of a product. It can also be used to describe a service’s inclusions, illustrate a timeline or list pretty much any other kind of information you can think of.

This design element doesn’t usually save space, but it is a valuable way to layout important information that you want your target audience to notice and remember.

  • Features

    A features list is most commonly used to list a product’s features

  • Inclusions

    This kind of list is also useful for displaying a service’s inclusions.

  • Timeline

    A features list can be used to display related information like events or dates.

  • Not a space-saver

    This kind of design element draws attention to information but doesn’t usually save space.

Price table

If you’re selling something on your page, a pricing table could be exactly what you need. It probably won’t save any space, but this layout can really help prospects find the information they need to decide to part with their hard-earned cash.

Monthly
Annual

Basic package

A tagline here.
$99 / month
  • Unlimited calls
  • Free hosting
  • 500 MB of storage space
  • 500 MB Bandwidth
  • 24/7 support

Pro package

A tagline here.
$249 / month
  • Unlimited calls
  • Free hosting
  • 2 GB of storage space
  • 2 GB Bandwidth
  • 24/7 support

Basic package

A tagline here.
$999 $1188 / Year
  • Unlimited calls
  • Free hosting
  • 500 MB of storage space
  • 500 MB Bandwidth
  • 24/7 support

Pro package

A tagline here.
$2499 $2988 / Year
  • Unlimited calls
  • Free hosting
  • 2 GB of storage space
  • 2 GB Bandwidth
  • 24/7 support

What now?

Once you’ve chosen your desired design elements, you can either implement them yourself (using a page builder plugin like Elementor if you’ve got a WordPress website, or the equivalent if your website uses a different platform) or you can outsource your webpage’s design and/or development.

If you’re outsourcing either part of the process, you’ve got two options:

  1. You can hire a professional web designer and/or developer. This can be an expensive option but will give you the best results if you’re willing to invest what it takes to hire a quality service provider.
  2. If your copywriter has design experience, you can ask them to get your page up and running. Unless your copywriter is also a highly experienced designer and/or developer, you’re unlikely to get the same results as you would if you were to hire a professional that specialises in web design or development. However, you can still get pretty decent results this way and it can save you money — because your copywriter has less design/development experience and because it saves time if you write the copy and then create the page as well. If you’re really lucky, your copywriter might even be able to set up your whole site if you’re creating a new one. Usually such a site will be designed in such a way as to allow you to make updates yourself when required. The disadvantage of this is that your copywriter probably won’t want to enter into a maintenance contract so you’ll probably have to handle that side of things yourself.

If you’re reading this and you’ve purchased copy from me, I do offer WordPress web design services. If you’re interested in having me design/develop your new page/s, just get in touch — you know how to reach me 😀.