This workshop teaches participants about the importance and application of animations and videos in web design. Key concepts include different types of animations, principles of design like proximity, hierarchy, and contrast, and various methods to implement animations without overwhelming users. The workshop encourages hands-on exploration with tools like Wix to enhance website interactivity.

1. Building a
Website 4

2. By the end of this
workshop, you will
be able to:
1. Explain the reasons for animations in web
design.
2. Describe different types of animations
used in web design.
3. Apply animations and video to your
your website.

3. SPACE
Don’t try to cram too
much into one space.
Space between elements
helps the brain to make
sense of what it’s
seeing.
Which Principle of Design
does this image represent?

4. Which Principle of Design
does this image represent?
PROXIMITY
Grouping similar
things together makes
it easier for people
to find what they
need.

5. Which Principle of Design
does this image represent?
HIERARCHY
Make the most important
stuff stand out so people
know where to look first.
You can do this with size
e.g. make important text
bigger than the rest.

6. Which Principle of Design
does this image represent?
CONTRAST
Contrast adds interest
and makes things pop! It
can also help things to
stand out.
You can use contrast
when using colour and
fonts.

7. Website Animations
Many website elements can be animated, like text and images. Web
designers use animations to:
1. Bring attention to important
information.
2. Make the website more enjoyable for
users.
3. To create visual interest.

8. Website Animations
Entrance
Animations
How an element arrives
on screen.
They can suddenly
appear, fade in, bounce
into view and more.
Scrolling
Animations
How elements behave when
you scroll through a page.
They can zoom in or out,
fade in or out and more.
Hover
Animations
How elements behave when
you hover over them.
They can change colour,
fade in or out, change font
and more.
*Please view slide in PowerPoint desktop app

9. Animations can look good but can also ruin a website! Too many
animations can be overwhelming and can also make the website
load slower.
Don’t use too many animations!

10. Video
Video is another element that can add interest to your website. WIX provides you
with video that you can use, as well as creative ways you can add it to your site
such as:
Video Masks
You can make a video appear in a shape e.g. circle, star or
even words.
Transparent Videos
Videos that have no background, so objects look like they’re
floating.
Video Backgrounds
You can use video as a section background.
Video Boxes
You can add smaller video elements to a
section.

11. Task
Explore the different animation and
video options available on WIX.
Add a scrolling animation and an
entrance animation to your website.
Add a video element to your page.

12. ?
Why do web
designers use
animations?
?
Describe the
scrolling
effect you
chose for
your website.
?
Which video
element did
you use and
why?