Proton: Ausführliche Vorstellung des neuen Firefox-Designs

Du benötigst Hilfe bezüglich Firefox? Bitte stelle deine Frage im öffentlichen Bereich des Forums und nicht per Konversation an wahllos ausgesuchte Benutzer. Wähle dazu einen passenden Forenbereich, zum Beispiel „Probleme auf Websites“ oder „Erweiterungen und Themes“ und klicke dann rechts oben auf die Schaltfläche „Neues Thema“.

Am 1. Juni wird Mozilla Firefox 89 veröffentlichen. Mit diesem Tag wird Firefox in einem völlig neuen Glanz erstrahlen. Dieser Artikel stellt ausführlich das neue „Proton“-Design vor und legt dabei einen besonderen Fokus auf die Gegenüberstellung des aktuellen mit dem neuen Design.

Alles neu macht der Juni: Neues Design für Desktop, Android, iOS

Unter dem Namen „Proton“ hat Mozilla in den letzten Monaten an einem neuen Design für Firefox gearbeitet. Über Proton wurde auf diesem Blog weltweit als erstes berichtet.

Während der Fokus in der Berichterstattung dabei auf Firefox für Windows, macOS und Linux lag, wird es auch für die beiden Smartphone-Browser Firefox für Android sowie Firefox für iOS visuelle Veränderungen geben, wenn auch nicht im gleichen Ausmaß. In erster Linie ist es die Design-Sprache bei den Icons, welche sich durch Firefox für alle Plattformen ziehen wird. Dieser Artikel stellt ausführlich das neue Design des Desktop-Firefox vor.

Willkommen, neuer Nutzer

Los geht es mit der Einführungstour für neue Nutzer. War die alte Willkommensseite noch eher einfach und langweilig, arbeitet Mozilla hier nun mit einer großen Bild-Text-Kombination, was mehr Emotion bringt und Firefox gleich lebendiger wirken lässt.

Firefox 89 Proton-Design

Neue Icons

Mit wenigen Ausnahmen wurden alle Icons in Firefox gegen neue Icons ausgetauscht. Was dabei auffällt: Die neuen Icons sind sichtbar dünner als die alten Icons, wodurch Firefox weniger schwergewichtig wirkt.

Mut zu Neuem (Tab)

Sicherlich mit das erste, was einem als bestehender Firefox-Nutzer, aber auch als Nutzer eines anderen Browsers auffällt, ist die besondere Tab-Form. Wenn ein neues Browser-Design ansteht, sind Tabs traditionell ein Element, welches eine Überarbeitung erfährt. Meistens beschränkt sich die Veränderung dann auf die Ausgeprägtheit der Rundungen. Mit Firefox 89 geht Mozilla neue Wege. Dies fängt damit an, dass die klassische Verbindung zwischen dem Tab selbst und dem damit verbundenen Inhaltsbereich entfällt. Eine mutige Design-Entscheidung, die aber im direkten Vergleich zu einem deutlich moderneren Erscheinungsbild beiträgt.

Firefox 89 Proton-Design

Eine weitere Besonderheit des neuen Tab-Designs ist die neu dazu gekommene Status-Zeile bei der Wiedergabe von Medien – eine Implementierung, die man sonst so noch aus keinem anderen Browser kennt. Ob nun die Blockierung der automatischen Wiedergabe, Stummschaltung des Tabs oder ob sich ein Video im Tab im sogenannten Bild-im-Bild-Modus befindet – eine zweite Tab-Zeile zeigt den Status in textlicher Form an.

Firefox 89 Proton-Design

Übrigens: Wer die zweite Zeile nicht mag, kann diese über about:config deaktivieren. Dazu muss über about:config der Schalter browser.tabs.secondaryTextUnsupportedLocales um das Kürzel der genutzten Sprache ergänzt werden, also für einen deutschsprachigen Firefox um ,de. Anschließend ist Firefox neu zu starten.

Die Adressleiste und das „Drei-Punkte-Menü“

Natürlich gab es auch Anpassungen der Adressleiste im Rahmen des neuen Designs. Neben dem Austausch von Icons und der Anpassung von Farben ist die auffälligste Änderung hier mit Sicherheit die Entfernung des erst mit Firefox 57 eingeführten „Drei-Punkte-Menüs“, hinter welchem sich seitenspezifische Aktionen befunden hatten. Dieses war vom Grundsatz her eine gute Idee, wurde tatsächlich jedoch nicht viel genutzt und Nutzer kennen ein solches Menü auch nicht aus anderen Browsern. Auch Erweiterungs-Entwickler nahmen diese Platzierung nicht wirklich an, in der Regel wurden auch für seitenspezifische Aktionen Toolbar-Buttons bereitgestellt. Also hat sich Mozilla hier entschlossen, wieder einen Schritt zurück zu gehen und dieses Menü im Sinne einer Vereinfachung für den Nutzer zu entfernen.

