Guides and Grids UI

Mock History

Current Revision

Mock Description

Guides System

Canvas workflow
Creating Guides: New Guides are create by clicking and dragging from a horizontal or vertical ruler. If rulers are not enabled, you cannot create a guide with the canvas. STRETCH GOAL: You can also create a guide by double-clicking on a ruler. This will bring up a dialog. See point 2 on guide settings for more details on this new dialog.

Moving Guides: Guides are moved by hovering your cursor over the guide. The cursor will change to a new move icon and the guide will slightly change colors. Clicking and dragging will move the guide. The guide is also selected at this point.

Deleting Guides: When a guide is selected, you can press the Delete key to delete it. You can also delete a guide by dragging the guide over the ruler and releasing your mouse/stylus.


  1. Enable Snapping, Snap to Grid, Snap to Guides, Objects actions will all be accessed through the Settings Main menu. They will all be in a new menu category called "Snap"
  1. Guides will automatically be saved and loaded within KRA documents.
  1. STRETCH GOAL: Add Margin Guides. This action is only on the main menu. It will bring up a dialog and allow you to put a measurement (eg 20mm). When you click ok, 4 guides will be created 20mm inside of the canvas. This simulates adding a bleed or safe area for printing.
  1. Loading/Saving Guides. Main menu option to load and save guides setup.
  1. New Guide (STRETCHGOAL?). You can create a new guide from the main menu. A dialog will appear where you can select the type (horizontal or vertical) as well as the position. You can specify what unit of measurement. By default, it will use what the current ruler unit of measurement is. This is designed to help with exact placement for print.

Grid Docker

Grids will be managed via a new Grid Docker.

Enabling Grid: In the Grid docker, there will be a checkbox to show or hide it. Default is to hide it (Show is unchecked). There can also be an action in the main menu to show/hide the grid which already exists currently.

Editing Grid: All of the options to edit a grid will be in the grid docker

Hiding Grid: There is no removing of a grid, but simply hiding it. This can be done by unchecking the "Show" checkbox in the Grid docker.


  • Settings will be moved from the preferences to a Grid docker.
  • The Move Grid tool on the toolbox will be removed. If we need that functionality. It might be better as a "Move" button in the grid docker.

I added a couple of screen shots. There really isn't that much user interface work with these two stretch goals. Most of the discussion seems to be around what settings will be in the grid docker, or how the user interaction of the guides will work.

I can certainly make more updates to the mockups if needed.

Nice layout of the settings.