2.2 Grids - 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]

Go to https://xmpro.com if you want to learn more about how you can build real-time applications with our Event Intelligence Platform.

Transcript

how do you create an interface

that looks organized is easy to navigate

and responds to the device that it's

being used on

well the answer is by creating a

responsive grid layout

as we mentioned in the previous video on

responsive design

it's important for a design to expand or

contract

to fit the user's screen and to do that

you need to set

column widths in your grid in

percentages

and not in pixels so why not use pixels

well let's say you make a column that's

a thousand pixels wide

and your tablet only has 964 pixels of

real estate

well the content on your screen will get

cut off

and this is definitely not going to give

your user a good experience

once you have responsive columns that

use percentages

you also need to determine how elements

should be arranged

based on screen size and to do that you

can use something called

flex layout the xm pro learning youtube

channel has a great tutorial

on flex layout and i highly recommend

that you watch it

i've added a link to it in the

description below this video

let's dive a bit deeper into grid

layouts

so when you're designing your app

interface you will probably have

multiple pages that you need to create

layouts for

so i recommend creating a grid layout

with percentage based columns

for each page in your app and then you

want to add

consistent gutters between the columns

and the rows

to give you an organized structure to

work within

so using grids to give structure to your

design is an age-old practice that comes

from the world of print media

it does take some practice to fit your

ui elements into these percentage-based

columns

but eventually you will get the hang of

it and until you do

exon pro has some useful templates in

the app design

library that you can use to give you a

head start

now that you've divided your page into a

grid layout

it's time to look at margins and padding

the diagram you see on the right is

called the box model in css

all html elements are created in this

way

so you have a box that contains your

content

then you have padding around the box

which is an area that adds space between

your text or image

and the edge of the box content and

padding

sits inside of the box then you have the

border which

which sits just on the edge of the box

and the space

outside the border is called margin

adding padding and margin to elements

helps to create a more organized

interface with room to breathe

one of the most important things to

consider when adding margins

and padding to elements in your

interface

is to use them consistently it's common

practice to use

eight pixel increments for padding and

margin to create consistency

it'll make your content easier to read

and in my opinion

it just looks better if you look at the

image on the right

you'll see that the white spaces to the

top and left of the icon

are each 16 pixels and at the bottom

where it says the number 3 and 1

[Music]

there are actually 16 pixels of padding

to the right

and to the bottom so basically we've

added a consistent 16 pixels

around the inside of the box

so that's our introduction to grids i

hope you got some insights

into why it's important to create your

layout using a percentage based grid

this will help you when it comes to

creating a responsive design

that can adapt based on the size of the

screen it's being viewed on

it'll also help you create an interface

that's organized and easy to navigate

and now you know how to use consistent

margins and paddings between your

elements

now let's take a look at the next video

to learn how to create

visual hierarchy

you