Table Of Content
However, you’ll typically be able to change the background color, text color, and change the font size. You’ll now see a list of all the templates that make up your block-based theme, such as the search results page and archive page. After publishing your custom 404 page, it’s a good idea to track how people are engaging with that page. This allows you to see what’s working and what isn’t working so you can fine-tune your 404 design to get more conversions and engagement. Since the button no longer links to the homepage, you’ll want to replace the ‘Back To Home’ label.
Less clutter, higher user success rates
To make this change, simply click on the ‘Nav Menu’ block in your template. You can then open the ‘Menu’ dropdown and choose any menu from the list. To replace the SeedProd logo with your own branding, simply click to select the placeholder logo in your layout. Most 404 templates already have some blocks, which are a core part of all SeedProd designs. That said, it’s a good idea to create a 404 page with your own content and branding.
Best 404 Page Design Examples
As one of the major players in the music streaming space, Spotify has a reputation to uphold with its 404 error page to keep it in line with the rest of its brand. Sometimes, opting for a much more playful and personable approach to soften the landing on a 404 page. Help Scout is all about offering a simple, personal, and powerful platform to help with your marketing duties – and its 404 page is no exception. Memes act as a communicative shorthand that can turn frustration into fun through shared experience. Internet humor hub 9GAG keeps its 404 page simple yet perfectly on brand.
Insert Link
Lego has used a familiar character for their 404 page design, helping to connect the audience to the brand and create a friendly atmosphere. Their conversational style of text is also reassuring, keeping the tone light and playful, with exclamation marks and everyday language. There’s nothing like a touch of humor to help alleviate a frustrating situation—especially when it’s done this well. Creative company Omelet has utilized the power of discreet comedy on their 404 page, all the while keeping in line with their egg-related theme.
The page allows visitors to learn more about the agency’s history as well as previous projects with a short and entertaining quiz, named P&G Trivia. The job of a 404 page is to nudge a visitor in the right direction so they can carry on with their journey without any worry. PageProof is the online proofing software leader for marketing teams and creatives. This blog is for everyone involved in creative review & approval workflows. Whether it’s the animation or the copy, everything screams Marvel.
The Best 404 Pages: 40 Examples You Need To See
For instance, your 404 page design should have a link to your homepage, some of your most popular pages, and an HTML sitemap. When designed to delight and direct users, 404 pages can transform from sources of frustration to opportunities for conversion and branding. Good UI design, a focus on user experience and a little human empathy can go a long way towards improving 404 page design. Additionally, Dropbox has made sure to add a few helpful links to help users navigate the rest of the corporate website. When you create an eCommerce website, you can either leave the default option as is, or you can customize your 404 error page. The latter gives you the opportunity to craft an enticing design that will boost your customer experience.
With an astronaut lost in space, the straightforward messaging helps the users to get back home without getting lost in a million galaxies of thoughts. Droplr is a tool to instantly capture screenshots & screen recordings that have added a touch of animation to their 404 page. Here are the best 404 page examples to get inspired from and turn the seemingly negative experience into an opportunity to engage creatively.
Link Building in 2024: What Works, What Doesn’t, and What’s Next?
Whoever is missing an error page or is using the default one spice things up with any of our free 404 error page templates. You can now set it up quickly and efficiently without breaking a single drop of sweat. A sad emoji, 404 sign and additional text explaining the situation with a back-to-homepage button is all you need. Even if you like to keep things simple and basic, you can still create a cool environment that keeps them engaged. And this also goes for error pages, always occupying their presence.
Even though the page doesn’t exist, visitors still feel like they’re on the website. They’ll have access to the header which should include a logo or navigation back to other pages on the site. Here’s a very humorous example using a fullpage background video clip taken from The IT Crowd. My only gripe is the lack of links – simply no way to get back to the main site without manually editing the address bar. Even the squirrel eventually turns to look at the screen as if it’s asking site visitors — what are you doing here? Polo delivers a laugh but keeps the user experience fluid by including an obvious “take me back home” button.
Please don't look at our new 404 page - The Guardian
Please don't look at our new 404 page.
Posted: Mon, 23 Nov 2009 08:00:00 GMT [source]
You might have seen this approach on many news websites, and even some news and magazine templates give you this option by default. Or else you can directly provide a search box or a button to take the user back to their previous page or your homepage. Use humorous web copy and/or graphics to keep visitors interested in the site.
Assuming the user might be feeling a little frustrated, simple messaging and a clear direction are all they need, and Semrush has flawlessly done that. The theme is on getting lost in space with a map alongside a dog correctly describing the current situation. A well-crafted 404 page can direct your users to take action within your page rather than leaving in disappointment. It’s a good fit for their brand and the page feels campy and fun.
So, using a cartoon by one of their artists hits the perfect tone for their 404 page. It is a perfect fit with their brand personality and the rest of the website. Its message is clear – apologizing for their error they direct people to navigate to their homepage and has a search bar as well. The attention to detail Slack has put into their error page is delightful. If you were to stumble across a 404 error in Slack, you’ll be greeted by a lush, calm grassy field. Presumably designed to offset the frustration of encountering a hiccup.
While this error page doesn’t utilize a navigational search bar to redirect users to the content they’re searching for, it achieves something else. And, when it comes to branding, it makes sense for Pixar to go in this direction. Using a character from their hit movie Inside Out, Pixar’s 404 page can alleviate some of the frustration users may feel after landing on the wrong page. With that in mind, it’s smart to create a custom 404 page that has your own branding and content. You can also help visitors find what they are looking for by adding search bars, menus, links, and other helpful content. Steve Madden’s 404 page design offers multiple options to lost visitors.
If users manage to hit the 404 page, they’re treated to a rather beautiful shot of a rainforest overlooking a river with the message “Lost in the woods? ” – playing with the brand’s purpose in a way that feels authentic to it. What helps tie this together is the search bar sitting underneath to help get website visitors back to where they might want to be with only a brief interruption. If website visitors enjoy this video, they might be inclined to click the Gimme more! Button below, which takes them through to Red Bull’s Discover page to restart their journey with renewed energy. This way, users who end up here are clearly informed that the page is missing while serving up a well-edited video of its most recent event to hold their attention.
But a small percentage of users will find themselves there regardless. It is crucial to see this as an opportunity to express your brand identity with an added touch of creativity. If done well, you can even turn this into a sales opportunity.
The purpose of a 404 page is to prevent such visitors from exiting your site immediately. Based on either your previous activity on our websites or our ongoing relationship, we will keep you updated on our products, solutions, services, company news and events. If you decide that you want to be removed from our mailing lists at any time, you can change your contact preferences by clicking here. The beautifully illustrated (and, in some cases, animated) graphics are perfect for the Marvel website. Since this brand is known for its wry sense of humor, I was expecting to find this sort of 404 page on the site. It’s just as silly as the ads the company runs for its insurance products.
No comments:
Post a Comment