Implementation: HiFi Web App

When lo-fi prototyping is done and dusted, you have already worked out the major quirks of your application, it is time to go for a high-fidelity prototype. High fidelity prototyping can be done with different kinds of focus, for example on the design, the employed techniques or the user experience. And for each type of hifi prototype there's a bunch of dedicated tools that you can use.




Since we are in an interaction prototyping course, you'll - you have guessed it - focus primarily on interaction. A great way to achieve and control interaction is by coding your prototype in html, css and javascript. While there are other applications out there as well that support this type of design, none gives you the complete freedom that you'll have with coding. An additional benefit is that you will learn the vocabulary of your programmers; an essential skill that'll come in handy later, if you decide to pursue a career in interaction design. But, of course, you will not have to code everything from scratch.




While this is sometimes recommended to facilitate understanding, there are plenty of well-suited frameworks for it out there and if you want to implement certain features, the usage of APIs or "application programming interfaces", is inevitable. When you've mastered the art of API there are virtually no limits as to what information your application can display using already existing software and triggering certain events using commands such as GET, POST, PUT, PATCH or DELETE. Think of the API as kind of a middle man of information.

Your app can get information from some other applications by using these special commands. And, of course, since nearly every company is interested in people using the services, there are plenty of APIs out there. If you search the web, you'll probably find a bunch of APIs, some very useful, others, well, not so much. But still, might be some fun!




If you're thinking about implementing something more complex in your prototype, make sure to check whether there is an API out there that can help you. For example: using location or map services. By including some rather simple lines of code you can easily use google maps within your application. Granted, not all APIs are as well documented as this one, but if you check it out you'll see that you can do some pretty nifty stuff with just a few lines of code.




So much for implementation practice, see you next time.