Sunday, April 28, 2024

404 page design: best practices and awesome examples

404 page design

The page opens with a classic 404 message before inviting users to become players and dive into a quick bit of fun. Either way, both would result in landing on this bold 404 error message. Long-time web hosting provider Kualo has turned its 404 error page into a chance for users to get stuck into a bit of interactive nostalgia.

Post navigation

Making full use of your brand’s tone of voice can turn the error message into something much more friendly and personable, which can offset the inconvenience of missing information. That’s why we’ve compiled a list of great examples that showcase the potential within a 404 page to add to a user experience rather than detract from it. You can now continue adding blocks to your design and fine-tuning them following the same process described above. You may also want to arrange your WordPress widgets in columns or use WordPress block patterns to create a custom 404 page faster. Once you’ve created a contact form, you can add it to your 404 page using the ‘Contact Form’ block.

Quick Ways to Remove Backgrounds from Signatures

The best way to add a contact form to your site is by using the WPForms plugin. It’s the best contact form plugin for WordPress and comes with a drag-and-drop form builder. Despite the name, you can use this block to show other types of products. For example, you might show products that are on sale or your top-rated items.

Dropbox - Helpful 404 page

When creating your own, try implementing informal words like “maybe” and adding questions, to help your site visitors feel as though there is a human on the other side. The fun, interactive design invites visitors to play, while momentarily taking their attention away from the fact that they didn’t reach their desired web page. We’ve all grown accustomed to freely zapping through websites and scrolling down feeds uninterrupted. When, low and behold, something goes wrong or we click on a link that doesn’t work, the subsequent “This page cannot be found” message can be more than frustrating.

Content Strategy at Work: Margot Bloomstein on Deriving Design from Content at MOO - PRINT Magazine

Content Strategy at Work: Margot Bloomstein on Deriving Design from Content at MOO.

Posted: Thu, 17 Oct 2013 07:00:00 GMT [source]

But it is fun, and it can earn you a discount on your hosting deal if you manage to score over 1,000 points. They're part of a website that a brand hopes nobody will ever find, but they need to be there in order to minimise the risk of losing potential leads when the inevitable broken link arises. Mashable is a news platform that covers everything from technology to Game of Thrones posts. Their content is varied, and tries to reach a wide group of users.

404 page design

Blog topics

Plus, you can keep the backlinks that have been linked to these pages to maintain your domain authority. Other than that, we also strongly suggest tracking and redirecting 404 errors. Doing this lets you find what links users failed to access, and you can redirect them to the most relevant pages. Now, if you add /404 to the end of your website’s domain name, you’ll see the custom 404 page in action. The options you see may vary depending on the block you’ve selected.

Best Background Changer Apps To Try in 2024

It can be the difference between a site visitor giving up and leaving your website, or becoming a loyal customer and fan of your brand. The more you polish individual design decisions, the better experience your users will have. The quality of error pages, including 404 pages, can say a lot about your attention to detail. Fine-crafted 404 page design is a prime indication that product creators genuinely care about their users and want to offer the best possible experience to them. “Keep it simple” is by far the most important rule to remember when building a 404 page. Just because you want to create a custom 404 page doesn’t mean you have to create something completely innovative.

404 page design

This can be particularly effective if you post time-sensitive content, like if you run a news aggregator website. You can now type in the block that you want to add to the 404 page. By default, the full site editor shows your theme’s home template. If you don’t want to publish the template right now, then click on ‘No, Close’ instead. When you are happy with how the 404 page looks, it’s time to publish it. Then, open the ‘Select a Form’ dropdown and choose your contact form from the list.

How To Design A Website (2024 Guide) – Forbes Advisor Australia - Forbes

How To Design A Website (2024 Guide) – Forbes Advisor Australia.

Posted: Wed, 05 Apr 2023 07:00:00 GMT [source]

How to Boost Customer Experience Through Strategic Social Listening

But even the users who do know what it means won’t be able to do much troubleshooting, so it’s best to keep things simple. On CodeSchool’s 404 page there’s just a single link back home. They feature a lengthy animation which could be somewhat annoying, but overall the UX is straightforward enough that visitors can solve the problem. With the MailChimp header stuck at the top of the page, it’d be hard for someone to not find their way back home. But for good measure they’ve included a large search box as well. The iconic branding of Fork CMS shines through on their 404 error page.

You can’t help but fall in love with this friendly, bike-balancing duo. Drawn in an innocent illustrative style, the figures grin from cheek-to-cheek and seem to make everything just that little bit better. This wonderful example of incorporating illustration in web design conveys a sense of familiarity and approachability, which alleviates the frustration of reaching a 404 error page. The vivid shade of red automatically indicates a warning sign, but the initial panic is balanced out by the comical “This page is eggstinct” message. Notice how they’ve left their menu bar visible at the top of the screen, making for comfortable website navigation and enabling site visitors to continue browsing. This small yet all-important section of your website design has the potential to boost your sales and urge visitors to take action.

If you run an online store, then you can easily display your most popular products by adding the Best Selling Products block to your 404 page. In this way, IMDb’s 404 page reinforces their brand while also giving visitors a fun way to explore their content. Brett Terpstra’s 404 page shows a list of posts containing keywords related to the link the visitor was trying to access when they got the 404 error.

It says that you can “try one of the links below” and only provides one link to click. We’d recommend either changing the wording around the button or providing more links to explore. So, of course, if you don’t have a 404 page, you will lose these visitors. Any site that’s been running for a while will have deleted pages and posts. A 404 page is a custom page you create on your site that’s shown whenever someone tries to access a URL on your site that no longer exists.

SeedProd allows you to create custom landing pages in WordPress (including 404 pages) without any coding. If you’re going to the trouble of creating a 404 page for your website, make sure you use brand-specific imagery in your design. Generic images or illustrations are always a dead giveaway that the page was quickly thrown together from a template. While that kind of imagery is an improvement on the default 404 error page, you’re not going to impress any of your users that way. There are a lot of great choices made by the designer of this page.

The Gumroad page doesn’t have many internal links, but it does list a feature of random products. This is a neat way to get people deeper into the site and turn a potential blunder into a sales opportunity. We can keep playing until we run out of lives, at which point a “you lost! But once again, Kualo reels us back in — promising a discount on their hosting for anyone who can score over 1,000. While many 404 pages focus on getting lost visitors back to the homepage, these landing pages use engaging website design to invite you to stick around.

No comments:

Post a Comment

Luxury Shopping in the Miami Design District

Table Of Content Atlas Plaza Apartment listings near you Brickell City Centre DALÉ TALKS: Reading Surrealism: The Life and Work of Leonora C...