Wireframes and Mockups

Below are a few of the mockups and wireframes developed for the Arcadia project:

Low fidelity wireframe 1 Low fidelity wireframe 2 High Fidelity Mockup

For a printable pdf click here.


The system illustrated here allows users to compare multiple versions of any given text (in this case Arcadia) to other versions. As you compare versions you will be able to either hover or click on links for annotations to be populated in the field under the text. In the high fidelity mockup the following is illustrated:

  • Bold/italicized/dark blue text: Text change after click. Allows user to see what they clicked on so they don't get lost.
  • Blue text: Indication that annotation exists for that sentence.
  • Menu on right: Example of hover and drop down select for editions/versions. (Editions listed are placeholder text unrelated to Arcadia)
  • Example of scroll bars: The main areas' scrollbars would be linked, so if you scroll in one section it will scroll the other. This is to make comparisions simpler.
  • Arrows on side of screen: Indicate an option for pagination.
  • Bold number at beginning of text: The number of the section/page/stanza/chapter.

Possible usability features in this system

  • Swipe left or right with finger for pagination. Mobile (tablet) friendly/touch screen support.
  • Keyboard arrow keys (left/right) for pagination

Purdue University, West Lafayette, IN 47907 (765) 494-4600

© 2018 Purdue University | An equal access/equal opportunity university | Copyright Complaints | Maintained by CLA

If you have trouble accessing this page because of a disability, please contact the College of Liberal Arts Webmaster.

Some content on this site may require the use of a special plug-in or application. Please visit our plug-ins page for links to download these applications.