Hitchhiker’s Guide to Notable

Navigate the Guide

Code

Code allows you to quickly give share coded prototypes. You can annotate directly on any part of your site, on all mobile and desktop sizes and get feedback directly on your code. You can upload progressive versions of your prototype so you can view the changes in each iteration.


Upload Your Code

Creating a hosted prototype is super easy. Zip up your site folder with just the static HTML, CSS, and Javascript. From your dashboard or project in Notable, click the “+” button and select Code from the dropdown menu.

On the upload page title, click the Upload Files button, then choose your zipped folder. You can also drag and drop your folder into the upload area.

Upload your HTML, CSS, and Javascript code in a zip folder to create your prototype.
Title your hosted prototype.
Notable tip!

Use the upload time to come up with an awesome title for your prototype. Code will default to the prototype file name if there's no title, but you can make it even awesomer with a descriptive title.

Upload Requirements

  • Uploaded folder must be zipped
  • Contents of zipped folder should be static HTML, CSS, and Javascript. No PHP or fancy stuff.
  • Nested folders are OK
  • 100MB maximum file size

Once you have uploaded your folder. Code will build out your static prototype so you can click through it and annotate it online.


Annotating Your Code

Click and drag to create an annotation on your actual coded sites. You can make contextual notes on all mobile, tablet, and desktop sizes. Your notes will be tied to the screen size in which it was created.

Iterate on your prototype and upload new versions.
Title your hosted prototype.
Notable tip!

Too many annotations? To quickly find an annotation you are looking for, simply click on the one you wish to view in the side-bar. You will then be immediately taken to the screen size it was made on. The note will be selected and highlighted for easy visibility!

Toggling Annotations On/Off

If you wish to view your coded page as it was originally uploaded without seeing any of the annotations, you can simply click on the toggle annotations button in the top right of the page, directly to the left of the Share button.


Viewing and Presenting

If you want to present or view focused feedback on a specific device, you can filter your notes by screen size.

Iterate on your prototype and upload new versions.

You can also enter into full screen view which allows you to present your coded pages, so you can really paint a story of your website by walking people through it!