Site prototype: creating a prototype with examples and tools
How to explain to the customer what his future site will be like? What elements will be placed on the page, and in what order? The answer is simple. If you need to schematically depict the page of a site, prototyping will help you. On the prototype, you can visually assess the location of elements and blocks, as well as make the necessary changes. A prototype is a saving of time and money, because proofreading a finished site already at the design stage is a costly and often unpromising business.
The site prototype is the base, or model of the future site, on which the key elements of the page, the main information and functional blocks are displayed:
site header, or header;
the bottom of the site, or footer, etc.
It is customary to present all of these elements on a prototype in the form of a diagram to clearly demonstrate to the customer how the site will work. Prototyping is the easiest way to achieve mutual understanding in relations with the customer. Already at the initial stage of web development, the customer should have a clear vision of the future site. This includes not only the appearance, but also the timing, costs, development prospects of the site, its concept. When all representations are clearly formulated and visualized on a diagram, the customer and developers will have no doubt about the effectiveness of the result.
Prototypes differ in type, level of difficulty in displaying elements, and degree of interactivity. You can create a static prototype, that is, just a website image. Or it’s possible – dynamic, or “acting”, with navigation elements, on which the customer will be able to evaluate the usability of the site. However, any prototype, whether it is a sketchy sketch on paper or a multi-page clickable structure, is intended to systematize the wishes of the customer.
Prototyping will also simplify the work of those who directly develop and fill the page: programmers, layout designers, designers, copywriters, etc.
Prototyping Tools and Services
Even the geniuses of painting, before creating their masterpiece, begin with a sketch. They draw individual details on drafts in order to work out the technique and eventually get the perfect result.
By the way, we are engaged in the creation of sites!
The situation with the site is approximately the same. To create a truly high-quality resource, first of all, you need to choose the right tool for creating a sketch – a prototype, in our case. We would like to draw your attention to the following programs:
Axure is one of the most popular prototyping services with which you can easily and quickly create a high-quality prototype of a site or application. The interface is as simple and straightforward as possible, so everyone can figure it out. The program offers a great toolkit, but to use it, you will have to download the file to your computer. The program is available for both macOS and Windows.
Ability to create flowcharts, wireframes, layouts, user route on the site;
The trial period is 30 days;
The minimum rate is $ 29;
Among the customers of the service – more than 85% of Fortune companies.
Figma is a graphical editor whose functionality allows you to create an interactive prototype of a website or application for a smartphone, various page design elements (buttons, feedback forms, icons, etc.), as well as vector illustrations. The program runs on both Windows and Mac.
Files are stored in the cloud, so you can work on a project collectively – you don’t even need to download a file for this, just follow the link.
After registration, you can use the tools for free, with minor restrictions.
The program can be used both in a browser and previously installed on a computer. Work on the project can be carried out offline on the desktop, and when connected to the Internet, all changes made are saved and synchronized.
The minimum rate is $ 12.
This is a powerful and versatile tool for design and one of the best assistants in the field of prototyping. Among the advantages of the program are high speed, the ability to run several projects at the same time and open additional applications without problems and failures.
The tool can only be used on a Mac;
Ability to integrate with other tools;
The trial period is 30 days;
The cost of a one-time license is $ 99;
Among the main customers are such large companies as Google, Booking, Twitch, IBM, etc.
The full name of the Adobe XD program is Adobe Experience Design CC. This is a lightweight vector editor that has all the tools necessary to create a prototype site. You can work in the program only by installing it on a computer.
Ability to import files Adobe Photoshop, Illustrator, Sketch;
Functions for drawing and form, vector editing, auto-animation.