Web

Rapid Front End Prototyping With WordPress

Rapid Front End Prototyping With WordPress

Prototyping is one of the best things that can happen within a project, yet it is extremely underutilized. Prototyping makes a project better suited to users, elevates user experience, increases the quality of your final code, and keeps clients happy. The problem is that developers often see prototyping as a waste of time, since high-quality prototypes take considerable effort to make. I want to show you that by using WordPress, highly interactive prototypes with great visuals are not at all that difficult to make. First, we’ll look at some basic prototyping concepts, then set up a test server from scratch. We’ll continue by converting an HTML template to a WordPress theme and learning how to use its items to create what we need. We’ll also learn how to add front-end and server-side functionality to our prototype. While all this seems complex, beginners should be able to follow along easily, including the “create your own server” section, which is a cinch! Prototyping A prototype is an early sample, model, or release of a product built to test a concept or process or to act as a thing to be replicated or learned from.This sentence neatly sums up the pros and cons of a prototype. The advantage of creating a prototype is that it lets you test an idea and learn from the process. It allows you to make a reasonable assumption about the feasibility of your project before you put in hundreds of hours of work. One of the downsides is that prototypes are made so that we may learn from them. Often, designers and coders look on this as wasted time. Why make a prototype when we could be working on the real thing? Who is going to pay us for the time we spend prototyping? To be honest, these are tricky questions. For smaller projects, no one will pay you for it, but your project will be better for it; this, in turn, leads to bigger and better projects. In most cases, the time you spend prototyping is regained while building the product anyway! It also appears that designers like to prototype a lot more than developers. The root of the issue here is speed. A designer could prototype a design a lot faster than a developer, since the latter needs to build a quick framework, implement a design and do a lot of fiddly things which take time. Fidelity And Functionality We can approach prototypes by looking at two key features: fidelity and functionality. Fidelity refers to how detailed the prototype is visually, while functionality refers to the level of interaction possible within the system. Let’s look at how levels of fidelity and functionality in prototypes pair up. LOW-FUNCTIONALITY, LOW-FIDELITY These prototypes are easy to make. They could be simple drawings, or Balsamiq mock-ups. There is minimal interaction — or none at all — and visually the prototype has very little to do with the final product. LOW-FUNCTIONALITY, HIGH-FIDELITY Increasing the fidelity while keeping functionality low is also quite common. A good example would be a Photoshop design file which could contain final design elements. Again, there is next to no interaction here but plenty of visual detail, enough to put it close to the final product in terms of design. HIGH-FUNCTIONALITY, LOW-FIDELITY These prototypes are a bit more difficult but you can still make them without too much effort. Before you create the login/forgot password form for a large website, you might want to test if everything works by just dropping in a form and business logic strictly in HTML and PHP — no CSS, JavaScript or consideration of the context of the form. Using front-end frameworks like Bootstrap or Foundation can can increase your fidelity somewhat, but you’d need to write a good amount of CSS to make it your own. I would still consider these low-fidelity mock-ups because each front-end framework looks generic by default. That’s fine for testing the principle, but it doesn’t increase fidelity to a point where more sensitive clients would be able to visualize what the final product will be like. HIGH-FUNCTIONALITY, HIGH-FIDELITY Prototypes like this are rarely seen because creating them can take more time than is worth it. Why create something so similar to the website-to-be when you could be working on the actual site? High-functionality, high-fidelity prototypes contain a high degree of interactivity while also being a much closer facsimile of the final product. Users can follow links, submit forms and do many other things that help them see what the end result will be like. There is, of course, no simple answer to this question. A high-fidelity, high-functionality prototype is closest to the real thing, but it takes time to make; for simpler projects, it may not be worth the time. Low-fidelity, low-functionality prototypes are simplistic and cannot be interacted with, but for small projects and close-knit teams, perhaps they’re all that is needed. Several factors need to be considered:
  • How well your team works together
  • How large your project is
  • How visually and technically oriented your client is
  • How well you understand the product you are building
  • How many people will be involved other than programmers and designers
