Guidelines/grids


#1

I believe I’ve asked this question before, but in the chance that asking it again will prompt some conversations at Balsamiq headquarters, I figured why not!

I’m really missing the ability to lay out grids/guidelines in Mockups 3.

Mockups is for the fast creation of wireframes, no doubt, but a grid is almost the first thing a designer decides upon, and a grid/set of guidelines is very important for a design, even at the wireframe stage.

The current guideline system often frustrates me - it’s hard to tell which item you’re aligning with, the light gold guide line is often indistinguishable from the light grey guide line, and the feature doesn’t help to layout an overarching structure.

If I want to create a grid of 50 pixel wide columns, with a gutter of 10 pixels between each, the only way I can do it is create a bunch of rectangles on the page, which I then need to go back and delete or hide after the design is finished.

Is there any hope for a grid/guideline system that helps users to make macro layout decisions, rather than the current guideline system which focuses on micro layout decisions?


#2

Hi @ahobday, thanks for the input!

We have plans on making grids a first-class citizen of Mockups in our next major version of the app. Thanks for your ideas, we’ll keep you posted!


#3

I just sent you an email about rulers and guidelines. As explained (and argued) in my email, this is a major bug. I just purchased Basalmiq and this is major functionality missing. I am not terribly pleased that whatever improvements are made (and in my case I want rulers and guidelines, preferably like Photoshop where you can drag in as many guidelines as you want both vertically and horizontally), they will be in a new major release that I will have to pay for. As a bug, it should be fixed with updates to the current release (or offer version 3 users a free upgrade to version 4).


#4

Hey Rob,

Just replied to your email, but I will put the rough thoughts here in case you see this first.

While guidelines are something we want to do in a future version of the app, rulers are still something we are hesitant to add. Mockups is meant to be a starter tool - something to get your idea out of your head and onto a canvas. Rulers may confuse folks, making them think that the app is more precise (or worse, complex) than we want it to be.

We want mockups to be freehand and fun.

But, with that said, rulers are something we have talked about in the past, and something we can talk about again. Every feature is one good conversation away from implementation. I will make sure the development team sees your comments so that we can talk about it again. :slight_smile:

As for upgrades, we haven’t decided how we are handling that yet, but we will talk about it our blog once we do.

Thanks again for talking about this with us today, my friend. :slight_smile:


#5

Moving the conversation out of email to here.

The ruler/guidelines simply have to be fixed. While I agree that a mockup is often imperfect, there is imperfection and then there is imperfection. Something so fundamental like making sure your screens are aligned are completely outside of the scope of what anyone could call perfection/imperfection. Without rulers/guidelines, the mockup looks unprofessional (try selling something lopsided to an angel or other investor!) and this will cause me to log bugs you have where your smart guides are not as smart as they should be because the guides do not consider all objects — especially when locked or grouped or the entire canvas you are working on (I really don’t want to do this, but I will because the issue is driving me crazy). The smart guides also do not even consider the grid underneath, so what value is there to the grid and can you change the spacing on the grid?

At a bare bones minimum, create 2 new symbols for “design” vertical and horizontal bars that have a special quality “hide design vertical/horizontal bars” that will only effect these special bars. At least then we would have virtual guidelines.

Currently, the cumbersome workaround is to create a vertical/horizontal line, color it red, keep it there to do alignment, then delete it. This is not a good way to work.

With all of this said, I appreciate your responses and how much all of you stand behind the software. One day you might decide to use the software I am designing (and why I purchased Basalmiq to do mockups for it) where getting the voice of all users will make everyone’s life just a little easier in these cases. You are already doing the part most companies struggle with, and that’s listening and engaging with your customers. See my blog Your Idea Counts! on my Shapiro Cloud consulting page.


#6

This is actually a really good opportunity to re-open the conversation of rulers again. What do folks think about them?

If you’d like to see them added, you can like this post or reply. Rulers are definitely near the top of the most requested feature list, and I’d love to see if more folks have opinions on them.

@Rob-Basalmiq, I can absolutely see your frustration with the lack of rulers. The workarounds suck as well, which doesn’t help. The team will definitely be talking about this again soon. :slight_smile:


#7

Will guidelines (minimally) and rulers (nice to have) be in the next release or update to desktop? I continue struggling with imperfect alignment on my mockups. I have to make a presentation to a local bank soon and I am spending an incredible amount of time making sure it is not lopsided.


#8

Hi Rob,

The trick I use for grid is simple, but useful.

  1. Greate a grid with rectangles, which imitate columns and gaps between them
  2. Select all the grid, and set opacity property to it, 75 to 25% range is OK
  3. Set Treat As Markup property for the grid (CTRL + SHIFT + K)
  4. Lock the grid (CTRL + 2, CTRL + 3 to unlock)
  5. Draw anyhing using grid alignment, as on the GIF
  6. Toggle the grid (and the rest of the markup elements) (CTRL + K)

Note: don’t group the elements in grid, as alignment doesn’t work for the elements within group.

Please let me know if it works for you )


#9

Hi Alexey,

Thanks for the tip, much appreciated, but it really does not resolve the problem of not having guidelines (horizontal and vertical) in tandem with some serious issues where Balsamiq will not always align to other objects.

It also doesn’t answer the question as to whether or not this will be in a future update or upgrade.

Guidelines (with snapping) is so fundamental to any design tool.

Rob->


#10

Hi @Rob-Basalmiq and thanks for reviving the topic.

We still haven’t any firm plan for these features but we’ll continue to monitor the need and discuss it with the team.

I’m sorry that I don’t have a better answer for you today but please let us know if we can do anything else for you.


#11

Rob,

I agree with your arguments. Balsamiq definitely should have native guidelines, as these are the basis for the good design.

Also, for some (strange) reason, I use Balsamiq not only for wireframing, but for the presentation creation, diagramming, note taking, etc. And I would like for Balsamiq to support these activities, as well, including typography, etc.

Hey, Balsamiq, which substance have you add to the product, so it is so attractive for me? :heart_eyes:


#12

@Virgin Implementing guidelines is not rocket science, should not be the cause of great debate and I’m not clear on how or why this interferes with Balsalmiq’s “wireframe philosophy”. I do not have the time to log bugs every time one object does not align properly with another object, but there are tons of times this happens and if there were guidelines it would alleviate the problem.

@Alexey_Kolchenko Thanks for your support. I think your use case for more than wireframing falls more in the talked about “Pro” version and I would definitively support that. I also don’t think a whole lot has to be added to get there from the point of view of being able to prototype with wireframing tools (i.e. let a UI expert figure out how to beautify it) — maybe it’s time for a new term — protowiring? :sunglasses::grinning::laughing:


#13

Sounds good, I hope Balsamiq will take it into account :wink: