Web Courses Bangkok Blog

How to Make a Wireframe for an 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

Updated September 2026: this tutorial was built in UXPin’s 2017 editor, which has changed completely since. This version uses Figma, the design tool we teach today, for steps 4 onward; the layout thinking underneath is exactly the same in any tool.

The wireframe is a skeleton of the page. The design of the wireframe is almost contained in boxes and text. It 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?

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

Fashion store website design used as wireframe inspiration — Credit: https://www.behance.net/gallery/30135171/QUEEN-FASHION-STORE-WEB-DESIGN

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 wireframing in Figma

I’ll use Figma to create the Miss T&G wireframe. Figma is a web application (there is a desktop app too) that prepared all tools that you need for prototyping. Its free Starter plan is enough for this tutorial.

First, create and set your prototype artboard.

Start a new design file. You can change your project name by double-clicking on the text. Then press [F] for the Frame tool, draw a frame and set its width to 1224px in the Design panel. Make it tall enough to extend as the page grows.

Next, set your grid. With the frame selected, click Add layout guide in the right sidebar, set it to Columns, count 12, type Stretch, margin 15px and gutter 30px. That leaves 1194px for the content.

Press [Shift+G] any time to show or hide the grid on your artboard.

5. Insert elements

All element that you need you can draw with the tools in the toolbar, and you can modify the element by using the Design panel 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, press [R] for the Rectangle tool and draw a box across 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 Design panel.

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 pressing [T] for the Text tool, type Miss T&G and click on another area to finish typing. Also, change text size on the Design panel.

Type the menu items as separate text layers, insert them to the artboard and move them to the top bar.

The home and Last one are normal buttons
Make the current page’s item bold or underlined to show how it displays when you’re using that page (active page)
Dropdown, when you click this button, it will show you more menu. Draw the open menu as a separate group below the item
Treat a sub-menu item as an indented row inside that dropdown group
A second-level sub-menu is just another, further-indented row in the same group
Add as many menu items as you need the same way.

Then, add the menu items as the picture.

On the right side of the navigation, add three icons for login, view cart, and search. To add the icon, draw a small circle or square with a label for each and place them on our navigation bar. In the Design panel, you can change size also.

6. Components (Figma’s version of a “Smart Element”)

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

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

If you want to modify it, just double click the main component (the first one you made) and edit. When you’ve placed it on the other page, whenever you edit something in the component, it will affect another page too.

To make the dropdown work, select the component, click Add variant in the Design panel, and show the open menu only in the new variant. Then in the Prototype tab, drag a connection from the menu item to the new variant, with the trigger On click and the action Change to.

Let’s check the function, click Present.

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 (a rectangle with two crossing diagonal lines, the usual wireframe sign for a picture)
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 press [O] 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 leads 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 (half full width). Place the text “WOMAN’S” size: 36px and “New Trend Collection 2016” size: 25px

Adding button (a rectangle with text on it), 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 audience, 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, I use a 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 contains 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.

Draw two rectangles for the input fields, 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. Type “Email” as a label above the first one and “Password” above the second, to guide the user on what they have to fill in.

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

Next, add the checkbox: draw a small square, put it 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 Present 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 component 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%. Add a plus sign, and change colour and size.

To show it on hover, put the black box and plus sign in a second variant of the product component. Then in the Prototype tab, drag a connection from the first variant to the second, set the trigger to “While hovering” and the action to “Change to”.

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 filling in an email and one button to submit. Draw the input box and a button next to it, change the button colour, and type “Subscribe”. Type “Email address” in the text field to guide the audience on what to fill in.

Align everything to center.

14. Footer

The lowest of the web page, footer, my footer contains 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 T&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