How to develop a layout for an online store in Photoshop

The final result of the lesson

In this lesson, we will create a layout for a handmade goods store. I will not talk much about particular font sizes or color codes, but instead I’ll talk about font selection, color, proportions, and other important things.

To complete the lesson you will need:

  1. Photos from unsplash.com
  2. Photos from stocksnap.io
  3. Font Source Sans Pro with Font Squirrel
  4. Font Source Serif Pro with Font Squirrel

Define the goal

Before starting work on the design, it is necessary to determine the business goals of our project. Your main task is to make the brand famous? Or sell products to new customers? Or maybe first show the value of the product, tell the details and sell later? You need to think about marketing, business goals, and the needs of the visitor to create a design that matches the target audience.

To get started, ask yourself these questions:

  1. What will we sell?
  2. Who will be interested in buying our products?
  3. Why should they buy our products?
  4. How are we going to prove the value of our product?

For today’s lesson, I decided to focus on the imagery and use of negative space to create a sense of freedom and purity of the layout. I want the design to look pleasing to the eye and attract people who care about their image.

Training

Before moving on to Photoshop, let’s look at some of the primary data, such as colors, style and general direction.

Step 1

Start collecting your favorite images to create a mood board and a color palette. I usually use Pinterest, but gomoodboard.com is the best choice. This service is specifically designed to collect inspiring images in one place.

gomoodboard.com – a simple way to collect inspirational materials in one place

Step 2

The next step is to select a color palette for our design; It should be combined with the brand, as well as attract the target audience. It is very useful to use color palette generators, for example, Adobe Color CC (formerly Kuler), which will help save time on color matching.

Download the image from your mindboard (mindboard – mood board) and look at the result. You can edit the palette to fit your needs, then save it for future work.

Choose fonts

Having received enough inspiration, we will work with Source Pro fonts, including the sans and serif versions. Their use will give the design a balanced look, and the headers will make it more noticeable.

Preparing a document

Before you start the creative part in Adobe Photoshop, let’s deal with the main things – creating a document, as well as setting the guides.

Step 1

Create a new document by clicking Ctrl + N. Choose a comfortable size – in my case it is 1400х3564px.

Step 2

Now you need to add guides so that the layout has enough space, and it looks balanced. Guides will provide accuracy, as well as allow you to determine the width of our site. Go to menu Browse> New Guide (View> New Guide) and add some guides. I usually choose 1000px as a point of reference, after which I add a few extra lines along the edges to create a sense of freedom ..

Note: The following guides were used in this lesson: vertical to 200px, 500px, 550px, 700px, 850px, 900px, 1200px.

The board: You can also use Photoshop GuideGuide plugin. This will further simplify the process.

Welcome new customers

We will begin our design with an attractive upper zone in order to capture the attention of the visitor and immediately tell what this site is about.

Step 1

Create a new group called “Navigation”, add a new horizontal guide to 130px. Here will be placed our logo, navigation menu and search. Place the logo on the left. If you don’t have one, just create a rectangle and write the name of the site on it.

Step 2

Now write the menu link names. Even at the planning stage, you should know what needs to be included in the navigation for maximum visitor convenience. Use the tool Horizontaltext (Horizontal Type Tool) to write item names. Place them next to the logo, leaving enough space.

Step 3

Search is an incredibly important feature for an online store. Make the search field visible and accessible by placing it in the upper right. To create it, use the tool. Rectangle (Rectangle Tool), and then Horizontal text (Horizontal Type Tool). Note that the colors are derived from the image using Adobe Color CC.

Step 4

Now it’s time to add a stunning picture that will be the focal point of the entire site for a new visitor. Like many modern websites, we use high quality images with strong, clean focus. This will add text over it, as well as some interface elements.

With the tool Rectangle (Rectangle Tool) draw a rectangle sized 1400x700px (color does not matter). Place it directly below the navigation (remember the horizontal guide at 130px? Is it just for this shape). Then drag the selected image, placing it above the layer with the rectangle.

After that, hold down the key Alt and move the cursor to the line between the layers on the panel Layers (Layers panel). When you see a small arrow pointing down, click the mouse. It will create Clippingmask (Clipping Mask). Thus, the image will be visible only in the area of ​​the rectangle.

Click Ctrl+ T, to resize the image. Hold down the key. Shift. So you keep the proportions while editing.

Step 5

To draw more attention to our image, let’s add a gradient that goes from transparent above to black below. Choose a tool Gradient (Gradient Tool), then adjust it so that the color changes from black # 000000 until transparent. After that, hold down Shift, drag the mouse from bottom to middle of the image. Then apply Clippingmask (Clipping Mask) and cut Opacity (Opacity) layer to 50%. Rename the layer, calling it “Shadow” for easier identification later.

Step 6

Now it’s time for a powerful headline that will attract the attention of the visitor and make him learn more. Use the large, bold Source Sans Pro for a short title. I chose Source Sans Pro (Black) by size 70px with tracking (tracking) 160.

Step 7

We have captured the attention of the visitor, now we need an additional message and, more importantly, a call to action (often called Call To Action – CTA). I used Source Serif Pro (Regular) by size 28px for the subtitle, and for CTA, the button took the color of the search block to keep the overall style.

