Registration screens may seem like an afterthought in a much larger customer acquisition process, but they are an essential linchpin of sound customer experience that’s not to be overlooked. Organizations invest tremendous amounts of time and money in attracting prospects, winning their confidence, and turning them into customers. The last thing you want to happen as a designer is for that investment to fail at the last step — registration. A well-designed registration screen carries the confidence inspired from a prior marketing process, transforms a lead into a customer, and leads to real revenue.
Today, we are going to design a registration screen in Photoshop. We will try to strike a subtle balance between functionality and flat design. To achieve this, we will utilize blending options, patterns, and several other techniques. So let’s get started.
Open Photoshop and create a new file with a 640px width and an 1136px height.
Create a new layer to add the status bar details. First select the rectangle tool and create a small horizontal rectangle. Fill the rectangle using color #000000.
We will simply add the signal and battery icons to our status bar with color #acacac.
To add the time onto the status bar, select the type tool and add the time in the middle using color #acacac.
For the background, we will use a dark color to make the form stand out, I’m going with color #2c2f36. So, select the rounded rectangle tool and create a rectangle to fill the background space. Use color #2c2f36 to fill the rectangle.
We will add a subtle pattern on the background layer, so select the layer and click on “Layer styles” to add some pattern. Select the minimal pattern from the resources set mentioned above and adjust the pattern settings according to the image below.
Now, we’ll start with the title. Select the type tool and add the title text “Register” using color #ebebeb. Place the text in the center.
For the form background, create a new layer and select the pen tool to create a simple shape. Fill the shape with color #898989.
Once again, create a new layer and create another shape. This time, reduce the height and fill it with color #a1a6a5. Place it above the previous shape to create a layered effect.
Again, add a new layer and create another shape using the pen tool; keep its height smaller than the previous one. Fill it with color #ced2d0 and place it on top of the other shapes.
One more time, repeat the same process and create another shape using the same pen tool, but make sure to reduce the height as well as width to make it smaller than the previous shapes. Now, place the shape in the center and fill it with color #ededed.
Select this rectangle layer and click on “Layer styles” to add some pattern. Select any subtle pattern from the set mentioned above and adjust the pattern settings according to the image below.
Now, let’s start with the form fields. Create a new layer and select the rounded rectangle tool to create a small rectangle. Fill it with color #353b41.
Select the field layer and click on “Layer styles” to add some inner shadow. Adjust the settings in accordance with the following image.
Now, select the type tool and add the field title “Username” in the middle with the color #ececec.
Repeat the same process and create three more fields using the rounded rectangle tool with the same color and Inner shadow. Now, add the text to these new fields using the type tool using color #ececec.
For the “Register” Button, create a new layer and select the rounded rectangle tool to create a rectangle. Fill it with color #1a9aa5.
Select the button layer and click on “Layer styles” to add some inner shadow same way that we did earlier. Adjust the settings to match the image below.
Now, select the type tool and add the button title “Register” using color #fbfbfb.
Select the ellipse tool and create a small circle. Place it in the middle and fill it with color #f77f3e.
Select the newly-created circle and click on “Layer styles” from the layer panel and add some inner shadow to the shape. Keep the inner shadow settings the same as those in the image below.
Now, simply add the user icon in the middle and fill it with color #ececec.
Now, select the type tool and add “Already a member?” text using color #a1a6a5. Repeat the same process and add the “Login Here” text this time using color #f77f3e. Place the text in the middle.
Our registration form is ready! I hope you guys enjoyed the tutorial. I’ll be back with some more soon. Until then, take care!
Anum is Web and Graphic designer. Addicted to Photoshop and crazy for pixel perfection. She is also an active blogger, sharing her passions, skills and creative details on her blog Websoulz. She loves to connect with the community, sharing the latest design gossips and rolling her eyes on boring trends.
The Principles of Beautiful Web Design, 4th Edition
Learn PHP in One Day and Learn It Well
Docker for Web Developers