Creating a Website Prototype in Axure: A Step-by-Step Guide from Skillbox

Table of Contents:

• Defining a Website Prototype
• Creating a Website Prototype: A Step-by-Step Guide
• Starting a New Project in Axure RP
• Grid Structure and Screen Sizes
• Key Components Required for Creating a Prototype
• Creating the Site Header
• Key Components of Website Structure
• Forming Interactions
• Analyzing and Exporting the Created prototype
• Conclusion:

To develop a prototype of a simple website, then open it in a browser and discuss it with a client, you need to familiarize yourself with the program's interface and its main functions. In addition, it is important to have an understanding of the concept of prototypes and the basics of UX design.

In this regard, Skillbox offers training in the UX Design program, which includes not only fundamental knowledge but also the opportunity to complete an internship in partner organizations. Let's now look at the basics of this direction.

Definition of a Website Prototype

A prototype is a carefully developed model of a website. With its help, you can conveniently plan the organization of pages and sections, determine the placement of information elements on each of them, and coordinate all the details with the client.

Prototypes are usually developed in black and white, which allows you to focus on the organization and placement of content elements, rather than aesthetic appeal.

During a meeting with the client, a preliminary site plan is developed on paper. Then, an interactive prototype is created, which is discussed with the team. During the process, questions arise, errors and inaccuracies are identified and subject to correction. This method promotes the efficient use of time and resources.

Creating a Website Prototype: A Step-by-Step Guide

In the material entitled "Sketching: How to Draw a Website on Paper," we developed a page design concept for a company that sells building blocks.

A sketch is a rough plan that helps structure the information on the page. Based on this plan, a clickable prototype is developed. Axure RP can be used as a convenient platform for creating such prototypes. This tool is ideal for developing complex website layouts and mobile applications.

If you are interested in how to create a website prototype yourself, then start by learning Axure. Get familiar with its interface and key functionality.

Starting a New Project in Axure RP

Let's analyze the prototyping process using the example of a website for a company with a blog. The key elements of such a site would be the home page, the blog section, and individual blog posts.

Start a new project by selecting File → New from the menu. Typically, Axure automatically creates a new project with three blank pages. Let's change their names to match the structure of our future site.

To change the name of a page, just right-click on its name in the Pages window and select Rename.

Grid structure and screen sizes

Websites today Websites are designed to accommodate a variety of devices, including smartphones, tablets, computers, and laptops. Because each of these devices has a different screen resolution, designers often create multiple versions of the same website, adapted to different display sizes.

To simplify the process, we will develop a prototype for screens with a width of 1,140 pixels and above. To ensure that all website elements look neat and harmonious, we will rely on the grid provided by the Bootstrap 4 CSS framework during the design process.

To set the required screen width, we will use the guide, which can be extracted from the ruler located to the right of the workspace. This process is similar to how it is done in Photoshop.

To optimize time and avoid having to manually set all the guides for the layout, we will use automatic creation: go to the Arrange menu, then select Grid and Guides and click on Create Guides. In the dialog box that opens, specify the required dimensions.

As a result, we form a grid corresponding to the required screen width, which allows you to conveniently arrange the content.

Key components needed to create a prototype

Once the grid has been established, you can begin developing the prototype. This process uses components from the library available in the window called «Libraries».

To use an element, you need to drag it from the window with libraries to the main workspace.

Creating a header

The website header is the upper part of the page, which traditionally contains the organization's logo, phone numbers, and navigation menu. To work with the elements, select Box 1, drag it to the working area, and set the required dimensions.

After we have determined the dimensions of the header, we will move on to placing the logo, phone number, and navigation menu. We'll temporarily use a dark rectangle to represent the logo, which we'll call Box 2.

To display the company's phone number, we'll use a third-level heading element, and we'll create a button that initiates a call to the feedback form using a pre-prepared Button element.

We use the Paragraph text element to create and fill the menu.

In prototypes containing multiple pages, using a traditional header can cause inconvenience. Each new page will either have to be created from scratch or duplicate the header from the previous one. If changes need to be made, you will have to edit the header on each page separately. To facilitate this process, designers use the Masters panel, located in the lower right corner.

A Master is a unique widget that can be used across multiple pages, but its content can only be edited once. It's ideal for creating elements such as the site header, footer, order form, menu, and other recurring components. The header we have designed can be converted into a master, which greatly simplifies its addition to other pages and allows you to edit the content with just one click.

Select the top of the site, then right-click and select the option «Convert to master» in the menu that opens.

To set the heading on a new page, simply drag the corresponding widget onto it.

Key components of the website structure

Key blocks are formed using the main components. On the first screen, we will place the headline, call-to-action text, a button, and an image.

The next screen will feature a section dedicated to the product's benefits. We will demonstrate an image and explain how it stands out from similar products. For clarity, we will use the Placeholder element for the photo, and the icons will be presented as an Ellipse.

We use a slider to showcase the company's projects. Controls can be easily created using horizontal lines. To do this, drag the Horizontal Line to the work area, then click on the gray circle next to the line and select the desired display style.

Company reviews can be conveniently formatted as cards.

Forming Interactions

In Axure, each prototype element can act as a trigger for various actions, allowing you to assign specific behavioral logic to an object. This approach allows for more accurate modeling of website functionality.

Let's figure out how to create a clickable menu in a prototype that will allow you to navigate the website using links at the top of the page. To get started, click on the "Blog" section and select the OnClick action in the element's Properties.

The OnClick event is triggered when the user clicks on an element, which is a great solution for creating hyperlinks. Let's set it up so that when clicked, it jumps to the blog section in the current window.

First, we select the "Open link" option, then specify "In the current window" and select the desired blog section that we want to open. Here's a step-by-step guide to setting it up:

Analyze and export the created prototype

The created prototype can be immediately launched in the browser, shared via Axure servers, or exported in HTML format.

Get acquainted with how the prototype functions and looks in a web browser using the preview feature. views.

In this example, presented in Axure and implemented in Google Chrome, there is a navigation bar on the right that demonstrates the organization of the site and, if necessary, provides the ability to add comments.

The created prototype can be easily placed on the Axure server, after which it is enough to provide a link to the client. In addition, it is possible to generate HTML files that can be used both on a local computer and on your own website.

To publish a prototype, you need to click the «Publish» button located in the upper right corner and select the «Publish to Axure Share» option. If you need to download the prototype to your computer, you should select the «Generate HTML Files» option.

Conclusion:

Learning the basic features of Axure is not particularly difficult. That's why this software is widely used not only by UX design specialists but also by project managers, marketers, and copywriters. It significantly reduces time and resource costs.

For example, a manager creates a prototype during a discussion with a client and then provides the designer with clear instructions on what needs to be done, which helps reduce the number of iterations.

In addition to its core capabilities, Axure offers the ability to create complex interactions, pop-up windows, and responsive prototypes. Most often, these functions are used by UX designers in the context of complex and large-scale projects.

You can become a UX designer, learn how to develop prototypes, create a clear website structure, and also gain a deeper understanding of user needs and find accessible, intuitive solutions by taking the UX Design course at the Skillbox online university.