December 10, 2013 at 09:44Axure Interactive Prototype in 20 Minutes
- Tutorial
While I was writing about designers and prototypes, it suddenly became clear that many readers had no idea what they were talking about. Therefore, today I decided to talk about what an interactive prototype made in Axure is (pronounced “Action”, and I'm used to saying “Akshura”). And not only to tell, but also to show.
If absolutely rude, then an interactive prototype is a set of html layouts connected to each other. It was not the designer with the layout designer who worked on these layouts, but the designer in a specialized program that allows you to do this work many times faster. What will be the difference in the result? The prototype prepared by the designer, unlike the layouts prepared by the layout designer, is not intended for development. It is designed to very quickly and clearly demonstrate what the performer will implement in the next stages. It’s the same as a three-dimensional model of a building preparing for construction. It will take much less time to create it than to build, and it will allow you to virtually wander around on a future project.
The benefits of prototypes are hard to overestimate.
Especially for Habr, I recorded the process of creating a simple prototype. I took it from my head, the goal was to demonstrate how fast such work is being done. From the video you can understand that in 20 minutes an experienced designer can already do something that can be discussed and give feedback. Plus, it is clear that all the through and list items are made using the wizards, which allows editing one wizard to make changes to the entire prototype. Do not like the name of the menu item in the header? We correct one word, and this correction applies to all pages. I would like to change the look of an individual work in the portfolio list - the same thing. We edit a separate wizard, and then align the result on the page with a list of works.
You will also notice that in the video I use the second prototype, which contains the basic typical interface elements. I’m constantly repeating this to the members of my Axure group - start up such “mega-prototypes” and keep in them all those things that are clearly repeated from prototype to prototype. This will increase your speed. And this is more convenient than opening your various old prototypes in search of the right piece of the interface.
As I already said, the generated prototype is a set of html files that can be uploaded either on a special service provided by Axure itself, or on any hosting. The client will only need to give a link. Here is a link to the prototype that I made in the video:
http://share.axure.com/OHB5ZQ
I don’t know if that hosting is ready for Habraeffect, but I’m ready to take a chance.
I’ll try to anticipate some of your questions.
Well here is the video. We used the beta version of Axure RP Pro 7. The music is still being processed, it will work soon.
If absolutely rude, then an interactive prototype is a set of html layouts connected to each other. It was not the designer with the layout designer who worked on these layouts, but the designer in a specialized program that allows you to do this work many times faster. What will be the difference in the result? The prototype prepared by the designer, unlike the layouts prepared by the layout designer, is not intended for development. It is designed to very quickly and clearly demonstrate what the performer will implement in the next stages. It’s the same as a three-dimensional model of a building preparing for construction. It will take much less time to create it than to build, and it will allow you to virtually wander around on a future project.
The benefits of prototypes are hard to overestimate.
- Simplicity and speed of creation. A good designer can demonstrate the first version of a prototype several hours after formalizing a task;
- A well-made prototype is specifically designed for subsequent edits. Looking at the result, both the client and the executor, with the help of quick iterations, will rightly go to the desired goal;
- This allows even before writing a functional specification or technical specifications to very precisely agree on what should happen at the output. And documents will only reinforce this arrangement;
- Due to the visibility of the prototype, the likelihood of corrections at the next stages of the site is reduced to zero. And taking into account how much editing can cost at the programming stage, the design phase daily saves a huge amount of money to people around the world.
Especially for Habr, I recorded the process of creating a simple prototype. I took it from my head, the goal was to demonstrate how fast such work is being done. From the video you can understand that in 20 minutes an experienced designer can already do something that can be discussed and give feedback. Plus, it is clear that all the through and list items are made using the wizards, which allows editing one wizard to make changes to the entire prototype. Do not like the name of the menu item in the header? We correct one word, and this correction applies to all pages. I would like to change the look of an individual work in the portfolio list - the same thing. We edit a separate wizard, and then align the result on the page with a list of works.
You will also notice that in the video I use the second prototype, which contains the basic typical interface elements. I’m constantly repeating this to the members of my Axure group - start up such “mega-prototypes” and keep in them all those things that are clearly repeated from prototype to prototype. This will increase your speed. And this is more convenient than opening your various old prototypes in search of the right piece of the interface.
As I already said, the generated prototype is a set of html files that can be uploaded either on a special service provided by Axure itself, or on any hosting. The client will only need to give a link. Here is a link to the prototype that I made in the video:
http://share.axure.com/OHB5ZQ
I don’t know if that hosting is ready for Habraeffect, but I’m ready to take a chance.
I’ll try to anticipate some of your questions.
- Axure is not only designed for website design, but also suitable for mobile applications, desktop applications and other interfaces;
- Allows you to make adaptive prototypes;
- Does not limit the designer in creating interactive and dynamic pages;
- It can generate prototypes not only in the form of html-files, but also in the form of a set of pictures;
- It can give the prototype the look of a sketch with the click of a button.
Well here is the video. We used the beta version of Axure RP Pro 7. The music is still being processed, it will work soon.