Interface Prototyping

Novice

Some HTML and CSS has been written, but it’s a little (or a lot) broken. Nothing particularly ambitious has been attempted in the HTML/CSS prototype.

Competent

The basic design works and is responsive, and the page(s) are mostly complete. Code could probably be better organized or cleaned up, but the prototype conveys clearly the design concept within a web browser.

Proficient

The design feels solid in the browser, and code is well-organized and documented.

Expert

Every detail in the design has been considered in implementation, with interactive states considered throughout. Accessibility has also been considered and implemented. Are you sure you’re in the right class?

Novice

The prototype has some obvious mistakes, such hotspots that go to the wrong place

Competent

The prototype has appropriate hotspots and corresponds to the flow and task(s) at hand.

Proficient

The prototype is detailed, including all or most of the smaller interactions along its path

Expert

The interactive prototype feels seamlessly like the real thing, giving a clear vision of the product look and feel.

Novice

Low-fi prototype is too difficult to see or read, requiring too much explanation to give good test results

Competent

Low-fi prototype balances speed of creation with clarity so that ideas can be tested

Proficient

Low-fi prototype has realistic content throughout

Expert

Master sketcher! (but not overly indulgent)

Novice

Mid-fi screens either don’t include realistic text content or are too visually developed distracting from the purpose of medium fidelity

Competent

Mid-fi screens use realistic text content and are at an appropriate level of fidelity for medium

Proficient

Mid-fi screens use realistic content which is connected to the persona/scenario/task

Expert

The overall process demonstrates that you’ve made solid decisions about when to move forward from medium fidelity, and when to return to it if needed.