404 Pages – Designs and Resources

404 pages are displayed when a website encounters a path that it cannot find. But I’m sure you already know that. Even though it’s a simple page, designing it well can help you connect better with your visitors. On the other hand, a badly designed 404 page can leave your visitor clueless leading to a bad user experience.

In this project, I plan to explore a variety of design approaches for 404 pages. I’ll keep posting new designs here as and when I come up with a new one. Their code and resource files will be available for free! Stay tuned!

Design 1 – Simple Scenic

Here’s a very simple design. There’s isn’t much here, to be honest, just a simple background image. I’ve included a “glowing” animation around the Sun but that’s it.

At times, it’s better to save the user from an overload of redirecting links and just give them a simple instruction – “Go Home”. There’s no need to tell the user that the “page was not found” or at least not in so many words. Almost all users know that 404 refers to the “Page Not Found” error. Another thing to keep in mind is the load time of the page – the page cannot take forever to load only to tell your user that they’ve landed on an error page.

Download Code and Resources

image for design 1 404 page

Image for 404 pages - Design 1 - mobile

Login Form for Three Scoops – Design and Code

Here’s a quick design for the login form for Three Scoops Dessert Shop (completely made up name!. Hey, if you think it’s lame, suggest a better one :P).

It’s a difficult task to make something look simple and lively. I did not want to add too many details to the graphics because that would take the focus away from the main thing – logging in. But, it’s a dessert shop, so it couldn’t be completely dull either. I decided to go with colors with high saturation and lightness. I, thankfully, found a very beautiful image by @rawpixel of Pexels. And of course, I’ve used Montserrat Black font to keep things looking professional.

three scoops login desktopthree scoops login mobile

 

Download Details

You can download the resources for this design here. Download includes

  • A PSD
  • Some screenshots
  • HTML, CSS, and JS source files. (for the latest Chrome, FF, and Edge – I’m sorry, I didn’t have the patience for IE)

 

Please note that the PSD is converted from Affinity Designer. I do not have Adobe Photoshop at the moment :(. Let me know if you come across any issue, I’d be more than happy to help you out.

Cheers!