WEBVTT

00:00.000 --> 00:06.720
Introduction to Wire Framing

00:06.720 --> 00:13.680
In this video, we will understand what is wire framing, principles of wire framing,

00:13.680 --> 00:17.640
create the first wire frame in Figma.

00:17.640 --> 00:20.400
What is wire framing?

00:20.400 --> 00:25.960
Wire framing is a visual layout of a website or app that outlines structure and functionality

00:25.960 --> 00:30.120
without detailed design elements.

00:30.120 --> 00:37.000
It serves as a blueprint for communication and usability testing in the early design stages.

00:37.000 --> 00:42.640
For example, the YouTube homepage you see today might look fully designed, but it was

00:42.640 --> 00:49.560
initially created as a wire frame, principles of wire framing.

00:49.560 --> 00:56.760
The principles of wire framing include clarity, functionality, and user experience, emphasizing

00:56.760 --> 01:01.680
the organization of content and navigation intuitively, while prioritizing layout structure

01:01.680 --> 01:06.960
over aesthetics for quick iterations and feedback.

01:06.960 --> 01:08.640
Create the first wire frame.

01:08.640 --> 01:13.840
Let's us understand wire framing by creating our first wire frame in Figma.

01:13.840 --> 01:17.240
Visit Figma.com and click.

01:17.240 --> 01:19.520
Get started for free.

01:19.520 --> 01:23.440
Enter your email and create an account.

01:23.440 --> 01:28.200
Choose the starter plan and click, continue.

01:28.200 --> 01:32.080
Fill in your details and select whiteboard and fig jam.

01:32.080 --> 01:37.720
Click, finish to open your whiteboard, creating the stage and adding key elements.

01:37.720 --> 01:41.160
Let's say you are designing a platformer game in Scratch.

01:41.160 --> 01:46.000
Use the rectangle tool to draw a large box that represents the stage, which is the space

01:46.000 --> 01:49.500
where the main action in your Scratch project happens.

01:49.500 --> 01:50.500
Add sprite.

01:50.500 --> 01:53.740
This is where the player character will be placed on the screen.

01:53.740 --> 01:56.340
Now we will add buttons.

01:56.340 --> 02:07.540
The start, pause, or restart buttons and arrows to move the sprint.

02:07.540 --> 02:09.020
Score display.

02:09.020 --> 02:14.340
Here we'll show the user's score and restart.

02:14.340 --> 02:15.820
Navigation.

02:15.820 --> 02:20.940
Here we'll show how users will move between levels or scenes in the game.

02:20.940 --> 02:24.860
Feedback for the player at the top corner.

02:24.860 --> 02:30.420
Arrange elements neatly for easy navigation and make adjustments as needed.

02:30.420 --> 02:35.180
We have created basic wire frame of a game that will be developed in Scratch.

02:35.180 --> 02:41.860
Creating a wire frame in Figma is a fun way to plan your projects visually.

02:41.860 --> 02:46.100
Change your creativity by experimenting with different layouts and designs as you build

02:46.100 --> 02:47.900
your Scratch projects.

02:47.900 --> 02:51.540
Remember, exploring new ideas can lead to exciting outcomes.