Technical Solution

Tips for creating wireframes with OpenOffice Calc

Anoop John | | 4 min read

OpenOffice Calc is surprisingly an excellent tool for creating wireframes. Wireframes can be created very easily in OpenOffice Calc using the standard shapes available from the drawing toolbar and also by merging cells in the sheet. Each sheet can be used to define a single wireframe and then a single spreadsheet document can contain all the wireframes for a given project. OpenOffice Calc also allows you to export the full set of wireframes as a pdf document with one page corresponding to each sheet in the document. Here are some tips to create good wireframes using OpenOffice Calc.

Tips for creating good wireframes with OpenOffice Calc

  • Ensure that pages are consistent in width
  • Ensure that most pages are consistent in height as well.
  • Ensure that objects are aligned correctly and nothing is jutting out or incorrectly placed
  • Ensure that spacing is uniform between objects in the same context
  • Ensure that everything is aligned to something
  • Ensure that the page area (either merged cells or large rectangle) has a border drawn so that the final wireframes have page borders.
  • Ensure that the numbered markers are aligned correctly along a vertical line when the descriptions are written out to the right.
  • Ensure that borders are aligned with each other when there is no spacing expected between two given boxes.
  • Ensure that the numbered markers are always placed consistently on a fixed corner of the box, say top left.
  • Use a color that stands out for the numbered markers. Yellow is a good option.
  • Preview your work multiple times while working on your first page to ensure that everything looks correct.
  • Once you have a good page, duplicate the sheet and work on further sheets to allow for consistency across the sheet for common elements.
  • If a given page requires a lot of numbered markers then duplicate the sheet and use two sheets to define the same wireframe. This will prevent the page from sized too small when zoom to fit is set.

Drawing Objects

Enable 'View' >> 'Toolbars' >> 'Drawing' to enable the 'Drawing Toolbar' which usually appears near the status bar of the application. You can then select on the shape you wish to add and then draw the shape on the sheet. Most of the requirements can be met using rectangles. You can use numbered circles as markers for each region. You can double click on a shape to add text inside the shape. The markers can then be listed to the right of the wireframe and then descriptions written against these.

Align Objects

When you draw boxes or shapes in the spreadsheet you will find it difficult to align them manually. However there is an easy way to do this. Enable 'View' >> 'Toolbars' >> 'Align'. This will show an alignment toolbar. Select multiple shapes and you can align them using the controls on this toolbar.

Group Objects

Once you have a set of objects aligned and set in place you can group them to move them like a single entity. You can do this by selecting all such objects (Shift + Click will allow you to select multiple
objects) and then right click >> 'Group' >> 'Group'.

Snap to Grid and Guide Lines

You can force 'Snap to Grid' and 'Show guide lines' in calc like most design tools allow you to do. You can do this by enabling 'View' >> 'Toolbars' >> 'Form Design'. The 'Form Design' toolbar by default should have the 'Display Grid', 'Snap to Grid', 'Guides When Moving' toggle buttons. If not you can add them by selecting them from the 'Visible Buttons' menu. You can click the arrow icon at the end of a toolbar and choose 'Visible Buttons' and then select the button you want to display.

Linking objects in a wireframe to another sheet

Action items in a given wireframe can be linked to another sheet by right clicking on the item >> 'HyperLink' >> 'Document' >> 'Target in Document' >> 'Sheets' - pick the sheet to link to.

Showing Overlays, Tooltips and popups

Duplicate the given sheet. In the second sheet show the effect of the hover or click event - eg additional overlay on the page, popup near the object, tooltip near the object. Link the object in the first sheet to the second sheet. Link the overlay or popup or tooltip in the second sheet back to the first sheet. So when the user clicks on the object in the first sheet it will take you to the second sheet and effectively show the effect of the hover / click event.

Page Orientation

Landscape mode would work best for most wireframes. You can do this by going to 'Format' >> 'Page' >> 'Page' >> Orientation - change radio to 'Landscape'

Zoom to fit

You can set scaling such content in each sheet fits exactly in one page. You can do this by going to 'Format' >> 'Page' >> 'Sheet' >> 'Scaling Model' - set to 'Fit print range(s) to width/height' and select width and height in pages as 1 each.

Set Print Area

Select 'View' >> 'Page Break Preview'.

This will show you the area that is going to be printed. If you select cells in the page and right click you will also see a contextual menu item 'Define Print Range'. This can be used to set the print range for the sheet. Select just enough cells to cover the content in the given sheet and then 'Define Print Range' to set the print area for the given sheet.

 

 

Related Topics