How to Create a Website Prototype for Non-Designers

Creating a new website from scratch is a complex process with lots of moving parts. To eliminate errors and make a website's development more manageable, design teams often prefer to create high-fidelity prototypes to ensure key stakeholders agree on all visual elements before moving into the development phase.

Prototyping is vital in the design process because it cuts down on development time and prevents backtracking by offering clients and team members a faithful preview of the new site. 

What is a Website Prototype?

A website prototype aims to show how a website will look and function before it goes live. A prototype allows team members to reach a consensus on project details earlier in the project lifecycle when changes are more easily made.

There are many reasons to back prototyping in the website design process:

• To test layout, structure, and information architecture ideas
• To generate internal project support
• To agree on project scope
• For UX designers to conduct user testing
  

Prototypes can vary in form and can be anything from a hand-drawn sketch to a high-fidelity mockup to a fully interactive prototype with transitions akin to a demo experience.

How to Make a Website Prototype

Even if you are creating a low-fidelity prototype that may seem more straightforward, the steps in prototyping remain the same, at least as an intellectual process. ‍

Research similar sites

The first step in almost any design workflow is research. There's no need to reinvent the wheel in web design, and analyzing sites in the same industry is an excellent way to gather inspiration.

Look for patterns and trends across sites to understand industry standards and expectations. This analysis is a great way to glean knowledge from larger UX teams with more resources for proper usability testing. Pay attention to the UI elements and components competitor websites use across both desktop and mobile devices.

Understand website goals

When designing any website or product, there are different goals for which you can optimize. Ideally, optimizing for user experience should take precedence. However, since a website is also a marketing tool, it's sometimes necessary to balance user experience with business goals.

Especially if you are designing a website for a client, understanding and planning for their particular website goals is an absolute necessity to ensure your project's success. ‍

Define information architecture

The next step in website designing is to determine your site's information architecture, informing the website navigation. Your previous website research will already have given you ideas on how the information structure should flow on your site. Still, card sorting and tree testing are popular methods to work out these questions if you run into trouble. ‍

Determine project scope

‍In any project, you will always balance time, resources, and cost. The project scope is essentially a compromise between the three around which all of the stakeholders agree. If your website development schedule runs in phases, the project scope will define which capabilities and features make the cut in each development phase. 
The project scope phase is also the time to protect yourself from client expectations. It's your job to make sure your client understands what is realistically achievable within the expected timeframe. ‍

Create a wireframe

Finally, after the research and project scoping are completed, it's time to create the wireframe. The website wireframe is a lower fidelity visual arrangement of your website elements. 

Depending on the complexity of your prototype, your website wireframe may be a simple line diagram, or it might be a Photoshop mockup that shows how web pages will look in the browser. 

The main point of a wireframe is that it is a visual representation of the structure of your website, and it allows for a final round of edits before moving on to creating the more labor-intensive prototype. 

UI Terminology and Components

Before moving any further along in the prototyping process, it's crucial to have a baseline knowledge of UI elements and terms. The languages you know often shape your thoughts, so understanding UI terms will help shape your design strategy.

UI terminology can be divided broadly into two categories: action terms and identifier terms. ‍

Standard UI action terms (verbs)

Action terms can sometimes be referred to as gestures. They describe a user's interactions with your site. Standard UI action terms should be familiar to anyone who engages with contemporary websites and mobile apps. They include:

• Click / Tap - the act of pressing, tapping, or touching (and then releasing) a mouse cursor or screen touch
• Press - an action that requires the pressing of a physical button (such as on a keyboard or device)
• Type - the pressing of individual letter keys to input information
• Swipe - using a finger or body part in a wiping and sweeping motion to precipitate action or reveal more information
• Hold - the act of pressing a UI element (such as a button) longer than a click, usually to reveal another set of available actions
• Drag - the act of moving UI elements along a plane, usually precipitated by a Click and Hold‍

Standard UI identifier terms (nouns)

Identifier terms describe the essential elements and objects with which users interact. Examples of standard UI identifier terms include:

• Field - an area within a Web User Interface (WUI) or Graphical User Interface (GUI) in which information is entered
• Dialogue - a pop-up window that appears before or after an action (sometimes spelled Dialog)
• Panel - a toolbar or control window
• Pane - an independent area in a WUI/GUI that users can scroll through and resize
• Button - a graphical or web element that executes an action when clicked or tapped
• Icon - a graphical or web element that represents a shortcut to an action
• Tab - a graphical or web element that groups a set of actions and can be a subset of a pane
• Wizard - a dialogue experience that walks a user through a sequence of steps to perform a more complex task‍

Input, output, and helper elements

UI elements are divided into three major categories: input elements, output elements, and helper elements. 

• Input elements receive and handle user input. Examples include drop-downs, toggles, checkboxes, and date pickers.
• Output elements show results against input elements. They are a reaction. Output elements also include alerts and error messages. 
• Helper elements are a blanket term for the remaining elements. They generally help users. Examples include notifications, bread crumbs, and progress bars. 

Prototyping Options

There are three main routes to prototyping completion: using software, hiring a designer, or using a dedicated prototyping service. ‍

Use a prototyping tool

There are many design platforms and prototyping software available. Popular ones praised for their simplicity and efficiency include InVision Studios, Origami Studio, Justinmind, Marvel, Framer and Adobe XD. 

The best tools make prototyping faster by offering templates and vector shapes, and simplify canvas editing through drag and drop UI elements. They also generally integrate with essential design platforms like Adobe Photoshop and Illustrator as well as Sketch. ‍

Work with a designer

If you're new to prototyping, especially without a design background, the learning curve to create a high-fidelity prototype might be too high to overcome within the necessary time frame. Hiring a freelance prototype designer can strike a good balance between cost and output.‍

Use a prototyping service

Alternatively, several agencies focus solely on high-fidelity prototype creation. Since these agencies live and breathe the prototyping process, a dedicated prototyping service is the fastest pathway to prototyping creation. 

Make Collecting Prototype Feedback a Breeze‍

Pastel accelerates feedback collection and approval schedules by making it easy to review and comment on live web pages. With one-click sharing, all project stakeholders, both internal and external, can quickly review and give feedback — aggregated in one place! Try Pastel free today.