web design - wire framing

1. WIREFRAMIN
G
BASI

2. WHAT IS
WIREFRAMING?
 They are like
“blueprints for design”
 They are visual
representations of an
interface.
 But what is an
interface?

3. WHAT IS AN
INTERFACE?
 INTERFACE or User
Interface (UI) is simply a space
where interactions between
humans and machines occur.
 they are basically the
applications/software on our
phones, computers or devices
that allows us to:
Open an application
Make a call
Type messages

4. WHY MAKE A
WIREFRAME?
As it is a visual representation of an
interface, it helps the designer to plan the
DETAILS of a website or mobile application
s/he is intends to make.
 STRUCTURE
 CONTENT
 INFORMATION FLOW
 FUNCTIONALITY
 BEHAVIOR

5. WHY MAKE A
WIREFRAME?
STRUCTURE
CONTENT
INFORMATION FLOW
FUNCTIONALITY
BEHAVIOR
How will the pieces of the web/app be
put together?
What will be displayed on the website
or application?
How will the information be
organized or displayed?
How will the interface work?
How will the website or application
interact with the user?

6. 1. Sketching - a hand
drawing of your
app/website interface
2. Stencils – a pattern
that can be used to draw
the interface
3. Wireframing software
HOW TO MAKE A
WIREFRAME?

7. HOW TO MAKE A
WIREFRAME?
Wireframes do not usually
have:
1. Colors and texts
2. Pictures/Graphics
3. Styling

8. BASIC PARTS OF A
WIREFRAME
There is no specific format
for making a wireframe.
However, by looking at
some examples, you will
have a general idea of
what it looks like and how

9. NOTICE HOW A WEBSITE LOOKS
LIKE IF IT DOES NOT LOAD
PROPERLY?

10. WIREFRAME EXAMPLES
Cooking application
Notice the layout
and how the parts,
icons, images, text
etc. are represented
by gray boxes and
how they are

11. WIREFRAME EXAMPLES
Weather mobile application
Notice the
arrows that
show how
clicking on
one
element
bring the
user to

12. WIREFRAME EXAMPLES
Application for a special event
Take note
of the
icons,
images and
pictures
used and
the
arrows/link
s that

13. PRACTICE
WIREFRAMING
1. Go to your browser and type in this web address:
https://app.diagrams.net/ You’ll see something like this!

14. PRACTICE
WIREFRAMING
2. Change the title into “My first wireframe” and save as an
editable bitmap image (.png)
Click this

15. PRACTICE
WIREFRAMING
3. Navigate through menu to explore. Make yourself familiar of
the other parts like SCRATCHPAD, GENERAL, MISCELLANEOUS,
ADVANCED, BASIC ETC.

16. PRACTICE
WIREFRAMING
4. Assemble these shapes and then put together into
something that looks like an iphone.

17. PRACTICE
WIREFRAMING