How to Design a Website – A UX Wireframe Tutorial

if you’re planning on designing or

developing a website before you get

started it’s really important to be able

to do

wireframing so that both you and the

client has a good idea

of what it is exactly that you’re

building and how it’ll work

in this video i wanted to talk a little

bit more about wireframing

what it is how it works and we’ll even

build out a wireframe so you guys can

see the full process

and we’ll build this example out over

here if you haven’t heard of me before

that’s fine i’m

adrian from australia i do videos around

design and development and you can check

out my channel in the description below

but without further ado

let’s just jump straight into it if you

haven’t heard of wireframing before

that’s fine what it is is essentially a

visual blueprint for

how the website will work as well as the

pages themselves and it also works

as a schema for the functionality of a

system so that you get a better

representation

of what’s going on it’s really useful

and it’s really easy to do as well

it can take a number of forms you could

just use a piece of paper

and sketch it out or you could use your

ipad or even one of the third-party

websites which

allow you to do wireframing these days

we’re going to take a look at a few of

these examples to see how we can build

our own wireframe

but if you want to get started on your

own you can get started with just a

piece of paper

and if you’re worried that you’re not a

ui designer and

a graphics designer in general and

you’re not too sure what’s going on well

you don’t have to worry about any of

that because wireframing doesn’t require

really any understanding

of ui you just need the bare essentials

of being able to draw boxes and circles

we’re not going to look into colors

we’re not going to look into content or

logos or any of that

wireframing is just the way that the

pages will work

and anyone who’s doing design or

development will be able to jump

straight into it so

let’s take a look at how we get started

by creating our very first

wireframe in this example i’m going to

be using my ipad and i’m going to be

using an

application called concepts which is

just made for drawing

but i’ll put a link in the description

below so that you guys can download it

if that’s something you guys want to use

otherwise you can use a pen and paper

just as well

the very first thing i like to do before

i even begin

my wireframing and something that i

think is really important is

creating your sitemap the sitemap gives

your entire website direction so that

you know what pages you’re building

and with most site maps the very first

thing that you start off with

is a home page every other page flows

out of that home page so you want to

begin with that

and the very first thing you want to do

is probably write out the

most important pages you have so besides

the home page this is usually things

like the services

page or the product page or the contact

us page

these pages are the core of your website

and if you’re doing an application in

this case maybe these are your main

screens that you want to route to

but these are the ones that have sub

pages under them as well

by creating a sitemap just very simply

and visually like this

you’ll be able to show and represent how

all the pages work together

if there are some pages you can branch

them out as well

and if some pages are linked to other

sideways you can

draw arrows to represent that in this

example we’re going to just start off

with something very simple so

what i want to be able to do is just an

about us page

maybe a features page and a home page

and what we’ll do is we’ll design these

as wireframes once we draw out the

sitemap and we might even create a

responsive design for them

but to start off with let’s create and

finish up this sitemap just to see

what we’re going to be creating in this

video today

now that we have the site map done let’s

start off with

our very first page and the first page

we usually start on

is the home page the home page usually

represents

the design that we’re going to be

utilizing for the rest of the pages

and two of the most important parts of

a home page are the header with its

navigation and menu

as well as its footer because that’s

going to exist on most of the other

pages

what we’ll start off doing is creating a

layout here for the home page and

usually what i like to do

is create it so it’s quite wide we can

zoom into it

and we have enough there for almost 12

columns so that if we want to use things

like bootstrap or

other tools to do the layout they’re

ready to go

otherwise we can always do our own

layout for the ui

for the first part of this layout what i

want to be able to do is

create a section here for the logo as

well as the menu

and what you’ll do in wireframing

usually is

just create basic representations of

these so in this case i’m just using a

circle with the letter l there to

represent where the logo will go

and for the menu i’m just drawing out a

number of boxes

here with a shaded one representing the

current

one we’re on and this will later be

filled out with things like home about

and other sections that we might have

pages for

but it gives us a quick representation

of what the header will look like

after we’ve finished designing the

header we can start looking at

creating the main hero image and the

hero image these days

are a big gigantic image that sort of

runs behind the very front of the

website as well as

near the header and a lot of the cases

these days you’ll find that the menu

actually sits on

top of that header image well sometimes

people like to place it in below

and a lot of these headers as well

sometimes are sliders so what i’m going

to do is

in this example i’m going to draw an

arrow to the left here and

