Web Development
What we will cover
Once you have worked out all the content required, a key step before we begin the design is choosing the right template to bring our website architecture to life.
Here’s a guide of the kinds of templates you would expect to see on a website, as well as link to a more detailed page on how you might expect to see that content laid out using best practice.
The kind of templates you can expect to see on a website
When thinking about how to create a wireframe for a website you first need to understand the kind of parameters you need to operate within, we have two articles to explain first the kinds of templates you may bracket your content into, and then the component parts you might expect to use.
First, let’s dive in on some of the templates you will expect to see…
Homepage Template:
The homepage serves as the virtual front door of your website. Users can expect a snapshot of your brand’s identity, a brief introduction to your services or products, and clear navigation options to explore further.
It often features eye-catching visuals, a concise value proposition, and a call-to-action encouraging users to dive deeper into your website’s content.
Explore a detailed layout of a homepage template.
Landing Page Template:
If you don’t have an Ecommerce site then a Landing page is a page that sells your products and services. Along with general information pages, these are the most common templates you will need to create a wireframe for your website.
They are also commonly used as the end-point for advertising, and because of this, tend to have a specific recipe for how they are constructed, from understanding the user’s needs to educating them about you and then encouraging them to enquire.
Landing pages are laser-focused on a specific call-to-action. Visitors can anticipate a concise presentation of the offer, benefits, USPs of the organisation and ideally a testimonial or two. The design guides users towards the main action you want them to take, whether it’s making a purchase, signing up, or downloading a resource.
Explore a detailed layout of a landing page template.
Product/Service Page Template:
Onto the Services/Products page, visitors can expect similar content to a landing page, however this template is part of an ecommerce structure, so the call to action is a buy button.
When considering this within your wireframe for a website stick to a simple layout and don’t over complicate, these templates are highly standardised across the web.
As an ecommerce page it will also need a checkout process, cart and correct terms of sale legal info.
Explore a detailed layout of a Services/Product page template.
Location Page Template:
On a Location page, users can expect to find information about a physical business location. This could include an embedded map, address, directions, parking information, and possibly nearby landmarks. It’s particularly useful for businesses with brick-and-mortar establishments, and those looking to be visible for localised search terms.
In our experience people often struggle with these templates when working out how to create a wireframe for their website because they have locations they may wish to be visible for in search, however no physical location there. In these instances we suggest a similar page that comes from the angle of “locations we serve”.
Explore a detailed layout of a Location page template.
Category/Archive Page Template:
Most organisations have more than one service, location or product. So there is normally also a requirement for an archive/category page to group these together.
This is often a grid of cards with the individual page name (and perhaps an image) and button to click through to it. With ecommerce sites category pages are particularly important for keyword optimisation as it gives the user lots of choice when they land.
Explore a detailed layout of a Category/Archive page template.
Case study/Portfolio Page Template:
This template showcases your best work or projects, the big difference between this and a service/product page is that the project is being told from the customers angle and has already happened – which builds trust with potential customers.
Visitors can anticipate an engaging story of the clients problems and how you overcame them, complete with images, descriptions, project details, and ideally client testimonials.
This template is key for those who now understand what you do, but want to see if you can prove it. Having compelling testimonials and stats is key, so prepare to invest time and energy in getting back in touch with clients and digging into the data.
Explore a detailed layout of a Case study/Portfolio page template.
Blog/News Template:
In the Blog/News section, visitors will find a collection of insightful articles, news updates, or informative posts. Each entry will commonly include a headline, featured image, the main content, publication date, and possibly author information.
Often treated as a nice to have or something that doesn’t get prioritised, from a keywords perspective an active blog is a transformative tool to rising up the Google rankings.
Explore a detailed layout of a Blog/News page template.
Information/Contact Us Page Template:
The above few templates will cover most of the kinds of interactions you will have on the web. However some content just doesn’t fit that structure, most websites will have an about page or section, some terms and conditions and a contact page.
Most of these are long-form text with some images and occasionally something more fancy so we haven’t visualised one of those. On a Contact page, users can expect to find essential details to get in touch with your business, and a user-friendly contact form.
Explore a detailed layout of a contact page template.
Subscription/Membership Page Template:
The moment an organisation begins to engage with creating a content strategy, they begin to nurture a digital community. Often this includes communicating directly with the user via a newsletter or forum, or asking them to sign up to receive notifications on a platform like YouTube.
Often overlooked in the website wireframing process it’s a space where users can explore how they can engage more deeply with your values.
For Subscription/Membership pages, users can expect GDPR compliant information about the available subscription or membership plans, including benefits, features, pricing, how to opt-out and payment options.
Explore a detailed layout of an Subscription/Membership page template.
Event Template:
Some organisations fuse the digital and personal world by creating events for their potential customers. These events often share expertise or stories from current clients or perhaps just meet to discuss shared values.
When considering how to create a wireframe for a website an Event page should be used for where this journey starts, so visitors will expect to find detailed information about a specific upcoming event, dates, schedules, speakers, and registration details.
Events are often either priced or limited by capacity so visitors will also expect e-commerce functionality and email follow-up for it to feel legitimate.
Explore a detailed layout of an Event page template.
Sitemap Template:
The Sitemap page provides an overview of your website’s structure, giving users and robots a hierarchical view of all the pages and sections available.
Expect to see a well-organized list of links that help users navigate through your content. Although you could argue this content belongs in a a standard information page, we have included this separately because of its important role with search engines.
Explore a detailed layout of an Sitemap page template.
How to use templates to build a website?
Now that you have the above templates as a steer, you can add them to your information architecture. By labelling your cards or grouping them you will soon see how many templates are required for your website project.
This is valuable because if you are about to engage with an agency to build your website, then they will likely be pricing by how many different templates there are and the functionality required within them.
The above links provide structured sections for content, from headlines to calls-to-action. Feel free to follow the template’s layout to organize your thoughts, and help guide you to start drafting copy or drawing out wireframes. Then it’s over to someone to start the design of the site.
It is the designer’s job to look at your business through the lens of each template, they will adapt the template to match your brand’s style and messaging, so make sure it’s up to scratch.
Meanwhile, unless you have a copywriter budgeted, it’s time for you to think about the written content that needs to be created – images and video will need to be considered too.
The benefit of a website wireframe template
The above visuals offer structured layouts, guiding you through the content creation process. They provide designated spaces for headlines, body text, and calls-to-action, ensuring a well-organized presentation.
Website templates are not just about design; they play a pivotal role in shaping content placement from the perspective of the user. Someone has already done all of the testing to understand that a user wants to understand the service, the process and then see a testimonial as part fo their individual checklist for buying.
How to write content for the website?
Creating compelling website content revolves around understanding your audience and delivering value.
If you have completed some User research, you should have an idea of your target audience’s needs, interests, and pain points.
Using the templates you can begin to craft a clear and concise message that fits the layout.
Consider the tone of voice required for each template, for example, when writing copy for your landing pages, focus on highlighting the benefits of your products or services.
When writing a case study, tell the customer’s story. When writing a blog, be curious with your language, and share your thinking and exploration.
Understanding the content parts of the template
We hope that’s helped with how to create a wireframe for a website, now you have your architecture and templates to delve into, you may have noticed that the templates are built of the same parts. Many will have a hero area at the top and a Call to action form at the bottom.
This is much like the components of a car that create a consistent experience for the user you can either build or erode their confidence in you by creating user patterns they are expecting to see. Get into a car with the handbrake on the roof and the indicators in the footwell and we all begin to feel concerned.
These standardised content blocks have been carefully designed and serve as the building blocks for presenting key details such as introductions, services, testimonials, and contact information.
Just as a car’s engine, wheels, and chassis are designed to work seamlessly together, these content elements work cohesively within templates, allowing for a consistent user experience and efficient navigation.
It is worth exploring the following article that explains how these content parts are normally constructed, with some examples so you can visualise in detail how these content parts will look.
So, before a designer has touched a canvas, we are now able to visualise from the top level card sort down to the granular detail of the content.
This exercise will make you ask questions you didn’t realise needed answering that almost certainly would’ve popped up as expensive design or development revisions further down the line.
Do you know anyone who may be interested in this project?
Click to share:
