Top 3 Online Web Design Tools
A review of prototyping tools for web and mobile app design
Prototyping tools can aid in the development process by separating the user experience from the coding. This allows designers to communicate how an application should look and function, uncover issues early on and develop graphical project assets prior to and during application development without needing to create and edit source code. There are many free and commercial tools for prototyping web development, here is a comparison of three of the best free, web-based tools.
Moqups.com
Moqups is a simple, easy to use browser based tool for creating static page mock-ups. It has a library of customizable wireframe graphic elements called stencils, and users who sign up for a free account can upload images as well. Projects can contain multiple pages with interactive hyperlinks, pages can be arranged and rearranged and projects can be previewed saved, shared and exported as PNG or as interactive PDF files.
Moqups is a one-stop shop to create simple wireframe-type mock ups as well as more advanced graphic based designs. Moqups can be export for use in more robust prototyping/testing tools like Invisionapp (below).
Invisionapp
InVisionapp is a browser based tool that allows you to build and test hi-fidelity mock ups that look like real websites and apps. Mock ups are created by uploading “screens” which are image files created with Adobe Photoshop, Fireworks or your preferred graphics software. Screens can then be sorted and linked to other screens via hotspots, giving the impression of interactivity.
Invisionapp is a web based tool that includes a desktop client for syncing project files, similar to Dropboxtm. Collaboration is this applications strong suite, user comments can be placed directly on screens, and “project pulse” feeds help to keep tabs collaborators and project changes.
Justinmind Prototyper Free Edition
Justinmind Prototyper is a desktop application for Windows and Mac, it also includes online cloud-storage and collaboration tools. This application includes templates for iOS and Android phones and tablets, as well as a full size web template. As with the other tools here you can build mock ups from images created in any program (including snapshots of hand-drawn sketches), and like Moqups, Prototyper has a large library of standard UI elements and placehoplders.
All three of these tools can help accelerate the development process, and incorporate feedback into design. To get the full benefit you will need some high quality graphics editing software as well. Adobe Fireworkstm is great for creating screen based layouts and graphics, Adobe Photoshoptm and Illustratortm work also, but Fireworks is purpose built for web/screen design.
If these options look a little pricey to you, there are also some really great open source tools you can download and use for free; there’s GIMP, which is an open source image editing and graphic production program somewhat similar to Photoshoptm, and there is Inkscape which is for creating and editing vector graphics.
