Design & UX
Article

The Great Prototyping Debate: Software vs Hand-coding

By Alex Walker

We all know that prototyping is a super-useful technique, but sometimes it’s hard to get the balance right. There seem to be two main ‘schools of thoughts’ on the best approach.

School of Thought 1:

We love Invision/MarvelApp/Adobe XD/etc

These visual prototyping tools are fantastic for producing rock-solid prototypes quickly and with a minimum of fuss. You often import externally produced layouts into them and attach user flow and behaviors to the UI components

However, if you want to model a UI behaviour that is a little outside the standard moves, your options may be limited.

School of Thought 2:

We always code our prototypes in HTML from scratch

This approach gives you complete flexibility and power over your prototype design decisions. But it is inevitably slower and requires an unusual combination of code and design skill.

Maybe you can have the best of both? Recently I’ve been using an app called Pingendo.

What is Pingendo?

Pingendo is a free visual prototyping tool. You can download the Desktop version (OSX, Win, and Linux) but there’s a perfectly useful Chrome-based version too.

You can begin with one of the preset templates or a blank canvas. Pick one.

Pingendo : Pick a template

Larger prebuilt UI sections are listed on the lefthand SECTIONS panel. These include top-level page elements such as:

Themed UI elements

  • Hero panels
  • Footers
  • 3 column layouts
  • Image galleries

One nice touch: Pingendo has themed placeholder images – food, tech, people etc – so you can match the feel of your final content more closely. Clicking the icons at the top of the panel switches the theme.

The COMPONENTS panel contains a catalog of smaller UI components such as headings, text fields, maps, buttons, and lists.

Along the top edge, you’ll find basic formatting tools to add italics, bolding and links. You’ll also see media query switches that let you test in your prototype in different viewports.

On the right-hand side, you’ll find a ‘Properties’ type panel that lets you edit the UI components you added from the left.

PAGE: lets you set ‘project level’ properties – stuff like title, key colors, fonts, etc.

SELECTION: lets you control the properties of UI elements selected in the main window. These properties include background colors, alignments, margins, and paddings.

Most UI elements have attractive defaults, but you have access to change almost anything.

The Big Reveal? It’s All Bootstrap 4

Yes, all the components you’re offered are stock Bootstrap 4 components. Your final prototype runs as HTML in any device with a web browser. Click the HTML tab at the bottom edge to see the markup. The SASS tab next to it offers access to Sass variables controlling typography, color palettes and sizing across the project.

You’re free to make direct edits to the code in either of these panels any time you like. The SELECTION panel lets you add CLASSs and IDs to any element so can call on any standard Bootstrap 4 UI class and know it will be there.

The Payoff

To me, the real advantage of Pingendo is the complete freedom it gives your prototypes. You’re never limited to a ‘set menu’ of pre-rolled interactions. While I probably wouldn’t choose Bootstrap for a production site, a good working prototype doesn’t need to pass the same scrutiny. You also know Bootstrap’s ‘defaults’ are going to be well-considered, robust and modern.

But if you NEED your prototype to work differently – to move, animate, react, shrink or be special in some non-standard way – there are zero limitations to what you can achieve. If you can code it, your prototype can have it.

It gives you broad brushstrokes for the big shapes – fine brush work for the critical details.

Could I Use Pingendo to Build a Finished Site?

Sure you can. You’ll probably hit a functional limitation at some point, but – assuming you’re happy with Bootstrap 4 as your base – there’s no reason Pingendo couldn’t provide at least a solid layout base.

I’m not sure if Pingendo will be free forever, but I think it’s well worth checking out while it’s free.

There’s a lot to like about it.

