You're Invited To The Clarify.io Beta!

You've been selected to be one of the first users of Clarify. I'm really happy to send you this invitation, which allows you to play around with an early beta of the Clarify Frontend Development Toolkit. You'll take an important part in building a great product. I hope you like being an early adopter and I really appreciate your help and feedback.

Before You Start

Please keep in mind, that this is a very early version and you should not use it for critical & super-secret stuff yet, just in case. There are still many missing features, especially the fonts layer and the behaviour layer, as well as the full version of the eye-catching styleguide. I'm working hard on these things. They will be released as soon as they become usable. There is a lot more to come, but I want you to see the product growing from the beginning. I recommend to use Chrome for this early version.

In the next few sections, you'll learn how to use Clarify. Click on the following personal invitation link to get started by creating your account (using Twitter)

http://beta.clarify.io/auth/

Please don't hesitate to ask or send feedback, it really helps me to improve Clarify. If you have any problems how to use things, just drop me a line.

Your First Project

After you've authenticated yourself using Twitter, you'll see an empty workspace with no projects in there. Create one, by clicking on "+ Add" next to "Projects" in the left sidebar. Then, upload a new screen by clicking on the "+" button or by drag and drop from your finder/explorer. The name is currently taken from the file name.

Comments Layer - Annotate Your Screen

Change to the screen view by clicking on your recently uploaded screen. Initially, you'll see the comments layer. In this layer you can add annotations to your screen by double-clicking on the screen. Add a text to the annotation by clicking on the black dots. You're able to delete annotations by activating the "Delete" mode on top. Try to move the dots around or resize the text area.

Measure Layer - Bye, Bye Photoshop

Switch to the measure layer by clicking on "Measure" in the top bar. Drag a rectangle with your mouse, after mouse up, you'll see the created measurement with the according dimensions in pixels. The magnifier will help you to do it pixel-perfect. You can move things around and resize them in every direction.

Color Layer - Manage Your Color Palette

With the help of the magnifier, you can pick colors by single-click on your screen. You'll see the active hex code live together with the magnifier. The color will be added to the project-wide color library. If you want to reuse a color from the library, just drag and drop it from the bottom bar. By the way, you can delete colors and measures by double-clicking them.

Auto-Generated Styleguide

Clarify automatically generates a Styleguide for your project. You can view it by clicking on "Styleguide" in the screen browser sidebar at the bottom. The Styleguide is currently in a very early version, there are just annotations, colors and fonts in there.

Screen Embedding

You want to reuse these nice annotations you've made on your screens. No problem, just embed them into your Wiki, Bugtracker or whatever system you like. In every size. Click on "Embed" on top in the comments layer. Currently, only comments (dots) are supported, more to come.

Thank You!

To learn more about the idea, the concepts and roadmap behind Clarify, please have a look at the Clarify - Behind the Scenes Blog.

Don't forget to follow @clarify_io and @rogerdudler on Twitter for Updates.

Cheers
Roger & the Clarify Team

roger@clarify.io, Skype: rogerdudler