A website prototype is a demo of a website that shows how the final website will look, feel and operate.
Adobe XD
Adobe recently announced their prototyping tool Adobe Experience, or Adobe XD. The preview version is now available for the Mac OS with a PC version due later this year.
Adobe describes their tool as:
“Adobe XD makes it easy to undertake wire framing, visual design, interaction design, prototyping, previewing and sharing, by bringing together the tools you need for experience design into a single solution.”
Adobe is the leading provider of web design and graphic tools. By releasing prototyping software, they demonstrate they are committed to the importance of prototyping.
Why use prototyping?
Prototypes are places to experiment and to try out ideas. They are discussion tools for web designers and their clients. A prototype is the place to make crucial design changes before the full website is constructed. It is also a tool for usability testing.
The prototype process
Some web designers like to start the prototyping process using Adobe Photoshop or Illustrator to create full colour page layouts, but a quicker and cheaper starting point is simply pencil and paper. A few wireframe and thumbnail ideas can be created in a few minutes. Rough sketches are ideal visual aids when discussing the project with the client.
The next stage is to digitise the design as a wireframe demo. There are tools such as Balsamiq Mockups that are specifically for creating wireframe website designs, or you could use a more general graphic program such as OmniGraffle, there are also apps for the iPad (such as iMockups) you could use, if you’re a tablet sort of guy.
The next part of the process is to create an interactive prototype. This could be using a web framework such as Bootstrap or Foundation. There are several prototyping tools such as Axure or inVision where you can add animations to the prototype.
Subscribers to Adobe’s Creative Cloud may prefer to use Adobe XD when it is fully developed. Adobe’s design philosophy is to make it easy to link elements in all their design tools so that, for example, graphics created in Photoshop can easily be placed in their other programs.
At this stage the prototype has placeholder content, but many of the design elements and colour schemes will be very near the final version.
Usability testing
A prototype with working links, transitions and animations is the ideal tool for usability testing where members of the website’s target audience can try out the design. Without usability testing there is the danger that a month or two after the website is live, the client finds that users are getting lost through poor UX design.
The cost of prototyping
The one disadvantage of prototyping is that it takes time before the actual website development starts, and this can add to the costs of the project. Prototype development should be included in the initial website costing quote, with a working demo of the website available to the client during development. Anticipating problems at the prototyping stage is cheaper than making large changes after the website goes live.
All but the most basic website project can benefit from the prototyping process.
- Win two hospitality tickets to watch Liverpool v Toulouse at Anfield - September 25, 2023
- Wanted: Web Developer - June 13, 2022
- Facebook adds ‘automatic invitations’ to invite page followers to your group - May 17, 2021
