5 Tricks We Used To Pimp Our Graphics Editor

Designing a graphics editor is a complex task. There are many examples, each targeting a different use case (e.g. Photoshop, Keynote). I realized the magnitude of work invested in those only after struggling to get the ConferenceBadge.com editor intuitive and flexible enough.

Our editor has only one use case: name badges. But simplicity and ease of use are hard to reach. In this post I will explain some features we implemented in order to reach them.

Font Size VS Max Font Size VS No Font Size

Names are hard to deal with because their length vary a lot. To solve this, we removed the concept of font-size and replaced it with boundaries. Text always fits its layer boundary, in width or height.

Static Text VS Dynamic Text

Dynamic layers (e.g. First name) change from a badge to another while static layers (e.g. Event name) stay the same on every badge. The subtle difference between the two, in the editor, is that one is editable and the other is not.

To make this difference more obvious, we show a label on top of each text layer when hovering it. The static text label shows “Double-click to edit text” and the dynamic text label shows layer content description in capital letters (e.g. FULL NAME).

Snap or Not to Snap

There are two actions which cause snapping in our editor: moving and resizing. The moving snap helps align layer to the center of the badge.

The resizing snap helps users resize one layer to fit the size of an another. A user can easily create two text layer of the same size.

WYSIWYG Text Edition

Online editors often let users edit text layer in a overlayed, non-stylized input field. We felt it wasn’t good enough. We came up with a more friendly solution where we style an input on top of the layer, giving the user the impression of editing the real layer.

Conclusion

A lot could still be implemented to make the editor better. I wrote this piece to get your feedback! So go try it and give us your feedback. Drop us a line at @confBadge!

Authored by Philippe-Antoine Lehoux — Follow him @plehoux