Join Brian Thurston Bralczyk for an in-depth discussion in this video Using widgets in Axure, part of UX Design Tools: Axure.
In this chapter, we'll be focused on adding and styling content on the pages we created earlier. To do this, we're going to be using bits of text, shapes, and images. In a later chapter, we're also going to use form inputs such as text fields, buttons, drop-down menus and checkboxes. So let's open up our exercise file. We're going to start in the Chapter 2 01 Start folder with this file called 02_01_Start. Let's start by adding a basic image widget to our page.
It's as simple as clicking on one of the widgets over here and dragging it on to the design area. So, let's take this image widget and drag it onto our page. We'll line it up with our guide and put it about 50 pixels down from the top. And, you can see exactly where you're about to place it with these x and y values that show as you drag it around. When you first drag it on, the image widget looks just like a sort of placeholder icon, and that's exactly what it is. To swap this out for a real image, just double-click on that widget. Axure will open up your Mac or PC browse dialog and you can navigate to the image you want.
If you're using the exercise files with me, look in the Chapter 2 01 Start folder for a file called SAMOCA_logo_header.png, and then click Open. And you'll immediately get this second dialog that asks if you'd like to autosize your image. If I say No, it will squish the image to the dimensions of the widget itself. Not exactly what we were going for. Let me undo that and try again. Again, I'll double-click on my image widget and find the correct image file and click Open.
And this time when it asks if I'd like to auto-size my image, let's click Yes. You'll see the autosize just means it gives the image the exact dimensions of the image file itself. And that's exactly what we want here. Now let's add some text to our site. You can see here in our finished design, there are some header links here in the upper right. To add these links, let's grab a Heading 2 or H2 widget from the left and drag it onto the design area. You'll see as you start dragging these light blue dash lines appear. These are called object snap guides, and they help you line up one object with another that's already on the page.
The widget you're dragging on will try to snap into place to line up with the top or middle, or bottom of the widget. But for now let's place our text widget somewhere close to the middle of the design area, at about 120 pixels from the top. Once you've dropped it onto the page, we want to change the text, and there's a few ways to do this. If you want to delete all of the text that's currently there and replace it, you can just click once to select the widget and start typing new text. You can also select your widget and hit your Return key to highlight the text. And if we unselect that again, you can just double-click on the widget to achieve the same effect.
The benefit of these last two methods is that they don't automatically delete all of the existing text. Let's say I change my mind and just want this to say Home instead of Home Page. I can now do this by clicking and highlighting that second word, and then hitting my Delete key. Now we need to add text links for each of our other pages, so let's do that now. We can either drag on a new H2 widget, or we can also use a shortcut to duplicate the widget. To do this, hold down the Option key and drag it, if you're on a Mac, or if you're on a PC, hold down the Ctrl key while you drag.
As we do that, you'll see it creates an exact duplicate of our collections text widget. And since it's the same type of widget, we can just change it to say About Us now, and then repeat that process to add our last text link for ask us. Now let's move on and create the background for this horizontal ban of content. It's a large rectangle, so let's see if there's something that will work for that in Axure. If I look over on my Widgets pane, hey, look at that, there's actually something called a Rectangle right there. So let's drag that Rectangle onto our page, and let's try to line up that upper left corner with our two guides here.
Obviously this rectangle is too small, but you can easily resize it by hovering over one of these grab points in the corners. See how this cursor changes to a double ended arrow. Well once you have that you can just drag that point to resize it. Let's take it all the way to the right side to our guide and then down the page to our lower horizontal guide and the page will scroll down with you. It's kind of hard to see right now because the borders of the rectangle are hidden by the guides. This is exactly the time you may want to hide the guides temporarily to see your work.
The keyboard shortcut for that again, is Cmd+Period for the global guides, or Cmd+Comma for the page specific guides. And of course, if you're on a PC that'll be Ctrl+Period and Ctrl+Comma. By the way, we don't need to do this now, but should you ever want to rotate a shape, you can select it, hover over one of those drag points and hold down the Cmd key on a Mac or the Ctrl key on a PC, the cursor will change to a circular arrow and you can drag to rotate it in anyway you please. Right now, that's not what we want, so lets undo that.
In the next video, we are going to look at how we can align and position these widgets, we've just placed on to our page.
- Using and styling widgets
- Setting up interactions
- Creating hide/show options for content
- Creating an accordion menu
- Applying web fonts
- Using flow widgets
- Creating and placing masters
- Styling pages
- Adding form fields with widgets
- Building a slideshow with dynamic panels
- Setting up adaptive views