What application do you use for wire framing?

You should checkout https://whimsical.co/wireframes/

I started using it for a few of my wireframes and it's amazing, much more natural than using Sketch for wire framing.

I use Balsamiq mockups. I have done for at last 8 years. There may be better products on the market now a days but I find it the easiest to quickly create some mockups.

Looks like there's a lot of fans of Sketch, but I've got to say I love Adobe Experience Design.

They've simplified to focus on the core wireframe experience and I really love the ability to walk through wireframes with clickable interactions.

https://www.dropbox.com/s/7vcyzso1y3e56xi/Screenshot 2018-07-10 15.02.04.jpg?dl=0

I recently spent quite a few hours looking at many different prototyping tools, and unfortunately found they all have major drawbacks and are more difficult to use than just building actual static web pages. For example, https://www.figma.com/ is a nice combination of Sketch and InVision but isn't responsive, you can only design for one screen resolution at a time...in 2018! Framer is responsive but has its own programming language...seriously? I'm waiting for someone to build something easy and responsive, that also generates usable code by using Bootstrap components, generating React components, etc.

In the past I've actually used WordPress with the default theme for making a quick wireframe. Next I think I'm going to try Atom or VS Code with a Bootstrap and Font Awesome extension.

Note that Ash Maurya of Running Lean etc mentioned he's switched his team to Figma https://discuss.leanstack.com/t/tool-figma-for-rapid-prototyping/28 quoting here in case that's a closed community:

We are still discovering the many (many) features/use cases Figma has, but the top reason we switched was for a more seamless workflow that cut out a bunch of steps.

Our previous process

• started in Sketch for screen design.
• we then imported/synced screens to Invision
• and then added interactivty for walkthroughs

roundtripping across 2 tools was cumbersome and sometimes glitchy…
we can do all this from 1 tool now.

That was the big ah-a… Outside that other things that immediately got our attention were

• one design file that the entire team uses (no versioning or sharing headaches)
• google docs like real-time cursor visibility when team is working on design file – fosters more collaboration
• turning screens into reusable components allows them to be infinitely reused across different storyboards.
• Storyboards, screens, components all live in the same master file.

Hello,

Sketch + Invision work best for us.

I love Invision that we can easily send mobile app prototype via SMS to our customer. Having clickable prototype without a single line of code boosts speed of the project and helps you to see some bottlenecks.

Good luck!

I prefer Framer - Modern prototyping tool

Hey Jack - I use Sketch to design screens and Invision to create interactive prototypes for my project (www.tribefive.me for reference).

With Sketch, there is definitely a learning curve (and many things I don't know how to do), but within a few days, you should be up and running with basic workflows. Check out some courses on Udemy where an instructor guides you through how to do all the basics like this one: https://www.udemy.com/learnsketch3/

Once the screens are designed in Sketch, it's pretty easy to link it up with an Invision project. From there, all you have to do is create hotspots on the screen where there are buttons / links and then it should be live and clickable!

Best of luck. Feel free to reach out (jonathan@tribefive.me) if you have more questions.

Cheers,
Jonathan

We at draftss.com prefer sketching out multiple rough layouts using just pen and paper and see what would work the best. We then move onto a bit more detailed wireframing for which we use Sketch rather than using other mockup software. Although the new modern wireframing products look really neat and feature-rich, but then Sketch gets almost all of the work done :)

Quad ruled paper (5mm cubes) with a 0.4mm fineliner. 😁

Hi all! Do you know of any tool who allow UX/UI designers see how users interact with their app's wireframes in real time? (by recording a video of the interaction or providing detailed analytics)

I've always been partial to using HTML to do my wire-frames. You can create a sitemap, pages, and links. You can also do workflows with the JavaScript.

Adobe XD

+1 Sketch

I use Sketch, simple to use and fast.

Balsamiq mockups, for now at least. It has that hand drawn quality to it that allegedly facilitates early stage design research. My only worry with it is that they will probably discontinue the Windows version and focus on their SASS version.

I use powerpoint / google slides for easily mocking up / wire framing designs.
The presentation mode makes it easy to create usability tests where if the user presses the right button on the screen you change to the next slide.
It is easy for beginners because most of us knows the tools.