2.4 Wireframes Xmpro Ui Design Basics

To get access to the full course and resource links mentioned in the video, sign up at https://courses.xmpro.com.

Need help with creating your XMPRO apps? Send an email to [e-mail]...

Transcript

To get access to the full course and resource links mentioned in the video, sign up at https://courses.xmpro.com.

Need help with creating your XMPRO apps? Send an email to [e-mail]... 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