Basics of designing web interfaces in Axure RP Pro

Recently, web project developers are increasingly beginning to wonder what, before starting product development, it would be nice to know what kind of product it will be and how it will look.

This trend can not but rejoice both the customers and the developers themselves - the design process allows to destroy all the most problematic moments before the start of the transformation of an abstract technical specification into a final product.

Tools for visual design is becoming more. Some use Adobe InDesign, others like Visio, others are content with OpenOffice Draw. But more and more fans appear in a rather heavy and functional program Axure RP Pro.
')

1. Sitemap

In this area, you can create a structural scheme of the site using a multi-level hierarchy. For example, the structure of a small project might look like this:



The buttons in the panel are designed for quick access to the main functions:

	Creates a child page
	Move the selected page up or down. They work only with pages of the same level and do not pull them out of the parent element. If you need to select and move up or down several pages at once, you can use Shift.
	Change the level of nesting pages. The left arrow brings the selected pages to a higher level, the right arrow subordinates the page to the parent element above it.
	Removes the page. If the parent element contains nested elements, they will be deleted with it.
	Allows you to go to the page editing, i.e. it does the same thing as double-clicking on the page.

The same actions can be performed using the context menu, which falls on a right-click on an element (if you right-click in a free area, only the function of adding a new page will be available).

2. Widget panel

The panel contains a set of interface elements that are constantly used when working on a project. Standard libraries contain only the most necessary - rectangles, text panels, placeholders, buttons, form elements , etc.

Either all elements from all libraries can be loaded into the area at the same time (to do this, select All libraries), or only the element library that is currently needed. By the way, the library of elements can be created independently, but this will be discussed below.

To place an element on the page, use the Drag and Drop method (it is necessary to select the element and, without releasing the mouse button, drag it to the workspace).

The main library that should be used at the stage of mastering the program is called Wireframe. We will use its elements.

The table contains descriptions of the elements. The fact that you can do with the elements will be discussed below.

	Cap for the image. Standard size is 50 × 50px.
	Text field (100 × 16px). The default is Arial, 10, black.
	Hyperlink (100 × 16px). The default is Arial, 10, blue + underline.
	Rectangle 180 × 80px with white fill and black frame in 1px.
	Placeholder, designed, for example, to drive a banner space. 180 × 80px, frame and diagonals - black, 1px.
	Button (100 × 25px).
	Table. By default, a 3 × 3 table is created. Using an element is not very convenient, since the width is set only for the entire table and cannot be defined for specific columns. If you start by hand to shift the borders of the columns inside the table - the width increases and decreases due to the total width of the table, and not other columns.
	Text input field (one line).
	Area to enter text (any number of rows and columns).
	Drop-down list.
	Multiline list.
	Checkbox
	Radio button.
	Horizontal line.
	Vertical line.
	Button with rounded corners. It can easily turn from a button into a rectangle or a square. The radius of the rounding can be set manually, but only "by eye". The field for entering the exact radius developers are too lazy to do.
	Overlay area for images.
	The frame in which information from other pages of the prototype can befriend.
	Dynamic panel. It can be used, for example, to affix the activity of menu items on certain pages. In this article, the issues of interactivity of the prototype will be considered very superficially, so we will not go into the logic of this element.
	Vertical multi-level drop-down menu.
	Horizontal multi-level drop-down menu.
	Drop-down list.

3. Masters panel

This panel contains elements that are reused on the pages of the site. For example, in case of a small change in the footer, not to redo it on all the developed pages, it is enough to make it a master panel and load it onto other pages. Accordingly, to make changes on all pages, you will need to correct the master panel once.

Master panels can also be multi-level (for example, a footer can contain child elements “contacts” and “counters”).

By default, there are no master panels . To get it and add to all pages, you must perform the sequence:

Click the AddMaster button ( ) → Double click on the created master panel (in the working area, a tab opens on which the contents of the master panel will be edited) → Edit the master panel , add the necessary elements to it → Right-click on the name of the master panel to open the context menu → Click “Add To Pages” → Select the required pages (if the master panel should be displayed on all pages, you can use the “Check All” button) → Choose the panel positioning (if Place in background is selected, the master panel will save well e is the location in which it is made. If you select Specify Location and set the left and upper indents, the master panel will take the specified position on the pages) → Click “OK” and enjoy the hosted master panel .

