Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

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.

Rapid Front-end Prototyping With WordPress1
(Image credit: Jeff Sheldon via Unsplash2) (View large version3)

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!

About Prototyping Link

“[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.”

Wikipedia4

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 feasability 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 protoype 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 Link

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 Link

These prototypes are easy to make. They could be simple drawings, or Balsamiq mock-ups5. There is minimal interaction — or none at all — and visually the prototype has very little to do with the final product.

A Balsamiq mock-up of Facebook6
A Balsamiq mock-up of Facebook. (Image credit: Frontify7)(View large version8)

Low-Functionality, High-Fidelity Link

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.

A high-quality PSD mock-up of notifications9
A high-quality PSD mock-up of notifications. (Image credit: Pixeden10)(View large version11)

High-Functionality, Low-Fidelity Link

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.

Twitter without any CSS12
Twitter without any CSS. (View large version13)

Using front-end frameworks like Bootstrap14 or Foundation15 can can increase your fidelity somewhat, but you’d need to write a good amount of CSS to make it your own.

A medium fidelity mock-up16
A medium fidelity mock-up. (Image credit: Bootstrap17)(View large version18)

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 Link

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.

The real trick is managing the time spent on making such prototypes — which is where WordPress comes in.

Which One To Use Link

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 Link

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 Link

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 Link

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.

What I recommend is getting a good pre-made HTML admin template. 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 Link

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 Link

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 Themeforest19 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 AdminLTE20.

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.

A Complete Example Link

When I started this article, I wanted to provide a complete example of how I use WordPress to prototype. I ended up recording a video of the process and writing about it in a bit more detail. The video below will walk you through my process of creating a prototype of the Twitter front page.

Following the video I’ll go into even more detail, giving you some instruction about setting up test servers, using the WordPress menu system to populate menus, and much more. I recommend watching the video first, and then looking at the details below, as they will be a lot clearer.

Footnotes Link

  1. 1 https://www.smashingmagazine.com/wp-content/uploads/2015/06/01-featured-opt.jpg
  2. 2 https://unsplash.com/ugmonk
  3. 3 https://www.smashingmagazine.com/wp-content/uploads/2015/06/01-featured-opt.jpg
  4. 4 https://en.wikipedia.org/wiki/Prototype
  5. 5 'https://balsamiq.com/products/mockups/'
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2015/06/02-balsamiq-facebook-opt.png
  7. 7 https://frontify.com/blog/discuss-specify-balsamiq-mockups/
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2015/06/02-balsamiq-facebook-opt.png
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2015/06/03-notifications-psd-opt.jpg
  10. 10 http://www.pixeden.com/psd-web-elements/psd-notification-ui-box/
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2015/06/03-notifications-psd-opt.jpg
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2015/06/04-twitter-opt.png
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2015/06/04-twitter-opt.png
  14. 14 'http://getbootstrap.com/'
  15. 15 'http://foundation.zurb.com/'
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2015/06/05-bootstrap-opt.png
  17. 17 http://getbootstrap.com/examples/jumbotron-narrow/
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2015/06/05-bootstrap-opt.png
  19. 19 'http://themeforest.net'
  20. 20 http://shapebootstrap.net/item/adminlte-dashboard-and-control-panel/
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

Overview of this article


Page 1/2»

↑ Back to top Tweet itShare on Facebook

Hallo, my name is Daniel :) I build plugins, themes and apps - then proceed to write or talk about them. I'm the editor for the WordPress section here on Smashing Magazine and I contribute to various other online sites. When not coding or writing you'll find me playing board games or running with my dog. Drop me a line on Twitter or visit my personal website.

  1. 1

    MF Simchock

    June 26, 2015 3:19 pm

    A theme / toolkit of UI / UX widgets would probably be ideal for this step in the process. Does such a WP thing already exist? Kinda odd if not, eh?

    3
  2. 2

    Learned a lot about general WP development
    Thanks

    2
  3. 3

    Excellent points. Our web design department uses prototyping on a regular basis. Sometimes a customer will ask for a feature in a discovery meeting, and if I haven’t implemented something like that before (or just want to practice) I’ll use our demo site and build enough of it to be able to confidentally say we can meet the customer’s expectations. We prototype plugins here too, just setting one up and learning how it works so we can talk intelligently about it with a customer.

    I would say I typically use high function low fidelty prototypes, (I just use a blank wordpress install with the twentythirteen theme) but they work amazing because not only do we now have a growing demo site filled with complex queries, functions, plugins and features, but we have a go-to “ready-to-copy” codebase if we ever need to repeat it for a different customer.

    Any web developer should follow these guidelines. Thanks for the article!

    5
    • 4

      Thanks for the kind words Dan, glad you liked it!

      If you’re working in a team who know’s what’s what low fidelity is just fine. I prefer high fidelity myself because I’m not very visual and high fidelity allows me to plan out my front-end code better :)

      Daniel

      0
  4. 5

    Invaluable to the core of the product and validating design decisions. If your design team isn’t doing this already, they pretty much suck at life and don’t care about the quality of their work or the end result of their product. Or they get everything right every time and never make mistakes in anything they do and are just plain perfect as I am sure they are dressed (sarcasm, posers). They don’t care about their craft, their skills, nor their contribution to the team, the product, their company, work quality, nor their industry. Fire them now. They are a drag. Infamous, ’nuff said.

    Everybody, get people who will go the distance. Not just the people who bought the skateboards and clothes but never grew to tre’flick / nollie f/s flip a triple set of stairs at their middle school. Don’t just talk about it, be about it. Other designers who feel me and we know who I am talking to and wanna know how they can dispel this rumor and stay aboard: LEVEL UP. I wouldn’t hire someone who just wants to call themselves a soldier or a doctor to be there for me unless they’ve actually gone through the training and know how to use their tools and have the experiences, successes and failures to warrant critical decisions. If someone says this ain’t brain surgery or rocket science, knock their teeth out. Entire industries are employed off the work we do so we need to do it right to the best of our ability to ensure people’s kids still eat. Death to entitlement. Get creative when you’re actually a master at something, not just think you know cuz you’ve seen others and are copying them. This is our profession and what we do and where we excel. I know a lot of designers love “Exit Through the Gift Shop” and Banksy and love description contending and talking out their !@%#^ and all that blah blah blah. You aren’t even fit to wear the pants of Mr. Brainwash. Like Pete Smolik from Fulfill the Dream: Westside. Over & Out

    -36
  5. 7

    Awful lot of work EACH time I want to create a prototype.

    Why not just create a simple PHP with include(); or a set of HTML files linked with jQuery.load();??

    OR use a “bare bones” theme like skeleton?

    cmon people be practical, whats next? a tutorial to build our own server from spare parts and host Node to teach us hello world in sailsjs? #KISS

    11
    • 8

      It takes me about 20 minutes to go from nothing (including no server) to a mock Twitter app which looks like Twitter and the tweet box works with AJAX and tweets are stored as WordPress posts.

      I think the takeaway from the article is that you should use whatever you work fastest with. If it’s a simple PHP include set that’s just fine. I can work really fast in WordPress and I think that’s fine as well.

      Daniel

      -3
  6. 9

    Although a nice article, I do feel this seems overkill for a prototype, as @Hood says a simple php include structure and url structure in folders would be more than sufficient, have the time used, then just populate with hardcoded arrays if you must.

    Could you maybe state the benefits of using a whole wordpress install for something as simple as this over a Boostrap/Foundation/UIKit with php includes?

    6
    • 10

      Yep,

      In general, see my comments above. I prefer WordPress because it allows me to prototype key server side functionality quickly. For example, if you are creating a storefront you might want to prototype the order flow quickly. You can do this with WooCommerce and WordPress in minutes.

      If you did this with regular PHP you would need an awful lot of custom functions, or you would need to use placeholder HTML (which could be just fine in many cases).

      If you need login/registration prototyping it’s already there, data can be stored in posts/postmeta, users can be stored as users/usermeta and so on. You basically get all the capabilities of a CMS for very little work input.

      Daniel

      -2
  7. 11

    Dan Henderson

    June 28, 2015 7:50 am

    Everyone’s workflow and skill set is different, but this seems to be yet another case of trying to use WordPress for everything, when there are more suitable tools out there.

    In saying that, prototypes are about validating your ideas with minimal time and effort, so if you are a WordPress machine, and you can whip up something in it quicker than you could any other way, then why not?

    7
    • 12

      Hi Dan,

      I think you have to appreciate that this is the WordPress section of Smashing Magazine :) This could indeed be done with simple Bootstrap/Foundation, Laravel, any other CMS, simple click-through images and so on.

      For many of us, WordPress is what we know best. If you use a different tool better, you should definitely use that, I think the main takeaway of the article is the principle, not the specific tool used.

      Daniel

      1
  8. 13

    wordpress??? why to waist time when you can use Axure? (or other prototyping tool).
    it makes no sense.

    0
  9. 16

    Kristina Hughes

    June 29, 2015 8:42 am

    Prototype provides the over view of working model of a product or information system, usually built for demonstration purposes or as part of the development process.This is the professional way of working! Nowadays designers and developers thinks that this is the time wasting method..

    -1
    • 17

      Agreed! It does seem like a waste of time because you spend 5 hours (for example) no working on the product. However, this will probably save you 20 hours of coding, so it makes sense :)

      Daniel

      0
  10. 18

    Hey nice Job Daniel,

    Can you post the full code of the project?

    Thanks

    0
  11. 20

    Thanks – I enjoyed this very much, and, I learned a lot too!

    0
  12. 21

    Hi Daniel, great post! Thank you. I started a project with Vagrant a few months ago and love it, although have not used it for a wordpress site yet. I really want to try out your workflow for prototyping but have one question. If you cannot put the prototype on a ‘real’ server, how else can you easily share it with others? I am familiar with Vagrant Share, but since it creates a new url would you not have to update the db? This would be irritating going back and forth. What other alternatives are there?

    0
    • 22

      Hi Nate,

      I actually use 3 separate tools sometimes. I set up everything using Vagrant. I usually use gulp as a build tool and I use live reload with gulp to reload automatically. This creates a local server I can use to view the site on any device on the same network.

      I then use ngrok to broadcast my localhost if needed. This gives you a url accessable from anywhere. You can use ngrok regardless of gulp, and you dont have to worry about the urls and the db, everything is taken care of for you :)

      Thanks for the kind words :)

      Daniel

      0
      • 23

        Thank you Daniel, I’ll definitely check out ngrok. I have some experience with grunt, although it is not built into my current project, but have not used gulp. I’ve read some articles recently saying its better though, so I think its time to add it. Thanks again!

        0
  13. 24

    Do you have any plans to add captions to the video? I’d love to watch it but the sound quality is quite poor for those of us with little or no hearing!

    0
    • 25

      I didn’t initially, but I’ll give it a go when I get back from vacation, Ill do better next time, i was just stuck in a bad space, sorry :)

      0
      • 26

        That would be wonderful, thank you – hope you have a great vacation!

        0
  14. 27

    Note: Strange editor in the video. Ever heard of code folding? WAAAY easier to find the end of eg. the sidebar you were searching for, by simply closing the folding, marking it, and then opening up the folding again – tadaa! You got it.

    Also .. Regular expressions, even simple ones, are a HUGE helper for the tedious copy + replace orgy of yours ;)

    And absolute font sizes and stuff like this is .. evil. Try relative units, like em or %.

    Aside of that: Cool approach ;)

    cu, w0lf.

    -1
    • 28

      Hi fwolf,

      Regex won’t really help you out, since you dont know the structure of the admin template that well. Also, i find it easiest to just copy out from the DOM. And also, the tutorial is mainly for beginners, so regex is probably not somewhere i should go :)

      Same goes for absolute font sizes. I downloaded the template as is, changing it would lead to confusion when reusing it.

      Daniel

      0
  15. 29

    Why are you using an admin template instead of a regular WordPress template?

    1
    • 30

      HTML templates have a TON of pre-made elements. This lets me mix and match what I need, instead of having a fix layout and patterns forced on me.

      0
  16. 31

    Matheus Baumgart

    July 2, 2015 12:49 am

    Great article! I’m definitely doing this in my next prototype. I didn’t know that was that easy to setup a new theme. Thanks a lot for dedicating your time.

    0
    • 32

      Hi Mattheus,

      It took me longer than usual on my first try but now I’m pretty quick. I can make an HTML template into a theme in about 5 minutes and I can build a pretty good page, with some server side coding in about 20 :)

      It went a lot slower at first, so you’ll definitely get better over time, just keep at it :)

      Daniel

      0
  17. 33

    Education Essays live

    July 2, 2015 2:34 am

    this is awesome really awesome.. thanks…

    0
  18. 34

    Awesome post admin, i really admire such a great article thanks for sharing..!

    0
  19. 35

    Ian Garmaise

    July 7, 2015 4:39 pm

    Hi Daniel,

    Perhaps I’ve misunderstood, but it seems to me that you suggest
    removing the original menu, but later on presume that it’s still there
    to be used as a resource.

    Please clarify what your original intent was.

    0
    • 36

      Hi Ian,

      In the example I don’t remove the menu, I hide it with Javascript so that I can bring it back up with a key combination. I do this when the menu isn’t part of the prototype, but I still want a quick way of navigating the HTML template’s files.

      Another option is to remove the menu completely or use one appropriate to the prototype and have the HTML template open separately.

      Daniel

      0
  20. 37

    Hi Daniel,

    Great article (and others I have read), very informative! Thanks for your help via email, much appreciated again.

    Tomasz

    0

↑ Back to top