Prototyping with Wireframesketcher
Once I had a task to draw for the designer a small, if possible interactive prototype of the site. Naturally, the first thing I wanted was to look for a worthy tool for my favorite habrahabr.
Quickly found two good articles with the list of necessary software:
Having tried the free services Cacoo, iPlotz, MockFlow, Mockup Builder, the Pencil got the first idea of ​​the functionality. It should be added that they are free with a restriction in one project (the exception of Mockup Builder), which of course is not very convenient for at least some work. The functionality is approximately the same (it was the prototyping functionality that was considered, without flowchart diagrams, etc.). I stopped at Mockup Builder and made a project on it.
And when the project was ready, I accidentallyclimbed on Habr stumbled upon Wireframesketcher and here I understood - this is exactly what I was looking for.
It would seem nothing special, but the work with the prototypes themselves is the trump card of this program, everything is very logical, functional and convenient, in comparison with all the analogues I have listed.
It may seem a bit not familiar to those who are not familiar with eclipse, but this will pass quickly.
')
Everything is very simple and clear.
Each element can edit the text of the element itself and its properties.
Text editing with formatting support is a very flexible tool, such as the text of the tree component:
we will see in this form:
The properties of the elements are edited in the window:
while it all works very quickly is not buggy, such as in Mockup Builder.
Such editing features are necessary and sufficient, there is nothing superfluous, and everything is in its place.
In two clicks to the buttons, you can specify a link to an external resource or an internal page, which makes the final prototype more alive.
Thus, the main functionality of this kind of program is implemented perfectly here, but this is not all ...
Looks like that:
in fact, this is a project map, which can (only it is possible, otherwise it will be only individual pages) be exported to html with transitions between pages.
Wireframesketcher has several very handy features that minimize the prototyping process as much as possible.
The component is created from a group of elements.
In this case, we can edit the components so that the changes affect all of its copies, and without it. This becomes relevant when you have many identical complex elements, and suddenly one needs to be changed without affecting the rest. It is very convenient. This is not the case with competitors, but this feature is very much in demand.
This is a link map, clearly shows the options for possible transitions between pages.
Everything is simple:
I also had to work with such a combine as Axure (worth $ 600), he certainly has his own buns, but I really liked Wireframesketcher’s basic functionality and the process itself.
ptizza
Dyz
Tool search
Quickly found two good articles with the list of necessary software:
Having tried the free services Cacoo, iPlotz, MockFlow, Mockup Builder, the Pencil got the first idea of ​​the functionality. It should be added that they are free with a restriction in one project (the exception of Mockup Builder), which of course is not very convenient for at least some work. The functionality is approximately the same (it was the prototyping functionality that was considered, without flowchart diagrams, etc.). I stopped at Mockup Builder and made a project on it.
And when the project was ready, I accidentally
- multiplatform software (compiled on the basis of eclipse), there are both standalone versions and in the format of a plug-in for eclipse
- very smart (especially noticeable in comparison with competitors for air, silverlight)
- Included is a palette of components, divided into groups (concisely and clearly)
It would seem nothing special, but the work with the prototypes themselves is the trump card of this program, everything is very logical, functional and convenient, in comparison with all the analogues I have listed.
Interface
It may seem a bit not familiar to those who are not familiar with eclipse, but this will pass quickly.
')
Everything is very simple and clear.
Each element can edit the text of the element itself and its properties.
Text editing with formatting support is a very flexible tool, such as the text of the tree component:
wireframing-tutorial
-assets
--icons
---7-location-map.svg
---9-av-shuffle.svg
--logo.png
--logo.screen
--Star.svg
we will see in this form:
The properties of the elements are edited in the window:
while it all works very quickly is not buggy, such as in Mockup Builder.
Such editing features are necessary and sufficient, there is nothing superfluous, and everything is in its place.
In two clicks to the buttons, you can specify a link to an external resource or an internal page, which makes the final prototype more alive.
Thus, the main functionality of this kind of program is implemented perfectly here, but this is not all ...
Tutorial story
Looks like that:
in fact, this is a project map, which can (only it is possible, otherwise it will be only individual pages) be exported to html with transitions between pages.
Killer features
Wireframesketcher has several very handy features that minimize the prototyping process as much as possible.
- creating your own components in one click (in the latest version 3.8.2)
- Screenflow
Components
The component is created from a group of elements.
In this case, we can edit the components so that the changes affect all of its copies, and without it. This becomes relevant when you have many identical complex elements, and suddenly one needs to be changed without affecting the rest. It is very convenient. This is not the case with competitors, but this feature is very much in demand.
Screenflow
This is a link map, clearly shows the options for possible transitions between pages.
Export
Everything is simple:
- Html
- Png
PS
In conclusion I wanted to say that despite the fact that I compared the commercial program with free analogues, the functionality of the latter does not expand even after the payment of the account.I also had to work with such a combine as Axure (worth $ 600), he certainly has his own buns, but I really liked Wireframesketcher’s basic functionality and the process itself.
UPD
add links from comments:ptizza
Flairbuilder . Selected after analyzing about 12 web and desktop counterparts ...
Dyz
I use www.easel.io
I no longer see the point in the “sketch” prototypes, if you can immediately generate html + css at the same speed.
Source: https://habr.com/ru/post/165711/
All Articles