=====================================================
As a platform that values "Lambo not Honda" UI/UX quality, we strive to provide an exceptional user experience by eliminating dead ends and broken links. In this wiki page, we will explore the design of a custom 404 page that aligns with our brand identity and provides valuable information to users.
Why Custom 404 Pages Matter
By default, web browsers display a generic 404 error message when a requested resource is not found. However, this approach can lead to frustration and abandonment of the platform. A custom 404 page offers an opportunity to provide context, guide users back on track, and maintain a consistent user experience.
Design Principles
Our custom 404 page should reflect the Apiary brand's personality while providing essential information to users. Here are some key design principles:
- Warm copy: Use engaging and informative content that acknowledges the user's mistake and offers solutions.
- Link to home, search, and recent pages: Provide clear calls-to-action (CTAs) to help users navigate back to relevant sections of the platform.
- Bee-themed elements: Incorporate visual elements that resonate with our brand identity, such as bees, honeycombs, or other apiary-inspired graphics.
Code Example: Custom 404 Page HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Apiary - Resource Not Found</title>
<link rel="stylesheet" href="/styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="/" class="home-link">Home</a></li>
<li><a href="/search" class="search-link">Search</a></li>
<li><a href="/recent-pages" class="recent-link">Recent Pages</a></li>
</ul>
</nav>
</header>
<main>
<section class="error-message">
<h1>404: Resource Not Found</h1>
<p>It looks like the page you're looking for doesn't exist. Don't worry, we've got you covered!</p>
</section>
<section class="solution-section">
<h2>What can you do?</h2>
<ul>
<li><a href="/" class="home-link">Go back to the home page</a></li>
<li><a href="/search" class="search-link">Search for a different resource</a></li>
<li><a href="/recent-pages" class="recent-link">Check out our recent pages</a></li>
</ul>
</section>
</main>
<footer>
<p>© 2023 Apiary. All rights reserved.</p>
</footer>
</body>
</html>Code Example: Custom 404 Page CSS
/* Global Styles */
* {
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #f7f7f7;
padding: 1em;
text-align: center;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav a {
color: #337ab7;
text-decoration: none;
}
nav a:hover {
color: #23527c;
}
main {
max-width: 800px;
margin: 0 auto;
padding: 2em;
}
.error-message {
background-color: #f7f7f7;
border: 1px solid #ddd;
padding: 1em;
text-align: center;
}
.solution-section {
background-color: #f7f7f7;
border: 1px solid #ddd;
padding: 1em;
text-align: center;
}
h1 {
color: #337ab7;