►
From YouTube: Tips & Tricks to Power-Up Canvas App Designs - Demo
Description
Geetha Sivasailam shares her best practices and tips to Power-Up canvas app designs.
For more information, please visit https://powerapps.microsoft.com
A
B
B
A
More,
like
a
pro
code
developer
background,
and
so
these
are
stuff
that
I
learned
along
the
way,
and
I
think-
and
this
is
what
I
want
to
share,
because
you
don't
really
have
to
be
a
ui
or
ux
designer
or
a
professional
web
designer
to
be
able
to
amp
up
your
app
designs.
So
I'm
hoping
these
tips
will
help
everyone
in
their
journey
of
app.
Designing
awesome,
wait,
hey,
hey
everybody!
A
Number
one
tip
is
to
start
planning
ahead.
It
is
important
that
you
have
a
sketch
or
a
visual,
a
visualization
of
how
you
want
your
apps
to
look
like,
and
that
can
happen
right
after
you
have
a
good
understanding
of
foundational
information
architecture
that
you
have,
or
even
if,
once
you
have
a
good
functional
design,
and
you
know
how
the
user
flow
and
data
flow
needs
to
be.
So
it
is
important
that
you
start
prototyping
before
you.
You
know
get
started
with
your
actual
app
building
exercise
and
there
are
several
tools
out
there.
A
It
could
be
something
as
simple
as
in
powerpoint
or
it
could
be
something
that
you
use
like
a
third-party
tool
like
say:
adobe,
xd
or
lucidchart.
There
are
several
products
out
there
that
can
help
you,
but
powerpoint
is
more
than
enough.
That's
something
that
I
generally
turn
towards
for
my
prototyping
and
sketching
and
then
another
a
good
tip
for
you.
If
you're
like
me-
and
you
don't
know
where
to
start
and
you're,
not
a
professional
web
designer
is
to
get
inspired.
Look
at
templates
that
the
powerapps
maker
portal
has.
A
There
are
several
app
templates,
like
the
customer
success
management
app
template
the
meetings
app
just
have
some
really
good,
ui
ux
designs
that
you
can
look
at
and
you
can
adapt
and
extend
based
on
your
business
processes.
And
then
you
also
have
professional
developer
based
sites
like
ui
movement
and
ux
matters
where
you
have
professional
designers
who
share
their
top
designs
with
theming
branding,
colors,
typography
and
so
much
more
and
speaking
of
branding.
I
know
sanchez
is
on
the
call
today
and
that
is
another
great
place
to
get
started.
A
He
has
a
branding
template
and
there's
version
two
out
there
that
he
put
out
in
the
powerapps
forums
where
you
can
download
the
template
open
up
the
app,
how
configure
the
controls,
how
you
want
it
to
be,
save
them,
and
then
it
generates
an
msap
e
file
that
you
can
use
as
a
template
to
have
a
consistent
look
and
feel
for
all
the
apps
that
are
built
in
your
organization
below.
Here
I
have
a
bunch
of
power
addicts
listed.
A
The
next
step
over
here
is
specific
to
colors,
so
when,
once
you
have
your
design
and
you
have
a
user
flow
of
how
the
navigation
needs
to
work
first
thing
you
really
want
is
to
decide
on
the
theming
of
your
apps.
I
usually
tend
to
stick
to
three
colors,
but
recommendations
that
you
can
go
anywhere
between
one
to
three
primary
colors
or
secondary
colors.
A
I
tend
to
put
my
colors
and
accents
in
a
variable
on
the
app
start
and,
and
that
way
I
can
reuse
them
across
all
of
the
controls
and
screens
within
the
app,
and
I
don't
have
to
you-
know,
copy
paste
or
start
typing
in
the
actual
color
codes,
and
one
other
way
to
do.
It
is
to
actually
store
it
in
a
data
source
if
needed
and-
and
that
enables
consistency.
A
A
A
It
does
a
great
job
of
telling
you
what
color
text
will
be
visible
on
a
primary
background
or
a
secondary
background.
So
this
tells
me
that
using
a
black
color
text
on
this
indigo
background
is
not
legible,
so
these
go
hand
in
hand
with
the
wcag
compliancy,
and
so
this
is.
This.
Is
somewhere
that
I
usually
go
to
to
get
started
because
it
kind
of
comes
with
recommendations
around
how
it
has
to
be
accessible
and
also
gives
you
a
trending
palette
that
you
can
use
another
site
that
I
go
to
is
coolers.
A
This
is
another
one
of
my
favorites,
this
kind
of
keeps
it
minimal.
It
gives
you
a
palette
with
very
minimal
colors.
Let's
say
we
have
a
black
and
a
white,
and
then
these
are
just
the
three
colors
that
that
are
generated.
What
I
really
like
about
this
is
that
you
can
use
shades
if
you
feel
like
you,
don't
like
some
of
them
and
then
and
another
good
tip
here
is
you
can
go
export
it.
A
So
that's
one
now.
Our
my
second
tip
here
is
to
see
how
you
can
use
some
of
the
controls.
There
are
several
controls
available
in
the
powerapp
studio
maker
portal
that
you
can
go
above
and
beyond
to
you
know,
to
create
incredible.
Looking
apps
now,
one
such
control
that
I
think
has
is
a
little
underrated
and
people
don't
really
grasp
the
benefits
of
using
the
controls.
The
html
control,
the
html
control
is
a
very
powerful
control.
You
can
use
that
to
create
css
three
properties
and
there
are
some
supportive
properties.
A
There
are
some
that
are
not.
You
can
create
box
shadows,
you
can
have
gradients,
you
can
even
create
icons
using
html
controls
using
unicode
characters
and
then
the
only
thing
to
note
that
it
only
allows
you
to
have
inline
styles.
You
cannot
have
global
styles
in
the
sense
you
can't
have
a
style
tag
and
have
styles
in
there
that
would
be
used
by
the
rest
of
your
app.
The
control
pretty
much
just
allows
you
to
have
styles.
A
A
For
example,
if
you
mouse
over
or
there's
a
custom
scroll
bar
that
would
you
know
that
you
require
to
change
the
color
on
those
are
things
that
you
can
do,
but
there's
a
lot
more
that
you
can
do,
and
you
know
you
can
get
creative
with
it
and
and
you
can
really
amp
up
your
app
designs.
So
let's
look
at
that
one.
So
I'm
gonna
go
ahead
and
show
you
an
app.
So
this
is
an
app
that
I
have.
A
This
is
a
pto
app
and
there
are
several
nuggets
within
this
app
and
if
you
notice
this
little
piece
over
here
is
an
svg.
Svgs
are
pretty
light
on
your
app
and
you
want
to
make
sure
that
you
use
svgs
wherever
possible,
places
where
you
want
some
complex,
animation
or
graphics,
and
you
can
also
plug
in
your
variables
and
make
them
dynamic.
A
A
One
other
tip
over
here
is
the
icon.
If
you
have
a
lot
of
icons
and
if
you
want
to
make
your
apps
more
performant,
one
good
way
for
you
to
steer
away
from
actually
having
images
loaded
is
to
use
unicode
character
icons.
So
here
you
can
see
that
this
is
a
a
right
arrow
and
let's
say
I
don't
want
to
use
the
one
that's
available
out
of
the
box.
A
Then
I
can
actually
drop
in
an
html
ud
code
character
and
that
usually
starts
with
an
ampersand
hash
and
ends
with
a
semicolon
and
really
this
x2192
is
the
unicode
for
the
arrow,
and
you
can
also
specify
the
font,
size
and
colors
and
recently
allen
and
rory.
They
both
had
tips
shared
where
they
used
unicode
characters
on
power.
Bi
and
you
know
it
was,
and
they
have
links
and
there's
a
unicode
table
out
there,
that
you
can
go
and
search
for
a
specific
style
of
icon
and
it
will
give
you
what
the
character
is.
A
So
that's
one
tip
that
I
wanted
to
share
and
one
other
thing
I
wanted
to
show
you
is
that
there
are
actually
different
types
of
box
shadows,
just
a
quick
tip
here.
If
there
are
cards
and
layouts
that
you
want
to
display,
then
you
don't
want
to
get
aggressive
with
the
box
shadows.
You
want
to
keep
them
pretty
mild,
but
then,
if
there
are
buttons
and
they're
clickable,
then
you
know
you
can
have
a
much
darker
block
shadow.
So
it
kind
of
gives
you
a
3d
effect
and
it
implies
that
it
can
be
clickable.
A
You
can
also
have
gradients
set
up
in
your
html
control.
So
what
we
have
here
is
a
linear
gradient
going
from
going
from
left
to
the
right
and
it
has
a
lighter
shade
and
it
gets
darker
towards
the
ref,
and
you
can
see
that
this
is
set
by
the
background
property
within
your
html
control.
And
now,
if
you
don't
know
html
and
if
you're
completely
new,
there
are
sites
out
there
and
one
such
site
is
a
css
generator
dot
org
and
that
lets
generates
the
html
for
you.
A
You
can
pick
what
the
colors
that
you
want,
how
the
offsets
need
to
be
how
your
box
shadows
need
to
look
like,
and
it
will
generate
the
html
that
you
can
just
copy
paste
and
embed
it
as
well.
One
other
tip
a
bonus
tip
that
I
wanted
to
show.
You
is,
if
you
ever
needed
to
truncate
text
within
you
know.
Let's
say
you
have
chunk
of
text
within
your
gallery
control
and
you
want
to
truncate
it.
You
can
do
that
using
html
control
as
well.
A
So
what
we're
really
doing
here
is
making
sure
that
the
text
overflow
is
set
to
ellipses,
and
so
that's
what
you
see
that
it
actually
has
a
width
set
to
four
450
and
it
truncated
it
with
an
ellipsis.
So
that's
another
trick
that
you
can
use.
If
you
want
to
truncate
text
in
in
zones
where
you
want
to
just
show
a
preview
and
then
you
know
take
them
over
to
another
screen
or
a
form
where
you
want
to
show
them
a
more
enlarged
view
of
the
context.
A
So
here
is
our
third
tip.
This
is
the
wcag
compliance
that
we
already
looked
at,
which
is
the
web
content
access
guidelines.
Now
we
looked
at
how
you
want
to
you
know
when
you
decide
your
colors
and
variations,
you
want
to
make
sure
that
they're
compliant,
but
then
you
also
want
to
make
sure
that
you
add
labels
and
tooltips
to
your
forms
and
inputs.
Because
they're
you
know
as
designers,
we
have
the
responsibility
to
make
sure
that
everybody
has
access
to
what
we
create,
regardless
of
the
ability,
context
and
situations
end
of
the
day.
A
We
want
to
make
sure
it's
a
better
experience
for
everybody.
So
make
sure
that
if
you
on
the
powerapps
app
checker,
there
is
an
accessibility
area
that
will
display
all
the
controls
that
don't
have
the
accessible
label.
So
that's
something
you
want
to
make
sure
that
you
add
them,
because
people
who
use
screen
readers
are
going
to
be
hearing
what
those
controls
are
for.
So
if
you
don't
have
an
accessible
label
and
or
if
it's
named
something
that
doesn't
provide
context,
then
it's
not
going
to
be
useful
for
the
users.
A
So
make
sure
you
add
them,
and
then
here
is
another
example
where
you
do
want
to
make
sure
that
you
add
some
visual
cues
and
not
just
rely
on
colors
to
provide
important
information.
For
example,
these
are
required
fields
for
submission
and
for
a
regular
user.
Yes,
these
would
appear
red,
and
I
know
that
I'm
missing
these,
but
for
a
user
who
cannot
perceive
color
as
the
rest
of
us
do.
A
It
is
going
to
look
like
it's
just
normal,
so
you
want
to
make
sure
that
you
add
some
visual
cues
like
an
icon
and
that
you
know
that
would
tell
the
user
that
oh
there's
something
wrong.
It's
a
warning
icon
and
then
there's
also
another
theme
designer
by
office
ui
fabric,
and
that
also
does
a
good
accessibility
check
for
you.
You
know
on
texts
and
color
variations
and
we'll
look
at
the
look
at
that
as
part
of
my
last
demo.
A
So
this
next
tip
over
here
is
around
effective
and
engaging
ux,
and
I'm
going
to
cover
like
two
tips
that
that
would
really
enhance
your
apps.
The
number
one
tip
is
the
text
overlay,
because
it's
become
really
popular.
These
days,
where
you
see
overlay
of
text,
labels
on
background
images,
but
the
last
thing
you
want
is
your
users
to
be
straining
to
read
such
text
now.
The
image
on
the
left
over
here
has
text
it.
It
has
these
numbers
and
it
has
a
date.
A
It
can
either
be
a
scream
is
a
semi-transparent
black
or
white
overlay,
or
you
can
even
have
a
colored
overlay
to
neutralize
the
busy
background
behind.
This
is
just
another
tip
to
make
your
user
experience
engaging
one
other
tip
is
designing
fat
finger
friendly
apps.
If
you
haven't
heard
this
term
it.
You
know
it
is
a
real
syndrome.
It's
called
the
fat
finger
syndrome
and
it
is
when
a
user
inadvertently
triggers
a
secondary
action
when
navigating
touch
screen
ui
and
then
you
know
you
either
have
a
gallery.
You
have
an
edit
icon
and
a
delete.
A
Icon
and
icons
are
either
too
close
or
there's
not
enough
padding,
and
so
there's
not
a
separation
between
your
controls
or
call
to
action.
So
here's
the
recommendation
from
material
design
ui
and
the
recommendation
is
that
you
have
a
minimum
of
48
pixels
with
at
least
an
eight
pixel
space
between
your
targets
and
matt
recently
also
shared
a
tweet
about
how
he
uses
the
padding
on
an
icon
to
cover
the
text
around
it.
So
that
way,
there's
a
more
hit
zone
and
target
zone
when
you
are
clicking
on
on
icons.
A
One
quick
tip
here
is
that
you
can
use
the
one
thumb
one
eyeball
test
for
mobile
designs.
It's
just
a
way
to
find
out
if
your
mobile
design
allows
for
users
to
easily
use
the
app
in
one
hand,
with
partially
distracted
attention,
and
it's
just
it's
a
way
to
test.
If
users
can
perform
certain
actions
in
just
one
hand
and
160
seconds.
My
last
tip
for
the
day
is
to
reduce
complexity.
It
is
important
that
you
remember,
performance
is
key
and
less
is
more.
A
I
like
this
quote
from
april
from
her
ignite
session,
where
she
says
marie
condor.
Your
apps
keep
the
controls
that
really
provide
value
to
your
app
and
then
you
know
clean
the
rest
of
them
out.
Use
svgs
where
there
are
complex,
animations
involved
and
replace
your
icons
and
images
with
html
unicodes.
A
If
you
can
use
html
controls
to
combine
bunch
of
controls
or
data
that
you
would
want
to
display
and
also
galleries
as
another
workaround,
if
you
want
to
keep
your
number
of
controls
to
be
less
than
500
and
another
tip
is
also
when
you
have
forms-
and
you
have
scrolling
forms,
people
can
scroll,
but
then
it
makes
it
easier
for
them
to
engage
with
the
app.
If
you
have
them
logically
grouped
or
you
have
tab,
layouts
or
flyout
menus.
My
last
tip
is
also
to
use
components.