Firefox 89 Proton-Design

Firefox 89 Proton-Design

Funktionen wurden dadurch tatsächlich keine entfernt. Alles, was bisher darüber zugänglich war, ist nach wie vor über andere Stellen zugänglich oder wurde mit Firefox 89 anders zugänglich gemacht. Ein Beispiel dafür ist die integrierte Screenshot-Funktion, für die es ab Firefox 89 eine optionale Schaltfläche gibt, die wie alle anderen Schaltflächen auch in die Symbolleiste gezogen werden kann, wenn man das denn möchte. Die Funktion zum Hinzufügen sogenannter OpenSearch-Suchmaschinen wurde in das Adressleisten-Dropdown integriert und erhält so sogar mehr Sichtbarkeit als bisher.

Neues Hauptmenü und Panel-Design

Eine Vereinfachung hat auch das Hauptmenü erhalten, welches nun keine Icons mehr besitzt und trotzdem übersichlicher wirkt. Lesezeichen, Chronik und Downloads sind jetzt einfacher zugänglich, da diese aus dem alten „Bibliothek“-Menüpunkt auf die erste Ebene verschoben worden sind.

Firefox 89 Proton-Design

Das neue Menü-Design zieht sich durch sämtliche Panels, welche im Bereich der Navigations-Symbolleiste beheimatet sind.

Firefox 89 Proton-Design

Neues Dialog-Design

Passend dazu wurde auch das Design diverser Dialoge von Firefox angepasst.

Firefox 89 Proton-Design

Überarbeitete Infoleisten

Neu gestaltet wurden auch die diversen Informationsleisten, welche nun in die Navigations-Symbolleiste integriert sind und damit nicht mehr von Websites nachgeahmt werden können. Manche Leiste wurde in der Priorität reduziert, erscheint nun also in weniger auffallender Farbe.

Firefox 89 Proton-Design

Neues Kontextmenü für Windows 10 und macOS mit Dark Mode-Unterstützung

Nutzer von Windows 10 erhalten ein moderneres Erscheinungsbild der Kontextmenüs, welches besser zum Design von Windows 10 passt und außerdem den Dark Mode von Windows unterstützt. Die alten Kontextmenüs unterstützten dies nicht. Nutzer von Windows 7 sowie Windows 8 erhalten weiterhin die alte Optik.

Firefox 89 Proton-Design

Firefox 89 Proton-Design

Auf Apple macOS ist der Umbau bedeutend größer, denn hier wechselt Mozilla von seiner „Fake-Kontextmenü-Implementierung“ zu nativen Kontextmenüs – einem der ältesten noch offenen Nutzer-Wünsche auf Bugzilla mit einem Ticket-Alter von mittlerweile 21 Jahren. Dies sorgt nicht nur für eine bessere System-Integration und schönere Optik, sondern bringt auch hier die Unterstützung für den Dark Mode des Betriebssystems.

Firefox 89 Proton-Design

Firefox 89 Proton-Design

Firefox-Startseite

Auch die Standard-Startseite von Firefox hat optische Anpassungen erhalten. Aber nicht nur das Design der Startseite hat sich verändert. Zwar gibt es die Konfiguration der Startseite noch immer in den Firefox-Einstellungen, das Einstellungs-Symbol auf der Startseite aktiviert jetzt aber eine neue Oberfläche zur Konfiguration der Startseite.

Firefox 89 Proton-Design

Mehr Fokus auf das Wesentliche

Kontextmenüs in Firefox wurden umstrukturiert, Einträge teils umbenannt oder entfernt, wenn diese nur selten genutzt worden sind. Das Ziel war, dass der Nutzer schneller das findet, was wirklich wesentlich ist. Auf der anderen Seite wurde im Kontextmenü der Tableiste auch ein Eintrag „Neuer Tab“ hinzugefügt, der theoretisch nicht notwendig wäre, weil es bereits mehrere Wege gibt, einen neuen Tab zu öffnen, tatsächlich aber von einigen Nutzern gewünscht worden ist und so auch aus anderen Browsern bekannt ist.

Fokus ist auch das Stichwort für die Navigations-Symbolleiste, welche standardmäßig mit weniger Schaltflächen daherkommt als bisher. Das Bibliotheks-Menüs ist beispielsweise nicht länger standardmäßig sichtbar, da es durch die Vereinfachung des Hauptmenüs keinen Vorteil mehr bietet.

Teilweise wurde auch ein smarter Ansatz gewählt: So erscheint „Barrierefreiheit-Eigenschaften untersuchen“ im Kontextmenü nur noch, wenn die Entwicklerwerkzeuge von Firefox mindestens einmal benutzt worden sind. Und die Schaltfläche für die Startseite, die standardmäßig ebenfalls nicht mehr angezeigt wird, wird nur für die bestehenden Nutzer entfernt, welche die Standard-Startseite von Firefox nutzen und diese Schaltfläche bisher nicht genutzt haben.

