Hitchhiker’s Guide to Notable

Navigate the Guide

Notebooks

Notebooks allows you to quickly give contextual feedback on design work. Your uploaded screenshots, mockups, or sketches (or “Pages”, as we refer to them) can be combined into “Notebooks” for simple organization and sharing.


Creating a Notebook

Creating a Notebook is the first step to designing something in Notable. One or multiple images can be added to a Notebook as Pages. It’s super easy and fast! There are multiple ways of creating a Notebook:

  • Upload Images: Drag in JPG, PNG or GIF images from your desktop. Or click on Upload Images to select images you want to upload.
  • Upload PDF or PPT: Click on “Upload PDF or PPT” to select a PDF or PPT file from your computer. We’ll create a Page from each individual page in your file.
  • Capture URL: Not only can you capture live web pages using the browser plugins, you can also capture URL’s from the app. Just type in the URL and start capturing pages one URL at a time.
  • Select Pages: So you got a bunch of unorganized Pages on your dashboard? Clean house by putting Pages into Notebooks here.
  • Capture Pages using our browser plugins: This is the easiest way to capture live pages and get them into Notable for detailed feedback.
    • Chrome
      Notable will capture a screenshot of the site you are currently on and open a new browser tab. Click over and add your notes to the captured screenshot. Add-on’s for other browsers will be coming soon!

Annotations Notaball!
Notable tip!

Titles and descriptions are key to a great presentation. Use a “because” statement in your descriptions to give context to your design decisions. For example “The call-to-action is bright blue, because contrast helps user find the button.”


Organizing Notebooks

Presentation is all about storytelling, so we make it easy to organize your presentation just the way you envision presenting it. Rearrange your Pages in just the right way by dragging them by the handle into the right position.

Drag posts by their handle

You can view your set in various layouts which are useful in different situations.

Sets have Grid, Feedback, and List views
  • Thumbnail View is the default view, and lets you get a snapshot view of your Notebook. This is where you can see activity on your Notebook and individual Pages at a glance.
  • List View shows your pages as a list. This is useful as it offers you an easy way to view comment threads for each Page within your Notebook.
  • Reorder View shows your Pages in list form as well, however this allows you to quickly and easily reorganize your Pages as you would like them, while in list form.
  • View Archived Pages allows you to see what Pages have been archived within that specific Notebook.

There’s a lot you can do within your Notebook! All of the key actions can be found in the Edit menu.

  • Archive Notebook allows you to archive your entire Notebook, so it does not clutter your dashboard alongside your other active work.
  • Archive Pages allows you to archive a specific Page of within your Notebook.
  • Add Page is an easy way to upload any number of additional Pages to your Notebook. You can also drag JPG, PNG, or GIF images directly into the Notebook! Your Pages will be added to the bottom of the Notebook and automatically be titled using the same file name.
  • Add Section allows you to create a section within your Notebook. It is a great way to further organize your Notebooks.
  • Delete Notebook will allow you to delete your entire Notebook. This option removes it entirely and there is no way to get it back.
  • Delete Pages will allow you to do the same for your individual Pages. Again, this option is a permanent removal of a Page.
Annotations Notaball!
Notable tip!

A super fast way to delete Pages is to drag them into Trash in the lower right corner, which becomes visible as you start dragging Pages around.
Drag posts into trash


Working with Pages

Once you open one of your Pages, you will immediately be able to start using the annotation tool.

If a Page is part of a Notebook, you’ll find a navigation tool in the top right of the screen. You can see what number Page you are viewing within your Notebook and you will see arrows which will allow you to move from one Page to the next. This is the fastest way to peruse the Notebook and hop between Pages.

Add posts to a set

At the top left corner of your page you will find all of the key action options. This starts with the Edit button, which gives you further available actions:

  • Add Version to show how your work on any particular Page has evolved.
  • Replace Page allows you to replace your current Page with a new one very quickly within a Notebook.
  • Archive Page will allow you to archive the Page you are currently working on.
  • Add Page will allow you to add a new Page to your Notebook.
  • Delete Page will allow you to permanently delete the Page you are working on, from your Notebook.

