How to Create a ‘Website Under Construction’ Page that Still Showcases Your Brand

Want to know how to turn a frustrating, inconvenient user experience into an engaging and valuable one? Here's how to create an on-brand “website under construction” page.

website under construction

Whether you’re building your first website or working on a redesign, you need a “website under construction” page to let visitors know why your site is offline. Now, while you could create a simple blank page that says “website under construction” and leave it at that, why not build a memorable, on-brand page that keeps visitors engaged and anticipating your relaunch?

A good “website under construction page” is unique and enticing, using brand identifiers and interactive elements to turn a frustrating, inconvenient user experience into an engaging and valuable one. Want to know how to create your own on-brand “website under construction” page? Let’s get started.

Common Types of Error Pages

“Website under construction” pages are just one of many types of error pages that you can create. The most common ones include:

Website Under Construction

Website Under Construction Line SceneWebsite Under Construction Line Scene

“Website under construction” pages tell visitors that your web page is still being built.

They can also be used if you redesign your website, perform planned maintenance, change domain names, or join two websites together. 

‘404′ Page (Not Found)

404 Page Illustration404 Page Illustration
404 Page Illustration404 Page Illustration

If a user mistypes a URL or clicks on a broken link, a 404 page will display. 404 error pages tell the user that the page they’re looking for doesn’t exist and will usually direct them to another page on the website.

‘403’ Page (Forbidden)

Banned Account - Landing PageBanned Account - Landing Page

A 403 page displays if a user tries to access a web page that they don’t have permission to view. So, the server recognizes the request but refuses to fulfill it. You might find this if the page is behind a sign-in page or only available to internal users.

‘410’ Page (Gone)

No Search Found Vector IllustrationNo Search Found Vector Illustration

A 410 page tells a user that the page they’re looking for no longer exists. It’ll usually redirect them to an up-to-date page version or a search option. 

‘429’ Page (Too Many Requests)

website under construction or error Illustrationwebsite under construction or error Illustration
website under construction or error Illustrationwebsite under construction or error Illustration

The 429 error code will display if a user sends too many requests within a given period. 

Custom Error Pages

A custom error page is an error page of any type customized to reflect the brand’s unique personality. Custom error pages include images, funny messages, helpful advice, redirects, and other elements that keep users engaged on the site.

How to Create a Page that Stays Authentic to Your Brand

Every website page you create should feel true to your brand identity, even under construction. A plain white page with black text isn’t likely to get people checking back, but something engaging will. Let’s discuss how you can create a “website under construction page” (or any type of error page) that stays authentic to your brand. 

1. Select a Concept

Before you start building, flesh out a concept for your page. Your concept design should align with your brand’s personality while achieving its overall purpose — communicating that your website isn’t currently available.

Let’s say you’re a sleek, sophisticated jewelry company. The design of your page should reflect this with a modern layout and simple, elegant imagery of your products. Whereas if you’re a creative gaming company, your error page might be more colorful and quirky.

Take a look at this example by Hootsuite. Their brightly-colored construction page features their iconic brand mascot and even dishes out some fun owl facts, perfectly showcasing their uplifting, playful personality.

Using a website template is one easy way to ensure all your pages convey the same image. By subscribing to Envato Elements, you can access thousands of website templates, WordPress themes, landing page templates, and more — all completely customizable.

2. Incorporate Your Current Brand Elements Consistently

According to Marq’s report, 68% of businesses say maintaining brand consistency contributed to over 10% of their revenue growth. So, crack out your brand style guidelines and create error pages considering the following elements.

Color Palette

A consistent color scheme boosts brand recognition. Use your brand’s signature color palette to help visitors identify your brand.

Brand Logo

A well-designed brand logo conveys professionalism and visual consistency. Feature your logo prominently on your error page to drive brand recognition and increase customer trust. 

Font Style

Keep your font style and typography consistent by using the same fonts throughout your website. They should be easy to read, especially for error pages, so the user understands what happened.

3. Write Engaging Content

Even the most beautifully designed page is useless if it doesn’t tell the viewer anything. Creating engaging content is a must. The following tips can help:

Catchy headline

A catchy headline draws website visitors in. Instead of bouncing after a glance, visitors are inclined to linger on your page. Plus, the more catchy your headline is, the more likely visitors will remember your website’s launch time/date and return to check you out. 

So, have fun with it! Use humor, puns, and emotive language to engage your visitors. Take a look at Flickr’s under construction for inspiration. 

