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

OUR READERS ALSO VIEWED:

Building a CI/CD Workflow – Automatically Deploying a WordPress Theme with GitHub Actions

Streamline your WordPress deployment process using GitHub Actions and a CI/CD workflow. Automatically build and deploy a WordPress theme to your Pressidium WordPress site.
Konstantinos Pappas
Konstantinos Pappas
22 min read

Types of Cross-Site Scripting (XSS) Attacks

In this article, on XSS attacks we're going to deep dive cross-site scripting examples to better understand how these types of attacks work.
Tassos Antoniou
Tassos Antoniou
6 min read

5 Best Tips For Web Developers When Coding For eCommerce Websites

So how can you become a successful web developer when coding for ecommerce websites? Check out this article to find out!
Daryl Bush
Daryl Bush
7 min read

WordPress and Cross-Site Scripting (XSS)

Cross-site scripting (XSS) attacks are a common types of website attack seen across the internet. Find out how to protect your website!
Tassos Antoniou
Tassos Antoniou
7 min read
SUBSCRIBE