Join Justin Putney for an in-depth discussion in this video Creating rectangles, part of UX Design Tools: InDesign.
In this video, we're going to take a look at creating rectangles in InDesign. On screen you can see a sample wireframe. As you can see by looking at this sample wireframe, it's largely made up of rectangles. So rectangles and lines are among the most common shapes in a wireframe because we're just blocking out the space for the main elements and we want it to be just clear enough to know what those elements are. So, I've got a new document open in InDesign, and to create a rectangle, I actually have a few different ways to start and it kind of depends on what I think the purpose of that rectangle is.
One of the core pieces of functionality in InDesign is that every object sits within a frame and essentially, all frames are rectangles. So with InDesign, there are actually three ways to create a rectangle. You can use the Type tool. You can use the Rectangle tool. Or you can use the Rectangle Frame tool. And with each of these tools, you're kind of defining your intent. So if I use the Rectangle tool, I'm saying, I definitely want this to be a shape. If I'm using the Type tool, I'm saying, I definitely want this to have text in it.
And if I'm using the Rectangle Frame tool, I'm kind of saying, I don't know whether this is going to be text or whether it's going to be a shape. But in any case, you can basically pass from one to the other. So for instance, if I create a rectangle using the Rectangle tool, I can add text at any time. So let's just start by grabbing the Rectangle tool. And dragging out a rectangle. It's pretty much as easy as that. And if you're using guides and or grids, it's easy to line your rectangle up to elements on screen.
I'm going to draw the second rectangle. And as soon as I press the mouse button, I get a heads up display telling me the height and the width of the rectangle. I also have smart guides telling me that, for instance, this rectangle now matches the height of my previous rectangle. It will also line up to certain items on the screen, like right now, the right side of my rectangle is lined up with the center of the page. So there's a lot of helpful information you can get just by dragging out your rectangle. And when you've got it the way you want it, then let go of the mouse cursor. If you don't see the smart guides, go up to View and under Grids & Guides make sure that you have Smart Guides checked.
You can also create a rectangle of a precise dimension by simply clicking and releasing on screen. And you'll be able to enter exact pixel values into the dialogue. So now that we know the ins and outs of shapes, let's take a look at how we can adjust the appearance of those shapes, in the next video.
- Setting up your InDesign files
- Creating shapes
- Stacking and grouping artwork
- Adding placeholder text
- Adding interactivity and motion to wireframes
- Creating responsive wireframes
- Using master pages and object styles
- Exporting wireframes for clients and developers