the right and i’m gonna represent this

with a number of dots as well

as the text here to say that this will

be a slider image

and people will be able to slide between

different options here

now that we’ve done this top header

section with our hero banner we can

start moving on to

the next section here on our home page

and when we’re designing a website

usually the next thing that you want to

be able to do

is either a call to action or a bit of

information about

a website and this is really well

represented with maybe an

image a large title and some

descriptions about what the website will

be

so what we’re going to do is we’re going

to create a box here with a crosstalk to

represent where we’ll place an image

and we’re going to create a title

section here which will have slightly

larger fonts

and a few lines to represent maybe some

description or text will later fill in

in this section now that we’ve got this

section in and we’re going to be

creating

more sections out it’s good to be able

to label our sections so that

for anyone coming in from a third point

of view they’ll be able to know what

each section is

so what i’m going to do here is i’m

going to create out

labels for each one of these we’ll have

labels here for our menu

for our hero banner and in this case for

our about us section

that way later when we need to reference

it we can point it out and if someone is

coming in they’ll be able to identify it

immediately

now let’s take a look at creating our

next section over here

and what i want to be able to do is

  How to Make a Website in 10 mins

usually i break them

into line items because sometimes you’ll

be able to copy paste them across to

other parts of the website and also

really segregates them but in this case

when you create the website later on

with the ui and the u

um ui design you might not need those

section breaks but now

we’ll just create one more here and in

this case i want to create a section

break

here for maybe something like

testimonials or sponsors

in this example for a wireframe we will

have lots of sponsors to identify

so i’m going to represent a nice big box

here that’s grayed out

as a maybe h1 or h2 maybe even a h3 tag

here that’ll

represent that as sponsors later on and

i’m going to draw a

number of boxes because we’ll have about

12 or so sponsors and

each one of these will follow that

similar column design that you would

expect when you’re doing bootstrap

or you can fit about 12 columns in a

single section

and with this done we’ll be able to fill

out this section quite neatly

and we’ll be able to identify it as a

sponsor section

now this is really quick and simple and

you can see that

even the line isn’t that accurate and

this is more or less done in just a few

seconds the goal isn’t here to have a

perfect ui with perfect box shadows and

backgrounds and colors it’s

really just to give a representation of

how you plan the workflow of the website

to be

when you’ve got that workflow down you

can move sections around you can move

maybe the

sponsor section up or down or to a

different page entirely but the plan

here

is to give a representation of that

section later if

the client come back comes back and they

only want

three sponsors or two sponsors you can

simply update the layout

and maybe provide something different in

that case the other thing i’m going to

do in here is i’m going to add a

button here to our about us section and

this will simply be so

that there is a small call to action

there that if someone wants to learn

more information about that about a

section they can go to there

let’s take a look at creating a third

section here

this next section will be our footer

section where we’ll finish up the

website design at least here on the home

page

and when you’re doing the wireframe for

a footer there’s usually a few things

you want to make sure that you add in

there

i think that having the logo reset

and placed in there again sometimes in a

reverse color is a good idea

as well as maybe having a contact form

and a site map

so the first thing here i’m going to do

is i’m going to create a small

contact form which will have a shaded

out title with some inputs and a button

to submit

since we want to show that this footer

will have

a darker color what i want to be able to

do is

show this visually so i’m going to draw

a few lines here

to represent that this might have a

different shade or

maybe it’ll have a dark theme or

something different in general just so

that the footer stands out on each one

of the pages

once we’ve done that the next section

here i’m going to create will

actually be the site map now we don’t

have to give the actual pages in here

i’m just going to draw

lines to represent all the pages we

might want to represent

and sometimes you might want to limit

down your site map just to the core

essential pages but

this is just a representation that will

be having that

in there and finally what i like to do

is display the logo here

last and the logo will also have a bit

of information underneath

and usually the last bit of information

i like to include is maybe the

phone number as well as the email

address so that

if someone’s looking to contact their

website service or product directly

they’ll be able to do that

immediately sometimes it’s good to have

this on the header as well but

at least this finishes up our footer

section

and this means that most of our home

page here

is now done and as you can see we’ve got

our slider image

about us section some sponsors and a

simple footer

i know that some people like to keep

pages for the home page just a single

maybe height and width where you might

not even have any scrolling

whereas other people might have parallax

scrolling that might go

and reach 20 screens in height but

sometimes that’s too much so you have to

make sure you balance it out