Flickr maintenance page

Not only is their humorous headline memorable and on-brand, but their clever use of imagery creates a delightful viewing experience. Surprisingly, this image has become one of Flickr’s most famous photos (and the panda is an official brand mascot). 

Concise overview 

Even the most self-explanatory error messages should include a note briefly describing why the user has been directed to the page.

If your site is under construction, let visitors know when it’ll launch. If it’s undergoing scheduled maintenance, assure visitors you’ll be up and running shortly. Keep visitors informed by letting them know what you’re doing (for example, switching to a .io domain or fixing some pesky website bugs).

For other types of website error pages, such as 404 and 410 pages, briefly explain to the user why they’re seeing this error message. This can be done in just a few words — “we can’t find the page you’re looking for” or “this page doesn’t exist” are perfectly to the point.

Contact information and social media links

Be aware that when your website is undergoing maintenance, it inconveniences your website users.  

Let’s say a customer has a time-sensitive purchase or an important query they need to answer. If they can’t access your website, it can be a frustrating — and potentially relationship-damaging — visitor experience. 

Along with your email address, provide your phone number so that customers can contact you via telephone or web calling. Link to your social profiles, too, so visitors can access the latest updates and interact with your brand via your public feed or direct messages.  

Progress updates

If your site is under construction — and you know the exact launch time and date of its launch — consider using a countdown timer. Countdown timers show your progress and create excitement and anticipation around your launch. 

4. Integrate Interactive Features

Instead of creating a static error page, why not increase its value with interactive elements like animations, games, or call-to-actions?

Here’s an example by Spotify. They use a fun record animation to turn what could be an annoying experience into an entertaining one. Some handy links also help users get to where they need to go.

Spotify 404 page

Adding interactive elements is a particularly rewarding strategy for a .ai domain as it proves your commitment to embracing modern features and technologies. Subtly demonstrate that your brand isn’t like the rest; it’s innovative and exciting, drawing users back to your website after launch.

Where do you find interactive elements for your error page? Explore Envato Elements’ huge variety of customizable 404-page templates and graphics.

5. Streamline Mobile Responsiveness

A substantial amount of web traffic now comes from mobile devices. That means if your website pages aren’t accessible, you can lose out on many customers. Luckily, it’s easier than ever to create responsive, mobile-friendly error pages using website builders and plugins. You can check mobile responsiveness using online tools like BrowserStack. 

6. Optimize Analytics and Tracking

Use analytics and tracking tools like Google Analytics and Google Search Console to gather insights on user activity. Discover what keywords drive traffic, which campaigns users interact with, their location, their devices, and more. Understanding why people end up on your site can help you target it more effectively – which is very useful while it’s still under development!

7. Testing and Constant Feedback

Use A/B testing to optimize your error pages. A/B testing involves presenting two different segments of your audience with two different versions of your website page to see which one drives the most engagement and repeat visitors. Don’t forget to ask for feedback — you can link to your feedback form on your error page. 

How to Use an ‘Under Construction’ Page to Your Advantage

1. Marketing and Promotion

Your “website under construction” page lets visitors know there’s exciting work behind the scenes. So, you can use the page to market and promote your upcoming products, new features, or services. 404 pages are also a great place to direct visitors toward your best-selling products or content.

Hubspot 404 page

Plus, you can create social media brand campaigns (such as creating a branded hashtag) to build social proof and incite hype around your launch. 

2. Ongoing Updates

On your “website under construction” page, let visitors know what you’re currently building and how long it is left until completion. Or, if you don’t have a set date but have a presence on other platforms, make sure to link to them. Many people will happily follow you on social media for ongoing updates, providing you with a ready-made audience when you’re good to go.

3. Ensures a Smooth Transition

Hooray — your site is ready to launch! Follow some of these best practices to aid a smooth transition to your full site: 

  • Back up the old site if your new website is replacing it.
  • Crawl the old site so that you have a complete list of URLs.
  • Post-launch, use site diagnostic software to identify broken links, missing web pages, malfunctioning redirects, and other errors.

Let’s Create an On-Brand Under Construction Page Today!

It’s tempting to just throw together a basic “website under construction” page and forget about it. But, when designed with strategic goals, error pages can enhance your brand identity, improve recognition, and even engage and retain website visitors. Don’t forget to head to Envato Elements to browse a ton of engaging under-construction landing pages for your brand!

Related Articles

Check Your Limit