From the course: Balsamiq Mockups for UX Design
Unlock the full course today
Join today to access over 22,400 courses taught by industry experts or purchase this course individually.
Using layers - Balsamiq Mockups Tutorial
From the course: Balsamiq Mockups for UX Design
Using layers
Now let's take a look at how we can layer elements in the mockup. So, I want to create kind of a border for the desktop version, because a screen can be a lot bigger than we're mocking up here. So, we want to sort of contain the elements of the website. So, I'm going to hit the / key to access the quick add field. And I think I want some kind of rectangle here. So, I'm going to just start typing in rectangle. And, lo and behold, there is a Rectangle Canvas Panel element, so I'm going to hit Enter, and that gives me a rectangle on the canvas. And I'm going to expand it. And you'll notice a problem with this. I've got it about where I want it, but it is sitting on top of the other elements. So, while Balsamiq doesn't have the traditional layers you might expect in like Photoshop or Illustrator, it does have what you can think of as stacking within a single layer. So, from the Heads Up display on the right here, while I have the element selected, I can send it backward. I can send it to…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.