The Split Infinitive
Created as a project for my Usability class in school, the fictional “Split Infinitive” bar is a good example of just what goes into the creation of a website. The assignment was to take the content from an existing poorly designed site for a local bar and recreate it with the user in mind.
My finished design has the content organized into four main sections, and puts basic information like the bar’s location and phone number on every page — something that was difficult to even find on the original site. Since this project was an exercise I was also free to boldly go ahead and give my fictional bar a terrible name.
User testing, wireframes, and the logo and design are described below.
- URL http://split.bryanknauber.com
- Completed 2010
- Project type School project (IM4440 Usability)
- Role Strategy, design, markup
- Technology used XHTML, CSS, JQuery
User Testing
User testing can (and should!) be done at every stage of the design process, and once a working prototype is available the feedback from someone unfamiliar with the site actually using is invaluable.
This clip shows one of my tests with a roommate, who I sat down with and gave a series of tasks and asked him to think out loud as he did them. Though only 45 seconds long, it's plenty to give an idea of what the process is like.
Sketches and Wireframes
After determining what content would be carried over from the existing site and how it would be organized, the next step is to determine how it should be laid out on the page. I sketched on paper every main page and then created more defined digital wireframes.
Visual Design
Since the bar is fictional, I started from square one to create an identity and visual language. Free and appropriately licensed images from a variety of sources are modified to have a uniform feel for the various headers throughout the site.