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!

Image Editor using CSS Filter and Blend Mode property

CSS is more amazing than most consider it to be. It’s often treated as a dumping ground for your font and background colors. However, it offers ways to make the lives of developers much easier. To demonstrate this, I’ve created a simple app using CSS filter and blend mode properties.

Project Details

demo for css filter

CSS filters let you specify grayscale, saturation, contrast, invert and much more.

The syntax is as simple as

.image{

    filter: grayscale(80%);

}

Blend modes, as the name suggests, blends the background image(s) and background color using the property you specify (e.g. multiply or screen).  Read more on this MDN reference page

You can have a look at the project at here

Gradient Generator

I love colors and as an extension, I love gradients too. But, I do not have the patience to sit around and pick colors that form a good gradient. So, I made this! Ta-da! A gradient generator!

image of gradient generator

Project Details

This project produces an endless list of beautiful gradients. I used some basic understanding of color theory and HSL color model and put them together to get colors that may complement each other and look good together as a gradient too. Gradients are becoming a trend in web development, don’t you think? I mean, look at Instagram’s new logo. This tool can prove to be useful to all who wish to the gradient-way.

If you come across a gradient that you like, you can copy a cross-browser compatible CSS code for it. If you want to have a better look, just click on a card and it takes you to the full-screen view. Click on the screen again to return to the list.

Check out the project at http://prashantvikram.com/gradients

For those of you who are fans of flat color – fear not, I got your back! Check out http://prashantvikram.com/pastelcolors that generates flat pastel colors.

 

 

Flat Colors

This here is a very very simple yet very useful app. It generates beautiful colors so you don’t have to go crazy in front of a color palette. Flat colors can be seen in a lot of designs these days. And let’s agree, those designs look super cool.

So, here’s a simple flat color generator.

image of flat colors generator

 

Project Details

The algorithm picks colors with appropriate values of saturation and lightness and generates plain almost pastel colors. You can select a card to view the color in a full-screen view then click on the screen again to return to the list.

Check out the project at here

If you liked this project, I’m sure you’ll like this other one that generates gradients