Balsamiq Community Discussion

Movie ticket application


I am designing the movie ticket booking application can anyone suggest for selecting the seats and changes the colour of icon and counts how many seats have been selected


Hi @mayank!

You could use a circle icon and duplicate it a few times to cover all the seats. Then you can change the color to show which seats are free/booked. See the example below.

Counting the selected seats will have to be done manually but you can use a label or maybe the Num.Stepper control to display the desired count.

Hope this helps!


I AM NOT ABLE TO SELECT MULTIPLE SEATS AT A SINGLE TIME.[quote=“mayank, post:1, topic:6148, full:true”]
I am designing the movie ticket booking application can anyone suggest for selecting the seats and changes the colour of icon and counts how many seats have been selected


Hey Mayank,

Sorry for the trouble! It sounds like you’re looking to make the wireframe more interactive, rather than it being a rough sketch for your application, is that right?

Our apps are built to be on the same level as pen and paper sketches, so there isn’t a way to add an interactive layer to the wireframes (if that’s what you’re looking for).

Let me know if that’s the case. If not, we can dig deeper and see if we can find a resolution :slight_smile:


I just want to select two icons or buttons at a single time like selecting 2-3 seats for pvr at the same time( if possible)



Ahh, ok!

You should be able to use the CTRL/CMD to do multi-select on the canvas (hold CTRL/CMD and click on each seat), but let me know if that’s not working.


Will i be able to select multiple seats in demo mode ?

Thanks & Regards

Mayank Gulati


I’m afraid not, Mayank. That is that interactivity I was talking about.

What I would suggest you do is show what it would look like if a user using the application selected two seats, and go from there.

Once you’re comfortable with your design, you can move to interactive prototyping in apps like Invision.


Please find the attached photograph in which i supposed to select green icon together. Here is the case study

Cinema hall has ten (10) theatres running different movies simultaneously. Customers expect
different services from the cinema hall staff. Most customers book seats using the online application
of the cinema hall. However, some customers want to book seats just before the movie start time.
When a booking is done, the staff should be able to select a theatre that screens a specific movie.
Then, the system should show the seating arrangement row by bow with the seat numbers. It also
should show the vacant seats separate from the seats that have already been booked. When the
customer decides on a seat staff can book it for the customer. A customer may select a single seat or
multiple seats at a time.


Thanks for sharing more details, @mayank.

As Brendan mentioned, you won’t be able to show/test this interaction using our app, which is meant to be a low-fidelity (static) wireframing tool.

The only interaction that you will be able to demonstrate will require one wireframe/screen for each state you’d like to present. Once that is done, you can then link wireframes together and use the Full Screen Presentation mode to demonstrate those.

From your screenshot, it looks like you’re using that option already but I wanted to share more details in case that is useful.

However, if you need more interaction, you may want to look at other tools that offer more options. This page might help you looking for more tools.

Any questions, we’re here.