Being able to work efficiently is one of the keys to success as a freelance designer. There are many ways that you can go about improving your own efficiency, and taking advantage of available resources is one option.
In this tutorial we’ll look at the process of designing an e-commerce website and how you can speed up the process by using a UI set. A few months ago we released the huge Zephirro UI Set, which was created for the purpose of helping to reduce the time needed for designing e-commerce sites.
If you have never used a UI set in your own work this tutorial will show how it can be done and how easy it is quickly create your own website mockups by having some of the elements already designed. We’ll use several of the basic elements of Zephirro to design a product category page for an e-commerce site, and we’ll make some changes and customizations to the elements, which you will probably want to do when using a UI set (for example, changing the color of elements).
Although we’re using the Zephirro UI set for this tutorial, the process is essentially the same with other UI sets as well. If you’re a Vandelay Premier member you can download Zephirro. If you’re not a member, Zephirro can be purchased for $ 19, or you can follow along and view the general steps for working with any UI set. We’ll also be using a few other resources from Vandelay Premier. Learn more about Vandelay Premier membership.
To start, open the files 3.psd and 4.psd from Zephirro, as we will be using elements from these two files. Also, create a new file that is 1200 pixels wide and 1290 pixels high. This file will be used to create our new design.
Save this new file as my-website.psd
We’re going to use a content area that is 960 pixels wide, so set vertical guides (View > New Guide) at 120 pixels and at 1080 pixels. In 4.psd from Zephirro, scroll down near the bottom of the file and find the first navigation menu, which looks like this:
We want to use this menu in our design, so click on the group/folder in the layers palette.
With that group selected, go to Layer > Duplicate Group. In the window that pops up you will see a drop down list. By default Photoshop will want to duplicate this group within the same file, but we want it to be duplicated to my-website.psd, so we’ll select it from the drop down.
After clicking on “ok”, the nav menu group will be added to the my-website.psd. One thing to be aware of, Photoshop will locate the group where it is located in the original file. In 4.psd the nav menu is located at the bottom of a long file, so that is where it is placed in my-website.psd. We’ll move it to the top of the file by going to Edit > Free Transform. You’ll then see a box around the nav menu and you can drag it to the top.
After the menu is moved into place it will look like this:
By duplicating the nav menu into the new file we have all of the layers still intact, so we can easily change text and layer styles (like colors), which we’ll do in a few minutes.
Next, go to the 3.psd file from Zephirro and find the grid view .
This is a detailed element that displays products, something that could take a long time to design from scratch. But we can duplicate the group and add it to our design in no time. So we’ll repeat the process from above. Select the group title “Products (grid view)” in the layers palette.
Then go to Layers > Duplicate Group, and select my-website.psd from the drop down.
Then go to the my-website.psd file, go to Edit > Free Transform and move the element into place.
There are a few other elements that we’ll want to add to our design, most are located in the 3.psd file of Zephirro. Find the price range, size, and search elements.
Select the groups for each in the layers palette.
With those groups highlighted, go to Layer > Duplicate Group and select my-website.psd from the drop down. After clicking “ok” these elements will be added to the my-website.psd. Then, in the my-website.psd use free transform to move the elements into place. We’ll be using the search bar in the header and the other elements in the sidebar.
The last element that we are going to add is the “sign in” form, which is found in file 4.psd from Zephirro.
Select the group titled “Sign in” and go to Layer > Duplicate Group and select my-website.psd from the dropdown. After clicking “ok” it will be duplicated to my-website.psd. You can then use free transfom to move it into place at the top of the sidebar.
So now in about 2 minutes I have a great starting point for my design. Reading the text description up to this point will take you much longer than actually completing the steps, so you can see how quick and easy it is to get started with a web design by using a UI set. Here is how our page looks at the moment:
Using the pre-designed elements saves tons of time as compared to desiging everything from scratch, and we can now move on to customizing the elements and adding our own touches to the design.
Customizing the UI Elements
One of the great things about UI sets is that as layered Photoshop files they are easily customizable. In most cases you’ll need or want to make some changes like text and colors, so we’ll go through some of these customizations to demonstrate the process. For this sample design I will be creating the page to be a product listing from our own e-commerce site, Vandelay Premier. The page will display items from our PSD files category. So I’ll be taking some of the colors from Vandelay Premier, but obviously you could customize the colors to suit your own needs.
Let’s start with the navigation menu. I’ll set the foreground color to #1e4684 and the background color to #3a69b3, 2 different shades of blue that are used in our current design of Vandelay Premier. In the layer’s palette, open the Menu bar folder and find the layer title “BG”.
This is the shape layer for the navigation menu, so if we make changes to the layer styles it will change the look of our nav menu. Double click on the BG layer to open up the layer style options, and click on “gradient overlay”.
Click on the arrow next to the gradient and you’ll see the different gradients that are available to select. The first one will be using the foreground and background colors, and that is the one we want to click on.
We now have a blue navigation menu.
We’ll be using that blue gradient overlay on several other elements throughout the design, so an efficient way to do this is to create a new layer style. With the layer styles options open for the BG layer, make sure that the gradient overlay is the only style active, and click on “new style”.
Title the new style “blue gradient” and click “ok” to save it. We can then re-use the style on other layers very quickly.
The next thing we’ll do is change the text of the links in the navigation menu to suit our needs. Double click on the text layer in the layers palette to open the layer style options. Click on “color overlay” and set it to “ffffff”. Then click on “drop shadow” and set the blend mode to multiply at 75%, with 1 for the distance and size. Then, with the layer styles still open, click on “new style”. Name this style “white text”. We’ll then change the color of the PSDs link to green to show that it is the current page. Our customized nav menu now looks like this:
Next, we’ll work with the search form in the header. Find the “search” folder in the layers palette. Double click on the “button” layer to open the layer style options and then click on “styles”.
Select the blue gradient style that you just created and click “ok”. Then open the layer styles options for the “icon” layer and apply the white text style and click “ok”. Then click on the “BG dropdown” layer and give it a color overlay of #ffffff and a 1 pixel stroke of #d5d4d4. You search field is now customized to look like this:
Next, set the foreground color to #f3f2f2 and use the paint bucket tool to fill the background layer. We now have a light gray background instead of white.
We’ll now move on to customizing the “Products (grid view)” folder contents. Open the folder and find the layer titled “BG”. Double click on the box in the layers palette to change the color.
Change the color to #ffffff. This will change the background of the product list area to white.
Next, we’ll change the buttons in the pagination and list/grid view to match the color of the navigation menu. These are all in separate layers, so having the blue gradients layer style comes in handy, Open the folders for the top and bottom pagination and double click on the BG layer of one of the buttons. Then click on “styles” and select the blue gradient style. Next, double click on the text layer for that button and apply the white text style. The image below shows how the previous button will look with the new styles applied to it.
Continue by repeating this process for the other buttons. For the current button I’ll use a green gradient instead, and for the “select page” layer I’ll apply a gray color overlay. The end result will look like this:
Next, I’ll find the text layers for each of the products (they are numbered 1 – 12) and I’ll change the text to actual products on our site. I’ll then change the text of the product names to #1e4684 and the text of the product IDs to #3a69b3, the two shades of blue that were used to create the gradient earlier. I’ll also paste in some product photos above the layer for each filler image and use free transform to place them. With those steps completed are product list area is taking shape.
Next, we’ll customize the sign in area in the sidebar by applying the blue gradient layer style to the “BG” layer in the “header” folder. We’ll change to color of the “BG” layer in the “sign in” folder to white, #ffffff. You’ll also see a sub-folder called “Button sign in” that includes a background layer and an icon layer for the button of the sign in form. Apply the blue gradient style to the BG layer, and the white text style to the icon layer. Our sign in area now matches the look of the other elements.
Then we’ll custmize the “price range” element. Change the “BG” layer color to a medium gray, and change the “active” layer to green. Then use the blue gradient and white text layer styles to customize the items in the “indicator” folders.
To complete our design we will work on the background, the header, and the footer. We’ll be adding a soft textured pattern to the background layer. I’m using one of the Soft Grunge Patterns from Vandelay Premier, but you can use whatever textured pattern you have available. Double click on the background layer in the layers palette and select “pattern overly”. Select the pattern you want to apply and click “ok”.
With our pattern applied the background will look like this:
Now add a new layer (Layer > New) on top of the background layer and fill it with white using the paint bucket tool. In the layers palette, change the opacity of this layer to 50%.
The background now looks like this:
Now I’ll add some more texture to the background by using some of the Watercolor Sponge Brushes from Vandelay Premier. If you’re not a member you can use some other brushes that you have available.
Next, I’ll add the Vandelay Premier text logo, and I’ll also add the Wedge Logo Template.
The last step is to create the footer using a blue rectangle (shape tool) and adding text for the links.
And our design is now complete! View it in full size.
In just a very short time we used the existing elements from the Zephirro UI set, customized them, and added some additional touches. This was all done in a fraction of the time that it would have taken to design the entire page from scratch.
If you’d like to take advantage of pre-design elements, please take a look at the UI sets that are available to Vandelay Premier members.