Home > Prototyping and wireframing > 5 top tips for prototyping web apps

Justinmind is equipping web and UX designers to prototype web apps with drag and drop technology.

There’s a fair amount of confusion surrounding mobile computing and communication technologies. Currently, we’ve got web apps, native mobile apps, mobile websites, and, as of 2015, Google gave us progressive web apps. They’ve all got their place in the world of mobile, so here’s a handy guide to the underlying technologies powering each solution. With Google driving cutting edge advancements in web app design, we’re walking you through the prototyping capabilities of designing web applications. Read on for our top tips on prototyping your best web app yet.

What is a web app?

According to Acunetix, web apps are “computer programs allowing website visitors to submit and retrieve data to/from a database over the Internet. The data is then presented to the user within their browser as information is generated dynamically (in a specific format, e.g. in HTML using CSS) by the web application through a web server.” They are accessed via the web or mobile browser (depending on the device) and do not require the user to install them. Examples of web apps that we use every day include social media applications such as Buffer, project management tools such as Basecamp, file hosting services like Dropbox, and music streaming service Grooveshark.

Top tips for prototyping web applications with Justinmind

1. Prototype to the design, not the device

With web apps, designing for different screen sizes is a must. One of the most common problems with web apps is that users are accessing them from devices that have different features and different screen sizes. But designing for different screens isn’t as simple as scaling your content for each mobile browser. You also need to think about the visual hierarchy to avoid misplaced clicks with poorly placed content.

“Building something which works on as many devices as possible will provide you with the best setup for focusing your resources and budget on the content rather than maintenance.” Creative Bloq

A good starting point is to design your web app responsively so that it automatically adjusts to the device’s display capabilities. Prototyping responsive web design is actually pretty easy, designing the layout proportionally in a fluid grid structure and resizing the layout’s widths accordingly for each screen.

Prototyping the responsive fluid grid

To prototype responsively with Justinmind, first start by creating a new web prototype. Then, add screens of different widths for mobile, tablet and web to your prototype. Use image widgets to create the fluid grid structure and add your desired content to each screen – remember to think about what makes sense for each screen. For example, it makes more sense to show all content on desktop, but a condensed version – with only the essentials – on mobile screens as it’s more comfortable to read larger amounts of text on larger screens. Next, add Linking events to your prototype to connect each screen to the others. If you take a look at this tutorial, you’ll find more complete steps on simulating content on different screen sizes responsively.

You can prototype responsively for your web apps with Justinmind step by step.

Tip: start with your mobile screen *mobile first* and focus on only the most important information to relay to the user – this way you’ll be able to identify the most important content in your website. Consider the breakpoints and the alignment layout – the user doesn’t want to have to scroll left and right on their mobile screen.

2. Prototyping business logic and conditional navigation

As we mentioned above, web apps enable users to submit and retrieve data via their mobile browser and complete tasks. In order to do this, the data needs to be organized using business logic. Business logic is program code that encrypts the real-world business rules that determine how data is translated and calculated in our sites, apps, programs and software. Business logic uses conditions that enable the user to complete their task and progress through the flow of the web app. Here’s an example:

Imagine you’re browsing an eCommerce web app, and you’ve found something you want to buy. You add it to your cart, and head to check out. You then specify the shipping and billing details, you confirm payment and complete your order.

Example of a business rule: if you spend more than $50, get a coupon for $10.

Example of a business logic:

If (total >=50)

total=50- 10 //apply offer

Example of Justinmind expression

Implementing real-world business rules into your web app design may seem complicated, especially when looking at it from the engineering phase. But through prototyping, you can reproduce the end-to-end flows of business rules and conditions and visualize how data will be stored and managed in your web app before coding. With Justinmind, you can define flows with conditions and rules, which essentially control each interaction in your prototype. The conditions split and organize the execution of an interaction into different ‘conditional blocks’ and decide when to perform one action or another. Add these within a data master to have functional conditions within a database with real data.

Download Justinmind today and start prototyping awesome web apps

Download free

3. Optimize your visual content

Once you’ve got the hair stuff out of the way, you can start thinking about the aesthetics of your web app. With a mobile-first approach, you’ll want to optimize your visual content for smaller screens.

Loading content

Users tend to browse on their mobile devices on the go – and aren’t always connected to Wi-Fi. When adding images to your web apps, be wary of heavy images that are slow to load and a real pain for the busy user. Consider using assets that are highly compressible, for example SVG vectors. SVG vectors can be easily scaled and modified to fit your mobile screen.

4. Have mobile gestures in hand

When it comes to accessing your web app on mobile, you need to be in control of your mobile gestures. Consider that we use our thumb and index finger the most when interacting with our mobile, so make buttons and menu navigation big enough for fingers and thumbs, and make sure that the elements in your web app for mobile devices can be reached comfortably.

Prototype showing mobile gestures

With a prototyping tool like Justinmind, you can simulate your designs on real devices to test whether the mobile gestures the user will need to perform fit well.

5. Make forms friendly

Forms in web apps are a common feature, such as in banking web apps where you need to log in to complete a task.

When it comes to viewing and interacting with a web app form in a mobile browser, you want to focus on two things:

  • Requesting the minimum amount of info from the user
  • Intuitive form filling e.g. putting categories in an order that makes sense: first name, last name, email

With Justinmind, you can create forms in a number of ways, including using data-driven prototyping so that you can test your forms using real data. You can also create forms with required fields and placeholders to make them more intuitive and not waste the user’s time.

You can also create lists and selection lists which are useful for booking applications, such as for reserving a hotel or booking a flight. These require you to use data-driven prototyping and Justinmind’s Select widget. Here’s an example:



And our final piece of advice? Invest in a complete prototyping tool! Justinmind is the ultimate tool for creating web apps quickly and painlessly. Our drag and drop, intuitive interface will have you up and running with your web app in no time. Try it out for yourself today, download below for FREE.

Emily is Marketing Content Editor at Justinmind

Add comment

Your email address will not be published. Required fields are marked *