Projects

Midterm Project: Hyperlinked Flow

We generally think of text on the web as a linear flow of content—the pages of a book or magazine compiled into one long page. But given that the web was built on the hyperlink, flow can be nonlinear as well. It can go back and forth and tangentially through content. Think of a choose-your-own-adventure book, or getting lost in a wikihole.

Select a piece of text that is between 250–300 words. It could be a few paragraphs from a novel or newspaper article, a long poem, a few verses from a song lyric, a series of sequential tweets—anything that is important to you. It should be something that we would generally read in a linear way (i.e. you should not choose a restaurant menu, for example). You will then break up the text into a hyperlinked series of webpages to guide a viewer through it.

How you choose to do this is up to you. Minimum requirements:

  • Minimum Number of pages: 6
  • At least one page with Text only
  • At least one page with Images, Illustrations, or graphics only

Some considerations: Think about a conceptual framework(s) that reacts to the text in a meaningful way.  Think about your decisions to break up and sequence parts of the text. Which words should be hyperlinks? What typefaces are you going to choose and why?

What images will you choose? Will you use existing imagery or make your own? Which parts of any imagery should be clickable?

Should there be multiple ways to explore or only one linear path? Would a navigation system add meaning to the experience for the user, and if so, how should it look & function? Are knowing the title and author of the text important for the user experience?

Some Inspiration:

Part 1: Choose a Text (Due 2/16/17)

Choose your text and provide a brief 2–3 paragraph written explanation of why you chose it, why it is meaningful, and how this text was originally intended to be experienced by a viewer. Submit a 2-page PDF with the original text on Page 1, and your response on Page 2.

Part 2: Site-Map, Wireframes (Due 2/23/17)

Develop a site map that demonstrates the structure of your hyperlinked website. It is here that you will make decisions as to how exactly the text will be broken up. On your map indicate how each page links to others and how all your content will be split up across pages. Submit the final file as a PDF, it should be neat, clear, and organized.

Create low-fidelity wireframes for all pages. These could be pencil sketches, or quick PowerPoint slides. Submit them as scans or digital images. Original paper submissions will not be accepted. However, please write legibly — if you know your handwriting is difficult to read, create it using the computer.

Part 3: Mockups (Due 3/2/17)

Using your preferred graphics software, create detailed mockups of all of your pages. This is the time to experiment visually, explore visual treatments and typography and layouts and spacing, and play. Use your wireframes as a guide for what content should be included on each page, but don’t feel forced to stay to the exact layouts from your wireframes.

Part 4: Production — Markup and Style (Due 3/16/17)

Based on your mockups, code your site using HTML and CSS. Pay attention to your file structure and relative URL paths. Upload your site to your personal hosting space through FTP.

Part 5: Refinements and Final Critique (Due 3/30/17)

Make refinements based on feedback from last class, upload to FTP & present your final work to the class.

Key Objectives & Skills:

  • Typographic experimentation
  • Layout experimentation
  • Narrative, linear and non-linear flow
  • Correct HTML and CSS usage
  • Site-maps & Wireframes
  • Site organization and file structure

Final Project: Navigating the Infinite Canvas

Designer Craig Mod, influenced by Comic Book artist Scott McCloud, has defined the experience of reading in the digital age as reading an infinite canvas. What we are seeing on our screens is a frame, only part of a story, one that requires scrolling in any direction. Google Maps uses this idea as a foundation of its UX. Prezi used this idea to slightly change the paradigm for slide presentations.

Often Designers must come up with ways to help users navigate such boundless space. Arrows, controlled scrolling, dragging, zooming, pinching, swiping  — navigation methods are usually essential to any interactive experience.

Your final project should respond to this idea of the infinite canvas in the form of an interactive website. How you do that and what your subject matter is is up to you. In some way, the site you create should respond to user behavior to lead to other parts of the “world beyond the frame” of the screen. Most importantly, what is the appropriate navigation system to help users explore this space? Should the elements of the navigation operate seamlessly or could they proactively enhance the users experience of the screen content?

Your site must incorporate some javascript or jQuery, whether it is a custom function, a plugin, or even a simple slideshow.

Some Examples:

Due Dates:

Part 1: [Due 4/20/17] Ideation, research, wireframes, & visual mockups

Please prepare a 2–3 paragraph explanation of your goals and objectives with the site—what is your subject, why have you chosen it, what specifically interests you about it, who is your intended audience? How do you plan to approach the navigation of the site?

Then, I would suggest gathering some references and influences to help guide your approach or find examples of what you think successfully handled the issue you are trying to solve.

From there, create quick sketches, either low fidelity or high fidelity wireframes, and then visual mockups based on those wireframes. If you get to the wireframe stage and want feedback from me, I can try to provide that by Tuesday or Wednesday.

Please plan to make this all in a shareable format (PDF, presentation, etc) that you can show and discuss during class (either one-on-one or small groups).

Part 2: [Due 4/27/17]:Prototype (Markup & Styling) and small group crit

Begin to code your site and bring it to life. Gather any image and text content you may need and create the beginning framework of your site according to your wireframes and mockups. Make sure your links work, and CSS is appearing accurately, especially any web typography you may like to implement.

Part 3: [Due 5/4/17]: Refined Prototype (incorporate Javascript) and small group crit

Part 4: [Due 5/11/17]: Final Crit

 

Key Objectives:

  • Conceptual exploration of Navigation & Frame
  • Javascript or jQuery
  • HTML & CSS