Wireframing

* For a downloadable PDF, scroll to the bottom of this tutorial.

A wireframe refers to a basic blueprint for any website or screen interface. Mocking up a site’s appearance and flow before building helps you anticipate any issues that may arise and forces you to consider qualities such as user experience and navigability.

balsamiq1

Fig. 1: An example wireframe.

Exercise

Once your group has gathered enough materials for your project and have better understanding of the scope of your content, you can begin to organize and map out your final project site with wireframing. Many applications are available for mocking up the design of your site, but web-based applications with access to free trial versions are preferred, such as balsamiq, which offers set of graphics tailored for website mockups. Of course, you can use any applications or even more general tools such as InDesign if you have access to them.

Keep in mind:

1. The organization of your content should reflect the scholarly priorities of the project.

2. Since you’re not designing a website from scratch, anticipate what design features are currently available in WordPress or Omeka themes.

3. Navigation and usability are important.

Using Balsamiq

Click on the Web-Demo Version, which will open in a new browser window. Start by clearing all the preexisting graphics by clicking on the “Clear Mockup” under “Mockup”.

1. Double click on any “box” to edit the text component.

2. Familiarize yourself with the “Grouping” feature. It makes all of the selected elements into an unit, so that they can be moved around within the mockup as a group.

3. “Lock” option fixes the position of the selected elements on the entire layout. Once it’s locked, it can’t be moved around with mouse drag. A couple of helpful short cuts include: [control + 2] for lock; [control + 3] for unlock.

4. Layering: As you add more graphics to the mockup, sometimes certain elements will disappear from view. This is most likely the result of the previous graphics hiding behind the new ones. Use the layering option to place various graphics in the front or in the background. Group the graphics after establishing proper layers to prevent unintended edits as you move along.

5. Copy and Paste, as well as Duplicate options are available to make the process easier.

6. Use the note or text box to add comments in the areas that need further explanation.

7. IMPORTANT: Save unfinished mockups as XML file, which can be imported later in balsamic for further editing. Save the final version as both XML and PDF. You will submit the PDF version along with other documents for the mid-term design meeting.

* To download this tutorial, click here.

(2013, David Kim)

Copyright © 2014 - All Rights Reserved