Blog

Whiteboard Wireframing

We migrated this website to a new platform, and are working to correct formatting errors in older blog posts as a result. If you encounter an error, please send an email to scholarslab@virginia.edu. Thanks!

Over the past few weeks, I feel our program is moving toward my, and others’ comfort zone. We are beginning to wireframe Prism on the whiteboard, so we can each come back after the Thanksgiving break with a few images of each of our main pages. There are new challenges that come from the wireframing process, but unlike some of our other tasks, the group seems more confident when articulating their thoughts about design. The whiteboard work last week got us to make a few serious choices about what the home page will contain, and how the site will be navigated. Without getting too specific, we have come to some consensus that we’d like to keep a constantly visible set of tabs at the top of each page to organize the site. This is not to say that other design schemas will not be offered in the future, but it does help us decide which elements we want visible on the home page. Our Tuesday group leaned toward offering a stylized image of a marked up text on the home page to act as a link to a “sandbox” of Prism. Sarah and I both toyed with the idea of a home page with three objects centered on the page to act as links to either the “about” page, the “sandbox” or the “text markup” page. For me, this kind of a home page was inspired by a site like https://github.com/ (after login) with its four immediate navigation options executed through elaborate icons. The tabbed form is strong in terms of being easily navigable, yet tabs themselves can only communicate so much before becoming messy. In addition, once a user has learned how to use the tool and wants to return to mark up texts, it seems strange to immediately click a small tab – that is exactly the same size as other tabs for the “about” page or the sandbox – to navigate away from the home page. I am going to advocate using both large icons to attract attention to the main pages, and tabs to navigate between them once the user has selected a option in the center of the page. As Brooke remarked in her post, it would be nice to create a narrative for how to use the site, beginning with a textual “how-to” and ending with the user marking up our texts/images… or down the road, their own. I agree that it would be helpful to visually direct the user through Prism. I am going to try to mock up some images for each of the icons before our next meeting, but right now I am not sure what form they will take. My only instinct is to combine some abstract element of the Prism logo with a representation of a text/image, a “how-to” filmstrip or some other element in the “use” narrative… although that might need some more thought. I also took a lot away from Joe Gilbert’s talk at the Scholar’s Lab, and I would like to see us all come up with visual examples of the Prism homepage that will call the user to action, yet offer a familiar method of navigation.

Cite this post: Ed Triplett. “Whiteboard Wireframing”. Published November 26, 2011. https://scholarslab.lib.virginia.edu/blog/whiteboard-wireframing/. Accessed on .