Visuelle Identität
Vorhandene Blogs
Auch Blogs mit einem Fokus auf aktuelle Themen wie eHealth oder Blockchain sind meist nach demselben Muster gestaltet. Sie sind häufig weiß und grau, besitzen kein effektives Branding und wirken so, als wäre Zeitungspapier ins Digitale übertragen worden. Farben werden lediglich in Thumbnails verwendet, die wiederum häufig nur aus Stockfotos bestehen. Inhalte wirken durch mangelhafte Abstandsregeln erdrückend.
Auffällig und ansprechend
Die Leser des Blogs sollen ein angenehmes Leseerlebnis erhalten. Aktuelle Webseiten langweilen und neigen dazu, den Nutzer schnell zum Verlassen der Seite zu animieren. Das wollen wir ändern. Der Blog soll als Wow-Erlebnis im Gedächtnis bleiben und somit den Nutzer möglichst lang und interessiert an die Seite binden. Durch die Kombination und Abstimmung unterschiedlicher Designelemente wie Farben, Schrift und Grafiken wird die Usability und ein Joy-Of-Use verbunden und die Leser erfahren eine ganzheitliche Leseerfahrung, die optimal abgestimmt ist.
Farben
Die Webseite befindet sich per Default im Dark-Modus. Anders als herkömmliche Brandings mit einer Primär- und einer Akzentfarbe, setzen wir auf eine Farbpalette mit insgesamt 8 Farben. 6 Farben dienen visuellen Akzenten, während je eine Farbe für die Texte und eine spezielle Farbe für Links innerhalb von Artikeln genutzt wird. Die von gelb bis lila durchlaufende Farbpalette besitzt zudem zahlreiche Varianten in mit aufeinander abgestimmten Helligkeitsabstufungen und ist frei für Farbverläufe nutzbar.
Bitwissen setzt den bewussten Trend von farbenreichen Designs
Hintergrund
Während reguläre Blogs sich nicht stark um die Visualisierung ihres Text-Hintergrundes sorgen und meist einen regulären Grauton oder weiß verwenden, setzt Bitwissen auf einen dunkelvioletten Mesh Gradient. Dieser wird mit einem dunklen Container mit Transparenz überdeckt, der die im Hintergrund befindlichen Elemente verschwimmen lässt, sodass ein Glassmorphism-ähnlicher Effekt entsteht. Diese Einstellung wird bis zum Rand der Seite abgeschwächt, sodass die Ränder einen leuchtenden Effekt aufweisen. In Call to Action Elementen werden zudem Farbverläufe aus den Primärfarben verwendet.
Mesh Gradient Hintergrund
Overlay oberhalb des Mesh Gradients
Resultat
Schriftart
Wir setzen für eine maximale Lesbarkeit und Leserlichkeit auf eine geometrische Sans Schriftart, die vollständig ohne Serifen auskommt. Sie besitzt keine komplexen Unter- oder Oberlängen und schmiegt sich durch rundliche Spines und Bowls perfekt in die runden Formen des Design Systems ein. Sie verleiht der Seite ein modernes und futuristisches Erscheinungsbild und erinnert teilweise an Fintech Start-ups oder moderne Banking Provider wie N26.
Titilium Web dient als primäre Schriftart
Eine durchdachte modulare Skalierung betont Hierarchien
Komponenten
Die Komponentenbibliothek umfasst derzeit alle Elemente, die für das Erscheinungsbild eines Blogartikels notwendig sind. Zudem wollte das Start-up für eventuelle Kontaktformulare bereits die Komponenten für Nutzereingaben gestaltet haben. Die Bibliothek wird mit zunehmender Größe und Funktionalität der Webseite auf Dauer noch umfassender und gewährleistet mit dem Design System eine kontinuierliche und logische Gestaltung der Webseite.
Auszug aus der Komponentenbibliothek
Grafiken
Der gezielte Einsatz von Grafiken spricht den Leser visuell an. Anstelle von Stockfotos werden moderne und bunte 3D-gerendete Grafiken mit Bezug auf die Themen Finanzen, Zukunft und Weltall verwendet, die den zukunftsweisenden und progressiven Spirit von Bitwissen verdeutlichen sollen.
UX Blogartikel
Gestaltung
Bitwissen muss das Rad der Text-Lesbarkeit nicht neu erfinden. Wir nutzen die uns aus Studien zur Verfügung stehenden Daten, um Texte optimal lesbar zu formatieren. Dabei legen wir einen besonders großen Fokus auf die Schriftgröße, Zeilenhöhe, Zeilen-, Absatz- und Satzlänge sowie weitere Formatierungsmöglichkeiten.
Schreibstil
Texte sollen so kurz und prägnant wie möglich geschrieben sein. Jedes geschriebene Wort soll auf seine Effizienz für das Verständnis des Textes überprüft werden. Bietet ein Wort oder Satz keinen Mehrwert, wird dieser entfernt. Satz- und Absatzlängen sollen kontinuierlich minimalistisch gehalten werden, um einen schnellen Lesefluss zu ermöglichen. Wo möglich, sollen Aufzählungslisten das Scannen von Texten erlauben und Links zu weiteren Artikeln die internen Verlinkungen sicherstellen.
Metadaten für Vertrauen
Neben dem Inhalt des Artikels soll der Blog Metadaten bereitstellen, die dem Nutzer bei Bedarf Mehrwert liefern. Darunter fallen Metadaten, die das Vertrauen in den Wahrheits- und Informationsgehalts des Textes bestärken. Der Autor soll inklusive seiner Verbindung zur Kryptowelt genannt und soziale Kanäle verlinkt werden. Die Häufigkeit, mit der ein Artikel in sozialen Netzwerken geteilt wurde, wird ebenfalls angezeigt. Zusätzlich werden relevante und seriöse Quellen zu den Artikeln angegeben.
Metadaten für Relevanz
Weitere Metadaten können dem Nutzer die Relevanz des Textes vermitteln. Darunter fällt die geschätzte Lesedauer, Breadcrumbs, Tags sowie das Datum der Veröffentlichung und das Datum bei einer Aktualisierung.
Einzigartige Interaktionen
Gamifiziertes Inhaltsverzeichnis
Der Blogartikel wird durch zahlreiche Elemente interaktiver gestaltet. Dazu zählen nicht nur Social Sharing Buttons: Die Übersicht des Blogartikels wird fortlaufend am linken Bildschirmrand eingeblendet. Sie zeigt die Kapitel des Artikels sowie den Lesefortschritt an. Das erlaubt Nutzern, ein bestimmtes Kapitel anzuvisieren und die Länge des aktuellen Kapitels einzuschätzen. Durch die Fortschrittsbalken schaffen wir einen auf dem Zeigarnik-Effekt basierenden gamifizierten Ansporn, weiterzulesen.
Default Wert
Kapitel 1 lesend
Kapitel 1 gelesen
Kapitel 2 lesend
Mobiles Inhaltsverzeichnis inklusive Fortschrittsanzeigen
Mobiles Inhaltsverzeichnis
Smart Search
Häufig suchen wir nach einem ganz bestimmten Satz in einem langen Artikel. Eine fortlaufend angezeigte Suche erlaubt es dem Nutzer jederzeit, nach bestimmten Begriffen im Artikel zu suchen. Der Blogartikel wird bei einer aktiven Suche auf die Suchergebnisse reduziert. Suchergebnisse zeigen das vom Nutzer bestimmte Keyword inklusive der umliegenden Sätze und dem Titel des Kapitels an. Wählt ein Nutzer den für sich interessanten Bereich aus, wird der Artikel wieder auf seine volle Größe ausgeklappt, mit einem Fokus auf die vom Nutzer ausgewählte Textpassage.
Intelligente Suche innerhalb eines Artikels
Ausblick
Viele weitere Möglichkeiten
Es existieren viele weitere Möglichkeiten, um die Webseite zu einem innovativen Player im Bereich der Informationsvermittlung für Blockchain & Krypto werden zu lassen. Beispielsweise kam uns während eines gemeinsamen Workshops die Idee, Blogartikel per Toggle auf die wichtigsten Sätze zu reduzieren. Der Nutzer erfährt so eine maximale Zeitersparnis, die sich ganz mit den Erwartungen der Zielgruppe in Zeiten von Blinkist und Co deckt.
Auch können Blogartikel mit zahlreichen weiteren Elementen aktiver gestaltet werden:
- Komplexe Zitat-Darstellungen mit Bildern und Verlinkungen
- Social Media Posts wie z. B. Tweets
- Aktuelle Kurse von erwähnten Kryptowährungen
- Währungsrechner
- Bilder & Videos
- Weitere CTAs oder Pop-ups bei einer Monetarisierung
Bitwissen ist mein bisher spannendstes Projekt, da wir Erfahrungen vollständig neu denken, anstatt auf etablierte Strukturen zu setzen. Ich freue mich sehr darauf, das Start-up bis zum Launch zu begleiten.
User Interfaces
Eine Skizze des gesamten Blogartikels
Möglicher Call to Action für Newsletter
Popup zur Anmeldung für einen Nutzeraccount