Hotspot Templates

Loading...

Del curso dictado por California Institute of the Arts

Web Design: Wireframes to Prototypes

60 calificaciones

California Institute of the Arts

Web Design: Wireframes to Prototypes

60 calificaciones

Curso 4 de 4 en SpecializationUI / UX Design

This course is focused on the application of the early UX research to actual user interfaces: the creation of wireframes, high-fidelity mockups, and clickable prototypes. Along the way we will also discuss: - Responsive web design and mobile web challenges - Mobile-first approach - Web typography - The relationship between design and programming and whether it is important to know how to code - The different web technologies that make the web work, such as HTML, CSS, JavaScript, server-side coding, and databases. This course is the continuation of the course Web Design: Strategy and Information Architecture, in which students completed the first half of a large scale project—developing a comprehensive plan for a complex website. If you are intending to complete the assignments in this course to earn a certificate you must complete the Strategy and Information Architecture course first so you have the materials and data needed to begin creating wireframes and mockups in this course. This is the fourth and last course in the UI/UX Design Specialization, which brings a design-centric approach to user interface (UI) and user experience (UX) design, and offers practical, skill-based instruction centered around a visual communications perspective, rather than on one focused on marketing or programming alone. These courses are ideal for anyone with some experience in graphic or visual design and who would like to build their skill set in UI or UX for app and web design. It would also be ideal for anyone with experience in front- or back-end web development or human-computer interaction and want to sharpen their visual design and analysis skills for UI or UX.

De la lección

Putting it all Together: Final Presentation

Welcome to the final week of this course and the final week of the entire UI/UX Design Specialization. I hope that you learned a lot of new concepts, techniques, and skills that will allow you to design some amazing interactive experiences in the real world. This week, you will have time to revise any of your project components. And then I’d like you to assemble them into a presentation that will represent the culmination of all of the UX phases we covered. This should be a great project to include in your portfolio. I’ll also show you how to take your static mockups and assemble them into clickable prototypes.

Clickable Prototypes Introduction1:44

Invision Introduction2:15

Exporting Assets3:55

Importing Assets and Creating Hotspots7:13

Hotspot Templates5:22

Conoce a los instructores

Roman Jaster
Visiting Faculty, Program in Graphic Design
School of Art

So, let's create a couple more hotspots in our clickable prototype,

and that will also give me the chance to talk about something that envisioned calls

hotspot templates that actually helps you

to create a lot of hotspots for a lot of screens.

So, let's look at our homepage and go to the build mode.

You'll notice on the top,

it says that there are no hotspot templates.

Apply, that'll change in a moment.

Which pages do we actually have?

We have markups or the Catering section,

for Testimonials, for the FAQ,

and then obviously, we have the homepage.

So, let's create hotspots for those four links,

so that they can be clickable.

Again, I can click and drag and then select the destination.

So, the Catering section goes to the first page in the ordering sequence.

Testimonials goes to Testimonials.

The homepage is accessed by clicking on the logo,

and then we have the FAQ as well.

Now, the Testimonial page and the FAQ page have the exact same menu structure.

If I go to one of them,

and I can actually do that straight from the Build Mode.

I don't always have to go back to the Preview Mode.

I can Shift+click on one of these hotspots.

So, here, I am on the Testimonials page,

and you'll notice the links also have to be indicated as hotspots on this page.

So, instead of having to redraw them on many pages,

InVision offers something that is called a hotspot template,

so you can reuse hotspots from page to page.

If I go back to the homepage by clicking my back button,

I can click on one of these hotspots,

and there is an option here that says Include hotspot in template.

If I click that,

I can create a new template.

We don't have a template created yet.

So, click at New,

and I'll call this Primary Nav.

I'll save this, and I'll save it again.

Now, you'll notice that link is actually green because it belongs to a hotspot template,

and I also see on the top,

there's one hotspot template applied which is Primary Nav.

All I have to do is move these three also into the hotspot template.

By clicking on them,

say include in hotspot template.

Primary Nav is already selected.

I can move them all in there.

Okay. Now, I have four links in this hotspot template,

and if I go back to the Testimonial page,

all I have to do now is,

from this menu select,

I'm going to use the Primary Nav hotspot template on this page as well,

and the links show up.

I can go to the FAQ page.

Do the same thing. There you go.

Now, if I go to my Preview Mode,

I can freely go between these pages.

I'm on Testimonials, back to the homepage, FAQ, Testimonials.

You get the idea.

So, that is creating hotspots,

adding them to a hotspot templates,

and saving a bunch of effort in the process.

One last little tip about hotspot templates,

I, in the meantime,

went ahead and created a hotspot templates for the order sequence,

but only on the very first page of the order sequence.

If I go to the next page,

and by the way, I can do that by pressing the arrow keys.

I can go to the next page by pressing the right arrow key like this,

and I can go forward and backwards by pressing the left arrow key.

But on the second one, you see that there isn't a hotspot template applied yet.

I could do this manually by clicking here,

and then going to the next page,

et cetera, but there's a trick to do this even quicker.

If I open up the hotspot template menu here,

and I hover over the menu I want to apply to multiple pages,

this first icon allows you to do that.

If I click on that,

on the bottom, I now see all my pages,

and I can just select all the pages that need this particular template,

and then I click on Done.

If I now go to the next page,

you see that this menu is added.

Just a quick check,

if I go to the Preview Mode,

then I can now click on this.

So, I can go to Guests, to Location,

and I saved a little bit of time while applying those hotspot templates.

Okay. This is probably enough to get you started with InVision.

Try it out. I think you'll find it quite intuitive and quite easy, and hopefully,

also a little fun to see your static markups come alive a little bit.

When you're done in the end,

you can even share the URL to your prototype.

Since this is a cloud-based application,

it's all already online,

and you can easily share it with anyone you'd like to.

Explora nuestro catálogo

Inscríbete de manera gratuita y obtén recomendaciones personalizadas, actualizaciones y ofertas.

Coursera brinda acceso universal a la mejor educación del mundo, al asociarse con las mejores universidades y organizaciones, para ofrecer cursos en línea.

© 2019 Coursera Inc. Todos los derechos reservados.

Descargar en la App Store

Consíguelo en Google Play