How To Construct a LoFi Wireframe in Adobe Comp CC

How To Construct a LoFi Wireframe in Adobe Comp CC

A LoFi Wireframe uses boxes to indicate content type and placement.

In the previous installment of this series we started the design process by using Adobe Comp CC to work out the information hierarchy and content placement using a Content Wireframe. In this installment we start adding a bit of structure to the Home Page wireframe by using primitive placeholders to decide what content goes where on the page.

For those of you encountering the term “LoFi” for the first time a LoFi wireframe is nothing more than a monochrome series of boxes indicating where content could be placed.

I decided to have a menu icon, a search icon, the name of the camp as well as Reservation and Directions links in the Header.

The Content area would consist of a large image reinforcing the page as well as a headline with some descriptive text about that section.

The Navigation area at the bottom will consist of a series of four icons that will link to the four main areas of the camp: Camping, Hiking, Canoeing and Day Use.

With those decisions made, I could turn my attention to where they would be placed on the page.

Let’s get started.

The Emerging Workflow Series:

How To Use The Adobe Comp CC Gestures

The Adobe Comp CC gestures for wireframing on an iPad.

Though you can use a pen or stylus with Adobe Comp CC – I use both an Adobe Ink and an Adonit Jot Touch – you can also use your fingers to create the boxes and so on found in a common wireframe. The really neat thing about the gestures is you only have to roughly create the shape and the app will magically produce it. The gestures are:

  • Square: Draw a box.
  • Circle: Draw a circle.
  • Rounded Rectangle: Draw a square and a circle over one of the corners.This is a quick way of indicating a button or icon.
  • Chamfered Rectangle: Draw a square and then draw a line across a corner.
  • Image: Draw an X or a Square with an X inside the square.
  • Rounded Rectangle: Draw an image square and circle one of the corners.
  • Circular Image: Draw a circle and an X though the circle. This is handy for badges or masked images.
  • Triangle: Draw a triangle.
  • Corner: Draw a 90-degree rectangle.
  • Polygon: Six lines.
  • Headline: Daw a box and add a dot to the right or draw a line with a dot to the right.
  • Multiline text: Draw a series of lines and add a dot to the right of the last line.
  • Paragraph: Draw a box and add three lines inside the box.
  • Erase: Draw a wavy line over the shape.

The swipe gestures are also very handy:

  • Zoom:  Two finger pinch outwards to zoom in, inwards to zoom out.
  • History: Drag three fingers across the screen to the left and you can go back in time. Drag to the right and you move forward. This gesture is especially useful if you make a mistake.

If you can’t remember a particular gesture, simply tap the Draw icon to move into Draw mode. At the top of the interface is a question mark in a circle. Tap it and the gestures will appear.

Drawing The LoFi Wireframe in Adobe Comp CC

It took all of 30 minutes to draw a few variations of the wireame.

The process of drawing the wireframe placeholders is remarkably efficient. The whole point of this step is to show where content will be placed… not the content itself. As well, due to it’s lack of sophistication, you can rapidly iterate content placement and produce variations of the design in a very short time.

To start, I opened a new iPhone 6 Plus page, tapped the Draw icon- the + sign to the left- and drew the box box for the Header. This box was filled with a medium grey to provide a bit of contrast.

I then drew a headline and, using the text properties, coloured it white. I then added two image boxes for the Search and Menu icons. I also added a couple of headline placeholders for the Reservation and Directions links. To make the text smaller, I dragged the size slider, which appears when text is selected, downwards. I used the Smart Guides to ensure they were aligned on the page. If you don’t see Smart Guides- they are purple lines- tap the Gear icon at the top of the interface and turn them on.

The rest of the page was constructed using the same techniques used for the Header.

Total time spent drawing the lofi wireframe: 30 minutes.

Location: Local coffee shop.