Weniger Unterbrechungen

In diversen Situationen hatte Firefox in der Vergangenheit kontextbezogene Empfehlungen gemacht, beispielsweise um auf die Synchronisations-Funktion von Firefox hinzuweisen. Sämtliche Empfehlungen dieser Art wurden entfernt, um den Nutzer in seinen Aufgaben nicht zu unterbrechen.

Standard- wird zu System-Theme

Bislang wurde Firefox mit vier verschiedenen Designs ausgeliefert: Standard, Hell, Dunkel, Firefox Alpenglow. Nach wie vor gibt es vier Optionen, wobei es sich nun tatsächlich nur noch um drei verschiedene Themes handelt.

Während bei Verwendung eines dunklen Betriebssystem-Designs das Standard-Design dem dunklen Design entsprach, gab es bei Verwendung des hellen Betriebssystem-Designs Unterschiede zwischen Standard und Hell. Diese unnötige Komplexität wurde entfernt, so dass das Standard-Theme jetzt immer 1:1 dem hellen respektiven dunklen Theme entspricht, je nachdem, ob das Betriebssystem hell oder dunkel eingestellt ist. Entsprechend wurde die Option in System-Theme umbenannt.

Firefox 89 Proton-Design

Kompakter Modus

Was nur wenige Nutzer wissen: Firefox besitzt einen kompakten Modus, welcher etwas weniger Platz benötigt. Für Nutzer, welche diesen bereits nutzten, ist der kompakte Modus weiterhin aktiv. Für alle anderen Nutzer ist die dazugehörigen Einstellung nun hinter dem Schalter browser.compactmode.show in about:config versteckt. Nach Setzen des Schalters auf true steht die „Dichte“-Einstellung wieder unter Menü > Weitere Werkzeuge > Symbolleiste anpassen… zur Verfügung.

Weitere Verbesserungen folgen

Mit Firefox 89 endet die Arbeit für Mozilla noch nicht. So werden mit den nächsten Updates weitere Detail-Verbesserungen und Korrekturen folgen, die es nicht mehr in Firefox 89 geschafft haben. Daneben arbeitet Mozilla auch noch an größeren Projekten wie einem umfangreichen Dark Mode für macOS oder neuen Tooltips für Tabs und Lesezeichen.

Der Beitrag Proton: Ausführliche Vorstellung des neuen Firefox-Designs erschien zuerst auf soeren-hentzschel.at.

Antworten 4

  • Zitat

    Übrigens: Wer die zweite Zeile nicht mag, kann diese über about:config deaktivieren. Dazu muss über about:config der Schalter browser.tabs.secondaryTextUnsupportedLocales um das Kürzel der genutzten Sprache ergänzt werden, also für einen deutschsprachigen Firefox um ,de. Anschließend ist Firefox neu zu starten.

    Ich passe gerade mein Design an die neue Proton-Wirklichkeit an und da stellen sich mir bei den Tabs folgende zwei Fragen:


    Frage 1: Warum sehe ich in FF89 die zweite Zeile beim Abspielen von Medien nicht, obwohl der entsprechende Schalter kein 'de'-Kürzel enthält? Muss noch irgendwas aktiviert werden?


    Frage 2: Bleibt die Einstellung zum Abschalten der zweiten Zeile in about:config erhalten oder ist sie auch nur temporär?


    Danke im Voraus...

  • Frage 1: Warum sehe ich in FF89 die zweite Zeile beim Abspielen von Medien nicht, obwohl der entsprechende Schalter kein 'de'-Kürzel enthält? Muss noch irgendwas aktiviert werden?


    Entweder nutzt du den kompaken Modus oder eine individuelle Anpassung verursacht das.


    Frage 2: Bleibt die Einstellung zum Abschalten der zweiten Zeile in about:config erhalten oder ist sie auch nur temporär?


    Die Einstellung ist dauerhaft angedacht, weil das mit den zwei Zeilen für bestimmte Sprachen mit anderen Schriftzeichen nicht funktioniert, ohne die Höhe der Tabs zu vergrößern, was aber nicht geplant ist.

  • Danke für die schnelle Antwort!


    zu 1) Es war wirklich der 'kompakte Modus'...

    zu 2) Gut zu hören.

  • Ich pack's in dieses Thema, weil es hier gut passt:

    https://medium.com/firefox-ux/…-new-firefox-44116a6ac99b


    In diesem Artikel stellt Mozillas Content-Strategie-Team ein paar wesentliche Gedanken und Motivationen hinter ein paar Design-Entscheidungen von Proton vor. Sehr interessant zu lesen, weil es dabei hilft, das Design zu verstehen, und Einblicke in den Prozess gibt.

  • Diskutiere mit!