Basic structure of a web page: Design, Elements and Parts [+ Wireframes]


Having an optimal structure of a web page is very important for its design and subsequent conversion since it will help us achieve the objectives we want to achieve with the web.

Right now you will be saying: ” Vale Bego, to make a design of the structure of my website I will need a menu, a body, a footer, and little else .”

But no, if all the pages in this world are the same and are not designed for one that the user has a good experience, how do we intend our website to be a competitive advantage in our business?

For this reason, today I want to show you the hierarchical structure that your website should have, as well as its parts and elements to make your sales funnels and strategies turn yes or yes.

To do this, I designed some wireframes with the basic structure of the most common pages a website has.

I have made these sketches for the computer version, but you must take into account the term “MOBILE FIRST” since you have to design first for mobile, but I thought that for the average user it would be easier to understand the article with the sketch made in this version.

The general structure of a Home or Home page

You already know that the home page is the most important and the first one that the user will see when performing a direct search.

On this page, what we must show with the naked eye is going to be our value proposition where we explain what we do and convey why they should hire us in a single sentence to either hire us or enter the funnel we created with our CTA or call to action.

As I do not want to tell you a lot, I prefer that you see the example of the structure design in the wireframe that I created, it could vary depending on the type of website and business. In this case, I have focused on a personal brand home.

Structure of a Services landing

Following the example of personal branding, I will show you the structure of a services page (which could also be useful for a company).

As I will repeat throughout the article, this is an example of the structure of the page that I invented in my head, but each website is a world, so they will all be different.

The basic elements that you should have are:

  • Photograph of the person or company logo.
  • Benefits provided by our service or product.
  • Visual content that makes us see what we are selling.
  • Testimonials or success stories.
  • Calls to action or buttons.
  • Frequent questions.
  • Etc.

Structure of a Landing or Squeeze Page landing

A squeeze page is a page where it is intended to capture an email to perform email marketing actions, so we must call attention to the user so that he feels the need to leave his email and receive what we are giving or promoting.

We must make it tempting and have a good strategy to retain the subscriber and not unsubscribe as soon as you receive the first email.

The elements that this collection page will contain are:

  • Flashy title appealing to the advantage.
  • Call to action, form or button.
  • Benefits of leaving the email or obtaining the product, info product or gift that we are offering.
  • Testimonials or success stories.
  • Form or button for those who have scrolled on the page.

Structure of a page with an Offer

Instead of focusing on a typical product offer that we see in e-commerce where we simply put up an “Offer” sign, I wanted to focus on an OTO ( One Time Offer ), in which something unique is offered by Limited time

An OTO will be a special offer that cannot be acquired later, so the “now or never” is transmitted.

This offer can be made in the cart using a box with a complimentary offer (bump offer), but I have made it in case you need to make an exclusive page for the offer.

The idea of this page is that, if you have already purchased a product, you do not have to refill your purchase data, but directly add them to what you have already taken. It is an incredible way to increase the shopping cart without investing in many efforts.

This page will need:

  • Timer indicating when the offer ends.
  • A very striking and tempting title (with purchase ultimatum) that invites you to add the product.
  • A video or image (better video) of what we are selling.
  • Button to add to cart or shopping cart.

Structure of a Product page [E-commerce]

In e-commerce, the product page is one of the most important parts of the purchase process, since if a user arrives at our product through a good SEO positioning, and the page on which it lands is horrible, it will leave.

There are many ways to design this page, and depending on the elements and type of product it will be done in one way or another, but I have focused on the basic one we would have in a WordPress.

The basic elements that you should include are these:

  • Photographs or images of the product.
  • Title, a short description, and a long description.
  • Ratings and testimonials to give credibility.
  • Anxiety reducers such as “free shipping”, “secure payment”, “guaranteed quality”, etc.
  • A video would be a bonus to add on the page, to give more confidence in the purchase of the product.
  • Use the techniques of cross-selling and up-selling or cross-selling with related products.
  • A footer with company addresses, social networks and a brief description to give credibility to the web.

Leave a Reply

Your email address will not be published. Required fields are marked *