in this lesson we're going to draw
wireframes
i hope you have your pen and paper ready
this is my favorite part of the ui
design process
so why do i insist on drawing wireframes
with a pen
and paper while brainstorming layout
ideas on paper
before you jump into design software
helps prevent
getting bogged down with colors font
sizes
and trying to make your design pixel
perfect while you're still
in the initial planning stages creating
wireframes on paper
is more about thinking through the
overall concept
of your interface and where you want to
place various elements
it also helps to ensure that you're
actually asking the right questions
before you build an entire solution
and if you're brave enough to share your
drawings with others it's a great way to
get feedback early on in the process
before you've committed too many
resources to a specific design
so how do we approach wireframing well i
like to create wireframes using a simple
two-step process first you start by
drawing thumbnails for each
page in a user flow diagram
if you're doing this on paper you draw a
series of
two inch blocks where you try out
different layouts
if you do this on a whiteboard the
drawings can be slightly larger
now you don't need to be an artist to
draw wireframes
the task is not to create a masterpiece
you just want to try out your ideas as
quickly as possible
and see what works and what doesn't i
recommend creating at least
three thumbnail sized ideas for each
page
in your app in this example you'll see
that i've drawn
an overview for a pump digital twin with
three different layout ideas
then i've drawn the drill down pages
that open up when you click on an
individual pump
i've done three layout ideas for that
screen as well
you'll notice that there isn't a lot of
detail in these wireframes
i didn't use a ruler my pump drawing
sort of looks like a donkey
but that's okay the idea is just to get
my ideas onto paper and out of my head
so once you've decided on the best
version of each layout
it's a good idea to turn that thumbnail
drawing into something slightly larger
in this more detailed wireframe you can
opt to use a ruler like me
and it's useful to also think about the
percentages for the various columns in
your grid layout
this will help to ensure that each
element gets the right amount of space
if you want to take it a step further
you can turn this detailed wireframe
into what we call a high fidelity mockup
this is possible using
various prototyping software platforms
there are tools like figma sketch adobe
xd
or you can even do it in powerpoint but
that's going to be a whole course in and
of itself so
i won't be going into a whole lot of
detail on creating high fidelity
mock-ups
but if you want to create the thumbnail
and detailed wireframes on paper
you're going to get 80 of the benefit
for 20
of the effort now that you know how to
plan your layouts using wireframes we're
going to discuss how to create a color
palette for your interface
