Clarify.io - Behind the Scenes

A Look At The Embedding Feature

2012-03-28T18:10:00Z

A nice feature of Clarify is embedding. It's still in the very beginning, you're already able to embed the comments layer. Think of embedding in your wiki, issue tracker or in presentations. No more drawing of dots in Photoshop & Co, struggling with aligning and stuff like that.

The dots are rendered as markup into the image. This allows us to add more behaviour to the comment dots in the future. Think about linking to detail pages, etc.

Example

<script type="text/javascript" src="http://beta.clarify.io/embed/UbjkDsu1/800"></script>

Small Width Example

You can also choose a smaller size by changing the width parameter. The comment numbers will be adjusted in size to the new width. Take a look at the following example, with 400 pixels width:

<script type="text/javascript" src="http://beta.clarify.io/embed/UbjkDsu1/400"></script>

Have you already signed up for the Beta? Not? Hurry on to get your invite as an early adopter on Clarify.io

For updates, follow @clarify_io or @rogerdudler on Twitter and read this blog.

A Look At The Project Sidebar

2012-03-23T21:10:00Z

Clarify allows you to manage multiple projects within your workspace. You can see the screen count on every project, delete it or change settings like e.g. colors for the comment dots or later resolutions or browser support. Here is a screen of the recently pushed design of the project sidebar.

I've planned to add a notification indicator on top of the screen count (red dot) with the number of new notifications on this project. This is not implemented yet, but shows where it goes when thinking about team collaboration.

I try to make every interaction as simple and comfortable as possible. Without too much noise. For example the creation of projects.

Have you already signed up for the Beta? Not? Hurry on to get your invite as an early adopter on Clarify.io

For updates, follow @clarify_io or @rogerdudler on Twitter and read this blog.

It's All About: Color

2012-03-22T21:20:00Z

In the process of bringing a design to life, you need to decide how you describe colors and their usage. You probably want to add color names (it's easier to talk about them), you want to know all the values, especially the HEX code and RGB(A) values. There are gradients (with two or more colors). You need to know where these colors are used in your screens and you probably want to provide a nice documentation for your client. This is what I thought it should be.

Color Picker

An important operation in the workflow is picking colors. Therefore, I've developed a color picker for Clarify, which allows you to pick colors directly in your browser. One challenge was, that it had to be very accurate. For this reason, there is a zoom tool, which allows pixelperfect color picking.

Normally, a picked color will be added to a CSS file and everyone will forget about it. Sometimes, there is also a styleguide for the client, for further use. In Clarify, every color you pick is stored in a database. If you pick a color twice, it will just create a reference to a library color (per project).

Color Library

Every color you pick is registered in your project and a reference to that color is created on the screen. You're able to keep your projects color library clean, reuse colors from the library in other screens or create a LESS template from your library.

Color Names

I thought it would be nice to get a name proposal for a color you pick. My plan is to implement an algorithm, which proposes a nearly accurate name ¹ for the picked color for better reference.

Styleguide

As a future reference, it's useful to create a color styleguide. I personally really like the color styleguide from ColorSchemer. I'll probably take this one as a base template. This styleguide will be just a listing of the project or screens color library. Because the data is in a database, no problem.

LESS

Out of the library, you can now generate a LESS template. Let's have a look at the following example.

@baby-yellow: #ecc649;
@peace-and-quiet: #edae3c;
@neuron-deflated: #ba602b;
@deep-coral: #a24236;
@auberginee: #5f0126;

Now you're able to use these color variables in your project. That's nice!

Roadmap

Some of the needed functionality is already implemented in Clarify, but a lot of them are just planned yet. But, the architecture of Clarify allows an easy access to every definition you make during your workflow and allows to easy create additional outputs as styleguides or LESS templates. These features will be added soon.

Think of a nice looking styleguide, which you can deliver to your clients, just out of the box. You'll never miss that again.

Wanna test those tasty features? Register now as a beta tester on Clarify.io

An API Preview

2012-03-22T20:20:00Z

To make it easy for innovative developers out there to connect their tools with Clarify, I've added an API from the beginning. The whole application is built on super-simple web services from the ground up. I'll add the documentation for the calls after releasing the first version. But for a first impression, check the services below.

Comment API

/api/comment/get/{screen}
/api/comment/add/{screen}/{x}/{y}
/api/comment/move/{id}/{x}/{y}
/api/comment/resize/{id}/{width}/{height}
/api/comment/update/{id} Parameter: content=your comment
/api/comment/delete/{id}

Color API

/api/color/add/{screen}/{x}/{y}/{hex}/{alpha}
/api/color/add/{screen}/{x}/{y}/{color}
/api/color/get/{screen}
/api/color/delete/{id}

Measure API

/api/measure/add/{screen}/{x}/{y}/{width}/{height}
/api/measure/get/{screen}
/api/measure/move/{id}/{x}/{y}
/api/measure/resize/{id}/{width}/{height}
/api/measure/delete/{id}

Screen API

/api/screen/add/{project} Parameter: file=…
/api/screen/delete/{screen}
/api/screen/image/{screen}/{width}
/api/screen/thumbnail/{screen}/{width}
/api/screen/embed/{screen}

Project API

/api/project/add/ Parameter: name=…
/api/project/delete/{id}

This API is heavily in development and is subject to change. But I want you to know in which direction it's going.

Wanna be the first to write a Clarify App using the API? Register now as a beta tester on Clarify.io

Say Hello To Clarify!

2012-03-22T19:23:30Z

As a software developer, who does a lot of frontend work @Namics and sometimes creates his own designs, my goal is always to improve my workflow for projects. I asked myself, why I need to open up Photoshop for picking colors or adding missing measurements by panning & zooming around? When I add them, why do I need to write them down into a documentation as well? Too much work for a lazy developer :) In addition, I thought it would be nice, to put some reproducable structure into styleguides I receive for projects. I thought about the possibilities of having those information stored in a database. Think of outputs like Styleguides, LESS Templates, Terrific Modules. Impressive, isn't it?

I decided to start a project based on this initial thoughts. I created a screen management interface with things like annotations à la Notable, a color picker or measuring tools, all usable directly in your browser. The feedback from my work friends was really positive, therefore I worked hard to improve it. I added support for embedding, added an API and Twitter authentication.

I'm currently working on the first private beta release, which will be available in the next few weeks to a small group of early adopters.

Looking for testers

This week, I've published a landing page, where interested developers & designers can sign up as beta users. My plan is to invite about 50 people in the first round. I'll try to choose them wisely, because they are really important for the success of the product. So, I invite you to join the program as well on Clarify.io. Thanks!

Stay updated by following @rogerdudler on Twitter or by subscribing to the blog feed.