How to web design in Photoshop

Hey what is up guys, my name is Cosmin and in today’s video I’ll show you how I did a redesign of a landing page. This project was done for an SEO agency that’s worked with some pretty big clients and wanted to leverage them to get some new leads, in the initial brief they mentioned they wanted something completely different than what they had,here are a few bits and pieces from the brief, the landing page should look very impressive, more full and more detailed,

when people land on it make sure they definitely understand that we can get your brand on page 1 of Google, so I decided to try out some new colors and develop a unique style they can fit with their brand.

Let’s jump into Photoshop where I’ve already loaded up the initial design and since this is a landing page I’ll start by removing any external links, make it easier for the visitors to submit their information by removing a couple of form fields. Now I’ll only keep one and once the visitor is going to put their information in, that’s going to get redirected to a second page where the rest of the information will be gather.

This is in order to reduce some friction. I’ll also only keep a button at the end that will take them back to the top of the page if clicked and using the selection tool I’ve only kept the content I wanted and started doing a low fidelity wire frame just to get a feel of the content.

I’ve looked a bit to find an interesting color scheme and pick up these two colors and the font Acumin for the page. As you can tell I’ve applied those colors and did some styling changes to the content, space out all of the text elements and now I’ll go over each section I’ll show you what I’ve done to make this design work.

For the header area I’ve designed a graphic that’s in line with my idea to have a unique visual style,I’ve even incorporated this small arrow here and let’s open it up inside the Illustrator and check its structure out. As you can see I have two filled up base shapes on the right and on the left and on top of them I have these wave-like patterns that were done using the blend tool.

To make it a bit more interesting I’ve also added some small round shapes to give it some personality. To create those waves let’s select the pen tool and do a small shape on the bottom of the canvas, it can be any kind of random shape and we’ll need to do the same for a bigger one that we’ll place on top.

The same thing with the pen tool, just drag a couple of anchor points and for both shapes we need to make sure that the field is empty and it has a colored outline, go to Object – Blend – Blend Options and set your preferred number of steps, hit OK and then go back and select the”Make” option, this will give you the wavy look and it’s totally adjustable as long as the shape is live with the direct selection tool you can just pick and move anchors till you’re happy with the result. Let’s select it, delete it and move back into Photoshop.

For this section I’ve just kept part of the Spotify logo and added a render shape underneath the text, use the same colors to keep everything consistent, let’s move it back up and of course you can do any changes you like now let’s move to the next one. For the team section I’ve again made a huge shape that keeps the same style I’m looking for the layer now, should be somewhere around here and I’ll try to make a clipping mask to make sure that the image won’t spill over the other section, but I need to make it visible first. The image on top is set to overlay and has a pretty low opacity.

For this part of the landing page I’ve pretty much repeated the same thing as I’ve done with the second section, I like this idea of free form shapes that can bead justed or even animated on a live version of the design. For the final section I’ve created a gaina custom shape similar to the one from the team section, only blue this time and next to it a wave pattern and a couple of round shapes to finish this landing page off.

In the end this project was pretty interesting since the client wanted something very different than what they previously were using, so that gave me a lot of creative freedom. This is the final look of the design, if you like the article don’t forget to drop a comment and subscribe for more! In case you want to download the source Photoshop file you can find the download link in the description below, until next time, take care guys, bye!

Leave a Reply

Your email address will not be published. Required fields are marked *