now since we’re doing wireframing one of

the important things

i think is worthwhile doing is labeling

most of the content

content we’re working with this labeling

is not really for us but it’s more for

the people

viewing this who might not be web

developers so what i’m going to do is

i’m going to select a different color

here in our tools and i’m going to

basically start drawing out arrows to

represent what some of the items here

are

and this will just be visually really

simple sometimes you can do this on a

separate layer so you can hide it later

but i usually like to make it clear and

defined so that if there are any

questions

then they’ll be immediately answered by

this labeling

so here i’m going to label that the

contact us form the footer as well as

the business contact information

and i’ll work my way up so that if there

are any other things that

might be worth representing like the

phone number and the email address

they’ll be really obvious and they’ll

stand out

the other thing i like to do is maybe go

through some of the other sections here

as well if we’re going to do good

labeling we need to make sure that we

represent what some of these section

legends essentially are so in this case

like the

darker block here will be a title

whereas these small boxes will be

logos of the sponsors themselves and

this just makes it a little bit easier

to read

let’s go through our design here and

clearly define each one of these so

in this example this will be an intro

title

and we’re going to have some

introduction text here

as well to represent what this

information is

finally let’s go through and label this

last image here

on our left and what i want to be able

to do is just show clearly that this

will be an image that will represent the

business

or the information about the business in

a particular way

images are hard things sometimes people

really want to

have the ability to change an image to

fit

what information it’s matching and

sometimes they don’t even have that so

they use stock photography

and during wireframing it’s really not

important which

image you select it’s more about

labeling what you’ll be doing

and where it’ll be laid out and later on

when the client figures out what they

want to do with all the imaging that’s

when you can do all of that

finally let’s quickly mark up our slider

image in here and just

say that there’ll be multiple slides

here so we’ll need multiple

images to display this home page and

that finalizes

most of our home page here and now that

we’re done with that

i think we can move on to our next

section when

creating websites we do have a number of

different page

layouts and usually what we have is we

have

a internal page maybe a blog page

a contact us page and a features page

and each one of these will have slightly

different layouts and

in this case one of the difficult

layouts to do is actually the features

page

this is the page that really has to

promote your product or your website

so what we usually like to do is we like

to make it a little bit more interesting

with more photos and text and call to

actions to really engage the customer

or the user of the website what i’m

gonna do to

  Modern Geometric Website UI Design

create this page is i’m going to copy

over the header section

we want to keep a consistent header

throughout all our web pages so

in most cases i will be copying this

across

what’s going to be different about this

page is that we’re not going to have

that very large slider that we had on

the home page

instead we’re going to have a title

section here and i’m going to define

this

by creating a separate section in here

and labeling it with the page title with

a darker shade there to represent that

h1 element

this will later on be themed based on

the colors that people might want to use

for the features page but for the time

being we’ll just keep it black and white

just so that we know that the title

would be in there

for the features page when we’re

creating different sections

we need to really visually represent

those

in this case i want to represent the

features page with

a number of large images and large

blocks of text to really

show off what this product or service

will be defining

so what i’m going to do is i’m going to

have a large square box here which will

represent the image

as well as a large title and a

description

and this will be our very first service

in here

in this case sometimes services have

some bullet points

to show off what they do so i’m going to

create some bullet points in here

and each one of those bullet points

might have a tiny little icon or

image as well and this creates our very

first

section here for a feature image but

what’s really cool now is that we can

reuse this

to create the next section for our next

feature so what i’m going to do is i’m

actually going to just copy over the

layout that i previously used

for the very first feature and i’m going

to copy over the image as well

and in this case i’m going to reuse them

but slightly different i’m going to

actually place them

on opposite sides this will make the

page just

a little bit more interesting without

actually trying to redefine it and it

keeps things consistent as well

now if we have a number of services we

can actually just copy page

copy paste each section down below

once we’ve done this we’ll have a very

simple

representation so that the user will

understand what’s going on on this page

let’s label this though for someone who

might be viewing this wireframe

we’ll show off that this will be feature

one

feature 2 and feature 3. and later on we

can find

images and text to do this but for the

time being

this gives us a clear indication of what

the features page will look like

the only thing that this page is now

missing is the footer

but we can copy that across really

easily so what i’m going to do

is i’m actually just going to grab the

footer here from

our home page and we’re going to copy

that across

straight across to our new features page

and we’ll be able to copy this across to

