Sometimes websites need a makeover. Whether it’s updating the content, refreshing the design, or starting from scratch, maintaining a website can sometimes take a lot of time and patience. This is where you will need a website under construction page or coming soon page to use on your website.
While a website under construction page might be only temporary, designing it well is very important for the integrity of your brand. So, get your hard hat on and your tool belt ready, because we’re going to have a look at 50 examples of website under construction and coming soon pages to inspire your own design.
But before we show you some of the best examples we've seen, you may be wondering what to write?
Once you've created a new page that will house your messaging, simply add a text box.
To keep your audience engaged — and coming back — keep messaging clear, and concise. You can also provide them with a countdown of the page launch, and frame the messaging to show that you are providing them with a new and better experience.
For more ideas on messaging, take a look below at the examples featured below.
You may be wondering if it's worth building an under construction or coming soon page for your website? The answer is yes. Below are a few benefits.
From bold and bright, to minimal and sleek. See below for some of the best under construction and coming soon pages we've seen online.
This first design by George Vasyagin is cool, calm and collected while also maintaining a sharp and sophisticated edge. With just one simple graphic element, a sleek long shadow, some clean type and a cool-toned gradient as the background, this Under Construction Page makes waiting for the completed site all too easy.
Consider experimenting with combining clean sans-serif typefaces with gentle gradient backgrounds to really hone in that sharp and professional effect.
This next design by Themetide keeps things super simple by pairing a fullscreen photograph with some bold type to create an instantly effective Under Construction Page. Using a stylish image like this example does as your background is an easy and effective way to use up space.
Don’t have access to a plethora of images? Check out this article for a list of the very best (free!) stock image sites on the web that are ready for you to use.
A good tip to keep in mind if you’re looking to replicate this Under Construction Page effect is to lower the contrast of your image or darken it a little if it has a lot of bright tones in it. This way your type will stand out a lot more against the image and your message will attract the attention it deserves.
Looking to create a design that’s a little sharper or a little more minimal? Check out this design by Inat Studio that uses flat blocks of color and thin, sharp lines to create a sleek, modern and professional design.
If you’re keen to replicate something similar to this design, be sure to pick a signature color that has enough contrast with white to ensure that your content will be legible. For example, if you executed the above design in pale grey, things could quickly turn illegible – and we definitely don’t want that.
This design by Benaissa takes the phrase “site under construction” and runs with it. By pairing the high contrast colors, yellow and black, with some subtle texturing over the type and background, this piece channels a real world construction site, but adds a little modern flair.
Consider bringing the idea of ‘construction’ back to your Under Construction Page by simply combining a few textures, a yellow/black palette, and don’t forget the buzzword phrase “Site Under Construction”.
This design by UkieWatch uses a small animation of construction workers working away above a simple countdown clock as a quick reminder of all the work that’s going on behind the scenes. The sharp and clean shapes of the graphics and type in this Under Construction Page are what keep it stylish and looking good.
Whether you’re able to source or create an animation for your Under Construction Page or perhaps just a simple illustration, sometimes that’s all that’s needed to make your design work.
Don’t want to use a plain flat color as your background? Not a fan of any particularly detailed image either? Why not have the best of both worlds by running a gaussian blur effect over an image to create a gentle effect just as this design by Tony Bogdanov has done.
Pair your new background with some light and simple typefaces to enhance the contrast between your blurred-out image and the sharp lines of the sans-serifs.
White space doesn’t always have to be white, and in the case of this design by Karma Pilots, it’s technically ‘yellow space’. Adding white space to your design means decluttering and giving each element room to ‘breathe’ to avoid feeling cluttered or cramped. This design does just that by positing the central focus point (the type) to the bottom left, and letting the rest of the space exist as functional white space.
Nobody likes an overwhelming, over cluttered or messy looking design, so consider experimenting with white space to avoid this all together.
This design by Andrew Droog pairs a super simple website structure – a flat off-white background, simple sans-serif type, and strongly aligned elements – with a bold, bright and unaligned graphic element to create a striking effect.
The use of the yellow tape in this Under Construction Page design creates a sense of the site being wrapped up and cordoned off until it’s ready. Consider getting a little playful with your imagery for your Under Construction Pages – after all, they are temporary.
This design by Tian Boon Siang shows another side of type – literally. By transforming the central piece of type with a sleek 3D effect, this Under Construction Page is given depth and tangibility. Pair it with the other 3D graphics. and the splashes of bold color and you have yourself an engaging Under Construction Page.
Play with your type and don’t forget that it doesn’t always have to be flat. You can go for the full-on 3D effect as has been done here, or you can bring a little perspective with a drop shadow, or some skewing effects. Experiment and see what works for you!
Looking for a little less polished, more organic design? Check out this design by Archetype It. This Under Construction Page uses textures, roughened imagery and some clustered graphics to create a grittier stylisation.
Have a go at clustering your elements together just as has been done here, and perhaps consider using leading lines and shapes to draw the eye in towards your clusters for maximum effect.
Bring some life and color to your images by bumping up the saturation a little just as this design by Sean Ball has done. By enhancing the image, and then complimenting it with red and blue geometric shapes and graphics, this Under Construction Page draws in attention to the main message in a sharp and effective way.
If you’re working with photos in your Under Construction Page, consider tweaking your photos’ colors with brightness, saturation, and contrast tools to boost or mute the tones in your image.
This design for ChkChkBoom presents a lively graphic with a bold statement to complement it. By clustering typographical treatments, intricate graphics and some body copy, this piece draws the eye from left to right and back again, which helps drive home the communication.
If you’re using some detailed imagery or graphics, take a leaf from the ChkChkBoom book and try to position your imagery so that it flows across the page. This will help viewers’ eyes naturally move over the page. Plus, this technique usually keeps your design looking pretty amazing.
Give your Under Construction Page design a unique spin with symbolism. This design for Bluebird App keeps things super minimal with just one graphic of a cracked bird’s egg – a symbol of rebirth and of something new, a perfect symbol for a website about to have a makeover.
Another tip to take from this example is to keep things simple. This design keeps the focus on the image by maintaining an otherwise super minimal design. After all, if your image communicates the message clear enough, you probably won’t need many more elements.
This design by W3 Layouts uses a stunning photo, a sharp monochromatic filter, and a simple countdown graphic to create an easily assemblable yet very effective construction page.
Another tip to take from this beautiful example is the way the chosen image has strong leading lines that direct the eye toward the countdown which is the main focal point of the design. Try to be intentional about your choice of images and see what they can do to boost your design’s functionality.
This design by Aaron Cavano keeps things for the most part super minimal and simple, but the real draw of this piece comes with the small peeled back corner that ‘reveals’ some of the underlying code, giving users a sneak peak into the behind the scenes action.
Don’t ever assume that minimal designs have to be boring. As you can see with this one, they can present your message in a unique visual way just as the most complicated of designs can. Experiment with blending minimalism and a unique visual message for a memorable and effective Under Construction Page.
This design by ThemeWizz uses a very muted image with heavy greys and cooler tones, but it offsets this subdued palette with a vibrant orange feature color that draws the eye immediately toward the subscribe button.
Consider using color to draw your users’ eyes toward (or away from) certain elements of your design. If you do choose to venture down this route, remember to use a feature color that has plenty of contrast against the rest of your elements otherwise you won’t be highlighting very much at all.
Do you have a logo or brand mark for your website? Why not flaunt it by placing it front and center just as this design by Nattywp does. Including your logo on your Under Construction Page is also a great way to immediately let readers know that they’re still on the right site! This design places a flat white logo and bold white type over another full screen image.
Note again that this image has been darkened to ensure that the white type and graphics stand out enough against the textured image. Always keep contrast in mind when designing your Under Construction Page – you don’t want anything lost in translation!
This sharp space-inspired design by ThemeBridge uses bold lines, bold type and a few dispersals of color to break up the monochromatic scheme. The geometric shapes and vibrant dashes of color around the logo, social media icons and navigational bar give this design a modern and trendy flair.
If you’re looking for a bit more of a modern design, take as many leafs from this book as you like. Sans-serif typefaces, geometric shapes and bold contrast are often the building blocks to trendy designs like this one.
Do you have a set finish date to your site construction? Well, flaunt that date with a large and bold countdown. This design by Clasdesign puts the focus on their countdown by using a clean, stylish typeface that is beautifully complemented by the elegant background imagery.
Scale is your friend when it comes to just about any design, particularly Under Construction Pages. Find the element of your design that you want to focus on and scale it up so that it draws attention right away.
This design by Fuelpixels pairs a beautiful coolly-filtered image, bold white type, sharp graphic elements and a luxurious white border to make a crisp, clean and stylish Under Construction Page. This design also uses a gallery to cycle background images, which is a fantastic technique for giving a few sneak peeks at upcoming content.
If you’re leaning towards a gallery of any sort for your Under Construction Page design, a good tip is to ensure all the images look cohesive and as though they belong to one brand. You can do this by coloring your images similarly with filters or effects, by framing your photos in similar ways, or by simply using photos from the same photoshoot, all of which have been done in this example.
This design by Bluminethemes is another example of an Under Construction Page that draws the eye toward the subscription button with color. Why is the subscription button so important, you ask? Well, ideally you want as many people to come and check out your new website when it’s posted as possible, and encouraging users to subscribe to a notification is the best way to help this happen.
This design also does something interesting and unique. We’ve discussed how darkening your background images helps type and graphics stand out against an image, but what this example does is it overlays a fine striped patterned texture over the image in order to darken it a little (check it out on this live demo of the design). Why not consider using a similar technique within your design?
Are you designing an Under Construction Page for a specific brand? Does that brand have a signature color? Well, you can make the most of that feature color if you take some inspiration from this design by MyThemeShop. Using a vibrant orange to highlight points of the type and illustration helps to strengthen your brand palette and create a cohesive page design.
Note as well how this design’s rocket illustration points upward, drawing the eye toward the social media icons. Always keep your eye on the ‘flow’ and the leading lines of your design.
This design by Vladuha is proof that you can include a lot of information but maintain a neat, clean, well-aligned and beautiful Under Construction Page design. By using sharp shapes, a cheerful, fresh color palette and a strong sense of alignment, this design keeps plenty of information, links, dates and numbers neatly compartmentalized.
The key to a neat layout design is a strong sense of alignment, a small color palette, sharp shapes and clean typography, and the rest is totally up to you.
Make sure that nothing is lost in translation by using big, bold type to convey your message, just as this design by Ridianur does. Pairing a striking photo with some bold type draws the eye immediately toward the central communication, which is always ideal.
Note how this example also has a simple flat white header bar that includes the contact information for the company and the brand’s logo. Not only is this information important to the Under Construction Page, but it also acts to balance out the strong image very nicely – a perfect blend of form and function.
This design by Createbrilliance keeps things very simple, with a muted and slightly blurred background image, a simple sans-serif typeface and an elegant countdown timer acts as the focal point.
A design like this is highly flexible and adaptable to just about any situation, because what makes it effective is its simplicity. This design uses a small font palette and an even smaller color palette to create a simple, elegant and sleek design. Once you master typography with your Under Construction Page, everything else will often fall into place.
This just in: black is the new black. For a stylish, sophisticated and timeless design, all you need is a sleek monochromatic palette and high contrast design just like this one via Edenpulse. This design uses a blend of serif and sans-serif to create a sophisticated and modern effect whilst still keeping things very simple.
This example also uses a very dark image in the background which is great technique to bring a little texture and depth to the design if a plain flat black background just isn’t working for you.
This design by Diego Jesús is the perfect blend of stylistic illustrations, a vibrant palette and a logically ordered page layout. This design uses graphics that complement the design of the page, with rounded corners and warm tones to create a design that is cohesive from top to bottom.
Whether you’re making your own graphics or sourcing external resources, make sure that your graphics complement the palette and style of your site as a whole, and vice versa, to avoid clashing or a jumbled-looking design.
This design by PixelHint is vibrant, enticing and stylish, thanks to the striking gradient overlay, the sharp shapes of the countdown and the clean, simple typography. This design is another example of an Under Construction Page that uses a gallery for the background image (check it out), this one fades in and out of various scenic photos to create a calming, dynamic effect.
Do you have a particular tone you want to convey with your Under Construction Page? Perhaps like this design you want to project a cool, calm and collected tone. Or maybe you want a livelier, more exciting tone. In that case you might like more action-packed images, a sharper gradient and warmer tones. Find what fits your site and run with it.
This design by John Turner keeps things for the most part very minimal – just a simple logo, bare-bones typography, and no external links or sign up pages. However, this design is made enticing by the use of the striking background image that directs the eye right toward the central information.
Always choose your imagery carefully and consider how it will enhance your design. Will it direct the eye toward the main focal point, or away from it? Will it complement my brand or confuse it?
This design by Moe Slah blends geometric shapes, striking colors and quirky illustrations to make a fun, light-hearted design that is sure to attract attention. The segmented typography, the small additions of handwritten type, the little doodles and the character all come together to make this design quirky and fun.
A sleek and sharp Under Construction Page design won’t suit every brand, and it’s important that (even though you’re designing a temporary page) you maintain and project your brand’s tone of voice.
This design by Andrey Prokopenko puts the central focus on the engaging illustration, which once again helps to guide our eye around the design as a whole, from the top corner, toward the type and around down to the footer information.
Note how this design also executes the illustration in flat white, which creates a striking contrast against the blue background and creates a sharp, modern look.
Looking for a more organic, handcrafted design? Check out this design by Mexpark that plays on the idea of sketchbooks and doodling to create a ‘sketchy’ design. This is yet another example of a design that introduces the brand’s character, except this one does it through handwritten fonts, paper-like textures and doodled illustrations.
Don’t assume that an Under Construction Page design has to be super simple, generic or flat. Introduce elements of your brand and style into your design wherever you like and tailor it to you.
This design by Doruzova takes a little bit of a different approach to Under Construction Page design. Instead of using a fullscreen image as the background and placing type over it, this design uses a fullscreen image and places the type, illustration and graphic elements within it to create a visual scene.
Consider framing your graphic elements within a photo rather than placing them over a photo to create an engaging, unique and interesting scene-like page design.
This design by Kontramax is intricately detailed, skillfully animated and totally engrossing. Check it out in action over here. The use of animated typography makes for an engaging effect that invited users to stop and stare. The narrow bar of information, links, and a countdown helps to make this page just as informative as it is engaging.
Animations are a great way to keep people on your page and encourage them to keep reading – an indispensable feat for Under Construction Pages, as you want people to know why you’re away and when you’ll be back.
We’ve seen a few gradients through this list, and with good cause. Gradients when overlaid over images can help to color your images in specific ways. This design by The Lumberjacks uses a vibrant gradient that beautifully complements the signature teal color of the type and ‘Notify Me’ button.
Consider using gradients to boost your design’s color palette and to help color your photos in specific ways. Then, match a vivid gradient with some clean and stylish type to keep things neat and professional.
This design by Wix is for the most part a simple black and white, but splashes of color are interestingly brought in through the photographs. This design keeps things bold, sharp and high contrast and draws attention toward the aforementioned cycled photographs that are displayed in the gallery (see it live in action over here).
This example also frames each photo with a simple aperture-like graphic over each photo, which helps to brand each piece and direct the eye toward each image. Consider creating a slideshow within your Under Construction Page to give viewers a hint of what they can expect when your site is finished.
This design by LeafCode channels a little vintage inspiration with it’s warm palette, stylish cursive type, and the very subtle use of textures. This design organizes its information in horizontal rows, which help divide the header, countdown, information tabs and footer in a simple and easily navigable way.
This design is a perfect example of how to blend form and function – create an easily navigable layout that informs consumers what is happening, when they can expect things to be back to normal, etc. and then spruce that layout up with a touch of vintage flair.
This design by IndoPixel uses texture as the background image, but in a little bit of a unique way. Click here to see the site live, and check out how it actually uses a YouTube video of smoke to create a subtle but engrossing effect. Top it off with super simple type and a subtle countdown and you have yourself one stunner of an Under Construction Page.
There are endless ways to use texture, imagery and multimedia to enhance your Under Construction Page design, so have a bit of a play and see what striking effects you can create.
This design by Jeremy Perez-Cruz is another stunning vintage-inspired design. The use of beautiful typography, old-school banners, warm tones and a subtle pattern as the background are what make this design charismatic and engaging.
Check out the cleverly written copy in this example, too. “This page is still fermenting” is a perfect turn of a phrase for this website that focuses on homebrewing. Design doesn’t start and end with the visuals; try to find an engaging way to write your content as well as design it for that maximum impact.
This design by Siddhant S. is whimsical and inviting, thanks to the clever construction-based design, vibrant color palette and the cheerfully written copy. The sharp and clever ‘under construction’ themed graphics also act to inform viewers of the construction at hand quickly and effectively.
Consider playing up on the idea of ‘under construction’, because not only does it make for fun and engaging graphics like this one, it also reminds users that there is a lot of work going on behind the scenes.
This design by Spiral Pixel Themes gets its message across in an instant thanks to the big and bold type. This striking type is complemented with a very subtle textured background and a logo to help brand the page.
This technique is perfect for anybody looking to create a super simple but very easily understood Under Construction Page. Do keep in mind, though, that a lot of the effectiveness of this layout relies on the sharp contrast between the black and white, so if you do pick out your own colors, keep that contrast sharp.
This design for The Diamond Restaurant takes a different approach altogether. By writing all their information out on paper by hand, then staging a warm, inviting scene, this design is made unique, personal and engaging.
On that note, see how this example has points where it says ‘click for map’ and ‘click’ to email them, etc.? You can do this with your image by using image mapping tools, like this one. You simply draw a shape over the area that contains a link, enter the URL and you’ll have a clickable image. Too easy!
This design by Kyle Anderson is typography-heavy, and thus has a strong sense of hierarchy. The highest points of hierarchy in this piece are (appropriately) “New Website Under Construction”.
For more tips on mastering typographical hierarchy check out “Why Every Design Needs Three Levels Of Typographic Hierarchy”
If you’re using a lot of type in your design like this one does, be sure to balance it out with minimal graphic elements. A complicated or heavily textured background may overwhelm the design and make it illegible.
This design for PhotoDoto sets a scene with a cluster of images and items that resemble a cluttered desktop. The central pieces of copy and type for this Under Construction Page are also cleverly bound within this desktop scene, over a notebook and an iPad screen.
Consider setting a scene for your Under Construction Page by clustering graphics, using shadows and carefully positioned elements to create a unique and engaging design.
This design by Squarespace rephrases the term ‘under construction’ to ‘getting a fresh coat of paint’ and it reinforces this with a simple, stylish set of paint symbols. This design keeps things minimal, simple, and to the point without sacrificing a professional and effective design.
Symbols are a fantastic way to introduce a little imagery or graphics into your design without overcomplicating things. Plus, symbols are widely accessible— Canva even has a plethora of them ready and waiting to be used.
This design by Matt Bowers is yet another super simple but very effective design. By simply taking a stunning scenic photo, recoloring it to bring out some yellow tones, and blurring it, he has created a stunning backdrop that perfectly complements his sharp logo and social media graphics.
Once again, contrasting sharp graphics with softer imagery, just as has been done here, is a quick, easy, and smart technique to create a sleek and sharp effect for your Under Construction Page.
This design by Alexey Shkitenkov uses playful, geometric graphics and some curved type to create an inviting and friendly Under Construction Page that makes waiting easy. By using a few drop shadows and some dimensional illustrations, this design is given depth and a very unique touch.
Consider experimenting with drop shadows and enhancing the depth of your design to give it a little dimension and a more tangible feel to it.
This design by Adriatic is another example of a stylish, monochromatic, high contrast Under Construction Page. This design, however, pairs the bold sans-serif typefaces with a more organic cursive typeface to create a unique combination.
Don’t be afraid to experiment a little with combining your typefaces in interesting ways for your Under Construction Page. For a comprehensive guide to pairing your fonts like a total pro, be sure to check this list of tips out.
This design by Annie Tang plays on the term ‘under construction’ by illustrating small characters literally building a computer screen. Not only does this whimsical illustration reinforce the idea of reconstructing a website, but it also gives viewers a small sneak peek at what designer Annie Tang’s style is and what kind of content she will deliver.
Note as well that in this example external links are placed throughout the body copy rather than via social media icon symbols as so many people do. Always keep your options open, and if you feel social media icons will over clutter your design, take a leaf from this book.
This design by Screenagers uses a sharp monochromatic palette to complement their punchy and eye-catching type. This example’s concept also does something interesting – it includes a link to a video explaining the process of building their website, and the ‘99 Reasons Why the Screenagers Website Is Not Online Yet’.
Once again, have an experiment with ideas and concepts for your Under Construction Page and see if you can develop something unique, fun, and effective to turn an Under Construction Page from an inconvenience into a pretty enjoyable experience.
Just like with any design, there’s no strict formula to designing an Under Construction Page. When embarking on your own design, consider what website you’re designing for, their brand, and what tone they are projecting to their readers.
Have you ever come across a really effective or memorable Under Construction Page design before? What element made it memorable to you? Be sure to tell us about it in the comments below!