Web Courses Academy Blog

How to make wireframe for a stunning E-commerce website

Author: Nanthawan Suwannapan

She is an UX, UI designer working at Web Courses Bangkok. Perfection is her passion and she believes in giving best user experience with awesome looking design.

Sharing is caring

The wireframe is a skeleton of the page. The design of the wireframe is almost contained in boxes and text. It’s will let you get a rough idea about which topics or contents will be shown on which area of the page. It helps you to plan the layout according to the content that you need the users to get informed, prioritise and organize.

Prototyping is a kind of wireframe and you can add interactive functionalities or clickable buttons which lead users to another part of the page or to another page.

In addition, it’s also easier to modify and delete things in the wireframe than doing this after you design the user interface or after you develop the page.

To save your time and to be professional. let’s design a wireframe.

Download all the UX design pages.

1. The structure of the website

The first thing that you should know about creating a wireframe for the page is to structure the page. The general web page consists of 3 parts, heading on the top, body, and footer

Another thing you have to know is where your design will be displayed on, mobile screen, tablet, or desktop. The different size of the screens affects how it displays the contents. The desktop is wider than phone screens. Normally, we use 12 grid columns for the desktop screen, 8 for the tablet, and 4 for the phone. In this tutorial, we will talk about creating a wireframe for the desktop.

2. Getting the inspiration

I got an assignment to design Miss T&G – a fashion clothing e-commerce website. The brief is creating an attractive, simple web design and make it easy to develop by WordPress, use Divi theme and plugin Woocommerce. I’ll show you how to design the homepage.

What kind of content that the user will expect to see on the homepage?

If you have to

I found this from Behance. I think the layout is quite simple and beautiful.

inspiration — Credit: https://www.behance.net/gallery/30135171/QUEEN-FASHION-STORE-WEB-DESIGN?utm_medium=email&utm_source=transactional&utm_campaign=project-published

3. Lo-fi Wireframe

If your idea is still in the air, you have many ideas, but can’t combine it together. I advise you should sketch it. Just draw it roughly to make yourself get an idea first. It is easy to create a wireframe from your sketch and you can modify it later on the wireframe.

This is what my sketch looks like

4. Let’s start with wireframing in UXPin

I’ll use UXPin to create the Miss T&G wireframe. UXPin is a web application that prepared all tools that you need for prototyping. You can sign up for 7 days free trial, and prolong by sharing on social media.

First, create and set your prototype artboard.

After you sign in, it will show you the dashboard. Click on the [Create another prototype] button.

Then you can change your project name by double-clicking on the text.

Next, set your artboard size. Go to the Properties tab, and set as the picture.

Does the grid appear on your artboard? If no click on the [View] button. It’ll show a new popup, check on “Show grid” and close.

It’ll show a new popup, check “Show grid” and close.

5. Insert elements

All element that you need is in Libraries Panel on the left side, and you can modify the element by using Properties on the right side.

On the top of my design is the navigation bar. I need to put a logo on the navigation bar and menu to link to another page.

To add a bar, create a box by go to the “Libraries” panel, and search for “box” and clicking or dragging a box to your artboard.

Resize the box to full width, and move it to the top. You can change colour, add a border, or change the opacity by using the properties tab.

Insert a placeholder put in the middle as your logo. Miss T&G logo will be the wordmarks logo, so I can type the name as my logo.

Add text by searching on Libraries panel, type Miss T&G and click on another area to finish typing. Also, change text size on properties.

Search for navigation, insert to the artboard and move to the top bar. And click preview on the top to see the function of navigation. Back to your prototype, look at the properties panel > Page Options. Notice the text on the text field.

The home and Last one are normal buttons
Add “*” to show how it displays when you using that page (active page)
Dropdown, when you click this button, it will show you more menu
Add “/” for making that button to be a sub-menu
Add “//” to make that button to be a second sub menu
Click [add another option] if you want to add more navigation lists.

Then, add the menu as the picture.

Let’s check the function, click preview.

On the right side of the navigation, add three icons for login, view cart, and search. To add the icon. Change from featured to “UXPin Icon Set” and search those three icons and place to our navigation bar. In the properties, you can change icon and size also.

6. Smart Element

Normally, the navigation for a website should look alike on all pages, so you can create the navigation bar as a “Smart element”. It will be kept in your smart elements panel on the right side. So if you have more pages you can drag it from there, don’t have to create a new one.

To create smart elements, drag to select all objects and right-click, click [Create smart element], then name it.

If you want to modify Smart Element, just double click and edit. When you put on the other page, whenever you edit something in the smart element, it will affect to another page too.

The navigation bar is Done!!

7. Slider

For now, you’ve already know how to add the elements. I’ll explain roughly to the next things.

After creating the Navigation bar I want to show the slider of 3 attractive pictures.

I use placeholder as a full-width picture, size: 1194*545 square px
put the text “Using Code: SPRING_T&G”, size 40px as a title
“DISCOUNT 25% FOR ALL PRODUCT”, size 20px as a subtitle on the top of the picture.
Both set paragraphs: centre.

Then search for a circle, resize it (16*16 square px) and copy 2 more by selecting the object and holding [alt] on your keyboard, then dragging to copy it. Change the fill colour to show which slide is displaying. Move three circles close to each other select three and click [Align middle] and [Distribute horizontally]. Group them by pressing [Ctrl+G] on the keyboard. Name it to “Slide button”

