►
From YouTube: Community Call Demo - SharePoint look book – Designing amazing out-of-the-box sites and pages
Description
This community call demo is taken from the SharePoint General SIG community call recording on 19th of September 2019. In this video, Katie Swanson (Microsoft) shows how to build amazing modern sites and pages using the latest UX capabilities.
Katie works as a designer in the SharePoint engineering and is responsible for example of the look book designs available from https://sharepointlookbook.azurewebsites.net/.
Presenter - Katie Swanson (Microsoft) @kswansondesign
You can use SharePoint Provisioning Service to provisioning modern sample portal content to any tenant in the world. See more from https://provisioning.sharepointpnp.com/.
Full details on the community call from https://developer.microsoft.com/en-us/sharepoint/blogs/sharepoint-dev-community-pnp-general-sp-dev-sig-recording-19th-of-september-2019/
More details on the SharePoint dev community calls from http://aka.ms/sppnp.
A
B
Name
is
Katie
Swanson
I
am
a
product
designer
with
SharePoint
I,
actually
like
to
tell
people
a
little
bit
of
a
flip
on
that
I
use
the
product
to
design.
What
SharePoint
can
do
and
be
I've
been
doing
this
for
the
past
year.
My
first
initial
project
was
actually
to
build
out
all
the
demos
for
last
ignite,
so
I
kind
of
jumped
into
the
fire
to
figure
out
the
product,
as
well
as
come
up
with
these
great
ideas
that
were
all
out
of
the
box.
B
Sometimes
they
often
do
demo
things
that
are
coming
so
I
got
to
work
with
those
as
well
and
provide
feedback
so
I'm
also
a
user,
but
some
of
the
things
I'm
going
to
share
today
are
not
going
to
necessarily
going
to
be
based
around
the
demos,
because
everybody
sees
those
and
those
are
usually
what
goes
into
the
lookbook
you're.
Seeing
a
lot
of
the
sites
that
are
already
put
out
there,
you've
seen
them
you'll
see
them
all
over
in
marketing
I'm
actually
going
to
demo
something
that's
outside
of
that.
B
I
was
gonna
say
outside
the
box,
but
it
will
be
so
a
little
bit
of
just
a
background
on
how
I
approach
this
from
you
know.
This
is
very
going
to
be
design
heavy,
but
also
ties
into
every
kind
of
a
project
management
as
well,
and
the
way
that
I
think
about
this
there's
a
lot
of
planning
that
goes
into
ball
involved
into
a
site.
B
You
know
outside
of
the
demo
environment,
where
I
actually
have
a
script
and
I'm
working
with
somebody
side
by
side,
there's
other
alternatives
that
I
have
to
think
about
when
it
comes
to
site
creation,
I
generally,
don't
think
about
them
as
a
comm
site
or
a
team
site.
I
actually
think
about
the
solution
that
they're
trying
to
solve.
So
what
is
that
actual
purpose
of
it?
Who
needs
to
have
the
access?
B
What
are
the
perms
going
to
be
like,
and
then
even
you
know,
I
can
design
something,
but
who's
gonna
maintain
it
is
this
going
to
be
something
that
they
can
easily
jump
into
and
I
can
be
hands
off
the
wheel.
Then
I
also
start
thinking
about
content
contents.
Probably
one
of
the
hardest
parts
of
the
journey
in
a
perfect
world
I
would
love
to
be
handed
something
at
the
get-go.
But
we
know
we
don't
live
in
a
perfect
world,
so
I
on
the
other
side,
I'm
starting
to
think
about.
B
What's
the
brand's
gonna
be
what
kind
of
photography
do
we
have
or
dassit
setup?
Can
I
actually
put
those
in
ahead
of
time
and
then
also?
Should
we
incorporate
other
kind
of
content
you
know?
Should
we
have
some
stream
videos?
Should
we
have
some
Twitter
feeds?
Is
there
gonna
be
glamour?
Should
we
have
some
kind
of
listing
involved?
Is
there
going
to
be
any
kind
of
customization
to
that
even
planners,
a
good
one
and
then,
of
course,
site
navigation?
B
That's
always
important,
because
the
site
navigation,
if
your
users
can't
get
around
your
site,
then
I
feel
like
it's
almost
a
UX
fail.
We
want
to
be
able
to
provide
the
best
experience
top
down
so
and
then
the
designing
aspect
I,
was
think
about
above
the
fold
and
when
I
say
above
the
falls.
I'm
not
literally
I
will
get
into
this.
What
I
think
about
above
the
fold?
But
what
are
those
key
elements
that
need
to
be
right
at
the
top,
then
also
thinking
about
our
web
parts?
B
You
know
they
have
so
many
different
layout
options
and
how
can
I
incorporate
those
to
make
it
a
little
bit
more
dynamic,
also
whitespace
huge
part
of
this,
a
very
big
friend
of
mine,
I
love,
the
spacer
I
like
things
that
can
breathe
I,
don't
think
you
should
overdo
it
with
your
content.
Cognitive
load
needs
to
be
taken
into
account.
Might
they
need
and
color
usage
throughout
now
that
we've
actually
brought
in
background
colors
section
backgrounds,
even
in
the
header?
How
can
I
use
that
to
draw
attention
patrols
into
calls
to
action?
B
Is
there
called
the
action
on
the
page?
Do
I
need
to
incorporate
that
somewhere
and
how
can
I
design
that
so
it's
very
intriguing,
and
then
quite
often,
when
I'm
doing
a
design,
I
will
come
up
with
on
the
templates.
There's
a
lot
of
news
articles
that
come
prepackaged
and
I.
Will
utilize
page
templates
be
able
to
produce
those?
Well,
sometimes,
there's
gonna
be
a
fully
baked
out
use
news
article,
but
most
of
them,
as
you
know,
and
our
demo
environment
are
a
little
bit
of
what
will
say.
B
Filler,
so
page
templates
become
my
best
friend
on
that.
So
above
the
fold,
just
once
you
guys
take
a
minute
and
know,
submit
and
I'll
show
you
what
I
mean
by
that
I
call
it
scrolling
telling,
because
scrolling
is
a
continuation
and
clicking
as
a
decision.
You
want
your
content
to
be
engaging
and
informative,
and
people
aren't
coming
just
for
the
top
of
your
screen.
There's
always
very
content
even
below
that.
B
There's
ways
that
we
can
do
that
best
practices
creating
focal
points,
visual
cues,
so
people
know
to
actually
scroll-
and
you
really
want
to
when
it
comes
to
spacing,
like
I
said,
with
whitespace
break
up
your
content
and
then
you
know,
of
course,
quality
engaging
content
is
top
priority
so
that
people
come
back
and
read
it
and
I
love
that
our
navigation
is
actually
sticky.
So
it
does
accommodate
that
scrolling
and
now
that
we've
brought
anchor
links
in
you
can
actually
utilize
that
in
different
ways
to
go
to
sections
within
your
page.
So.
A
B
So
I'm
going
to
do
a
demo
like
I,
said
I'm
gonna
actually
do
something.
I'm
going
to
put
you
guys
into
I
got
a
request
to
build
a
event
site.
Contoso
marketing
is
getting
ready
to
put
out
a
fly
safe
conference-
it's
not
until
next
next
July,
but
I'm
gonna
quickly
build
this
out
and
show
you
guys
what
I
mean
by
all
of
these
kind
of
visual
cues.
B
So
here's
a
perfect
world
I
actually
got
a
document
sent
to
me
of
what
they
want
on
the
page
before
actually
dive
into
this
I
probably
had
a
one-on-one
quick
chat
with
the
person
I'm
actually
building
this
with,
and
then
they
also
in
the
content
document
I
actually
have
all
the
imagery
that
I
brought
about
kind
of
jumping
ahead
for
you
guys,
but
this
is
I
pulled
together.
The.
A
B
I've
got
my
copy
doc
I've
kind
of
thought
through
some
things
and
then
I'm
gonna
actually
go
build
it
and
for
the
sake
of
timing
here,
I
did
some
pre-planning,
but
I
am
gonna
go
into
edit
mode.
So
you're
gonna
see
all
my
background
on
what
we're
actually
doing
here
so
fly
safe
top.
They
gave
me
a
nice
image
that
I
worked
with
them
to
create
a
banner.
So
let
me
go
ahead
and
get
into
my
site.
B
Open
that
guy
boom
nice
I,
don't
as
a
SharePoint,
we
don't
highly
suggest
using
text,
but
if
you
do
I
would
test
it
across
all
devices
to
make
sure
that
you
have
legibility
this
right
here,
it's
really
large,
so
I
know
that
it
scales
to
mobile
smaller
text.
Of
course,
I
don't
recommend
it
and
very
limited
text
is
actually
more
ideal.
So
we
have
the
date
I'm
going
to
go
ahead
and
come
into
my
countdown
timer
and
actually
set
that
for
the
correct
date
and
not
tomorrow,
July.
B
A
B
B
This
section
is
going
to
be
more
of
an
information
section,
but
I
wanted
to
use
it
for
a
visual
cue
to
go
ahead
and
scroll
down
the
page,
so
I'm
going
to
pull
in
nice
strong
section
background
I
also
as
you'll
see
I
added
a
spacer
here
to
give
it
a
little
bit
more
breathing
room,
big
fan
of
the
spacer,
and
then
we
need
some
text
to
come
in
here.
Come
on
over
here.
B
Great
and
because
this
is
just
normal
and
we
have
our
slotting,
it's
going
to
come
in
white
and
I
have
nice
contrast
to
it
really
kind
of
pulls.
The
page
down,
oh
and
I
noted
here
that
this
next
session
is
actually
going
to
be.
Next
section
is
going
to
have
all
the
sessions
which
are
going
to
utilize.
The
events.
B
And
look
at
that
they
actually
pre-loaded.
The
events
on
the
page.
For
me,
all
I
have
to
do
is
do
that
because
it's
coming
from
this
site,
of
course,
with
events
you
know
you
can
pull
them
from
other
locations,
but
for
templates
I
always
keep
everything.
Internal,
oh-
and
this
looks
like
it's
going
to
be.
Oh
I
have
two
things
that
I
need
to
do
here.
I
need
to
have
a
link
off
to
the
keynote
information,
as
well
as
the
agenda
so
I'm
going
to
utilize.
A
hero.
I
only
have
two.
B
A
A
A
B
Like
I
keep
moving
year
round,
let
me
put
this
type
of
graphic
and
which
is
white
once
it
comes
in,
you
can
see
how
it
actually
plays
with
the
section
background,
which
is
great.
So
if
I
do
change
the
theme
Ain,
it
actually
will
work
any
which
way.
So
it's
on
top
of
it
and
it's
a
pain,
and
this
is
the
agenda.
B
Well,
send
them
off
somewhere.
I
could
put
my
call
to
action
if
I
want
I'm
just
going
to
leave
it
blank
cause,
it's
just
going
to
add
a
link
at
the
top.
You
can
link
that
out
to
another
page
here.
I
have
you
know
and
again
a
nice
custom
image
background.
Oh
how
about
we
spell
it
correctly.
Key,
not
keep
note
I.
Have
this
really
basic
scrubbed
image,
so
it
could
be
really
anything
being
presented
at
this
point.
I
can
go
back
in
and
update
that
ones.
B
I
have
the
final
details,
photoshop
magic
and
then
down
here,
I'm,
going
to
add
in
the
ticket
pricing
or
details
I'm
using
just
emojis
here
to
get
these
items
to
come
in
all
of
our
rté
will
take
it
except
these.
Don't
you
keep
in
mind
they're
going
to
look
different
across
browsers
are
a
little
bit
browser
dependent.
So
I
do
like
to
look
at
that
I'm
on
a
Mac,
so
you're,
seeing
what
I
see
and
because
we
have
this
amazing
duplication,
I'm
actually.
B
B
B
As
I
think
vase
has
been
alluding
to,
we
do
have
some
really
great
new
look
book
templates
coming
I'm,
going
to
call
them
solutions,
different
kind
of
things
that
you
could
kind
of
bring
in
they're,
not
always
going
to
be
about
the
demos,
or
also
we're
thinking
about
these
in
different
higher
levels.
So
we
can
give
you
guys
more
options
for
customers
and
tenants
across
the
site,
yes,
sites
across
your
tenant,
rather
and
always
looking
for
suggestions.
B
So
if
you
think
of
something
that
comes
across
when
you're
working
on
things,
that
would
be
helpful
as
a
starter.
Design
definitely
reach
out
to
me
on
Twitter,
and
let
me
know
because
I'm
always
looking
for
great
new
ideas.
We
are
always
interested
to
see
how
people
use
these.
So
feedback
is
great
as
well
and
that's
that's
it.
For
me,
cool.
C
Don't
don't
stop
the
sharing
edge,
there's
few
questions,
just
a
comment
on
the
lookbook
sites,
like
Katie,
said
we're
working
on
their
own
Derby,
two
templates
and
those
going
to
be
available,
then
in
the
upcoming
provisioning
service,
so
we're
kind
of
evolving
and
the
lookbook
side
and
the
provisioning
service
to
an
interesting
direction.
We're
not
going
to
disclose
everything
right
now,
but
you'll
see
more
stuff
coming
up
before
ignite
or
in
ignite.
Hopefully,
that's
that's.
Currently
our
deadline
now
to
be
fair
for
some
of
these
new
designs.
A
C
There
was
few
questions
which
room
on
a
chest.
They
will
say
just
another
on
this
one.
Is
it
easterly
recommended
sizes
for
header
images
and
all
that?
Thank
you
both
Cameron
on
on
sharing
a
link
to
the
support
articles,
and
there
is
a
a
clear
articles
on
the
recommended
sizes
and
all
that
on
the
wife
of
the
image
and
all
of
them.
There
was
a
question:
is
that
called
parallax
scrolling?
What
the
header
image
is
doing
when
scrolling
down
stop
because.
B
C
And
then
there
was
a
kind
of
an
interesting
question.
I
know
that
this
is
kind
of
a
difficult
question
as
well,
but
any
tips
on
converting
HTML
mock-ups
to
modern
shape
on
pages,
because
this
is
the
classic
challenge
with
SharePoint,
especially
in
classic
SharePoint.
In
a
classic
experience,
it
was
my
customer
came
with
a
fancy,
looking
designs
and
said:
I
wanna
make
sure
it
won't
look
like
this
okay,
but
it's
on
your
side
of
the
yeah.
B
I
think
I
work
with
internal
and
external
teams
that
quite
often
come
with
me
and
say
this
is
what
we
have
right
now.
How
can
we
implement
this
in
modern
and
most
of
stuff
they
have,
if
there
might
be
a
somewhat
of
a
one-to-one
using
and
I
should
say,
I
always
look
at
the
out
of
box
solutions.
First,
if
there
is
something
that
they
definitely
need,
that's
gonna
have
to
be
custom.
I
can
walk
through
that
with
them
as
well
and
plate
them
to
all
your
awesome
documentation
but
they're.
B
C
B
C
Absolutely
there's
also
a
really
good
suggestion
from
Gary
on
the
on
the
chat
window,
which
is
why
mock
we
went
a
bit.
You
can
actually
build
a
quick
working,
yes,
which
is
absolutely
correct
so
and
that
that's
definitely
should
be
powerful
way
of
getting
things
kind
of
as
shown
and
what's
possible-
and
these
do
remember-
we
have
already
right
now
provisioning
the
SharePoint
imdb.com
service.
C
You
can
get
the
exactly
the
same
designs
which
we
used
a
year
ago
and
ignite
provision
to
any
tenant
in
the
world
and
that's
actually
super
powerful,
because
now
you
have
a
starting
point
and
then
you
can
start
modifying
the
content.
There's
example
content
example,
images
and
all
that,
so
a
really
powerful
way
of
approaching
designing
those
things
and
there's
a
good
question
from
Aravind.
Can
we
convert
this
sample
site
to
a
template
and
applying
that
to
another
site
so
native
louder,
the
Box
in
SharePoint?
C
Unfortunately,
that's
not
possible,
but
that's
where
the
BMP
tenant
templating
comes
comes
along,
so
you
can't
technically
extract
and
apply
that
template
to
any
site
in
the
endo
in
the
world
and
you
would
get
the
same
entry.
So
there
are
certain
things
which
you
need
to
consider
and
you
can
manipulate
the
template
if
needed
as
part
of
the
extraction
and
manipulate
and
then
apply.
But
but
technically,
when
you
extract
using
the
PM
templating
BMP
templating.
C
It
actually
takes
images,
and
example,
content
to
web
parts
and
whatever
the
web
part
content
is
at
least
being
used
on
those
as
well
and
the
extracts
that
to
a
single
file.
And
then
we
were
able
to
apply
to
that
to
any
tenant
or
other
site
collections
as
well,
and
that's
really
the
power
of
community,
because
that
the
B&B
eternal
templates
it
has
been
built
by
more
than
100
people
of
the
community
within
the
past
year.
So.