Other actions you can take are Download your Page as a JPG, Move your current Page to another project or Notebook of your choosing easily, or View your page in the original size (Show Original) or fit the image to the screen Fit to Screen).

Navigate the set using forward and back arrows

Lastly, if you want to share your Page or Notebook with a collaborator, it’s as easy as selecting the Share button at the top right of the screen. You can’t start getting feedback unless you let people see your work!

Annotations Notaball!
Notable tip!

Another functionality of the Notebooks module, allows you to cleanly present your Notebook in full screen. Just click the Enter Full Screen button located at the top right of the Page. This is great if you want to present certain parts of you work, and would like to do it in a clean, clear format!


Page Versions

Adding versions is how you can easily show iteration on your work. Each version can have its own description and set of notes and comments. The title, however, is shared between all versions.

To add a new version, find the Add Version option, that we previously mentioned above, in the Edit dropdown. You’ll then be prompted to upload an image, capture a URL or select an existing Page from your dashboard or projects. You can only select one image or Page to be added as a version, at time.

Navigate the set using forward and back arrows

Initially your version will appear as a Draft. Nobody on your team will be able to see it yet. This lets you add notes or description for the post version. When you’re ready, click Publish to make the version live. Your older versions will then appear collapsed for future viewing.

Navigate the set using forward and back arrows

It’s also easy to change the order of your versions if needed. Just click Promote Version on the Page version you want to appear first.


Annotating Pages

Adding notes directly on your work lets you give contextual feedback on specific elements of the screen. Just click on any part of the uploaded image on your Page - click and drag to highlight an area, or just click to create a 100x100px highlight spot - then add your note message.

Versions first appear in draft

If the note message is left empty, the note will get discarded. If you change your mind about adding a note, you can click Cancel to discard it or delete any unnecessary notes by clicking on the X.

Once you have created a note you are satisfied with, you can click save, or hit the return key, to save the note to the Page.

To review notes, you can hover over notes to quickly see contents and comment thread for any note. Once a note is selected, you can also use the up and down arrows to move through the annotations on your page! To make refinements on a note, select it first, then edit the highlight area or the note itself. Admin users also have the ability to edit anyone’s notes and comments. Use your powers for good, not evil!

Annotations Notaball!
Notable tip!

Creating an annotation aimed at a specific team member? No problem! Just use the @mention feature while typing the text of your annotation! Once you post the annotation with the @mention in it, the team member that was mentioned will receive a notification on their account, linking them directly to your note!

By default, we show all notes with their comments threads on the Page. However, you can filter visible notes by toggling user names whose notes you want to see. The button to filter your notes is in on the top right of your Page. You can identify it by noting that it displays the total number of annotations you currently have.

Versions first appear in draft

Furthermore, if you want to view only your Page Image, you can entirely hide the right annotation toolbar by clicking the slider button at the top right of the Page. To view it again, just click the same button!

Annotations Notaball!
Notable tip!

Sometimes it can be difficult to locate specific notes on a Page - especially if you have a lot of them. Not to worry! If you click on the number of any note in the right side tool bar, it will immediately highlight and take you to where that note is on the Page image.


Comments

Besides annotating your page, you can also engage your team by making comments on individual notes, or on the Page as whole.

Commenting on notes creates comment threads. For any note, click Reply to add your piece of feedback. You’ll be able to see who said what and when. Commenting on notes can be done while viewing your Notebook or specific Page.

Add feedback notes to a post

Besides commenting on individual notes, you can also comment on the Page itself. This is useful for giving feedback that isn’t tied to any specific element on the screen. These comments are shown to the right of the Page image and give an option to attach an image or another Page to your comment.

Page comments are enabled by default and can be turned off by an admin user or Page owner. If comments are disabled after some comments were already left, those comments will stay put.

Add feedback notes to a post

To delete a comment, click Edit, then Delete. As with notes, Admin users are able to edit or delete any comment on a Page.