43

Whimsical Wireframes: Lightning Fast Wireframing with Real-Time Collaboration

over 5 years ago from , Co-Founder at Whimsical

Hey everyone,

I'm Steve, one of the co-founders of Whimsical. Today, I'm super excited to share what we've been working on for the last few months: Whimsical Wireframes.

We designed Wireframes to be fast, simple, and collaborative. We've got a big library of configurable elements that are really flexible and fast to use. And we'll be adding more to this on a regular basis. I put together a blog post that talks more in depth about how we designed it: https://whimsical.co/design/fast-collaborative-wireframing-app/

Would love for you all to check it out and let me know what you think!

24 comments

  • Nitin GargNitin Garg, over 5 years ago

    Flowchart utility is really good and I remember trying it out a couple of months back for a project. Will definitely try out the wireframes.

    If there is an offline support/mac app in future – I do see Whimsical becoming a useful tool for long term.

    2 points
    • Max K, over 5 years ago

      +1 for the offline version

      1 point
    • Steve SchoeffelSteve Schoeffel, over 5 years ago

      Hey Nitin, I mentioned this in a few of the threads below but we're planning to do a desktop app with offline support but it's a ways out. The current priority is to build the remaining two products (Sticky Notes and Mindmaps). Would love to hear your thoughts once you're able to give Wireframes a spin! :)

      1 point
  • Xavier BertelsXavier Bertels, over 5 years ago

    I love the intention behind this. At first, I felt "oh no, another Figma, just what we need," but then I started playing around with it and it actually feels really good. Precisely because of the constraints. The only apparent downside for me would be that I travel a lot, and working offline is obviously not an option. Other than that, this is pretty sweet :-)

    1 point
    • Steve SchoeffelSteve Schoeffel, over 5 years ago

      Thanks Xavier. The constraints are indeed central to the wireframing experience and also a delicate balancing act (constraints vs freedom/total control). Fortunately, most established patterns are actually faster when operating within the constraints.

      In terms of working offline, this is something we hope to add in the future with a native app. Probably a ways out but definitely something we'd like to tackle.

      2 points
  • Andrew Richardson, over 5 years ago

    I've found the flowchart tool incredibly useful and intuitive. It's so easy to help people understand scope and all the moving parts of a project when I can create a quick flow in a meeting.

    I'm not sure I'll utilize the wireframing feature as much though, it seems great for someone not familiar with design tools but for those that are it seems a bit redundant.

    1 point
    • Steve SchoeffelSteve Schoeffel, over 5 years ago

      Thanks Andrew! I've found that it takes a lot of discipline to stay lower fidelity and not stress the pixels in a tool like Sketch/Figma. If you want speed at a lower fidelity, Whimsical really excels here.

      A couple of things related to speed:

      • we've got thousands of high quality vector icons that are all searchable and can be used on their own but also in buttons and input fields
      • we have wireframe-specific shortcuts (b for button, p for input, a for avatar… etc) that cover many of the most frequently used items
      • for other elements, our search is super fast (just hit E) and then the elements can be configured in seconds (size, focus/disabled/error, color, etc)

      Hope that helps a little bit. Cheers!

      3 points
  • marieli lemes, over 5 years ago

    I'm waiting for the feature mindmap. Congrats for the awesome product! Sucess!

    0 points
  • James FutheyJames Futhey, over 5 years ago

    This is really polished, Nice work!

    Could definitely see myself using the flow-chart tools from time-to-time.

    Not so sure about the wireframing tool (yet).

    Just knocked out a really low-fidelity / quick wireframe in Balsamiq yesterday (10 minutes). Typically higher-fidelity wireframes (for me) happen in Sketch (1-2 days of iteration).

    Going to have to noodle on this a bit. I can't quite figure out where it fits for me. Is it faster than wireframing in Sketch? Is it cheaper / easier for others to pick up (and so not for a designer)? Is it the collaboration, or is it higher-fidelity with some nice interactivity when sharing / prototyping (and so one step down from creating a wireframe in Framer)?

    I can't answer any of these questions for myself really. But surprisingly, I still want to consider it for future projects down the road.

    0 points
    • Steve SchoeffelSteve Schoeffel, over 5 years ago

      Hey James,

      Thanks for your thoughts! Regarding Whimsical Wireframes – I'm curious if there's anything that would prevent it from replacing Balsamiq? It sounds like one of the things that gives you pause is the fidelity of the output?

      Many thanks! Steve

      0 points
  • Gavin McFarlandGavin McFarland, over 5 years ago

    Whenever I need to create deliverables with diagrams or wireframes I've always used Omnigraffle because of features like magnetic lines and auto-sizing shapes. But it's been stuck in it's ways for a while now and the Mac app is so counter intuitive compared to things like Sketch and Figma.

    Finally someone has acknowledged there is still a need for creating informative documents that user interface tools aren't built for. I had a quick play and I do really like how easy it is to use. I would love the ability to customise the colours and sizes/proportions of elements in the wireframing aspect of the app because I personally like to put my own style on my deliverables. An electron wrapper app would also be really handy.

    Looking forward to seeing how it develops. All the best.

    0 points
    • Steve SchoeffelSteve Schoeffel, over 5 years ago

      Hey Gavin, thanks for the input! We are planning on making the colors customizable for both Flowcharts and Wireframes :)

      I'm less sure about the sizes of elements in Wireframes unless it was a functional thing. We're working hard to limit the amount of decisions and to keep things focused on ideas/content/layout instead of style. But I totally recognize that people want to brand things or tailor them to their teams or clients. It's a delicate balance!

      For an electron app, I believe Nativefier and Fluid should both work. We'd really love to do a desktop app down the road a bit :)

      0 points
  • Ben GiffordBen Gifford, over 5 years ago

    Interesting.

    What's not clear to me is how this is better than anything else available right now … what problem are you solving for me that I have?

    If I want quick-and-dirty wireframes, I'm reaching for Balsamiq.

    If I want more extensibility, I'm going Sketch … for which I've built a wireframing library that allows me to move fast, but then evolve in to UI as project moves forward. So, no disposable work.

    For me, interest in a product like this hinges entirely upon a couple things … • Ability to manage large sets of screens/components more easily (this is an area where Sketch falls down entirely). Imagine building systems and relationships similar to what CSS affords in this area (nesting, inheritance rules, class-based styles) rather than being constrained to WYSIWYG inflexibility. This would pique my interest … however, I acknowledge I may be an outlier in my sentiments here. • Integrations: could I pipe these to Overflow? Import as vector objects in to Sketch? Push to Invision?

    0 points
    • Steve SchoeffelSteve Schoeffel, over 5 years ago

      Hey Ben,

      Here are a few thoughts on this:

      Why Use Whimsical Over Sketch

      • if you don’t want to or haven’t already built the library yourself
      • access to thousands of searchable icons
      • commenting inside the document
      • you want to have multiple people in the document (say for review or for a design sprint exercise) – especially non-designers
      • much faster access to your UI elements with search

      Why Use Whimsical Over Balsamiq

      • if don’t really love using Balsamiq
      • if you want a more clear, semantic output
      • if you can’t remember all the symbol combinations required to show a selected checkbox or any of the other elements that are built this way

      I guess at the end of the day, people have to choose what tools they like spending their time in and feel most productive using.

      Hope that helps a bit! Happy to discuss further :)

      0 points
      • James FutheyJames Futhey, over 5 years ago

        +1 for Balsamiq, and +1000 for low-fidelity wireframing. That's the point of Balsamiq, it doesn't allow you enough options so that you end up wasting time on details too early in a project. And it's a tool that (in my experience) any PM or business person can pick up and collaborate in.

        1 point
        • Ben GiffordBen Gifford, over 5 years ago

          Exactly. When you consider that design is largely a process that exists to communicate and align, the more things that break down the barriers of communication and collaboration the better.

          Simple tools that enforce rigid constraints are wonderful.

          0 points
      • Ben GiffordBen Gifford, over 5 years ago

        Thanks for the response, and highlighting the differentiation points.

        The commenting and ability to have multiple people in a doc is a really powerful feature, and something that has always felt isolated from the workflow, whether in Invision, Slack, or Zeppelin … I have yet to find a discussion/collaboration tool that feels like it can flow with an evolving idea.

        I'll give Whimsical a test run and see how that does for me.

        0 points
        • Steve SchoeffelSteve Schoeffel, over 5 years ago

          Would love to know how it goes for you! Thanks for trying it out.

          Also, we have some plans to make the discussion/commenting piece much more robust in the future. I think it'll be pretty cool when we get it in there.

          In the meantime, we're working hard adding new elements to use with wireframes. Just added sliders, progress bars, and review stars. Tabs and modals are likely next :)

          0 points
  • Max K, over 5 years ago

    It just hit me—every element is semantically defined on such wireframe. Would be great to have semi-live wireframes with editable input boxes, hoverable buttons and expandable dropdowns. If you add a basic prototyping feature on top of that, or maybe even component-based prototyping (like Indigo Studio), it would be a no brainer for low fidelity interaction prototyping.

    0 points
    • Steve SchoeffelSteve Schoeffel, over 5 years ago

      Yeah, totally! We'd like to do a "Play/Presentation" mode where you can interact more with the wireframes and flowcharts.

      Indigo Studio is a new one for me. Will have to check that out.

      0 points
  • Max K, over 5 years ago

    Great job! Honestly, I'm not sure if there is a proper niche for such product today (with Sketch and Figma and reusable symbols/components), but I definitely like how this thing prevents me from designing and focuses on wireframing. Is the prebuilt design system configurable? I tried to create a quick wireframe and my non-design colleague asked "Why this purple is not the same as ours?"—it wasn't entirely clear to him that this is a wireframe rather than a visual mockup. If I could make it grayscale or change the main color it would help.

    I love how prebuilt elements work. Editing a button or say a dropdown is a far more pleasant process than overriding things in Sketch. I would add an option to pin the floating contextual toolbar to the top of the screen though. I know some people like it floating around, but for me—it drives me crazy when it's getting in my way all the time : )

    Hope to see it as a native product (well, semi-native, I guess) one day. I miss a lot the familiar shortcuts, like shift+arrows to nudge ten time or cmd+arrows to change object size.

    0 points
    • Steve SchoeffelSteve Schoeffel, over 5 years ago

      Hey Max, thanks!

      We are planning to add "themes" that would allow you to customize colors in Flowcharts and Wireframes. Should be pretty cool. Not totally sure when we'll get to it though. Always so many fun things to add ;)

      Glad you like the elements. I'll make note of the contextual toolbar pinning idea. I can see how it gets in the way at times.

      Shift+arrows is coming really soon. And it's funny but I've never really used the CMD+arrows shortcut myself. I wonder how widely used that one is? Do you use it a bunch?

      At any rate, really appreciate your thoughts. Thanks again!

      0 points