In web design, prototyping can help you assess the growth of your project and keep track of the features that need to be added or removed. Unfortunately, prototyping is often underused or ignored. The reality is, however, that if properly executed, prototyping can make a positive difference to your project.
Front-end prototyping, as the name suggests, is the process of creating an early model or sample of a given product, in order to assess its features and flaws.
In this post, I will discuss front-end prototyping: its uses, considerations, and the different types.
Front-end Prototyping
A prototype helps you test your idea, and lets you measure the usefulness of your project before you actually invest your time, efforts, and resources in it.
At times, designers and developers have a tendency to think: why waste time building a prototype when that same time can be used on building the actual product? Well, this thought is not fully true.
The time invested in creating a prototype is not wasted; instead, it is invested in figuring out the flaws and inconsistencies in your design or code, and when you get to build the final product, you can correct your flaws or errors. As such, a prototype is a stepping stone towards success.
Points To Consider
So, now that you have decided to get into front-end prototyping, here are some points you should bear in mind:
- Platform
Choosing the right platform is crucial because this is where you will build your prototype. Common choices can be Bootstrap, or the Foundation framework, or PHP based Laravel framework.
WordPress, however, is a great choice in its own right, because of its set of functions and templating system.
- Functionality
You need to decide the level and depth of functionality that you wish to offer in your prototype. If this is just a design prototype, you can simply design the assets and ignore actual functionality. Thus, your login forms and sign up pages can show the design elements, but the actual working doesn’t need to be added right away.
In eCommerce, though, it might be sensible to add shopping cart and purchase functionality to the prototype itself, in order to help the user get a better idea about the actual project.
- Design
Lastly, you need to think about the design of your prototype. Once again, Bootstrap and foundation framework are proven performers in terms of front-end design, so you can simply opt for a ready-made HTML template that is based on either Bootstrap or Foundation.
One word of caution, though. You should consider avoiding WordPress themes for creating prototypes, as these are meant for the actual presentation of site data, rather than building prototypes. Even if you manage to customize or tweak a WordPress theme for this purpose, you might just end up with a highly complicated code that will be a pain to work with.
Nature Of Prototypes
Before we divide prototypes on the basis of their nature or type, we need to understand two terms: functionality and fidelity. Functionality refers to the level of features or functions that a given prototype offers, whereas fidelity refers to the visual details of a given prototype.
Now, we can group prototypes on the basis of these terms:
- High Fidelity, High Functionality
These prototypes offer a high level of functionality, as well as a high level of visual detail. As such, these prototypes are near-final versions of the actual project and are rare to find. Such prototypes are less of a prototype and more of a final draft or release candidate level version of the product or website.
- High Fidelity, Low Functionality
In this case, the visual details are high, but the functionality is low. Such prototypes are common in the case of PSD files, where you see the high level of detail in visual design, with no or little functionality.
- Low Fidelity, High Functionality
These prototypes are basically employed by pure coders or developers: the design and visual element is nearly missing, but the functionality is high. Case in point would be a sign up form, where the prototype lets the user actually use the form to sign up, enter login details, and create an account, but does not offer the design elements for text areas or call to action buttons, etc. Such prototypes are generally lacking in CSS or JavaScript.
- Low Fidelity, Low Functionality
These are, quite possibly, the easiest of all the prototypes, and are used just to provide a basic idea of the project in question. Examples would include hand-drawn sketches, mockups, and even simple wireframes. There is hardly any fidelity and the functionality is missing.
Conclusion
Owing to its flexible system of templating and functions, WordPress is a good choice for front-end prototyping. Plus, it already covers all the base functionality, such as account creation, user registration, logging in and out, database queries, etc., and it also offers detailed documentation on how to extend existing themes or templates to make them better suited for use with WordPress in prototyping.
Have you tried creating a prototype for your project? How has your experience been? Share your views with us in the comments below!
Featured Image: Canned Tuna
2 Comments