Designing a Visual Bookmark Manager as a Side Project

With a good knowledge of the different bookmark and resource managers like Zootools, Kippt, Iceber.gs or Octobox, I added to my research, sites with the same problematic-like blog or news feed. I made a list of basic functionalities and kept the elaborate ones for a second version.

Colllect is designed to organise your resources with tags. You can add multiple tags to an element and filter all elements with that tag on the page. You can also create collections if you want to be more organised, or projects where you can export your project to show it, for example, like a mood board to your team. You can also connect your Dribbble or Behance, and get your social feed directly into Colllect.

The masonry grid-based design was chosen to not alter the content. I wanted to keep the ratio of the pictures rather than having everything the same size, to keep that total overview on the content. Sometimes when you save a picture, the interesting part is at the bottom of it, so by using cropped thumbnails, you won’t remember why you saved this picture. All of the actions, like adding an element, works with popups.

Building the interaction in motion, helped us determine the efficiency of the animation. I didn’t want that animation to slow down the process of adding content. I used After Effects at first, but an HTML prototype gave a much better result when trying these interactions.

We had a couple of iterations for the logo. We selected the one displaying the idea of collecting pictures in a book, so I used a paperclip with a simple sans-serif font. We wanted something minimal and simple that would be easy to play with.

This landing page was probably the first satisfying project I did. I have a ton of iteration, from playing with illustration and a character behind their desk at night to 3D mock-up. But it never felt right. The illustrations were not ‘mature’ enough, too cartoonish and 3D mock-ups were too overused. I didn’t want to show the interface because it was too bland, just a grid of pictures. So, I tried to work on something around displaying illustrations or pictures like the grid in Colllect. I didn’t want the product to have the appeal of someone else’s work, so I used flat illustration to show content. See it live!