Placeholder Image

Subtitles section Play video

  • - Prototyping is the process

  • of creating a model of a future product.

  • A prototype needs to be created quickly and changed easily

  • because it's likely

  • that several versions of a prototype will be required

  • before the right version is created.

  • With each prototype,

  • a round of user testing is typically performed,

  • analyzed, and measured,

  • and changes are made.

  • To keep costs low and possible interfaces high,

  • prototyping software is often used.

  • With prototyping software, no coding is required.

  • As you might imagine,

  • coding is a complex and time-involved process.

  • It's not easy to make changes

  • and it takes time to develop a quality product.

  • Eliminating the coding process

  • is critical to moving quickly and making changes.

  • Prototyping software

  • typically features a drag-and-drop interface,

  • often with several pre-configured interface options

  • like buttons, search boxes, form elements,

  • navigation bars, and more.

  • You can import graphics like logos and photos.

  • Often, you can add links between prototype screens

  • and small animations when something is clicked.

  • Let's take a quick peek at some prototyping software

  • to see how this type of software looks and functions.

  • This is Figma.

  • You can sign up for a free account at figma.com.

  • I wanted to briefly walk you through the kinds of problems

  • that Figma happens to solve.

  • So this is the dashboard.

  • Once you have created an account and logged in,

  • you'll see something like this.

  • You'll see you'll have the ability

  • to create several kinds of files,

  • so you can create the type of file

  • for designs and prototypes.

  • I'm going to show you one of those in a moment.

  • You'll have the ability to create a FigJam file,

  • which, as it says here, is like whiteboards, diagrams,

  • sticky notes, that kind of thing.

  • I'll show you that in a moment as well.

  • Or you can import a file from someplace else.

  • So maybe you have somebody else's Figma file

  • or you have a file from some other program, like Sketch.

  • Using the Figma community,

  • which is over here on the left-hand side,

  • I found some examples for us to just briefly take a look at.

  • So here's an example of a webpage layout

  • that comes from the community.

  • Somebody already designed this for you to take a look at

  • with the intention that you can learn Figma from this

  • or you can take this in, tweak it a little bit,

  • and turn it into a different kind of design.

  • So those of you who are familiar with Photoshop,

  • you'll notice this might look somewhat familiar.

  • We have various types of layers

  • and so forth over here on this side.

  • So as I click on things,

  • you can see we are selecting different elements here

  • on the page.

  • Okay, there's that tiny emoji up there at the top.

  • You, of course, can zoom in or zoom out,

  • zoom to fit, whatever is best for you.

  • I'll zoom in a little bit.

  • So for example, here in this box,

  • I might want to make some changes to this.

  • I can, of course, double-click on this and change the text,

  • "I want to work from home every day,"

  • or whatever changes you wanted to make here.

  • You could select other elements.

  • This is a grouping here.

  • If we group inside of this, there's a vector diagram,

  • there's some text associated with this,

  • and then there's this little icon here.

  • We could turn off the eyeball

  • that would remove that from view.

  • We could also select this little guy here,

  • maybe we get rid of that.

  • So we can just continue to make changes here.

  • We can make changes to colors as you see here.

  • The background for this,

  • let me zoom back out again so we can see this.

  • The background for the page overall

  • is this light gray color.

  • We could easily change that background color

  • to something else.

  • Maybe this dark gray.

  • And you'll notice that these are in hexadecimal format.

  • We've talked about that other places in the course.

  • So those colors that might come to you

  • from some kind of branding document in hexadecimal format,

  • you can just type those colors right into Figma

  • and make use of them.

  • So this is the kind of thing that you can expect here

  • within Figma for laying out webpages.

  • You have the ability to place shapes,

  • and images, and so forth;

  • you have some basic drawing tools that are available to you;

  • you have some text tools that are available;

  • and you can make comments and share these with your team.

  • Let's take a brief look over here at a FigJam document.

  • So this is somewhat the same but also somewhat different.

  • The FigJam functionality, I think,

  • would be most used by people

  • who are working with user experience.

  • In other words, they are researching

  • and planning some kind of document

  • rather than putting together the actual graphic design

  • or a true interface prototype.

  • This is from earlier in the process

  • of developing a website or web application.

  • In this case, I'm looking at the consumer journey map here,

  • and as we have done before,

  • we can zoom in and take a closer look at this.

  • So we have an introductory graphic

  • that we have here.

  • We have the ability to put in information about a persona

  • that we might be working with

  • and we could make a graph here.

  • We have sticky notes

  • that are spanning across these four boxes.

  • This is a pretty common sort of technique that UX people use

  • for organizing a customer journey.

  • So how are people interacting with your product or service

  • from when they find it,

  • all the way through until they purchase it,

  • and how are they using it

  • to address problems within their lives?

  • So here, we have actions, experience, opportunities,

  • and pain points.

  • These sticky notes could easily be rearranged.

  • You just click and drag.

  • We aren't zoomed in far enough to read what they say.

  • There actually isn't any text on these.

  • But as you can expect,

  • you double-click on this and say, "This is a sticky note."

  • So there's the sticky note.

  • If we wanted it to be a different color,

  • we have a few choices.

  • We can pick a different color for our sticky note.

  • Down here in our tray,

  • we have the ability to click and drag

  • and add other ones here.

  • We can also click and drag other shapes,

  • and, of course, there are many choices of shapes

  • to choose from.

  • That would be useful

  • if you were putting together something like a flow chart,

  • which is a pretty common type of way

  • of planning some kind of functionality

  • inside of a web application.

  • We have the ability to draw on the page,

  • so I can

  • make some kind of drawing here

  • and it smooths it out for me really nicely.

  • We have the ability to put in various kinds of stamps.

  • So if I really love this particular sticky note,

  • I can put hearts on it.

  • We also have the ability to add silly things here.

  • These are just stickers and so forth.

  • And wow, that's a really great idea.

  • Let's label it as fresh.

  • So this is just a very brief overview

  • to give you an idea of what Figma is and how it works.

  • There are two sides to Figma.

  • Side number one that I'm looking at right here

  • is this whiteboarding, sticky note, planning,

  • diagramming type of tool, which is called FigJam.

  • And the other side of it

  • is more typically used for planning webpages