Dynamic header and footer.

It`s necessary to ensure that the layout looks more efficient at high resolutions. Designers often use the method of “layout on top of additional background and cast a shadow down.” Dust in the eyes! Now it’s not necessary.

And what we need is: at the time of the page load to pass that we need to stretch multiple layers on the full width of the screen. See how easy it is. Just click on many different words from somewhere in the area of programming. Wow! That`s really curious, a kind of visual programming for housewives.

1. Click on the working area of the screen, Page Alignment in the Style tab, select the center alignment so that the interactivity is displayed in the center in the browser

2. Look for OnPageLoad script in Properties — this will work during the page load

3. Select Set Size on the left — want put my size

4. Then click on the elements that we “pull” — the header and footer

5. Now click on fx icon — section for the advanced :)

6. Select Windows.Width — it will catch the “coded message” about the width of the browser and assign the width to the layer

7. And always choose Center in the Anchor drop-down list — starting point where to pull from

Move the buttons.

It is necessary to move the font settings from PSD, the height of the buttons and so on. Fortunately, I’m able to reproduce almost all specifications from memory.

We need: to set them the onhover through CSS in the future, so it is necessary to set them the height and indents. To align the X and Y axes within the given element. The corners should also be rounded. This is all necessary so that when you hover, the background under the link button is painted. It is also necessary to set the indents, taking into consideration further icon to the left of each section in the menu. There are a lot of things to do, but they are real. That`s how it should be done:

1. Drag the Button element to the workspace — it can be set for the button

2. In the Style tab I set the height — I prefer to keep the specs multiple to 5 or 10

3. L,R,T,B fields internal indents on all sides — I do the left one 44 given 10px mesh and future icon 24x24px

4. Next, bring the color in accordance with the layout and send buttons into the header

The first interactive.

Profit is obvious — the static image does not show dynamics. And the layout made in Axure, you can hover your mouse over an element and get the experience and impressions.

To do this you need: select the style editing mode for the state when the cursor will be on the element and set a new color at this moment. So far only color, everything else is also possible, but it shouldn`t be done now.

1. Select all the buttons to apply Onhover

2. Go to the Properties tab — there are all styles for interaction

3. Select MouseOver — the event that we need

4. In the new window I mark the checkbox next to Fill Color — set a new color

Pressing F6 we go from Axure to the browser and check how it works:

Grouping the elements.

Inside each card I stretch the elements in accordance with specifications. Then I align the indents. In Axure sticking to a mesh works particularly well. The elements are quickly cloned with Ctrl-Alt + left mouse cursor like in PS. The Axure developers apparently knew their consumer and where he will come from. And they were right.

What we don`t need yet: Convert to Master

A quick introduction of the group into the Masters window through the right clicking on an element. It`s very convenient for multi-page prototypes. In this case, there`s no sense to use it, but overall it`s convenient: you edit in one place and it changes on all screens. It`d be good if in future versions they`d make not exception of the entire “Masters” group, but only the desired element, for example Label. Otherwise, changing the text header of the master card, the text will be registered in all the pages for it.

Testing on F6 how the buttons reacts inside every tariff plan:

Work with dynamic panels.

Speaking in a simple language, it is a special grouping of elements to apply different actions to it. It is possible to make sticky menu at ScrollDown or a primitive carousel. Panels have one of several states active, inside the state there is its own set of elements. Thus, we have a kind of a dynamic artboard.

What we need to do: unload the screen from a number of similar buttons, hiding them by default. On mouse hover on a tariff plan, a button for each one would be shown.

1. First, I convert each group into the dynamic panel — select Convert to Dynamic panel from the context menu in the elements list

2. Right click on State1 inside the panel

3. Make a duplicate State2 by clicking the corresponding tab in the context menu

4. Start editing the artboard of the top State1 — delete button and reduce the height of the card

5. In the same Properties tab do the event of the mouse hover OnMouseEnter (…by the way, Hover doesn`t work for dynamic panels)

6. In the new window click on the left column — choose Set Panel State action

7. Select the card and the panel status to which it will be switched

That`s all. The minimal necessary interactive for the design is ready. Now we can see the picture in contrast.

Before:

After:

If you want softer button appearance when you hover the mouse, select the Fade effect Animate list and set the duration in milliseconds.

Now I`ll make some conclusions

It took no more than 4 hours to convert the layout. In the end, the PSD turned into a machine code. Cross-browser and valid, but nevertheless machine. I’m still researching if it is acceptable to give the result in such an interpretation, instead of PSD original. Nobody wants to do double work and convert Axure > PSD, just to “make it”.

Is Axure really nothing more than a tool for prototyping?

As it turned out, it`s much more than that. In addition to UI design, you can make microinteration design in there. It has everything you need for it. What disappears where, which element is reborn into which. No, you will not make super-cool animation that designers make in Adobe After Effects, but you will get a result with quite feasible effects: CSS- fade-, bounce-, swipe-flip-effects and others combined give soft enough and accurate microinteractions. And you see all that in your browser and you can pick up the code with the desired coordinates and duration.

Can an UI designer fully convert to work in Axure, abandoning other tools?

Practically yes! Although it seems that Axure is more focused on developing desktop products than mobile ones. So far, any mobile prototype should be shown through a browser. Animation becomes unavailable in this mode. I would like some software solutions for mobile phones: for example, the client would be set on the phone and by pressing F6 Preview I would select where to show the result. The smartphone would instantly get the Axure version from the desktop and play in the preview mode. Otherwise you’ll have to cut it for the width of 320 and above, and then stretch them by hand to give resources to mobile developers. But who knows, maybe it`s more valuable to build a complete high-fidelity prototype so we can move on to testing faster and identify all the problems of the future product. And for that, a preview even via the mobile browser is quite good.

What are the strengths and weaknesses of this program?

Everything is relative. Strengths can only be identified by the one who has tried all the tools of visual development.

I`d note the following weaknesses:

• absence of proper SVG support (the icon can be inserted, it will dynamically resize, but it will be impossible to change the color or move the curves)

• there is no coherent specifications, sizes and indent generator.

• export to PNG produces defective conversion of all text to graphics

• not enough masks, it’s hard to import photos and then adjust their size or cut them.

• machine code can cause Homeric laughter with developers, even might cause fall off the chair, injuries and wounds.

However, I like Axure! It just so happens that tasks of desktop interfaces development prevail in my work and it fits me perfectly. It`s especially true now, when everyone is ranting about the need for specialization in one chosen direction.

In the next issue I want to make an interactive credit card to enter my payment data. I will explain step by step what I was doing. I`ll set all of the transition logic on inputs, maybe will even add some reasonable animation and convert it all to HTML/CSS. Stay tuned!

Here’s some examples of interactive stuff I’ve done in Axure few days ago:

Contact me at kamushken@gmail.com, if your future product needs high fidelity prototyping.