Tutorials UPDATED: 23 June 2022

Developer Dossiers: An Introduction To Prototype Development

Yorgos Fountis

5 min read
Image for Developer Dossiers: An Introduction To Prototype Development

Prototype Development is the activity of building an incomplete model of a system (usually a product) as a proof of concept, or as a means of acquiring more information (costs, dependencies, etc) about what is needed to be built. The developed prototype is then evaluated by test users, and their input is used for further refinement. 

There are different types of prototyping, as this activity takes place in many fields besides software engineering and development. Mechanical engineering, design and electronics are some disciplines that use prototyping techniques. We will concern ourselves mostly with software-based prototypes.

The Process of Prototype Development

Prototyping is an iterative process. In each iteration, the prototype is refined more and more until it becomes mature enough for a wider release.

Prototype Development in WordPress

Design

In the Design stage, specifications and requirements are gathered for the prototype. This can be done in a variety of ways depending on whether you are part of a larger team or a single creative. It also depends on the type of prototype you will be developing.

Develop

After the prototype’s specifications are captured,  development starts.

Evaluate

When development is finished, the prototype goes through an evaluation stage. The insights from the evaluation are fed back to the design, and the process begins again.

Prototyping in WordPress (Plugins and Themes Development)

For software prototypes such as WordPress plugins, use case scenarios aid in capturing the functional requirements of the prototype.

Host your website with Pressidium

60-DAY MONEY BACK GUARANTEE

SEE OUR PLANS

A scenario is a sequence of steps describing the interaction of a user with a system. For example, let’s say we want to develop an electronic payments WordPress plugin. The main scenario would be the following:

Main scenario

  1. The user selects the payment type by clicking on the corresponding button (Paypal, VISA, etc)
  2. The user fills the needed information  and then clicks the Pay button.
  3. The payment goes through and upon success, the user is notified by an e-mail of the order information.

Extensions

1a. The user selects Paypal.

– The user is redirected to the Paypal login screen.

1b. The user selects VISA.

– The user is prompted to enter the credit card number, security code, expiration date, etc.

2a. The credentials and/or information that the user entered are incorrect.

– If the user has selected VISA, the fields containing the errors will go red, and the user will be prompted again to enter them.

3a. The payment doesn’t go through for some reason (bank or Paypal rejects the transaction, etc).

–  A red warning error message will appear on the screen announcing that the payment hasn’t gone through, plus whatever error code the bank or payment gateway returned.

The main scenario describes the main interaction between the user and the system, while the extensions to each step detail the alternative ways that the interaction will go, if something goes wrong. You can also add the following information in order to enrich the scenario:

  1. A pre-condition that needs to be true, in order for the system to start or continue to the next step.
  2. A guarantee that the system will ensure is true, after the end of each step.
  3. A trigger is an event that signals the start of a scenario or a step.

Although use case scenarios are versatile enough to describe user interactions, functionalities and system behaviours, they do not address any visual or aesthetic information. You need a different set of tools for that.

If, for example, you are developing a WordPress theme,  the process can look like the following:

  1. Sketch on paper how the theme will roughly look. Its main elements and image placement, and so on. You will probably iterate a couple of times until you decide on the final design. Cutting out and shuffling around elements and experimenting with placement is very helpful at this stage and saves you time.

2. When you finalise the design, it’s time to start wireframing its mockup by using a tool like Sketchapp. This is the stage where you transfer your paper doodles and drawings into a preliminary digital format. The prototype is redesigned and enriched using  colours, gradients, geometrical elements, bitmaps, etc. However, this is still in early form, with plenty of design information missing.

3. The final stage of the prototype needs actual material spec lists, like sizes, fonts, etc with pixel perfect accuracy. You can use a tool like Zeplin.io, or directly start developing the design using CSS.

Wrapping up

Prototyping is large and complex as a discipline, and we’ve barely touched its surface. Whatever tool or technique you choose to use is up to you. The important thing is to iterate quickly and not lose time getting bogged down in details. We will be using prototyping in a hands-on manner in future posts so stay tuned.

Host your WordPress Website with Pressidium!

View our price plans

Host your website with Pressidium

60-DAY MONEY BACK GUARANTEE

SEE OUR PLANS

Do you like this article?

Subscribe to our blog and get awesome WordPress content straight to your inbox.

SUBSCRIBE

OUR READERS ALSO VIEWED:

WordPress Custom Header: What Is It and How to Create One

What is a WordPress Custom Header? How do you customize a header in WordPress? Find out in this article!
Tassos Antoniou
Tassos Antoniou
8 min read

Visitor Behavior Analysis: A Guide To Identifying Revenue Leaks

This guide helps you find out how to identify revenue leaks using visitor behavior analysis improving revenue and the user experience.
Jenna Bunnell
Jenna Bunnell
11 min read

A Helpful Guide to Moderating WordPress Comments Like a Pro

Learn how to moderate comments in WordPress by tailoring your website settings in order to maintain helpful discussions in your comments!
Jenna Bunnell
Jenna Bunnell
12 min read

8 Proven Strategies to Recover Abandoned Carts in WooCommerce

Abandoned WooCommerce carts are shopping carts that are just waiting to be checked out. Find out how to recover these to maximize your sales!
Juliette Anderson
Juliette Anderson
6 min read
SUBSCRIBE