Surfer Dude Studios

The first tool for user experience and user interaction

It's useful to consider the full stack developmental process to determine the advantages of using a wireframing and prototyping tool such as Axure RP. An introduction to the concepts of full stack development, and a high level outline, can be found here. However, it is the front end, and in particular the UX / UI side, of the stack, that benefits the most from a wireframing and prototyping tool.

User experience design (UXD, UED, or XD) is the process of enhancing user satisfaction with a product by improving the usability, accessibility, and desirability provided in the interaction with a product. User interface design (UI) or user interface engineering is the design of user interfaces for machines and software, such as computers, home appliances, mobile devices, and other electronic devices, with the focus on maximizing usability and the user experience.

The UX / UI side of web development is covered here, but a key point is the analogy between the public side of a shop, and what a website visitor, or client side browser encounters. If this not up to scratch, then nothing else on the website or app really matters, as no one will, or can use it. This is front end development in a nutshell.

It is also where wireframing and prototyping software is most useful. At the design stage, long before any code has been written. It allows designs to be trialled, tried, tested, and refined before even the first HTML or CSS is written.

Wireframing

A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website, app, or piece of software. It is the beginnings of a more formal design that has usually begun as a sketch, and should always have begun in a requirement gathering, and scoping phase.

The wireframe for surfer dude studios in Axure RP.

The wireframe depicts the page layout or arrangement of the website's content, including interface elements and navigational systems, and how they best accomplish a particular purpose. The purpose is usually informed by a business objective, a creative idea, and in the later stages of development - user feedback.

Usually as part of the agile development process these start as low fidelity concepts, using placeholder images, layout and content, until designs and requirements become more concrete, moving towards high fidelity designs (mock-ups) closer to the final product.

Rapid prototyping

Rapid prototyping refers to the creation of a model, that will eventually be discarded, rather than becoming part of the final delivered software. After preliminary requirements gathering is accomplished, a simple working model of the system is constructed to visually show the users, testers, and developers, what their requirements may look like when they are implemented into a finished system.

The most obvious reason for using throwaway prototyping or rapid prototyping is that it can be done quickly. If the users can get quick feedback on their requirements, they may be able to refine them early in the development of the software. Making changes early in the development lifecycle is extremely cost effective since there is nothing at that point to redo.

If a project is changed after a considerable amount of work has been delivered, then small changes could require large efforts to implement since software systems have many dependencies. Speed is crucial in implementing a throwaway prototype, since with a limited budget of time and money little can be expended on a prototype that will be discarded.

Fidelity

Another strength of throwaway prototyping is its ability to construct interfaces that the users can test. The user interface is what the user sees as the system (the front end), and by demonstrating it, rather than visualising it, it is much easier to grasp how the system will function.

These prototypes can be classified according to the fidelity with which they resemble the actual product in terms of appearance, interaction and timing. One method of creating a low fidelity throwaway prototype is paper prototyping. The prototype is implemented using paper and pencil, and thus mimics the function of the actual product, but does not look at all like it. Another method to easily build high fidelity throwaway prototypes is to use a GUI Builder and create a click dummy, a prototype that looks like the goal system, but does not provide any functionality.

The usage of storyboards, animatics or drawings is not exactly the same as throwaway prototyping, but certainly falls within the same family. These are non-functional implementations but show how the system will look.

Why use specific prototyping software to accomplish this?

So far so photoshop. Pre visualisation of websites has been delivered in the past by using image-based software such as photoshop to build mock ups of proposed designs. However, this is not without several caveats;

• These designs, being static images, do not take into account the responsive nature of modern websites,
• They do not clearly demonstrate interactions, either on page or between pages,
• They are image based, so are slow to make amendments to,
• They can be difficult to share and work on as a team.

In short image-based design and editing software does not offer an accurate, easily shared, or quickly progressed solution. A wireframing and prototyping solution must;

• Allow the development and testing of modern responsive designs,
• Allow for interactions, and to move between pages as a user would expect to on a website or app,
• Allow for rapid amendments utilising shared elements, and a range of fidelity,
• Allow for team collaboration, comments and easy sharing with testers, and stakeholders,
• Allow for documentation and specification collaboration for developers.

Documentation and specification

A functional specification in systems engineering and software development is a document that specifies the functions that a system or component must perform. The documentation typically describes what is needed by the system user as well as requested properties of inputs and outputs (e.g. of the software system).

A functional specification is the more technical response to a matching requirements document. It picks up the results of the requirements analysis stage. On more complex systems, multiple levels of functional specifications will typically nest to each other.

There are many purposes for functional specifications. One of the primary purposes on team projects is to achieve some form of team consensus on what the program is to achieve before making the more time-consuming effort of writing source code and test cases, followed by a period of debugging. Typically, such consensus is reached after one or more reviews by the stakeholders on the project at hand after having negotiated a cost-effective way to achieve the requirements the software needs to fulfil.

1. let the developers know what to build.
2. To let the testers know what tests to run.
3. To let stakeholders know what they are getting.

So why Axure RP over the other options?

Other wireframing and prototyping options do exist. These can often be at the discretion of the company, organisation or individuals developing a product. Some of the other options are named below.

Axure RP however has been the market leader for fifteen years. It can connect to other tools and services such as Slack, and Microsoft Teams for collaboration. Axure RP is also able to auto adjust and move smoothly from macOS to Windows, and is available on both.

It can also use its own Axure share cloud-based sharing platform to allow users and contributors to preview, comment, collaborate and share projects. Axure can also export its projects as html code, speeding up the development process, although like all automatically exported code this should be stringently checked and applied against any frameworks being used (such as bootstrap and foundation).