Feb 12, 2017
How I finally quit Photoshop and switched to Axure
And my life will never be the same as before…
So, Axure…
Is this product really is nothing more than a tool for prototyping?
Can a UI designer fully change to work in Axure, abandoning the other tools?
What are the strengths and weaknesses of this program?
I`ll try to find the answers to these questions below. Relatively recently I`ve decided to leave Adobe Photoshop for Axure, having suddenly revealed the tool`s potential not only as a means of prototyping. Maybe life will never be the same as before. If sometimes one has to open PS for bitmap details, he begins to understand all its slowness.
In recent years, PS has grown so much functionality that when I come back to it after an obviously simple, but no less powerful alternative, I notice how obvious that is. Moreover, UX/UI designer won’t even use 70% of the functionality. But Axure has nothing superfluous, and now I can run many of my typical scenarios in the interface development much faster.
I believe that the person who loves his job understands that it is necessary to constantly study and evolve. New tools simplify the routine and I would also take into consideration the competition factor. Tomorrow I won`t be able to get a job if my resume doesn`t contain several important lines, which no one heard of a few years ago. And some John will get the job because he’s been working with programs that are more suitable for interface design. This means that we need to keep abreast of technologies as well as tools. I’m a conservative and such a major transition from Photoshop/Illustrator to Axure would sound incredibly for me even six months ago. But then the fingers themselves began to press the right buttons…
Experimental task: PSD > Axure
To dispel all my doubts, I decided to convert one of my layouts which completed the project into interactive. Although I showed 98% of the project by storyboard and, in general, all of my ideas and scenarios were understood and approved. But this was only part of the plan. The second one was to check and compare the quality of the element display in conjunction “editor browser”. One of Axure peculiarities is that it emulates the server work (as I imagine it) and immediately broadcasts the html/css element settings that you have just drawn. You draw a rectangle in the left corner of the monitor, in the right one you`ve got the browser. You click Preview in it and now your element is already visible the way it will be seen by all the Internet. Top class! It`s possible to inspect the code, styles, indents, whatever.
The story isn`t without a catch.
What have designers always shown to their customers? Pictures! This is the catch for the first ones. The layouts were drawn in editors that smooth out the fonts, make super-shadows and other effects. And designers did not care what developers should do with all that. If the designer hasn`t explained the direction of the shadow, its blur and transparency, in the specifications the developer does the shadow himself “by eye”. With all the consequences coming…
To sum up the overall visual impression of “Axure” : there’s something from PS in it (+ hotkey combination are the same, which is cool) and something from the classic Dreamweaver of Macromedia era. That is a WYSIWYG editor with elements of a vector drawing.
Now we can go from theory to practice. I`ll start here with this layout (the name changed in the interests of the investigation), which is in *.psd :
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.
