Axure Interactive Prototype in 20 Minutes
While I was writing about designers and prototypes, it suddenly turned out that many readers have no idea what this is about. So today I decided to talk about what an interactive prototype, made in Axure (pronounced "Escher", and I used to say "Akshur"). And not only to tell, but also to show.
If it is very rough, then an interactive prototype is a set of related html-layouts. Only worked on these layouts are not a designer with a coder, but a designer in a specialized program that allows you to do this work many times faster. What is the difference in the result? The prototype prepared by the designer, unlike the models prepared by the layout designer, is not intended for development. He is called upon to very quickly and visually demonstrate what the performer will implement in the next stages. It is like a three-dimensional model of a building being prepared for construction. Its creation will take much less time than the construction, and it will allow you to virtually wander around the future project.
The benefits of prototypes are difficult to overestimate.
')
Especially for Habr, I recorded the process of creating a simple prototype. I took it out of my head, the goal was to demonstrate the speed with which 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 given feedback. Plus it can be seen that all the through and list elements are made using wizards, which will allow editing one master to make changes to the entire prototype. Do not like the name of the menu item in the header? We fix one word, and this fix applies to all pages. I want to change the appearance of a separate work in the list of portfolios - the same. We edit the separate master, and then we align the result on the page with the list of works.
You will also notice that in the video I use the second prototype, which contains the main typical interface elements. About this, I constantly affirm to the members of my Axure group - get yourself similar “mega-prototypes” and keep in them all those things that are clearly repeated from prototype to prototype. This will increase your work speed. And it is more convenient than opening different old prototypes in search of the desired piece of the interface.
As I said before, 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 of its 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 the Habraeffect, but I’m ready to take a chance.
I will try to anticipate some of your questions.
Well, that's the video. The beta version of Axure RP Pro 7 was used. Muzychka is still being processed, it will soon work.
If it is very rough, then an interactive prototype is a set of related html-layouts. Only worked on these layouts are not a designer with a coder, but a designer in a specialized program that allows you to do this work many times faster. What is the difference in the result? The prototype prepared by the designer, unlike the models prepared by the layout designer, is not intended for development. He is called upon to very quickly and visually demonstrate what the performer will implement in the next stages. It is like a three-dimensional model of a building being prepared for construction. Its creation will take much less time than the construction, and it will allow you to virtually wander around the future project.
The benefits of prototypes are difficult to overestimate.
')
- Simplicity and speed of creation. A good designer can demonstrate the first version of the prototype a few hours after the task is formalized;
- A well-made prototype is specifically designed for subsequent edits. Looking at the resulting result, both the client and the performer, with the help of fast iterations, they will truly go towards the desired goal;
- This allows even before writing a functional specification or technical assignment to very precisely agree on what should happen at the output. And the documents will only fix this agreement;
- Due to the visibility of the prototype, the probability of edits in the next stages of creating the site is reduced to zero. And taking into account how much the edits at the programming stage can do, the design phase saves a huge amount of money every day to people all over the world.
Especially for Habr, I recorded the process of creating a simple prototype. I took it out of my head, the goal was to demonstrate the speed with which 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 given feedback. Plus it can be seen that all the through and list elements are made using wizards, which will allow editing one master to make changes to the entire prototype. Do not like the name of the menu item in the header? We fix one word, and this fix applies to all pages. I want to change the appearance of a separate work in the list of portfolios - the same. We edit the separate master, and then we align the result on the page with the list of works.
You will also notice that in the video I use the second prototype, which contains the main typical interface elements. About this, I constantly affirm to the members of my Axure group - get yourself similar “mega-prototypes” and keep in them all those things that are clearly repeated from prototype to prototype. This will increase your work speed. And it is more convenient than opening different old prototypes in search of the desired piece of the interface.
As I said before, 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 of its 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 the Habraeffect, but I’m ready to take a chance.
I will try to anticipate some of your questions.
- Axure is designed not only for designing websites, but also suitable for mobile applications, desktop applications and other interfaces;
- Allows you to make adaptive prototypes;
- Does not restrict the designer in creating interactive and page dynamics;
- It can generate prototypes not only in the form of html-files, but also in the form of a set of pictures;
- Can make a prototype look like a sketch at the touch of a button.
Well, that's the video. The beta version of Axure RP Pro 7 was used. Muzychka is still being processed, it will soon work.
Source: https://habr.com/ru/post/205450/
All Articles