Sam RoshanMarch 07,2014

Software Tools for Prototyping Responsive Web Designs

The majority of new web sites are not responsive and it is essential that designers prototype them to examine how they work on various devices. Responsive sites are designed to respond to the accessing device. Using or accurately simulating the devices that will be viewing these sites is of great benefit to designers. This is becoming much easier to do with the sophisticated software tools that are now available.

Software Tools for Prototyping Responsive Web Designs

The most difficult task many designers have, is to give a clear explanation of concepts and design features to other people. If people are able to actually see these concepts in action, it is much easier for them to comprehend. Prototyping a design can certainly help with this and it also provides designers a way to determine where their design functions well, and where it needs to be revisited by testing and making changes as the design evolves.

Prototyping Benefits
Have you ever had the experience of having a site developed, according to your design specifications, only to realise that it is not really what you desired? Then, at this late stage, it is rather time consuming and costly to change it.

There are now apps available that provide many of the benefits associated with HTML prototypes that use a drag and drop interface. This gets designers from the concept stage to interacting with the design concept and advancing it fairly quickly. The greatest benefit of these apps, is that they provide a very easy way to prototype designs in a responsive way.

You can change the size of the screen from mobile to desktop and visualise how your content repositions itself as needed. This is an oversimplification of the entire process and the many things that should be considered in responsive designs, but it is a good place to begin and it’s superior to creating a number of different sized visuals and wireframes.

Apps For Prototyping
In the past, people would often have to take the time to code a prototype by hand. However, there are now apps that have been developed that help with the design and prototyping of responsive sites. We will help you learn how these apps can be useful to you and which ones you should consider.

Here are several useful prototyping apps, namely UXPin, Divshot, and Easel. Generally, they all have a similar function. They assist in the creation of a web page by using a drag and drop method to add standard elements to your page.

  • Divshot

    Divshot Logo

    It can be a bit difficult to drag-and-drop with Divshot. It will only allow you to place elements in a particular position, it then will fit them into the DOM. This can restrict you, however, the foundation of the design is production code from Bootstrap. You must make use of Bootstrap, and make your design fit to it. This allows you to use custom CSS to alter the design.

    It won’t take long to create the structure of your page with Divshot and you will have the ability to sketch quickly in its interface. One drawback is that there is no option for linking pages to create a prototype that is clickable. This makes it necessary to download the prototype and then create manual links.

    The visibility controls in Divshot apply classes to the various elements. This gives you the ability to hide or show them on any one of the four different devices, HD, desktop, tablet and phone.

    Divshot allows you to switch themes quickly, and even make use of a custom theme. This feature can be helpful when showing a client your custom theme.

  • Easel

    Easel Logo

    Similar to Divshot, Easel utilises Bootstrap. However, Easel allows you to sketch in its interface very quickly and you don’t need to use layout elements. It also allows you to link pages into a prototype that is clickable, quickly and easily. When you want to share what you have done with your client or design team, you are able to with their comments mode, which also allows the team to provide you with feedback. Easel supports a team design approach as well.

  • UXPin

    UXPin Logo

    The interface of UXPin is more feature rich than Easel or Divshot. This gives it the feel of a more comprehensive app. With UXPin you are not bound by a CSS framework, giving you design freedom with no constraints. You are able to create a grid and then go back and forth between several screen sizes. You may add additional screen sizes as needed.

    After your prototype has been created and shared with members of your team, they have the ability to add comments and reply to queries. This app differs from the others because it allows you to create viewable iterations that team members can review and comment on. This exposes the entire design process, with all of its iterations.

    UXPin helps designers capture the entire design process and allows users to upload additional assets that were not created within the app.

Considerations While Working With These Apps
Easel and UXPin are easy to get started with. If you need to quickly test your concepts, they would be good to begin with.

If your work involves a group of developers and you want to examine the way various components function with each other reusably, then Divshot may be a good choice, particularly if you utilise Foundation or Bootstrap. It may also be helpful to be able to link with your custom theme.

Prototyping Is Now Easier Than In The Past
These apps demonstrate that prototyping your design is now far easier than in the past. How much prototyping you actually do is up to your individual choice. That will be dependent on the specific project, your project team, and the amount of time that is available for prototyping.

As prototyping tools mature, there will be a lower barrier to entry and these tools are making it faster and easier to prototype your designs.

Final Comments
All of these apps have their positive and negative aspects. However, they all begin with a desktop default, as opposed to having a mobile default.

Content is critical for these designs, and not one of the apps make it simple for content to be put in at the inception of the process of design.

That being said, the task of prototyping is getting easier, which allows you to more effectively test your ideas, providing more time to concentrate on your design.

Author: Sam Roshan Sam Roshan has been working in the Digital Marketing industry for over 7 years. He has worked for multiple companies ranging from corporates to boutique agencies encompassing his unique skill set to ensure businesses of all sizes can compete and grow their business using Online marketing strategies.

Instant Website Analysis

We offer a FREE 20 page anaylsis of your website. This indicates areas that need improving or changed for a positive user experience and increase traffic volumes.

etraffic TV

<… name="allowfullscreen" value="true">

Join the etraffic community

Connect with us on the following social media platforms.


• Social Networks •

• Our Locations •

Click To View Our Contact Details

Level 1, 530 Little Collins Street, Melbourne VIC 3000, Australia | 1300 887 151

Level 2, 50 York Street, Sydney 2000 | 1300 788 679

Level 1, The Realm, 18 National Circuit, Barton Canberra ACT 2600 Australia | 1300 765 708

Level 1, 16 McDougall Street, Milton 4064 | 1300 765 709

220 Varsity Parade, Varsity Lakes QLD Australia 4227 | 1300 887 804

Level 1, Paspalis Centrepoint, 48-50 Smith Street, Darwin NT 0800 Australia | 1300 889 815

Level 18, Central Park. 152-158 St Georges Terrace Perth, WA 6000 Australia | 1300 550 753

Level 3, 97 Pirie Street, Adelaide 5000 | 1300 669 895

Level 6 Reserve Bank Building, 111 Macquarie Street, Hobart TAS 7000, Australia | 1300 885 870

We seek to create long-term relationships
Tell us about your business goals and we will contact you