Mobile Menu Button

Zurück zu den Projekten

Tablé einrichten: Ein Lesezeichen-Raster für deinen Chrome-Browser

UX/UI Design · Prototyping · Development

Kunde

Selbst initiiert

Projekt

Tablé

Jahr

2014

Entwicklungszeit

“Verleihe deiner am häufigsten aufgerufenen Seite ein ansprechendes und individuelles Design.”

Nach der Einstellung von SpeedDial, einer der meistgenutzten Chrome-Erweiterungen, die uns sehr am Herzen lag, mussten wir uns nach Alternativen umsehen. Zu unserer großen Enttäuschung konnten wir nichts Gleichwertiges finden. Die meisten „Neuer Tab“-Erweiterungen fordern Zugriff auf alle deine Daten, bieten im Gegenzug aber nur geringe Funktionalität und präsentieren sich zudem kaum in ansprechender Form. Nach einigen ersten Proof-of-Concepts und Design-Explorationen kamen wir schnell zu dem Schluss, dass es sich lohnen würde, etwas Besseres zu entwickeln – unter Wahrung deiner Privatsphäre und Daten.

Vorstellung

“Tablé stellte eine Besonderheit dar, da wir in diesem Fall sogar unmittelbar mit dem Prototyping starteten.”

In den meisten unserer Projekte gehen Design und Entwicklung Hand in Hand, was bereits ein wesentliches Unterscheidungsmerkmal zu traditionellen Ansätzen ist – erst Design, dann Entwicklung. Tablé war ein Ausnahmefall, bei dem wir sogar zuerst mit dem Prototyping begannen. Die Implementierung der Grundfunktionalitäten – das Hinzufügen, Bearbeiten, Löschen und Neuanordnen von Lesezeichen im Masonry-Grid – war unser erster Schritt. Darauf folgte selbstverständlich die weitere Entwicklung, aber der anfängliche Prototyp lieferte uns genau den richtigen Einblick, wie das Design funktionieren könnte.
Identität im Raster

Identität im Raster

Da das Layout von Tablé auf einem Masonry-Grid (Kachelraster) basiert, erschien es naheliegend und überzeugend, Raster- und Blockkomponenten für das Design seiner Identität zu verwenden. Wir begannen mit einem 5 x 5 Grundraster und füllten die Blöcke, bis wir die Buchstaben – Tablé – formten, was auf charmante Weise die Anordnung der Lesezeichen in der tatsächlichen Anwendung widerspiegelt.
Eine maßgeschneiderte Schriftart

Eine maßgeschneiderte Schriftart

Der konsequente nächste Schritt bestand darin, einen vollständigen Zeichensatz inklusive Ziffern zu entwickeln, der der Markenidentität von Tablé entsprach. Dies ermöglichte uns die Nutzung des Zeichensatzes als Ersatz für Vorschaubilder bei Lesezeichen, die über keine eigenen Bild- oder Icon-Informationen verfügten. Alle Lesezeichen ohne eigenes Icon wirken nun wie individuelle grafische Elemente, die aus dem Anfangsbuchstaben des jeweiligen Titels generiert werden.
Gestaltung von Vorschaubildern

Gestaltung von Vorschaubildern

Neben der Bereitstellung der dedizierten Schriftart bereiteten wir mehrere andere Möglichkeiten vor, Vorschaubilder hinzuzufügen. Nutzer können vorgefertigte Lesezeichen (Titel, Link, Logo und Farben als Paket) im Bereich „FAB“ (Frequently Added Bookmarks) auswählen. Sie können auch benutzerdefinierte Lesezeichen erstellen, indem sie entweder aus einem Satz von uns sorgfältig gestalteten Icons auswählen oder den Weblink eines beliebigen Online-Bildes hinzufügen.

Umsetzung

Nach einer ersten intensiven Auseinandersetzung mit dem Chrome Extension SDK von Google war unser Eindruck überaus positiv, insbesondere hinsichtlich der einfachen und klaren Struktur.

Ein Raster, ein wenig Größenanpassung, eine URL und die Synchronisierung aller Daten mit dem Google-Konto. Aber natürlich haben wir es nicht dabei belassen und führten verschiedene Arten von Rasterelementen ein, von Uhren für verschiedene Zeitzonen über Wetterdaten für diverse Orte bis hin zu anderen Widgets wie To-Do-Listen. In naher Zukunft planen wir außerdem, die Idee individueller Tablé-Instanzen einzuführen, falls Nutzer mehrere Computer verwenden.
1 / 5

2 / 5

3 / 5

4 / 5

5 / 5

Chrome Web Store

Chrome Web Store

4.7★ · 12 Bewertungen

Das ist ein „Brownie Bite“-Projekt, eigeninitiiert von zigzag. Neugierig, was ein Brownie-Bite-Projekt ist?

Bei zigzag streben wir danach, unsere kreative Energie lebendig zu halten und unsere gestalterischen Fähigkeiten maximal auszuschöpfen. Wir glauben, dass der beste Weg, dies zu erreichen, darin besteht, Dinge einfach aktiv zu „machen / umzusetzen“. Daher setzen wir auf eigene, interne Projekte. Diese sollen (1) möglichst unabhängig von den Restriktionen des Tagesgeschäfts sein, (2) kompakt genug für die Bearbeitung neben der regulären Arbeit sein, (3) ansprechendes Design und positive Erlebnisse auch in weniger beachtete Bereiche tragen und (4) uns im Entstehungsprozess Freude bereiten sowie neue Erkenntnisse liefern.

Weitere Projekte

Neugestaltung der digitalen Fahrgastinformation im ICE
Deutsche Bahn | ICE Screens

Neugestaltung der digitalen Fahrgastinformation im ICE

Mobilität · UX/UI Design · Technologie
Einfach und zuverlässig – Die neue Art der medizinischen Versorgung zu Hause
JDM | Smila Gen 2

Einfach und zuverlässig – Die neue Art der medizinischen Versorgung zu Hause

Health · UX/UI Design · Development
Das Unsichtbare sichtbar machen: Ein plattformübergreifender Energie-Reporter
Siemens | Junelight

Das Unsichtbare sichtbar machen: Ein plattformübergreifender Energie-Reporter

Nachhaltige Energie · UX/UI Design · Prototyping

Vernetzen

Lass uns zusammenarbeiten

Wir lieben es, uns neuen Herausforderungen zu stellen – denn das ist unser Antrieb, um gemeinsam mit euch das bestmögliche Produkt zu entwickeln. Lasst uns über eure Vision sprechen und herausfinden, wie wir euer nächstes Projekt gemeinsam zum Erfolg führen können. Kontaktiert uns gerne!

Geschäftsanfragen

Komm’ in unser Team

Werde ein Teil unseres Teams! Bei uns findest du ein Umfeld, das kontinuierliches Lernen, persönliches Wachstum und Zusammenarbeit auf Augenhöhe fördert. Wir freuen uns auf deine Bewerbung!

Aktuelle Stellenangebote