all the other pages that we make we

might not need some of that additional

markup that we created there on the home

page because it’s a little bit redundant

but what we can do and i can see that is

missing

is maybe a copyright section because

whenever you do have a footer you do

usually have all that information

in there but usually also have a really

small section there for

a copyright so let’s actually create

that and that’ll be just something

really small on font size which is

usually just a bit smaller than what the

default font size is on a website and

we’ll just represent that with a single

line but we’ll

mark it up to say that this will be the

copyright

section and let’s also copy that across

to

our features page just so that it’s

consistent all the way throughout

you’ll find that when you’re doing

wireframes you can just do this in a few

seconds

and later when you’re doing the actual

layout and ui

maybe in adobe xd or figma you can

create out different section components

which you’ll really easily be able to

add to other pages

but in this case we’ll just do it

quickly and manually

our features page and homepage are now

done but

right now we don’t know how we get from

one page to another page

so what i’m going to do is i’m going to

just draw out some really large lines

here

to show how you navigate from one page

to another

the first will be here in our header

where we’ll design a line to show that

one of the header items will take us to

the features page

and the other will be just in the about

us section where when we select the

button

it’ll also take us to the features page

now that we’ve represented now that

we’ve represented the navigation

here on our wireframing we can move on

to the next page

the next page i want to create here is

our about us page

and actually maybe no maybe let’s try a

different page let’s

try doing a contact us page this one

is actually underrated but it’s one of

my favorite pages

i know that whenever i’m visiting a

website or a service

and i want to get in contact with them

especially if they’re a local near my

area

the contact us page is probably one of

the very first ones i go to because i

just want to give them a call or an

email

so in order to create this let’s just

simply copy out

our header here again the contact us

page has usually a number of elements so

the header and the footer are the first

two most basic ones and

since we’ve designed those already i

usually just copy them across for each

page i do

the other x the other aspects of the

contact us

page i usually like to add in are the um

the phone number the email maybe a

form to represent maybe a contact form

that you might want to simply fill out

as well as a map i think a map is

important especially if your business is

local or your website is doing a local

service

and people need to be able to get to it

so let’s copy out a small section here

for our title

like we’ve done similar to the features

page again so that

it’s all consistent and then let’s

create some of those other elements so

in this case let’s create out a

representation for the map in this case

i’m just going to do it similar to what

i did with the

images on the home page in the features

page where it’s just

a large box we do know google maps

usually has a little box at the top

left to represent the address but this

should visualize

that and we should be able to add some

markup here as well

to let people know that this will be a

google map that they’ll be able to

actually click to

and get directions straight to this

business

next up let’s create this section here

for maybe

the contact us information so in this

case i’m going to do a small little icon

here and maybe this will be like a

font awesome little phone or something

like that with the phone number here

and maybe we’ll use another one just

like this with maybe

an envelope to represent the email

address which we can add in the line

below

with these two being the most important

we usually always add them at the very

top

and straight after that some people just

like to send a message through a simple

contact us

form now in this case we already have a

contact us form here on the footer

so sometimes when you don’t have those

in the footer you can

add them here to the contact us page but

in this case since

we already have one i think it might be

a little bit redundant to add another

one

but what i might do is just add one in

visually as a representation of what it

should look like if we didn’t have one

in the footer

and in this case it’ll just be a few

  Everything about Web Design

check boxes with maybe a

larger one here which might be a text

area where people can fill it out

with a slightly darker call to action

button which will be the contact form

submit button

and this should finalize our contact us

page

as you can see it’s a lot smaller than

our home page in our feature or page but

it’s because it’s straight to the point

it gives the information that we’re

trying to provide here straight away

and in this case let’s do some

navigation to show how we’ll get to that

contact us

page and in this case it’ll just be

selecting the menu at the top right

to make sure that we’re browsing

straight there usually sometimes you

also might have

a contact us page somewhere near the

footer but we’ll keep it nice and simple

in this case

now that we have our home page and our

features page and our contact us

page done i think this is more or less

most of our content done in general what

we could do is

we could lay out some of our components

here just so it looks visually a little

bit better

if you’re doing out wireframes usually

you’ll want to do

quite a few pages you want to do

internal pages

category pages maybe product pages and

lots more

and the other thing you want to do is

you want to make sure that you also

create ones which might be responsive

this means that you might want to create

one ready for a tablet or a mobile phone

let’s take a look at how we can quickly

do an example