Originally published in the Sitepoint Design Newsletter.

  • Chris Emerson

    Oh dear, another one of these built for Chrome / Safari sites.

    I thought the point of Bootstrap is that it works cross browser?

    Has noone learned anything from the IE6 days and building for a specific browser?

    • http://sitepoint.com Alex Walker

      I don’t have a big problem with that, @disqus_XTvEXkeCOv:disqus. It’s not content designed to be consumed by a broad audience (i.e. like SitePoint). This is a designer-developer tool designed to make prototypes that are consumed by a small group of stakeholders. Chrome isn’t being used as a traditional ‘web browser’ – Chrome is the app platform, more like .NET or Xcode.

      You can choose whether you want to use the app or not.

      But the finished prototype should run fine in any browser.

      • Chris Emerson

        I don’t buy it really. The IE6 problem was caused in party by so many ‘limited audience’ applications like admin systems. With so many cross browser libraries out there, there’s just no excuse for it these days, whatever the site is.

        • Andy Grant

          Hang on a second, if these folk had built the app as an downloadable/executable system you wouldn’t complain about the total lack of a web application altogether, or would you? Just because they chose to deliver to their target audience via the Chrome platform and HTTP, you now deem it proper that their scope should expand based on your say so? I find that somewhat arrogant and fairly ignorant. This choice makes me feel good that a ‘proper’ platform was used, and they didn’t attempt to build a lowest common denominator, impossible to support, limited peice of shit app.

          This is NOT a website, it is software delivered through http. It is a very logical choice and provides the best possible way to provide consistent support, solid ui/ux and a generally optimal experience for those using it. The comparison you are making is very silly and massively ignorant (technically speaking)
          .

          • Chris Emerson

            There is nothing ‘arrogant’ or ‘ignorant’ about what I’ve said. You might disagree, but you look very petty when you start throwing insults like that around.

            Admin systems of the past weren’t websites either, they were also software delivered through http at the end of the day. I’m guessing you’ve forgotten all about the IE6 days, or didn’t live through them.

            As I said, there’s no excuse for it these days. There’s nothing that can be done on Chrome that can’t be achieved in other browsers, even if the UI isn’t exactly the same. I strongly object to being told I’m not in the ‘correct’ browser by a website, whatever its target audience or purpose. This isn’t the 1990s.

          • http://www.adriansandu.com Adrian SANDU

            @Chris Emerson: I did a quick try of the app and it seems to work just fine in Firefox despite the message that it’s not fully supported. I think only the downloaded app requires Chrome Apps to run. The web version appears (so far) to be universal.

            And I do feel the same as Alex and Andy that you’re being a bit high-handed on you opinion. It’s a free app, no one is forcing you to use it and I do find it a bit insulting to the people who worked on it and released it for free. Feel free to come with a fully cross-browser version of your own and you will be able to corner the market yourself.

          • Chris Emerson

            No, sorry. Criticism doesn’t work like that. I don’t have to make my own version to be critical of this one.

            I feel like people are forgetting all the perils of developing for specific browsers only. All the above applied back then too, nothing has changed that makes it acceptable now. So much for all the developers saying “never again” – how quickly people forget.

          • Andy Grant

            “nothing has changed that makes it acceptable now”

            See, thats why you cannot be reasoned with on this particular topic. I’m childishly adding a point in my favour for my observations to the effect that you show some ignorance here.

            (But Im taking one point away from my credibility for the childishness)

            The very idea that the developer of this app “forgot” is a bit silly. They know exactly what they are doing. If this app is a success, I suspect they will move forward accordingly with lots of feedback from the end users.

          • Jeroen Meeus

            To be honest, I agree with Chris. the -webkit era is becoming the new IE6-8. Also stating that there is “no flaw” because it was planned so is incorrect. A flaw is a flaw, whether it was planned or not does not matter. At the end of the day it is a flaw.

            The big companies (read enterprise & banking) do not allow one to install additional software (even developers). Chrome (with it’s auto update that cant be managed company wide) is almost always blocked. In this case, it’s down to IE/Edge and if you are lucky firefox.
            Not supporting these dev’s is a flaw imho. True, they will not drool in awe and share/like everything about it, but these are the dev’s that really could use it.

            This would be a perfect tool for the IE-sentric business architects/consultants/. Expecting them to be able to install chrome on the locked-down machine is a flaw, and a pity. Especially because it could have been avoided easily.

            And that is what I think, and Chris apparently aswell. Whatever you think, frankly doesn’t matter. A single ‘i dont aggree and think that… ‘ would be the adult way of responding to the conversation. Calling chris arrogant is, well, arrogant.

            Saying that they choose not to build that “shit app” simply means you love chrome and hate the rest. It’s not a fact, but something you believe personally, that you can only build great apps in chrome. This is true as much as ‘nodejs+mongodb can solve anything’, or ‘MVC is the best pattern to use’, or ‘Enterprise software is shit’, or ‘PHP is a dying language’, or ”

          • Andy Grant

            You say that I ‘love chrome and hate the rest’. Thats crazy talk.

            To say that the ‘the -webkit era is becoming the new IE6-8’ is odd too. Sites are built using standards and are more compatible with browsers than they have ever been -website designers/developers have learned the importance of this. This particular developer releasing their app on the web as opposed to an app store or desktop .exe has no bearing on this whatsoever. This software/app is not a website, and they are running a business, and they will adapt at the point it makes sense for them, if indeed it does.

            You see this all the time, mac app first windows app may come next, or vica versa. Why you apply your argument to this specific deployment strategy but would cope much better if it were released on, say, only Windows, not mac as an executable is an emotional response not remotely based in real world logic and constraints. Your philosophy around mainstream cross browser availability (which I agree with when it comes to websites) is not important here – it takes a very small amount of analysis to conclude that the choice ticks too many of the right boxes to be abandoned.

            Again, you are fundamentally confusing websites and the standards we all strive for, with applications and deployment strategies. The platform needn’t have been Chrome/HTTP, it could have been anything.

            Like the other guy said earlier, go try and do something like this in a cross browser way – and do it on time, and then try and support it. Its called ‘big design up front’ and its not good for anyone, including end users. Agility is key here. Like I said, feedback and broad adoption could drive change in decisions – and if/when it does, this will still have been the correct choice and the best path to travel.

            You are talking about your ideals/philosophy etc, which I get. This conversation stemmed from wether or not the developers made a bad call, and that is what I am talking about here. In that context, yes, I did say there was some ignorance and even some arrogance – I still do, its just how it came across when I read it.

          • http://sitepoint.com Alex Walker

            It’s nice to have some intelligent – if a little overly feisty at moments – discussion around this issue. I appreciate the thought that’s gone into the replies, gentlemen.

            Sometimes these decisions are based on what you have available, or where your skill base lies. We have a Chrome extension ‘helper’ for the SitePoint CMS because Bruno is good at writing Chrome extensions. It’s perfect for the dozen or so people consistently using the system. If they want to use Firefox, no skin off anyone’s nose.

            If this prototyping tool isn’t servicing its market well, the field is wide open for a competitor that does.

          • Andy Grant

            I agree totally, on all accounts.

            They developers made a choice, and one would think they are only too aware of the consequences. I’ve seen apps disappear from a ‘web delivered’ format to appear as desktop only apps. Ive also seen it happen the opposite way. I’ve also seen ‘web delivered’ apps become so successful that they eventually broadened support to ‘all modern web browsers’ as opposed to just Chrome or just IE (Sharepoint, for example).

            Knee-jerk/emotional responses to scenarios like this bother me a bit. It always seems like the same old issue I see of developers hopping on band wagons just because. Saying things just because, believing things just because. So despite this perhaps not being the case here, the ‘feisty’ emanating from my side was because it seemed like more talking without any real understanding (of the business, the business plan, the developers, their intelligence, and the whole, totally valid, first product release deployment strategy).

          • Andy Grant

            Because you say things like ‘there’s no excuse for it these days’ and ‘There’s nothing that can be done on Chrome that can’t be achieved in other browsers’ and ‘website’. And because you probably do not understand things like time to market, QoS and multiple other issues that lead teams toward viable platforms, I stand by my claims that your show some degree of arrogance and ignorance here. Not you as a person, I don’t know you, just in the way you are criticising this teams legitimate delivery strategy and confusing it with the issues we had with actual websites back in the day. (Im talking Netscape vs the very first IE here, not the IE6 issues you young folk had to cope with)

            Theres no excuse for it these days? Yes, there is. If I make an app I don’t need folk with ideas like yours dictating my scope, quality of service, and ability to deliver a tested application on time. Now, if this were a website, I’d be with you the whole way. But you can always pretend you did a download and ran an exe file – then you might feel better about this terrible choice they have made.

            Guess what, most of those apps you install on your phone or computer aren’t even using web browsers at all. How dare they!! Oddly, if it were delivered that way, you wouldn’t feel half as strongly as you do – even though the obvious benefits of ‘no install’ delivery through Chrome is infinitely better and smarter.

            App vs Website. Benefits to the developers using such an app, vs your Grandma trying to buy her plane tickets on website that doesn’t support browser x, y or z. Know your audience, deliver the best product you can, support it.

          • Chris Emerson

            We’re going to have to agree to disagree. If they wanted to make a desktop app, there are plenty of ways they could package this up to do that. If they make it available on a website, then tell most of the people that visit they are using the wrong browser, then I’m going to complain about it. It might well be that they decided on this approach for business reasons. There might be an “excuse” for the business like this, but it doesn’t mean I’m not going to complain about it, as I will with any product that does things I don’t like. Are you suggesting we should just blindly accept flaws in every product we buy because there’s probably a ‘business reason’ they exist? No, of course not. That would be stupid.

            Oh, and please don’t ever try to patronise me again with phrases like “you young folk”.

          • Andy Grant

            There is no flaw, it was planned, deliberate and valid.

            Cool, you’re getting there, yes, business reasons. But also technical reasons. And also, to a lesser degree, the concept of ‘maximizing value for target audiences’ (which spans both business and technical)

            Yes, you are free to complain. I do it all the time. I saw a banana today and it was yellow. I was outraged. Stupid banana.

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Design, once a week, for free.