Notice the distance I use. Always leave enough space around the elements. Because of this, they are perceived faster and look more organized. You may also notice that the text layers are placed closer to each other. This is done according to the principles of Gestalt psychology.

“According to the law of intimacy, objects placed next to each other seem to be part of the same group.”

Create trust

We are finished with the “new customers” welcome zone, which is also a hat. Now that we have attracted the attention of the visitor and interested him, it’s time to show him more advantages of our store.

Step 1

Since we have made the upper part of the site quite minimalistic, we will continue in the same vein for the rest of the layout.

Place a headline that will interest the visitor and a short description that will attract him even more. I used Source Sans Pro (Semibold) by size 24px dark gray # 282723. Make sure you leave enough space above the heading so that it matches the top of the layout.

Use something brighter to describe. Then the text will look visually weaker and be perceived as secondary. For this, I used font Source Serif Pro (Regular) by size 16px gray #adadad.

Step 2

An effective way to create trust is to use high-quality photos that make you want to browse or buy a product. Take the time to make high-quality photos of their products or hire a professional photographer. For our lesson, I will use bogus products, so I will not take pictures of anything and just take the finished drawings from the Unsplash or StockUp sites.

Choose a tool Rectangle (Rectangle Tool), draw a rectangular shape. After that drag the photo of your product into the document, place it above the rectangle, and then create Obravochnuyumask (Clipping Mask). If necessary, resize the image by clicking Ctrl + T.

Place a rectangle between the first and second vertical guides, since we have defined the same areas for product images at the very beginning.

Step 3

To preserve the simplicity of the template, we will provide only basic information, including the product name and price (this can make the visitor learn more).

Choose the same Source Serif Pro, then enter the product name using the dark gray color that we took for the title of this section (Create trust. Step 1 – approx. translator). After that, select a slightly lighter shade for the price, as this is background information and it should not be visually highlighted. It is important to remember that all elements (titles, buttons, and descriptions) must be centered.

Step 4

Now group all the layers of the product block and duplicate them by clicking Ctrl + J. Then place copies between the vertical guides, not forgetting the distance between them.

Step 5

We ended up with a “Trending” section featuring three products. As was pointed out in one of the studies, the three choices better encourage the visitor to act.

“One such technique is the so-called Goldilocks Effect (also known as Goldilocks Pricing). The term comes from the Three Bears fairy tale in which Goldilocks ate three bowls of cereal; the first was too hot; the second was too cold ; the third is as it should. “

Now let’s add a small line that will divide our layout into two sections. I used the tool Line (Line Tool) with thickness 1px light gray # e6e6e6, so it turned out noticeable, but not too stood out.

The board: hold down Shift, to create a straight line.

Step 6

Now let’s create another section in which we will show more products. Let’s call it “Popular.” People are always looking for confirmation of the correctness of their choice, so a block with products that other people liked is excellent proof that a thing is worth the money spent on it.

Duplicate (Ctrl + J) products of the “Trending” section, but at the same time change their titles, titles and descriptions. Make a few more copies to make a 3×2 grid.

We generate sales

After we used the images to attract attention, it’s time to “hook” the visitor in case he is not going to buy right now. Thus, he will be able to return and still buy the goods.

Step 1

We will add a simple section with the latest blog entries using the same heading and description format, as well as several short texts of our posts that can lead the visitor to the content of interest.

Choose a tool Rectangle (Rectangle Tool) and draw a large rectangle that will serve as the background of our section. Use very light gray. #fbfafa, to visually separate the new section from the previous blocks. Now duplicate the title and description of the previous section, and then place them above the background.

Step 2

Choose a tool Horizontaltext (Horizontal Type Tool) and enter the title, date, and the short text of the post. I use Source Serif Pro again for the title and description, and Source Sans Pro for the date.

Even in this block, you will notice a clear visual hierarchy. The heading is a bit darker and bigger, and the rest of the elements are made smaller and lighter. Always use the visual hierarchy for a logical design. To continue working in the same style, make blocks with posts of the same size as blocks with goods.

Step 3

Now put all the layers with the blog post into one group, then duplicate it twice by clicking Ctrl + J. Place copies between the vertical guides, leaving plenty of space on the sides.

Step 4

After we showed cool products and useful articles from the blog, it’s time to finally lure visitors by adding a simple subscription form.

Select tool again Rectangle (Rectangle Tool), select a darker color, for example, # 282723, then draw a background for our section. With the help of a noticeably darker color, you will create a contrast that will attract the attention of the visitor.

Step 5

Now write a short text describing the benefits that the visitor will receive after the subscription; express the benefits of your features. After that, go to the header of our layout, then copy the search field, including the button – we use it for our form.

Drag the copied layers, placing them above the layer with the background, change the text fields and buttons.

Step 6

Finally, each site should have a basement with links to help users find specific pages, such as customer support, contact details, social networks, or other useful data.

Duplicate the blog’s text layers again, and then edit them to show the necessary links. Divide the groups, evenly arranging them in a row.

Final touch: add a line with copyright information at the very bottom.

Congratulations!

Great job! We finished our layout for the Shopify store, now check the layers, remove all the garbage, and then give this layout to your developer. Or even better – create it yourself!

Like this post? Please share to your friends: