Mobile Menu Button

Back to Work

Setting Up a Tablé: A Grid of Bookmarks for Your Chrome

UX/UI Design · Prototyping · Development

Client

Self-initiated

Project

Tablé

Year

2014

Incubation

"Give a designed and desired look to the most frequently viewed page."

After the discontinuation of SpeedDial, one of the most used Chrome extensions and very dear to us, we had to look for alternatives out there. Much to our disappointment, we couldn't find an equivalent. Most of the New Tab extensions want all your data, give little functionality in return and certainly don't present themselves in a pleasing form. After some initial proof of concepts and design explorations, we quickly came to the conclusion that it would be worth trying to achieve something better. While respecting your privacy and data.

Imagination

"Tablé was an exceptional case with which we even proceeded with the prototyping first."

In most of our projects design and development go hand in hand, which is already a huge differentiator from traditional approaches - design first, develop later. Tablé was an exceptional case in which we even started to prototype first. Implementing the basic functionalities - adding, editing, deleting and rearranging bookmarks in the masonry grid - was our first step. It was, of course, followed by further development, but the initial prototype gave us the perfect amount of insight into how the design could work.
Identity, on the Grid

Identity, on the Grid

As Tablé’s layout is based off a masonry grid, it seemed obvious and compelling to use grid and block components to design its identity. We started from a 5 x 5 base grid and filled the blocks until we formed the letters - Tablé, adorably representing the arrangement of bookmarks in its actual implementation.
Tablé Font, Its Own

Tablé Font, Its Own

The next natural step was to design a full set of characters and numbers that matched Table’s identity. This way, we could use it as a thumbnail replacement for bookmarks without any image link or icon information attached. Now all anonymous bookmarks look designed graphically out of the first letter of titles.
Designing Thumbnails

Designing Thumbnails

Besides providing the dedicated font, we prepared multiple other ways to add thumbnails. Users can pick ready-made (title, link, logo and colors, as a package) bookmarks in the FAB (Frequently Added Bookmarks) section. They can also create custom bookmarks by either picking from a set of icons we meticulously designed or adding the web link of any online image.

Implementation

We started digging into Google's Chrome Extension SDK and came away impressed with how straightforward everything was.

A grid, a bit of resizing, a URL and synchronizing everything with the Google account. But of course, we didn't stop there and introduced different types of grid elements, ranging from clocks in different timezones to weather from different locations to other widgets like to do lists. In the near future we're also planning to introduce the idea of having individual Tablé's in case the user has multiple computers.
1 / 5

2 / 5

3 / 5

4 / 5

5 / 5

Chrome Web Store

Chrome Web Store

4.7★ · 12 Ratings

This is a Brownie Bite project, self-initiated by Zigzag. Curious what Brownie Bite project is?

At zigzag, we strive to keep our creative energy vibrant and exercise our creative skills to the max. We believe that the best way to achieve this is by simply ‘making / building’ things. We strive to create our own internal projects that are (1) relatively free from daily work constraints, (2) small enough to pursue on the side, (3) bring desired design and experience to overlooked moments and (4) provide delight and knowledge to ourselves in the process.

Related Projects

Redesigning the Digital Passenger Information on the ICE
Deutsche Bahn | ICE Screens

Redesigning the Digital Passenger Information on the ICE

Transportation · UX/UI Design · Technology
Simple and Reliable – A New Way of Providing Medical Care at Home
JDM | Smila Gen 2

Simple and Reliable – A New Way of Providing Medical Care at Home

Health · UX/UI Design · Development
Making the Invisible Visible: A Cross-platform Energy Reporter
Siemens | Junelight

Making the Invisible Visible: A Cross-platform Energy Reporter

Sustainable Energy · UX/UI Design · Prototyping

Connect

Partner with zigzag

We are eager to hear more about exciting challenges and amazing opportunities to develop the latest products, services, and experiences. Don't hesitate to get in touch with us!

Contact for Business

Join Our Team

We're inviting you to become part of our dynamic team! It's a space for continuous learning, personal growth and meaningful collaboration. Don't miss out on the chance to join us!

Check Open Positions