WEBVTT

00:00.000 --> 00:14.640
Recap of wire framing, advanced wire framing techniques, hands-on example, building

00:14.640 --> 00:19.120
a multi-page wire frame, the power of prototyping.

00:19.120 --> 00:20.120
Welcome!

00:20.120 --> 00:24.160
Have you ever wondered how apps and websites are planned before they come to life?

00:24.160 --> 00:29.120
Today we'll explore advanced wire framing and prototyping, key steps in creating amazing

00:29.120 --> 00:32.040
digital experiences.

00:32.040 --> 00:34.240
Let's start with a quick recap.

00:34.240 --> 00:38.240
Wire framing is like creating a blueprint for a website or app.

00:38.240 --> 00:46.440
It helps designers plan layouts, buttons, and user interactions before any coding begins.

00:46.440 --> 00:52.720
Wire frames come in two types, low fidelity, simple sketches, and high fidelity, detailed

00:52.720 --> 00:56.840
designs with colors and images.

00:56.840 --> 01:04.960
You are already aware that a simple wire frame can be created using a pen and paper.

01:04.960 --> 01:13.040
Advanced wire framing uses tools like Figma or Adobe XD to add interactivity.

01:13.040 --> 01:20.600
This means clickable buttons, menus, and transitions to show how a real website or app will

01:20.600 --> 01:21.920
work.

01:21.920 --> 01:26.360
With interactive wire frames, we can test user experience before writing a single line

01:26.360 --> 01:29.840
of code.

01:29.840 --> 01:33.560
Let's create a high fidelity wire frame for a multi-page website.

01:33.560 --> 01:40.560
First, we design the home page with a navigation bar, images, and text sections.

02:03.560 --> 02:13.800
Next, we add navigation links that allow users to switch between pages smoothly.

02:13.800 --> 02:18.520
By making our wire frame interactive, we ensure the final product is user friendly and

02:18.520 --> 02:22.360
efficient.

02:22.360 --> 02:25.360
Prototyping takes wire frames even further.

02:25.360 --> 02:30.880
It turns static designs into working models that simulate real user experiences.

02:30.880 --> 02:36.640
With prototypes, designers can test and refine their ideas before coding begins.

02:36.640 --> 02:44.080
This saves time and ensures a smooth user experience.

02:44.080 --> 02:49.640
You all learned how to create advanced wire frames and interactive prototypes.

02:49.640 --> 02:54.520
Click practicing and soon you'll be designing the next big app or website.