How to Use the Active Store UI Kit to Create a Layout
A guide to using premium design resources
If you've ever seen our UI kits and aren't sure how to start using them, then this is a must-read. This guide will show you how easy it is to create stunning ecommerce web layouts in a matter of minutes using the Active Store UI Kit.
How to Create a Homepage Layout
Please note that
Active Store UI Kit is a premium resource that can be downloaded by members or via a single purchase.
Step 1
Launch Photoshop and create a new document (Width:
1400 Pixels, Height
2680 Pixels).
Step 2
The
Active Store UI Kit uses a 12 column grid, 1200 pixels in total with 80 pixel columns and 20 pixel gutters. If your version of Photoshop has it, you can use the
View > New Guide Layout.. function to create a matching grid. Alternatively, you can duplicate one of the Active Store UI Kit documents, open it in Photoshop and delete all of the contents which will leave you with just the grid and a blank document.
Step 3
Create a new Fill Layer (
Layer > New Fill Layer > Solid Color) and set the fill color to
#f6f6f6 for a very subtle light grey background.
Step 4
Open
1 - Navigation & Promo Blocks.psd from the
Active Store UI Kit and copy the 'Navigation' group into your blank document. Here's how to do that:
How to Duplicate Groups and Layers Between Documents in Photoshop.
Step 5
The 'Navigation' group includes a hover dropdown state which we can hide for now. To do this set the fill color for the 'Women' text layer and associated 'Arrow' shape layer to
#444444. Then turn off visibility for the 'Dropdown' group layer and 'Active State' shape layers.
Step 6
Let's also make the navigation menu full width. Move the whole 'Navigation' group to the top of the canvas, and then use the
Direct Selection Tool to select the top and bottom vector points on either side of the 'Background' shape layer and drag them to the edges of the document. The image below will help explain this.
Step 7
Open the
1 - Navigation & Promo Blocks.psd file again and this time copy over the 'Banner' group. Place it below the 'Navigation' group in the Layers panel.
Step 8
Let's also make the banner full width, use the
Direct Selection Tool to select the top and bottom vector points on either side of the 'Background' shape layer and drag them to the edges of the document.
Step 9
We now have a bit more space for the arrows on the banner, so we can
Nudge them
70 pixels out towards the edges of the document.
Step 10
Open
2 - Catalog.psd from the
Active Store UI Kit and copy the first 'Featured Products' group into your document. Place it in the center of the document, just below the banner.
Step 11
Duplicate the 'Featured Products' group and place the duplicated copy directly below the first instance.
Step 12
Update the title to say 'New Additions' instead and hide the shape layer 'Rectangle 1' to remove the white background and create a distinction between this section and the Featured Products section.
Step 13
Open the
1 - Navigation & Promo Blocks.psd file again and this time copy over the 'Newsletter' and 'Footer' groups. Place them below the other group layers and align the bottom of the footer with the bottom of the document canvas.
Step 14
Use the
Direct Selection Tool to select the top and bottom vector points on either side of the 'Background' shape layer (in the 'Footer' group) and drag them to the edges of the document.
Homepage Layout Result
You should now have a layout that looks something like this.
How to Create a Catalog Page Layout
Step 15
Save the homepage layout as a PSD and then
Save As.. and choose a new name for the catalog layout. Hide or delete the 'Banner', 'Featured Products' and 'New Additions' group layers.
Step 16
Open
2 - Catalog.psd from the
Active Store UI Kit and copy the first 'New Additions' group into your document. Place it in the center of the document, just below the navigation menu. You can update the text to say 'Browse Products' or something similar.
Step 17
Move the fourth 'Product' group layer and place it below the others to start a new row of products.
Step 18
Duplicate the first and second 'Product' group layers and also move them to the new row.
Step 19
Repeat this process until you have 4 rows of products with 3 columns each.
Step 20
We now have space to add in a sidebar with filters. However, I think it is more intuitive to have the sidebar on the left, so lets move the products over to the right instead. Select the whole 'Products' group and drag or nudge it over to the other side.
Step 21
Open
2 - Catalog.psd and copy over the modules that you want to have in the sidebar. You can create a new group layer called 'Sidebar' to keep them organised. I recommend having the 'Filters' module first.
Step 22
Next I copied over the second 'Categories' module:
Step 23
I also copied 'Price Range', 'Sizes' and 'Recommended Products' module into the sidebar. You can choose whichever modules you would like to use. Keep
20 pixels of
vertical spacing between each module
Step 24
The catalog layout is now complete, but we can also add a product card which would appear when clicking a product image or name. Create a new Fill Layer (
Layer > New Fill Layer > Solid Color) called 'Overlay'.
Step 25
Set the fill color of the 'Overlay' layer to black and change the
Opacity to
80%. This gives the effect of fading the background to black.
Step 26
Open
3 - Product Detail.psd and select one of the Product Detail layers to use. Copy your chosen layout over and align it to the center of the document canvas.
Conclusion
These are just a few of the many possibilities you have at your fingertips with the
Active Store UI Kit. Every single UI element included is completely editable too so it couldn't be easier to completely change the look of your design. I hope you enjoyed following this tutorial, and have fun creating online store design concepts with the
Active Store UI Kit!
Comments