We present Uizard, an online service that allows you to create websites starting from simple sketches on paper or blackboard (wireframe).
Building sites that are visually appealing, usable and, at the same time, “clean” in terms of code is not a child’s play. Some providers provide services for the creation of Internet sites: these are platforms that usually have simple procedures for setting up web pages that are not too complicated in terms of structure and content.
In some cases, automated procedures are offered for installing WordPress and for setting up e-commerce sites allowing the user to choose one of the template proposals.
Those who like to get their hands dirty with the code will promptly avoid such offers but, often, it will clash with the creation of the graphical interface, the navigation menu, the links between the various pages that make up the website.
Even the professional programmer is usually never a graphic designer and also has less “aesthetic sensibility”.
We therefore like to inform you of an online service, currently in version betawhich allows for create a website for mobile devices starting from a paper draft.
Uizard transforms ideas on paper into websites navigable by mobile devices
They are called wireframe the initial models of representation of the various pages that make up a website.
This is the first visual representation of the site with which the general structure of the website is sketched, the arrangement of the elements on the pages and the overall architecture of the project.
The video that we republish below is worth a thousand words and concretely shows what Uizard is able to do.
Why Uizard? The name combines the acronym UI that is to say user interface o graphic interface con wizard to refer to the automated procedure for creating the layout of web pages.
To use Uizard, just make a paper diagram of the page you want to get then visit this page from your mobile device to take a picture of the wireframe.
Il wireframe it can be drawn on a sheet of paper or on a blackboard: once the photo has been uploaded to Uizard, the service will take care of processing the image and creating a structured, immediately editable version.
As you can see, with a wireframe like the one on the left, Uizard is able to generate an editable page like the one shown on the right.
Various pages can be captured in the form of wireframe and elaborated to form a web project, even a rather complex one.
Uizard’s artificial intelligence performs well but it is good to stick to simple rules to get the best results. The placeholders for the images must always be indicated with a cross in the middle otherwise they will be considered as boxes for inserting text (by writing Login will be treated as buttons for authentication).
Uizard perfectly recognizes symbols, buttons and locations for displaying avatars.
After the acquisition of wireframe from a smartphone you can easily continue processing from a PC by always connecting to the same page.
The beauty is that by clicking on the item Prototype in the Uizard toolbar, it is possible to directly correlate multiple pages generated from wireframe and define what actions a click on this or that element should trigger.
With one click your Edit you can directly modify the structure of the page in order to immediately obtain a result as close as possible to your expectations.
The cleaning of the code generated by Uizard is really excellent: you can see this by clicking on Code then choosing the type of code you want to produce.
Uizard’s flagship is also the function Play: with a simple click you can preview the behavior of the website you are creating by simulating its display on a mobile device.
With one click your Export you can save the project in multiple formats so you can then edit the pages using your favorite design software.
It is interesting to point out that the pages can also be obtained in the format Gradle so as to create the various activities which will, for example, make up an Android app.
At present, unfortunately, Uizard still suffers from some limitations: for example, we would have liked the possibility of creating websites capable of adapting to the device on which they are displayed (use of media queries); we would have also liked tools for the desktop mode (now, in our opinion wrongly, excessively snubbed); the ability to put the smartphone in mode landscape in the section Play.
In short, hats off to the work done by the Danes of Uizard because the one proposed is undoubtedly an innovative product, with great potential and enormous growth opportunities. Too bad for some shortcomings which we hope will be remedied in the future.
For the rest Uizard is really appreciable: choosing the format HTML & CSS for data export you will find a Zip file containing all the pages of the website: by extracting the contents of the compressed archive you can start working, even with a simple text editor like Notepad++.
The pages are obviously HTML and use style sheets to define the layout and positioning of each individual element.
Once the “look” of the web pages has been adjusted, the project generated with Uizard can be transformed, for example, into a dynamic website using PHP, ASP.NET or other programming languages.
The obstacle associated with creating an aesthetically convincing website is thus overcome and the programmer can concentrate on the rest of the work by identifying the key portions of each page and creating a modular block structure.