In my experience, the most important factors are the client and the project’s complexity. Even if I understand the project well, I would like a high-fidelity, high-functionality prototype just in case. One of the fundamental mistakes you can make in projects is thinking you know them well. For complex, large-scale projects you should always create prototypes with a high degree of freedom. The more systems and subsystems you need to build, the more intertwined they become and the more places things can go wrong. The client can be an even bigger factor. Often, clients do not know what they want. They may not be design- or code-oriented, which means they will equate a low-fidelity prototype with bad design and missing features — even if you tell them what the prototype is for. As a result, a clearer visual aid is sometimes called for to enhance communication. Since I will be talking about high-fidelity and high-functionality prototypes from now on, I will be calling them high-quality prototypes. This is not at all a reflection on other prototypes; a low-fideltiy, low-functionality prototype can also be created with high quality. Considerations For High-Quality Prototypes There are a number of considerations when making high-quality prototypes. What platform they should be built on, what functions need to be added (or not added), how intricate should we make the design, and so on. THE PLATFORM The platform chosen should be one which allows you to work fast and quickly add features as well. Bootstrap, Foundation and other frameworks are great, but they offer very little functionality, since they are purely front-end. Using them can still be a good idea, but not on their own. On the other side of the spectrum, we have PHP frameworks like Laravel, which is excellent for creating high-quality modular code. This is out of the question, though, since we have to write too much business logic ourselves just to get a site up and running. WordPress strikes a good balance here because it is essentially a bag of useful functions combined with a reasonably flexible way to template pages quickly. I want to stress that you should use a platform you feel comfortable with. If you’re amazing at using Laravel, by all means go with it. THE DESIGN You can create a simple design framework for yourself, but that also takes quite some time. This is the place to use front-end frameworks to lighten your workload.Many of these templates use Bootstrap or Foundation anyway, and put a bunch of elements at your fingertips. In addition, they’ve already styled the elements of their frameworks into something less generic, which is just what we need. With a little work they can be converted to WordPress themes and will facilitate extremely quick prototyping. I don’t use bespoke WordPress themes because they are for presenting content, not creating application architecture. You won’t be able to create a menu or a form anywhere easily, and your code will likely be a mess by the end. DEPTH OF FUNCTIONALITY Depth of functionality is all about interactivity. Since you have control over a CMS you can, in theory, make things work properly — login forms could genuinely log you in. You probably don’t want to spend your time coding in all the functionality. That isn’t really the point here. For example, is the login form really important? Everyone knows how logging in works. Perhaps the form can be allowed to be blank, and the login button logs you in immediately as a test user. If you are building a finance management app, however, you may want to spend some time making sure that the “Add transaction” form works as expected. Real data can be listed and submitted adding a great deal of depth to your prototype. Prototyping With WordPress I think WordPress is a great choice for prototyping because of the flexibility of templating and the number of functions you have at your disposal. Logging in and out, adding metadata, querying items — a lot of base functionality is already there. I like to choose a pre-made HTML admin theme that looks close to what we’ll be doing in the final iteration of the design. You can find a large number of premium admin themes on Themeforest but you can also grab some good free ones via a quick Google search. For my examples I will be using a free admin theme called AdminLTE. When choosing an admin theme try to gauge what features you will need. Concentrate on the rapid aspect of prototyping, not making sure that your prototype looks like the final design.

Author

I hope you enjoy reading this blog post.

To keep yourself upgraded with the latest web and mobile app development updates click here.

You might also like

Connect with us

About Webclues

WebClues Infotech is a complete Web & Mobile Solution provider based in USA, INDIA & UK. We help you to define your business processes and accelerate growth and potential by designing efficient solutions.

Learn More

Our Portfolio

WebClues Infotech is ready with the IT support and expertise you need to make your IT projects work better for you and allow you to stay focused on running your business.

Hi! Ping Us

Contacting us is the first step towards success.

+ =

secure-iconWe respect your privacy and do not tolerate spam and will never sell rent lease or give away your information (name, address, email, etc) to any third party. Nor will we send you unsolicited email

Regional Contact Info

We can give you the Wings to Fly. Contact us now!

USA

USA

Delaware

8 The Green, Dover DE, 19901, USA

New Jersey

513 Baldwin Ave, Jersey City,
NJ 07306, USA

California

4701 Patrick Henry Dr. Building
26 Santa Clara, California 95054

India

India

Ahmedabad

1007-1010, Signature-1,
S.G.Highway, Makarba,
Ahmedabad, GUJARAT 380051

Rajkot

1308 - The Spire, Near Parijat Party Plot-Sheetalpark, 150 Feet Ring Rd,
Manharpura 1, Madhapar, Rajkot, GUJARAT 360007

Australia

Australia

Queensland

120 Highgate Street, Coopers Plains, Brisbane, Queensland 4108

UK

UK

London

85 Great Portland Street, First
Floor, London, W1W 7LT

Canada

Canada

Burlington

5096 South Service Rd,
ON Burlington
L7l 4X4