If the master panel is no longer needed and you want to delete it, you must first cancel its placement on the pages of the prototype, and only then delete it. Otherwise, she will resist and swear.

4. Workspace

Actually, the most interesting thing happens in this area - elements and their design are edited, functional blocks are drawn up, and so on.

I think the most obvious way to demonstrate how to use the workspace and work with elements will be a step-by-step description of creating the main page of something . For example, Yandex.

I will say right away that the prototype will not be developed to the end - but those who are interested in Axure will be given the opportunity to download the unfinished project and finish it themselves.

The master panels will not be used, since we are assuredly certain that only one page is being developed.

So, we proceed.

To start, make a screenshot of the source:


Here you can look at the source in normal resolution .

Measure out on the top ruler 1000px.

Place a rectangle that will serve as the background of the top navigation bar and resize it:



Remove the frame from the rectangle.



Choose a light gray fill.



Using the Hyperlink interface element, we pull out and place 4 links in the navigation panel, giving them a size of 8 instead of the standard ten. Color links can be set immediately, but I will leave it on the conscience of those who download and will pick the project.



Throw in and draw up a news block using the Text Panel elements for text / links and a Rectangle for the “news of the hour” substrate. Here we immediately get some subtleties.

First , in order for the substrates to be located under the text, and not above it, each rectangle must be set to the location under the other elements:



Second , in order for text blocks to have uniform vertical indents, you need to select them and align them vertically:



Thirdly , in order to make an intermittent underline near the city's switch-link , you must place a horizontal line under the inscription (the Horizontal Line element) and select the type of underline for it.

Fourth , since we have finished working with the elements of this block, it is better to group them so that in the future we will not accidentally tear an extra piece out of there.



News in general form is ready - you can go to the search bar and to the ad space "Yandex in your phone."

Place links above the search bar (Hyperlink) and place the search bar itself with a button (Text Field + Button).



We immediately translate the links into size 12 and try to adjust the width of the element to the width of the hyperlink so that the Distribute Horizontally command, which aligns the horizontal indents of the group of elements, worked correctly. Of course, ideally it will not work and you will have to adjust them a little with your hands, but there is no alternative (at least I did not find it).

Do not forget about "for example" (element Text) and "advanced search" (Hyperlink).

To keep the size of the fields and buttons right away, I pulled out a rectangular backing and filled it with the appropriate color.

On the right, the substrate under the form of Yandex ends up outside the box - that's why he and the design. Fans can cut the end of the substrate from the screenshot, place the Image element in the working area and change it to the desired one. We will do it at the very end, because now it’s just laziness and there are more important tasks. For example, put a logo.

Right now we will analyze the substitution of images. It is quite simple - you need to drag an Image element into the workspace and, without changing its size, double-click on it. A dialog box opens in which we must select an image file. After we have found the desired image and clicked "OK", Axure will ask the question:



If you refuse, the selected image will be adjusted to the size of the Image element. If you agree - the picture will be inserted in the amount in which it exists. As a rule, you have to agree.

To make the prototype look more vivid, I stole the image with the banner from the screenshot. But, in principle, it is possible to use the Placeholder element for these purposes - there is nothing terrible in this.

Most of the remaining interface is text. And operations for its implementation are no different from the work already done. So for those who are interested in designing in Axure and want to try their hand, I can offer to download the unfinished project of the Yandex main page and work out the remaining elements on my own.

The program itself can be downloaded from the official site . The trial version will work with all functions for 30 days.

Yes, by the way, I have nothing to do with this program and with the company that developed it. This tool was chosen solely because of the whole set of software that I tried to design, I liked Axure the most. I do not exclude the fact that you will use other software. For example:

1. Overview of visual design tools .
2. 18 Wireframing, Mockup And Prototyping Tools To Plan Designs .

PS If you like the article, I will be happy to write one or two more, in which I will talk in more detail about the design and functionality of each of the elements, as well as how to work with interactivity and dynamic panels.