of a mobile responsive design for the

home page

because i think that would be useful

just so that the user or the person

viewing this wireframe gets a

better representation of how the design

adapts

when you go down to a scroll smaller

screen size so what i’m going to do is

i’m going to

put in a label here for mobile version

and what i want to be able to do

is create slightly smaller

a slightly smaller width it’ll be what

you would expect for a mobile phone so

it’ll probably be

a lot longer than the actual home page

and we’ll probably have to add slightly

different elements

in this case the very first element that

we want to do when we’re doing

a mobile responsive design is a button

for the menu

and a second button for an interaction

usually

to call the service or business or maybe

to email them or something like that

we’ll add the logo in the middle here

because it’ll probably be very small

we’ll have to make sure it has enough

room and we’ll still draw that little

square in the background to represent

the slider image which will be a lot

smaller

sometimes you don’t even have sliders on

the mobile version

and you just have a single image let’s

put some mock-up here to represent

what each one of these items are and in

this case it’ll

just be the mobile button which will

expand out the mobile menu

as well as the phone number or mobile

number depending on what it is

let’s draw out an l just there to

represent the logo

and have a look at creating our next

section here

our next section was an intro section

which had an

image it had a title a description and a

button

now since we don’t have that same wide

angle that we do on a desktop we really

have to collapse this down to

a single column and row and in this case

what we’re going to do is we’re going to

rearrange some of the content so it

makes a bit more sense

sometimes people put the image first but

there’s no context to that

so what you want to do in this case is

put the title with a description in

first

and then the image can follow this these

will all be

collapsed down to a single column so

that they fit in nicely

and they’ll flow on based on the

information that they provide

let’s actually copy out an arrow to show

that this is the responsive

version of this same content when we go

to a responsive version we usually make

the

margins from the top to the bottom a bit

smaller as well as the font size and the

image is a bit smaller

so as you can see this section is almost

the same size as the previous section

but obviously this might work

differently in practice it depends on

how you’re

arranging the content the next section

here was the sponsor section

and when we’re collapsing down this

section since the

sponsors already are quite small we’ll

actually be able to fit about

two in on the mobile design if you were

to go up to a larger size maybe a tablet

view or something like that

maybe you could even expand them out to

four or six items per

row but in this case we’ll just stick it

in with two items or

in this case maybe three items i don’t

know three looks like it’s

just barring the edge of what’s possible

but at least it doesn’t make this

section

too large finally let’s take a look at

the last section here which is the

footer and for the footer yes the

contact us form is a little bit in the

way so let’s move that out of the way

and let’s create out this footer now

since this footer

actually does have quite a lot of

content it’s probably going to take up a

lot more space

the very first thing here we’ll want to

add in is our contact us form

so let’s represent that with a title a

few inputs

a text box and a button and after we

create this

we can move on to the site map and this

will be the next

main column here that we want to provide

and

this column will again have more or less

the same information we could even

copy paste it across and sometimes you

might not even want to have

so many items you might hide out one of

the columns if you don’t want to use

them

but in this case i do want to use them

so i’m just going to create this next

section here

as a site map so let’s put in a

header section here to represent that

and let’s put in a few lines here to

represent the menu items for that site

map

and finally let’s create our last

section here

which will be for the logo and the

contact information

so in this case since we’re on a mobile

design we

could make the logo here for this footer

section

full width or we could make it half

width and we can create

icons here for the phone number in the

email

and that finalizes our mobile design we

now have our home page with a mobile

version our features page and our

contact us page

and these are the basic building blocks

to create out the rest

of the website what i’m gonna do is put

a

copy of this wireframe as an svg

in the description of this video so you

guys can check it out

i’ve done lots of wireframes in the past

sometimes

i just simply use a piece of paper and

pen to create them

whereas other times i might create

something in figma or a third-party tool

but the goal here isn’t to essentially

use a certain tool to do it

it’s more about creating a simple view

for yourself

and the client to present as a plan of

what you’re building for your next

website or application

and i might do some videos later on on

ui design

things like color theory and how to

create uis in general

and i hope you guys will check those out

in the future

if you forgot who i am i’m adrian from

australia and i do videos around design

and development

you can check out my channel in the

description below where i do things on

react and wordpress and ui

but otherwise i hope you guys enjoyed

this video if you did

please hit like hit subscribe leave a

comment and i’ll see you in the next one

thank you

 

You cannot copy content of this page