The Perfect Tool Set for Web Development: From Mockup to App in 7 Easy Steps

You’re an avid web designer or developer. It’s your thing; you love it, you breath it, you live it. If someone asked you what your passion was, you’d answer cool apps in a heartbeat.

But, how do you design and develop them quickly? How do you make sure you get that sweet idea that’s been bouncing around in your head out to the waiting public, without wasting time?

What toolchain do you have in place to let you (and your team) go from concept through to finished product — quickly?

If we’re anything alike, there’s so many tools available for every single aspect of the process. And whilst fantastic, it can be very distracting, even confusing.

So today I’ll show you 7 tools you can use to build an effective (and low cost) toolchain straight-away. Alternatively, if you already have a toolchain in place, one of these may help you improve it. Here’s the perfect tool set for web development. But let’s start with design.

1. Design: Balsamiq Mockups

Let’s assume we want to make a video hosting site, similar to one you may know — let’s call it TechTube.com. Before we attempt to do anything, we need to know what we’re building — right? So we need to make a mockup of how it’ll look and feel. Instead of pen and paper, there’s a great app called Balsamiq.

In the screenshot above, you can see the mockup I made. It has a simple menu bar, search bar to search the videos available, a title for the currently viewed video, a video player, a description of the video, and finishes off with comments and a navigable tag cloud.

How long did it take? Honestly, only about 10 minutes; about 3 – 4 of those were thinking of what to make for the mockup. It’s really easy to use to design app mockups; whether for the web, iOS and Android, or native desktop applications running on Mac, Linux, or Windows.

At first you may feel a bit overwhelmed as there are over 70 controls to choose from covering windows, tables, accordions, video players, search bars and more. But after just a bit of experimentation, it becomes easy to navigate and use.

You don’t need an account to get started; but if you want one, you can start with a 30 day free trial, then step up to one of the paid accounts afterwards. They have plans starting from $12/month.

2. Frontend Design: Twitter Bootstrap

Right, we have our design knocked out and the team’s happy with how it looks, now we need to implement a front-end prototype. To do that, there are a number of frontend frameworks to choose from. But, one of the most long-lived, most successful, and most feature rich ones is Twitter Bootstrap.

Originally designed and used internally at Twitter, it’s now open source available to everyone. It provides a consistent, robust, and cross-browser framework for rapidly designing web applications.

Packed with functionality, it has support for typography, forms, buttons, tables, a standard grid system, in addition to a rich array of JavaScript powered options, including modal dialogs and more. Below you can see the near-match prototype I made based on the Balsamiq mockup.

3. Dynamic Frontend Development: Angular JS

Now a website’s fine, but you definitely need dynamic functionality, right? Somethings are fine to wait for a full page load (or reload), but not everything. Continuing on with our example, let’s say that we want to keep a dynamic count of comments, which might update in real-time.

How do we do that? Well, we could script up everything ourselves, and depending on how much code’s required, this may be fine. But after a while, the likelihood of messy code appearing grows, plus there are far easier ways to create dynamic interfaces, than doing everything by hand.

One of the best, and most popular packages is AngularJS. Angular simplifies both the development and testing of web applications. To quote the Angular documentation:

Angular’s data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.

There’s so much you can do with it, so much you don’t have to write by hand, because it’s all built-in. Definitely add this to your toolchain.

4. Backend/API: Apigility

Now the modern web app isn’t what it used to be. What I mean by that is, they used to be all one thing, the code, the output, everything was all intertwined. Those days are fast drawing to a close.
These days apps aren’t only consumed in the browser, they’re everywhere, on a host of devices (ok, mostly iOS and Android devices). So to make the backend functionality available, you need to separate it from the frontend and house it in an API.

There’s a number of ways to build a professional API, but likely none are quite as simple as Apigility from the Zend Framework 2 team. Able to be developed and deployed on Mac, Windows, and Linux Apigility provides support for RESTful or RPC services, versioning, normalization and validation, authentication, documentation and so much more.

If you’ve not tried it out, it’s a must-have tool.

5. Browser Developer Tools: Firefox, Chrome, Safari

Now that both the front and backends are moving along nicely, you need to be able to test and tweak them as you’re going along. Some of the best tools to do this come shipped with most of the modern web browsers we all use and rely on.

Specifically, I’m talking about the developer tools in Firefox, Google Chrome (Chrome extensions for developers) and Safari. Whether you want to see the resources which the page is using, look at the network requests to review timing issues, see how long different aspects of rendering take to complete, or to test how your site works across different mobile devices, there is so much functionality available for free.

To get started, in case you’re not familiar with them, in any of the aforementioned browsers, right click anywhere in the page and click Inspect Element in the popup window which appears. This will open up the developer tools, highlighting the source of the element which you right-clicked over. From there, move between the tabs to find out a host of information about the page.

6. Code Collaboration: GitHub

Ok, the prototype’s coming along quite nicely, but we need somewhere to store the codebase which supports it. We need something which let’s us watch it evolve over time. Naturally, I’m referring to version control.

There are a number of options available when it comes to version control; the most popular of which are Git, Mercurial and SVN. Based on those tools, a number of companies have sprung up, making working with them, “in the cloud”, as simple as possible. And the most popular of them is GitHub.

Check out any job listing, whether for a freelancer, part or full-time position as a software developer and they’ll want to know you have a GitHub repository. Yes, there are others, likely equally as well featured, such as Bitbucket and codebase, but GitHub has the mindshare amongst developers.

You can create and store an unlimited number of repositories for free, you can follow other developers, be followed by them, fork repositories you want to work on and more. If you’re not using it, definitely give it a go.

7. Debugging: Usersnap

Now to the final link in the chain — debugging. We’ve got our app, the front and backend are coming along nicely, it’s under version control and for the most part, everyone’s happy. But like anything we make, no matter how good we are, there’ll be bugs to fix and issues that we want to improve upon.
So we need a tool to make this process as simple and efficient as we can. Usersnap’s website widget fits perfectly here. Perhaps you’ve or one of the designers on your team uses Invision, the tool for design feedback. Well, Usersnap is Invision for developers.

Your developers, whilst extremely capable, can’t be everywhere at once. People will report bugs, but how can developers get all the information they need, such as the operating system, the browser, window size and so on? How can they replay the event to see the stack trace?

Usersnap gives them all this and more. Once we enable it in our project and link it to a project in the Usersnap dashboard, any user can submit feedback and ideas with all the information required to fix or improve it.

Wrapping Up

And there you have 7 great tools forming the foundation of a very effective tool set for web development which you can regularly use to turn your ideas into living, breathing web applications. From design, to front-end, to code storage and debugging, there’s definitely something here to suit your needs.

Now there are, naturally, more tools which you can add to your toolchain; I’ve only just scratched the surface here. From testing to continuous integration, the list of possibilities which you could add to your toolchain is almost without end. But I didn’t want to overwhelm you.

However, if you have more ideas, more great tools, I’d love to know what they are.

If you found this post interesting, follow us on twitter where we tweet about web development, web design and startups.

This article was brought to you by Usersnap – a visual bug tracking and screenshot tool for every web project.