Visuelle Identität
Vorhandene Blogs
Selbst Blogs, die sich auf die neuesten Trends, wie eHealth oder Blockchain konzentrieren, verfolgen oft ein ähnliches Gestaltungskonzept. Oft in Weiß und Grau gehalten, fehlt es ihnen an einem effektiven Branding - es wirkt, als hätte jemand ein Stück Zeitungspapier einfach digitalisiert. Farbe taucht nur in Form von Thumbnails auf, die oft ausschließlich aus Stockfotos bestehen. Hinzu kommt, dass die Inhalte durch schlecht durchdachte Abstandsregeln erdrückend wirken.
Auffällig und ansprechend
Unsere Zielsetzung? Wir wollen, dass die Leser unseres Blogs ein außergewöhnliches Leseerlebnis erleben. Aktuell sind zu viele Blogs eintönig und ermuntern Leser dazu, die Seite schnell wieder zu verlassen. Genau das wollen wir ändern. Unser Blog soll nicht nur "gut" sein - er soll den Lesern ein "Wow"-Erlebnis bieten, das sie im Gedächtnis behalten und sie dazu anregt, immer wiederzukommen. Und wie erreichen wir das? Durch das geschickte Zusammenwirken verschiedener Designelemente: Farben, Schrift und Grafiken werden so kombiniert und abgestimmt, dass sie die Benutzerfreundlichkeit und den Spaßfaktor (Joy-of-Use) erhöhen. Das Ergebnis? Eine rundum harmonische Leseerfahrung, die perfekt auf die Bedürfnisse der Leser abgestimmt ist.
Farben
Standardmäßig präsentiert sich unsere Webseite im trendigen Dark-Modus. Statt uns auf das traditionelle Branding-Konzept mit einer Primär- und einer Akzentfarbe zu verlassen, wagen wir etwas Neues: eine Farbpalette von insgesamt acht Farben. Sechs dieser Farben dienen dazu, visuelle Akzente zu setzen, während zwei weitere Farben speziell für Text und Links innerhalb der Artikel reserviert sind. Unsere Farbpalette erstreckt sich von Gelb bis Lila und bietet diverse, harmonisch aufeinander abgestimmte Helligkeitsstufen für ein reiches Spektrum an Farbverläufen.
Bitwissen setzt den bewussten Trend von farbenreichen Designs
Hintergrund
Während viele Blogs sich wenig um ihre Text-Hintergrundgestaltung kümmern und oft auf einfache Grau- oder Weißtöne zurückgreifen, geht Bitwissen einen radikalen neuen Weg. Unser Hintergrund? Ein stilvoller dunkelvioletter Mesh Gradient. Um einen Glassmorphism-ähnlichen Effekt zu erzeugen, überlagern wir diesen mit einem dunklen, transparenten Behälter. Dadurch scheinen die Elemente im Hintergrund zu verschwimmen und erzeugen einen schönen, weichen Übergang zu den Rändern. In unseren Call-to-Action-Elementen greifen wir ebenfalls auf diesen kreativen Einsatz von Farbverläufen zurück - die Hauptfarben verschmelzen zu einem einzigartigen Design, das die Aufmerksamkeit auf unsere wichtigsten Botschaften lenkt.
Mesh Gradient Hintergrund
Overlay oberhalb des Mesh Gradients
Resultat
Schriftart
Für eine optimale Lesbarkeit setzen wir auf eine geometrische Sans-Serif-Schriftart. Diese Schriftart verzichtet komplett auf Serifen und hat keine komplizierten Ober- oder Unterlängen. Ihre rundlichen Formen passen perfekt zu den übrigen Elementen unseres Designsystems. So strahlt die Schriftart eine moderne und zukunftsorientierte Ästhetik aus, die an innovative Fintech-Start-ups oder moderne Banken wie N26 erinnert.
Titilium Web dient als primäre Schriftart
Eine durchdachte modulare Skalierung betont Hierarchien
Komponenten
Unsere Komponentenbibliothek umfasst bereits alle Elemente, die für die Gestaltung eines Blogartikels erforderlich sind. Doch damit nicht genug. Das Start-up hat auch vorausgedacht und wir haben bereits Komponenten für eventuelle Kontaktformulare erstellt. Diese Bibliothek wird mit der zunehmenden Größe und Funktionalität der Webseite noch umfangreicher, gewährleistet dabei jedoch durch das Designsystem eine konsistente und logische Gestaltung der gesamten Webseite.
Auszug aus der Komponentenbibliothek
Grafiken
Grafiken können einen großen Unterschied machen und den Leser visuell ansprechen. Statt einfacher Stockfotos verwenden wir moderne, farbenfrohe 3D-Grafiken. Diese greifen Themen wie Finanzen, Zukunft und Weltraum auf und illustrieren so den innovativen und fortschrittlichen Geist von Bitwissen. So bringen wir nicht nur Informationen, sondern auch Inspiration und Begeisterung auf den Bildschirm.
UX Blogartikel
Gestaltung
Bitwissen weiß, man braucht das Rad nicht neu zu erfinden, wenn es um Textlesbarkeit geht. Wir vertrauen den Daten aus all den Studien, die uns zur Verfügung stehen, um unsere Texte optimal lesbar zu gestalten. Dabei konzentrieren wir uns besonders auf Details wie Schriftgröße, Zeilenhöhe, und die Länge von Zeilen, Absätzen und Sätzen. Zusammen mit weiteren Formatierungsmöglichkeiten schaffen wir Texte, die sich flüssig und angenehm lesen lassen.
Schreibstil
Unser Credo lautet: Klare und prägnante Texte. Jedes einzelne Wort wird daraufhin geprüft, ob es zum Verständnis des Textes beiträgt. Wenn ein Wort oder Satz keinen Mehrwert bietet, wird er gnadenlos gestrichen. Wir halten unsere Sätze und Absätze kurz, um einen flüssigen Lesefluss zu gewährleisten. Wo immer es sinnvoll ist, verwenden wir Aufzählungslisten, um das schnelle Überfliegen von Texten zu erleichtern. Und wir setzen interne Links, um den Leser weiterführend zu interessanten Artikeln zu führen. So schaffen wir eine Benutzererfahrung, die begeistert.
Metadaten für Vertrauen
Neben dem eigentlichen Inhalt legen wir Wert auf nützliche Metadaten. Diese zusätzlichen Informationen liefern dem Nutzer Mehrwert und stärken das Vertrauen in den Wahrheits- und Informationsgehalt des Textes. So nennen wir beispielsweise den Autor und seine Verbindung zur Kryptowelt und verlinken auf seine sozialen Kanäle. Auch die Häufigkeit, mit der ein Artikel in sozialen Netzwerken geteilt wurde, stellen wir transparent dar. Schließlich listen wir die Quellen auf, aus denen wir unsere Informationen beziehen - denn Transparenz und Glaubwürdigkeit stehen bei uns an oberster Stelle.
Metadaten für Relevanz
Zusätzliche Metadaten können dazu beitragen, dem Nutzer die Relevanz des Textes zu verdeutlichen. Dazu gehören Angaben wie die geschätzte Lesezeit, "Breadcrumbs" (also Navigationselemente, die den Weg durch die Seite anzeigen), Tags sowie das Veröffentlichungsdatum und das Datum der letzten Aktualisierung.
Einzigartige Interaktionen
Gamifiziertes Inhaltsverzeichnis
Um den Blogartikel interaktiver zu gestalten, haben wir eine Vielzahl von Elementen eingefügt. Dazu gehören nicht nur Social-Sharing-Buttons. Eine stets am linken Bildschirmrand sichtbare Übersicht zeigt die Kapitel des Artikels und den jeweiligen Lesefortschritt an. Das ermöglicht den Nutzern, gezielt ein bestimmtes Kapitel anzusteuern und die Länge des aktuellen Kapitels abzuschätzen. Mit den Fortschrittsbalken erzeugen wir einen auf dem Zeigarnik-Effekt basierenden, spielerischen Anreiz zum Weiterlesen.
Default Wert
Kapitel 1 lesend
Kapitel 1 gelesen
Kapitel 2 lesend
Mobiles Inhaltsverzeichnis inklusive Fortschrittsanzeigen
Mobiles Inhaltsverzeichnis
Smart Search
Wer kennt es nicht? Man sucht in einem langen Artikel nach einem bestimmten Satz. Daher bieten wir eine ständig zugängliche Suchfunktion, die es den Nutzern ermöglicht, jederzeit nach bestimmten Begriffen im Artikel zu suchen. Bei einer aktiven Suche wird der Artikel nur auf die Suchergebnisse reduziert. Diese Ergebnisse zeigen das gesuchte Keyword, eingebettet in die umliegenden Sätze und den Titel des Kapitels. Wählt der Nutzer den für ihn interessantesten Bereich aus, klappt sich der Artikel wieder auf seine volle Größe aus, der Fokus liegt dann jedoch auf dem ausgewählten Textabschnitt.
Intelligente Suche innerhalb eines Artikels
Ausblick
Viele weitere Möglichkeiten
Es gibt zahlreiche Möglichkeiten, um unsere Webseite zu einem echten Vordenker in Sachen Blockchain und Krypto-Information zu machen. Während eines Workshops entstand beispielsweise die Idee, Blogartikel durch einen einfachen Schalter auf die wesentlichsten Sätze zu konzentrieren. Dieser clevere Ansatz entspricht komplett den Erwartungen unserer Zielgruppe in Zeiten von Blinkist und Co und spart den Nutzern wertvolle Zeit.
Zusätzliche Möglichkeiten, um unsere Blogartikel noch interaktiver zu gestalten, könnten sein:
- Hochwertige Zitate, begleitet von Bildern und Links
- Einbinden von Social Media Posts wie z.B. Tweets
- Aktuelle Wechselkurse der im Artikel erwähnten Kryptowährungen
- Implementierung eines Währungsrechners
- Einbinden von Bildern und Videos
- Einsatz weiterer Aufrufe zur Aktion (CTAs) oder Pop-ups, um die Monetarisierung voranzutreiben
Mit seinem einzigartigen Ansatz und der Abkehr von etablierten Strukturen, ist Bitwissen bis dato eines meiner spannendsten Projekte. Ich freue mich schon darauf, das Start-up auf seiner Reise 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