Missing functions


#1

Comparing to Sketch i miss some functions, that would help to make responsive website/app prototypes and make it more easily. E.g.

  1. some way how to better create e.g. Bootstrap websites - so set of Bootstrap symbols and hidding those that are not valid for bootstrap. And/Or switching between webdesign/mobile app design and which version, so that e.g. every symbol would have parameter if it is web/iOS/android (plus different versions), so that if you select “this mockup is iOS app on iPhone 7” than you will implicitly see only iOS reated (plus universal) symbols with the proper sizing for iPhone 7. And if you select I want Bootstrap app on MD desktop, you will see boostrap symbols, grid for MD apps etc.

  2. something like data population plugin https://github.com/preciousforever/sketch-data-populator - So that e.g. when i design eshop category page, i cut connect it to some json/xml with products (or select some default typical) with images, titles, descriptions, prices … and use their values as some variables e.g. like {product-title} in title and option to select that this object should be there 12 times, 3 times in a row, 4 rows, with defined margin between items…

  3. option to make the layouts fluid and be able to simply switch between different screensizes to see the differences. Or some other simple way how create variants of one page as seen on different devices. There is some way using symbols, but no easy way to define that fluidy thing (https://github.com/matt-curtis/fluid-for-sketch, and no way how to define that this is not different mockup, but just a different view on the same mockup, but not too hidden as current alternate versions and some way how to generaly swith to see everything as on desktop or mobile etc.

  4. some way how to tune also typografy for all fields with some text within them - not just font size, but also line height, margins and paddings. with some easy way how to define some defaults. Also having option to create symbol variant - so that i could connect multiple symbol variants into one and switch between them easily not mixxing with nonrelevant symbols.


#2

Really appreciate you taking the time to bring these things up, Tomas.

While it’s something we can talk about, I worry that these features would be better suited for a fully featured drawing/prototyping app.

Mockups (and the upcoming Balsamiq Wireframes) aren’t meant to produce high-fidelity, nearly finished images like Sketch - we want to the be that super easy to use starter tool, that folks can use to whip something up quickly.

These features, while unquestionably useful, might overcomplicate and bog down the app - making it harder for folks who aren’t designers to get their idea down on “paper”.

That being said, I will bring them back to the team to discuss.

Thanks again, Tomas!


#3

i believe that the line between drawn mockups as balsamiq was originally and some full featured like sketch is very thin, if even existing.

What makes Sketch more functional is not the sketch itself - imo Sketch alone is useless, less powerful then Balsamiq. But thanks to its plugins like those i mentioned it become even more easy and fastest tool for creating basic mockups. Plus they keep the possibility to product high-fidelity results and thanks to some other plugins their results could be converted to some other tools that helps creating full demos with transitions and animations, and with some other tools they can be even used for some sort of export to css.

Thanks to this universality Sketch become the first tool that many companies took for even for the initial sketching. And actually - if there would be an option to switch results to sketchy lines and fonts, i would switch as well. Because even the quality of the mockup is sometimes very important - you need to show it to customer very often and if you cannot e.g. change the line-height (point 4) than the results is often loathsome and client will refuse it. and the other 3 points are not about making it more real, but more - make it faster. And this is the key feature for mockup tool as i see it.

I love balsamiq for many years, you know that, but for me it feels you fall in sleep. I believe that is that because of that wrongly selected and now dead adobe air technology, that blocks your potential, but you know this for at least two years and still did not stopped to ride a dead horse.

I know that you are working on something new and i keep my fingers crossed for you. But it takes too much time and IMO you should keep trying to take portion of the Sketch segment the same way as they are slowly cutting from your segment. Their advantage is that extendibility so they are not alone who make the features and let the market itself improve their product in the way they might not even thought about and without their time and money. This is potential also for you I believe.


#4

I don’t think anyone would argue how great Sketch is. When our designer Mike wants to jump to high-fidelity mockups, Sketch is the app he uses. We think that using both Sketch and Mockups is much more ideal than trying to make an app that does what both apps do.

I know it looks like we have been coasting along, but I can assure you that that is the furthest thing from the truth. We have been working super hard on this native re-write, and as we get closer to release, other things (like Mockups 3 releases) have slowed down because most of our dev team is working on Balsamiq Wireframes. We have touted that the main feature of Wireframes is that it’s native on all platforms, but I think the real feature is that it’s fast.

It’s really really fast.

We are all using it internally for projects, now, and I think folks are really going to dig it. :slight_smile:


#5

A mechanism to handle/manage mockups for different classes of device size would be very helpful.

There are three options currently:

  1. Produce the layouts alongside each other in each mockup. E.g. Show the interface for both desktop and mobile alongside each other. This worked okay but when you come to present it it distracts focus.
  2. Produce the layouts separately and have them in their own mockups. E.g. Nest each set of mockups under a mockup for its size class. This worked but the separation means having to maintain two separate sets of mockups.
  3. Use alternates. But this feels like misusing the feature. Alternates feels like it should be best used for exploring new concepts.

Each approach listed above is a compromise.

For me, to improve how Balsamiq enables mockups for two different device sizes I would need:

  • A mechanism to enable the layouts for each size to be managed together BUT also to be able to focus on a single size when necessary. (E.g. Spend an afternoon just thinking about the interface on a mobile phone.)
  • A mechanism to switch quickly between the device sizes when presenting.
  • Something that works well with large sets of mockups. 50+ for larger projects.

#6

I hear you, Paul, and I totally wouldn’t argue that that would be useful for some folks.

I will bring it back to the team and see if there is something we can do that is easy to use but offers that level of complexity.


#7

Maybe its as simple (ahem) as letting the alternates have a hierarchy (be indented) in the same way as the mockups in the left hand panel can be indented to give structure.

E.g.

  • Official
    – Desktop
    – Phone
  • Alternate 1
    – Desktop
    – Phone
  • Alternate 2
    – Desktop
    – Phone

Combined with a simple way to toggle the “Active” alternate when presenting. (Similar to that when editing.) And we might have a streamlined approach to this challenge.

Just a though. :slight_smile:


#8

True enough, but this structure is something you can accomplish now, you would just need a master mockup (I would use a blank mockup with a text calling out the name), and then you wouldn’t need to use alternates.


#9

just a small comment here - it is not just about different devices, but also about same device but different orientation (or different size on desktop). So in most cases it is not about what will be on the page, but how it will be on the page, e.g. different width. And for this you need to have possibility to define width and position and margin relative to something. Otherwise it is all almost useless