wirframe

By Nanthawan Suwannapan

The wireframe is a skeleton of the page. The design of wireframe is almost contained by 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 gets inform, priority and organize.

wireframe

 

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 wireframe more than doing this after you design user interface or after you develop the page.

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

download the filesDownload all the UX design pages.

 

1. The structure of website

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

web page structure

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.

responsive design

 

2. Getting the inspiration

I got an assignment to design Miss T&G – 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 contents 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

NEW

WEB DESIGN
PROFESSIONAL BOOTCAMP

Learn more about our
industry focused course:

VIEW COURSE

 

3. Lo-fi Wireframe

If your idea 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 wireframe from your sketch and you can modify it later on the wireframe.

This is how my sketch look like

UX Design

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 tool that you need for prototyping. You can sign up for 7 days free trial, and prolong by share on social media.

First, create and setting your prototype artboard.

UXPin

 

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

named your project

 

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

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

Setting your artboard

 

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

view

 

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

show grid

 

5. Insert elements

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

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

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

 

box

 

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

border

 

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

placeholder

 

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.

text

 

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.

dropdown

 

  • Home and Last one are normal buttons
  • Add “*” to show how it display 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 “//” for making that button to be second sub menu
  • Click [add another option] if you want to add more navigation list.

Then, add the menu as the picture.

 

dropdown setting

 

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.

icon

 

6. Smart Element

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

smart element

 

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

Smart element

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.

 

NAV

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 Navigation bar I want to show the slider of 3 attractive picture.

  • 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 paragraph: center.

slider

 

Then search for circle, resize it (16*16 square px) and copy 2 more by select the object and hold [alt] on your keyboard, then drag to copy it. Change fill color 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 press [Ctrl+G] on the keyboard. Name it to “Slide button”

Select placeholder, 2 titles and slide button, click [Align center]. Then group them and name “Slider”.

 

8. New Collection

This part is lead to new arrival products. It’s 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.

new collection

 

As I showed you, I use a placeholder as a picture, resize 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 ghost button style, so I set white background and add a border, use the same color border with button text.

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

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

 

new collection

 

In the prototype, you can create 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

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

 

hot item

 

A new line, add “New Featured Arrival Items”, 22 px. Select these 3 elements and click Align center. 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 new collection box and hot item box is 60 px.

 

10. Log in box

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

This part, I just want a plain color 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.

login

 

You can notice that the fill box are not equal size, 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 color to gray, 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 first one and “Password” for another one to guide the user what they have to fill in.

login

 

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

 

login

 

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

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

 

wireframe

 

Align everything in the center. You got Sign in box 😉

Click preview to check your design.

wireframe

 

11. The products list

We use a few 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.

e-commerce

 

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

Why not equal with upper one?

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

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

 

e-commerce

 

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

 

e-commerce

 

12. Blog post

The blog post preview contained with image, topic, 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
  • The admin’s name, posted date, and category, I use text size 14px

Blog

 

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

blog

 

As the product, when mouse in I need to show the audience to see how it appear. Create 50% opacity black box, same size and the image and add plus sign on the top. Change the topic color 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 about new products, event, promotion, etc.

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 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 for fill email and one button to submit. Search for “Input with button”. This element is grouped, so double click to resize the button, change color, inside type “Subscribe”. Type “Email address” in the text field to guide the audience what to fill in. After you have finished editing the form, click another area to go out of the group.

newsletter

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, 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

  • Heading: GET IN TOUCH, 22 px
  • Content:

A: Web Courses Bangkok Sathorn Training Center Rama 4, Bangkok 10210

E: [email protected]

P: +66 (0)2-679-8607, 16px

Third column

  • Heading: PAGES, 22 px
  • Content: Home, About Us, Shop, Blog, Contact, FAQs, 16 px

Fourth column

  • Heading: OPENING TIME, 22 px
  • Content:

MON – FRI 9.00 – 21.00

SAT 9.00 – 22.00

SUN 10.00 – 22.00, 16 px

footer

Put the copyright “© Copyright 2016 – Web Courses International Co., LTD” in the bottom of the footer, align to left.

Add social media icon by searching from libraries, then align to right.

wireframe

 

 

Done!! Let’s see the design of the whole page. Now it’s ready to be export to design the user interface.

NEW

WEB DESIGN
PROFESSIONAL BOOTCAMP

Learn more about our
industry focused course:

VIEW COURSE

 

Nanthawan Suwannapan

About The Author

Nanthawan

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.