Select the placeholder, 2 titles and slide button and click [Align centre]. Then group them and name them “Sliders”.

8. New Collection

This part is lead to new arrival products. It’s a less important part than content in a slider, but I want this part to connect with the header, so I put it close to each other.

As I showed you, I use a placeholder as a picture, resizing to 597*400 px (haft full width). Place the text “WOMAN’S” size: 36px and “New Trend Collection 2016” size: 25px

Adding button by searching in the libraries, size 120*35 px. Double click and change the text to “SHOP NOW” size: 14px. I need a ghost button style, so I set white background and add a border, using the same colour border with button text.

Another side, copy woman collection elements by holding [option/alt] on the keyboard and dragging your mouse to the right side, then holding [shift] also to make it align with the first group.

Change the text to “MEN’S” and all text-align right, and move the text and button to align right and align to the grid.

In the prototype, you can create an interactive hover button to show to the audient, but when you export as the png, the audience won’t get this function. So I change the button color one side to make them know.

9. Hot Items

For this one, I just want a big picture as a button and add the text on the picture. As usual, search from placeholder, size: 708*295 square px and add the text “WHAT’S HOT THIS SEASON”, 28 px.

A new line, add “New Featured Arrival Items”, 22 px. Select these 3 elements and click Align centre. Drag all of them to the left side of your artboard but still in the grid. We don’t want this to be full-width. The distance between the new collection box and the hot item box is 60 px.

10. Log in box

The log in box has contained a form for the audience to fill username and password and then click sign-in button. Sometimes, it shows remember me checkbox and forget your password link too. We’ll use this common form.

For this part, I just want a plain colour background. I use a box without border size: 338*295 square px. Then searching for “form” in the libraries. Use form 2, round borders. Put on your background.

You can notice that the fill box is not equal in size, is too small and the border is blue. This form is grouped, hit [cmd/ctrl + shift + g] to ungroup them. Delete a lower one, change the border colour to grey, thickness: 1 px, and resize to 256*34 square px. Press [option/alt] and drag it down to copy this element. Double-click you will see the cursor inside the box, type “Email” for the first one and “Password” for another one to guide the user on what they have to fill in.

You can use input from the libraries also, same things, but has only one box.

I think we should add the topic for this box. Add the text “SIGN IN” size: 22 px

Next, add the checkbox, search in the libraries, put on the background, and change the text to “Remember me / Forget my password”

The last thing, add a simple button and put the text login inside.

Align everything in the centre. You got Sign an the box 😉

Click preview to check your design.

11. The products list

We use a few pieces of information to show the goods on the homepage – product picture, product name, and price. I need to present 8 products. I will make two rows, add 4 products per row, the product pictures wide 3 columns. Picture height is 29px, products name size: 16px, price: 18px, bold.

All products should have the same layout, so I create a smart element and named it “product”. The same distance between the upper element, 60px. Make it 7 more copies. The distance between the two rows is just 40px.

Why not equal with the upper one?

Because the products are all in the same content group. It’s the proximity of the same thing, so the audience can categorize after seeing it.

Hovering on a product, it will show a plus sign to guide the audience to know that they can click to see more information.

Create a black box, the same size as the product image, and change the opacity to 20%. Search for a plus sign, and change colour and size.

12. Blog post

The blog post preview contained images, topics, short content, and details. I don’t think I will update blog often like the products, so just 3 new latest is fine.

Big topic “LATEST BLOG” size 22px and bold
Images size 340*170 px
Post topic text size: 18px and bold
Short content text size: 16px
For the admin’s name posted date, and category, I use text size 14px

Align everything to left. Then group the image and text, copy 2 more group.

As the product, when mouse in I need to show the audience to see how it appears. Create 50% opacity black box, the same size and the image and add plus sign on the top. Change the topic colour too.

13. Newsletter

For people who want to follow up for new updates of any website, there is a simple form to let the audience leave their email. Then admin will send the newsletter to them to tell them about new products, events, promotions, etc.

The newsletter form can be pop-up or contained in the footer. I’ll put upper the footer for this site. The elements are background, text, form, and button. You can add elements as to how you create the login form.

I created a full-width background and put the text like this:

Heading: “GET IN TOUCH”, 20 px
Explanation: “Hey you, connect with us to be the first to find out about our latest news and promotions”
Form: This form is for fill an email and one button to submit. Search for “Input with the button”. This element is grouped, so double-click to resize the button, change colour, and type “Subscribe”. Type “Email address” in the text field to guide the audience on what to fill in. After you have finished editing the form, click another area to go out of the group.

Align everything to center.

14. Footer

The lowest of the web page, footer, my footer is contained 4 groups of information – About us, contact info, pages, and opening time. I separate the information to 4 columns.

Create full-width background, change to dark color, and put the information in 3 column width text box like this

First column

Heading: ABOUT US, 22px
Content: Miss P&G started up in 1991 with a clear international mission and with the intention of dressing young people who are engaged with their environment, who live in the community and relate to each other. Young people who have a casual dress sense, who shun stereotypes and who want to feel good in whatever they are wearing, 16px

Second column