In this tutorial we’ll be creating a layout for a handcrafted goods shop. I won’t talk too much about specific font sizes or color codes, but will instead focus on explaining the font choices, colors, proportions and so on.
Tutorial Assets
In order to follow along you will need some (freely available) assets:
Before starting to design your layout you need to first define what the business objectives of this exercise are. Is the top priority to raise brand awareness? Is it to sell products to new customers, or to provide them value first, get their details and then sell later? You have to think about marketing, business objectives and your user needs in order to design a layout that persuades your target audience to take actions you want.
Start by asking these questions:
What are we selling?
Who would be interested in buying our products?
Why should they buy from us?
How are we going to provide value?
For this tutorial I’ve decided to focus on strong imagery and generous use of negative space to create a feeling of freedom and clarity. I want the design to look classy and appeal to people who care about their image.
Preparation
Before jumping into Adobe Photoshop and getting visuals down, let’s define some variables like colors, style and general direction.
Step 1
Start collecting images you like for your moodboard and color palette. I usually usePinterest, but gomoodboard.com is very useful and was designed purely for creating moodboards.
gomoodboard.com is a simple and easy to use moodboarding tool.
Step 2
Next up let’s form a color scheme for your design; one that is relevant to your brand and will appeal to your target audience. It is often good practice to use a color palette generator like Adobe Color CC (former Kuler) which can save you time picking colors.
Upload an image from your moodboard and see what colors are generated. Adjust the palette to fit your needs and save the colors for future reference.
Adobe Color CC allows you to create color palette from an image.
Choosing Typefaces
Inspired by some of the items in our moodboard we’ll go with Source Pro typeface family, including both sans and serif versions of the font. A mixture of both will add a balanced feeling and strong headlines.
Get the Document Ready
Before we get creative in Adobe Photoshop let’s sort some housekeeping out, like creating a new document and setting some guidelines.
Step 1
Open up Adobe Photoshop and create a new document CMD+N. Define its dimensions to what you feel will fit your design needs–in my case it’s 1400x3564px.
Step 2
After that set some guides so our layout has enough space and looks balanced. Setting some guidelines will ensure neatness and will help to define our website’s width for the purposes of this design. Go to View > New Guide… and set some guidelines. I usually choose 1000px as a starting point and add some guidelines from the corners so it has space to breathe.
Note: Guidelines used for this tutorial: vertical at 200px, 500px, 550px, 700px, 850px, 900px and 1200px.
Tip: You could also use the GuideGuide Photoshop plugin to make this process even quicker.
Welcoming New Customers
We’ll start our shop design by creating a visually appealing upper area to capture the attention of the visitor and send an instant message of what the site is all about.
Step 1
Create a new group called “Navigation” and set a new horizontal guideline at 130px. This is where our logo, navigation links and search will reside. Place your logo on the left. If you don’t have one, create a rectangle shape and place text on it.
Step 2
Now place your navigation items as a pure text. From the planning phase you should already know what you need to include in your navigation so your potential customer finds it useful. Use the Horizontal Type Tool (T) to write your link titles and place them next to your logo leaving a fair amount of space.
Step 3
Search is an incredibly important function where ecommerce is concerned. Make your search field prominent and accessible by placing it to the right on your main top navigation. For creating it use the Rectangle Tool (U) and the Horizontal Type Tool (T). Notice how colors are inspired by the image we’ve used with Adobe Color CC.
Step 4
Now it’s time to place a striking image that will be a focal point of the whole website once the visitor sees it for the first time. As you’ll see quite commonly on the web these days, we’ll choose high quality image with a strong and clear focus, allowing for text and UI elements to be overlaid.
Using Rectangle Tool (T) draw a 1400x700px (any color) rectangle shape and place it right below top navigation (remember 130px horizontal guideline? It’s for this shape). Then drag an image of your choice and place its layer above the rectangle shape layer.
After that hold down the Alt key and mouse over the image layer until you see a little arrow pointing down, then release the mouse to create a Clipping Mask so the image is only visible within the area of the rectangle.
Hit CMD+T to resize the photo, making sure you hold down the Shift key so you resize it proportionally.
Step 5
To help our image draw attention more towards the horizontal center, let’s add a gradient which goes from transparent to black at the bottom. Pick up the Gradient Tool (G) and customize it to go from black #000000 to transparent. After that hold down Shift key and drag with your mouse from the bottom of the image to around the middle to create a gradient. Then make it into a Clipping Mask and reduce itsOpacity to 50% so it’s not as intense. Rename the layer to “Shadow” so it’s easy to identify.
Step 6
Now it’s time to use a powerful headline that attracts your visitor’s eye and encourages them to find out more. Use big and bold Source Sans Pro and write a short headline. I’ve used Source Sans Pro (Black) 70px size and 160 for lettertracking.
Step 7
You’ve gained the user’s attention, now provide a secondary message and, most importantly, a call to action (also known as CTA.) I’ve used 28px size Source Serif Pro (Regular) for the sub-headline and re-used the search button to keep the UI consistent.
Notice the spacing I am using. Always leave enough space around elements so they are perceived faster and look more organised. Also, if you look closely you’ll see that text layers are closer to each other. This is owing to Gestalt’s law of proximity.
“According to the law of proximity, things that are near each other seem to be grouped together.”
Creating trust
And we’re done with the “welcoming new customers”, or header, area. After we have the visitor’s attention and interest it’s time to show them some more benefits our shop has to offer.
Step 1
As we kept our top area of the website pretty minimal we’ll go with a clean and simple aesthetic for the rest of the layout.
Place a headline that might interest your visitors and a short description that will encourage them even more. I’ve used Source Sans Pro (Semibold) 24px and a dark gray #282723. Make sure to leave plenty of space above the headline so it’s consistent with the top area.
For the description use something brighter so it’s visually weaker and instantly perceived as secondary in importance. I’ve used 16px Source Serif Pro (Regular)and color is gray #adadad.
Step 2
One effective way to create trust is to use high quality attractive imagery which triggers the brain, creating desire. Make sure to invest time taking great photos of your products or getting a professional photographer to get the job done. For this tutorial I will be using fictional products so I don’t have to take photos myself–instead using ones from Unsplash and Stock Up.
Pick the Rectangle Tool (U) and draw a rectangle shape. After that drag your product photo into Photoshop, place it over the rectangle and create a Clipping Mask. Resize the image if needed by hitting CMD+T.
Place your rectangle between the first and second vertical guidelines as we’ve defined equal areas for product images at the beginning.
Step 3
To keep things simple we’ll provide just basic information about the product including title and price (which you might find triggers users to want to find out more).
Pick the same Source Serif Pro font and enter the title using darker gray as used for the section headline. After that use lighter gray for the price tag, as it is a secondary information and doesn’t require too much visual strength. One more thing to keep in mind is that our shop elements like titles, call to action buttons and description blocks are centered.
Step 4
Now put all the product layers into one group and duplicate them by hitting CMD+J, place them between the earlier defined vertical guidelines leaving spaces between.
Step 5
We’re done with a “Trending” section featuring three products. According to Paul Seys, three options is the optimal number for making your offer more persuasive.
“One such technique is known as the ‘Goldilocks Effect’ (or ‘Goldilocks Pricing’). The term derives from the Brothers Grimm tale in-which Goldilocks eats three bowls of porridge; the first being too hot, the next too cold, but the final one ’just right‘.“
Now let’s put a little divider so it separates the layout into sections. I’ve used the Line Tool (U)1px light gray #e6e6e6 so it’s visible, but not too strong.
Tip: Hold down Shift key to easily draw a perfectly horizontal line.
Step 6
Now let’s create another section showing more products and call it “Popular”. People are always seeking for validation and showing popular products that other people enjoyed give them social proof that these products are worth the money.
Duplicate CMD+J and customize the headline, description and products of the “Trending” section. Duplicate more products and make a grid of 3x2 of your best products.
Capturing Leads
After exposing most of the visuals to evoke interest and desire it’s time to capture visitors’ information in case they don’t feel like buying right now, so you can reach out later.
Step 1
We’ll include a simple blog section using the same headline and description format and some excerpts of the blog posts to redirect users to content that might interest them.
Pick the Rectangle Tool (U) and draw a huge rectangle that will serve as a background of this new section. Use subtle light gray to create a slight separation from the products. I’ve used #fbfafa. Now duplicate the title and description of the previous section and place them on top of the new background.
Step 2
Now pick the Horizontal Type Tool (T) and enter the title, date and short excerpt of your blog post. I’ve once again used Source Serif Pro for the title and description and Source Sans Pro for the date.
Even in this blog block you’ll notice clear visual hierarchy, the title being darkest and biggest and other elements smaller and lighter in color. Always employ visual hierarchy to achieve logical flow. To keep consistency make blog posts as big as the product blocks.
Step 3
Now put all blog post layers into a group and duplicate it twice by hitting CMD+J, place it between the vertical guidelines leaving the spaces in between as with products.
Step 4
After showing some cool products and valuable blog posts it’s time to push your visitors a little bit and provide a form with a clear call to action to subscribe.
Once again grab the Rectangle Tool (U), choose a darker color, like #282723 and draw a background for our subscription form. By using a noticeably darker background you will create contrast that will automatically draw viewers’ attention.
Step 5
Now write a short blurb explaining why people should subscribe; express benefitsover features. After that navigate to the navigation of our design and duplicate the search field including the button, we’ll re-use it for the subscription form.
Drag the duplicated layers and place them on top of our newly created background then customize the input fields and call to action button.
Step 6
Finally, every template has to have a footer with links included so people can scroll down and find navigation to key pages, like customer support, contact info, social networks and more.
Once again, duplicate the blog post text layers and customize them to show links of your choice. Split different link groups and form columns that are equally spaced in a row.
Last touch: add a copyright line at the very bottom of the layout.
Congratulations!
That’s it! We’re finally done with the theme design for our Shopify powered store, now go ahead and review your document layers, delete the unnecessary ones and hand it over to your developer, or, even better, code it yourself!
أدهم أبهابي مدون محترف مهووس بالتطوير و تغيير ألوان قوالب بلوجر ، أحب ألعاب الفيديو و كرة القدم، ناجحٌ في دراستي إتكلم الفرنسية و الإنجليسية و مالك مدونة نجوم ويب.
محول الاكواد محول الأكواد اضافة الإبتسمات اضافة الإبتسمات تابع المدونة تابع المدونة