Hintergründe für Websites gestalten

Der wichtigste Bestandteil eines Website-Designs ist der Hintergrund einer Website auf vielfältige Weise, um die Benutzererfahrung zu verbessern.

Das Erstellen von Hintergründen ist heutzutage schwieriger als früher und stellt einige neue Herausforderungen dar, während einige der Möglichkeiten eingeschränkt werden, die anderenfalls sonst möglich wären.

Beispielsweise könnte der Hintergrund in früheren Zeiten tatsächlich als praktischer Teil des Entwurfs verwendet werden. Sie können beispielsweise Pfeile darauf setzen, um die Aufmerksamkeit des Betrachters auf etwas Wichtiges zu lenken.

Warum sich die Dinge geändert haben, liegt daran, dass ein responsives Design erforderlich ist und dass die verschiedenen Bildschirmgrößen und Bildschirmtypen unterschiedlich sind.

Infolgedessen ist der Hintergrund heutzutage ein weniger wichtiges Element bei der Gestaltung von Websites geworden, und viele Websites haben überhaupt keinen offiziellen Hintergrund.

Sind Hintergründe wirklich wichtig? Um dies herauszufinden, haben wir die Top-30-Websites (ohne Wiederholungen) überprüft und die Ergebnisse sind sehr interessant.

Wie Sie auf dem Bild oben sehen können, kümmern sich die Top-Websites nicht um Hintergründe, und es scheint ihnen nicht den geringsten Schaden in Bezug auf die Benutzerakzeptanz angetan zu haben.

Dies widerspricht dem herkömmlichen Denken über das Website-Design, aber es ist schwer, mit harten Fakten zu argumentieren. Erstaunlicherweise tritt die erste Website auf der Liste mit einem Hintergrund erst dann ein, wenn Sie die Nummer 10 (Twitter) erreichen. Dieser Hintergrund ist nur sichtbar, wenn Sie nicht angemeldet sind.

In den Top-30-Websites für 2017 waren die einzigen Websites mit dem richtigen Hintergrund:

  • Twitter mit fotografischem Hintergrund (Rang 10th)
  • Live (Outlook), mit einfarbigem Hintergrund (Rang 12th)
  • NetFlix mit Collage-Hintergrund (Rang 21st)
  • WordPress mit einem einfarbigen Hintergrund (Rang 26)th)
  • Bing mit fotografischem Hintergrund (Rang 29)th)
  • Tumblr, mit fotografischem Hintergrund (Rang 30)th)

Daher hatten nur 20 Prozent der Top-30-Websites Hintergründe, und diejenigen, die dies taten, waren weit unten auf der Liste.

Der einzige Vorteil eines Website-Hintergrunds besteht darin, dass die Identität der Website über mehrere Seiten hinweg erhalten bleibt. Da es jedoch andere Elemente gibt, die dieses Ziel genauso gut und möglicherweise besser erreichen können, ist dies kein großer Vorteil.

Nachteile sind zahlreich. Hintergründe führen zu zusätzlichen Herausforderungen, wenn es um die Reaktionsfähigkeit an Standorten geht, und müssen häufig aktualisiert werden, um zu vermeiden, dass sie veraltet werden.

Eine weitere Herausforderung für den modernen Designer ist, dass neben statischen Hintergründen nun auch die Erstellung von Video-Hintergründen möglich ist. Wenn Sie sich für Letzteres entscheiden, ist es wichtig zu wissen, was Sie tun, da viele Benutzer einen schlecht konzipierten Videohintergrund als störend empfinden.

Mit so vielen Gründen, keine Hintergründe zu verwenden, können Sie sich entscheiden, in die Fußstapfen dieser hochrangigen Websites zu treten und die gesamte Hintergrundidee ein für alle Mal aufzugeben. Aber wenn der Brief darauf besteht, dass die Site einen Hintergrund haben muss, was können Sie tun? Das versuchen wir im Rest dieses Artikels zu lösen.

Hintergründe sollten enthalten sein

Der Inhalt muss sich immer auf einer Ebene über dem Seitenhintergrund befinden. Wenn Sie Ihre Seitenelemente nicht in verschiedene Ebenen unterteilen, kann dies Probleme verursachen, wenn etwas geändert werden muss.

Es wird empfohlen, diese Schichttrennung so weit wie möglich anzuwenden. Muss zum Beispiel das Logo der Site wirklich direkt in den Hintergrund eingefügt werden? In den meisten Fällen ist es sinnvoller, das Logo in einer separaten Ebene zu haben. Auf diese Weise kann das Logo unabhängig vom gesamten Hintergrund aktualisiert werden, wenn das Logo aktualisiert werden muss.

Die Verwendung von Ebenen auf diese Weise bedeutet für Sie mehr Arbeit auf der Seite der Erstellung, weniger auf der Wartungsseite. Es gibt Ihnen auch maximale Kontrolle, da Sie Dinge verbergen, verschieben oder ändern können, je nach Ihren Bedürfnissen zu jeder Zeit.

Dieses Bild zeigt die ideale Struktur für eine Hintergrunddesignvorlage:

Innerhalb jeder Ebene (außer der Basisebene) können zusätzliche Ebenen erstellt werden, um noch mehr Trennungsgrad zu erreichen, falls Sie sie benötigen.

Je mehr Trennungsgrade Sie erstellen, desto mehr Kontrolle können Sie gewinnen. Sie haben vielleicht das Gefühl, dass dies für Sie jetzt nicht wichtig ist, aber es kommt oft vor, dass es später zu einem Faktor wird.

Die wichtigste Sache, die man verstehen muss, ist, dass der "Hintergrund" alles ist, was nicht zufriedenstellend ist. Text oder Bilder, die auf der Seite sein sollen, aber nicht als Inhalt gelten, werden als Teil des Hintergrunds betrachtet, aber nicht jeder klassifiziert sie so.

Einrahmung

In den frühen Tagen des Webdesigns war das Framing nur eine einfache Frage, inwieweit sich Ihre Inhalte im Verhältnis zum Hintergrund befinden sollten. An diesem Tag des responsiven Designs ist es jedoch normalerweise komplizierter.

Beim responsive Design haben Sie nur zwei Möglichkeiten, sich mit dem Rahmenproblem zu beschäftigen. Die erste Option besteht darin, den Inhalt und das Hintergrundbild relativ zur verfügbaren Bildschirmgröße zu skalieren. Dies ist optimal, wenn die Designintegrität der wichtigste Faktor ist, obwohl dies eine ziemlich seltene Situation ist.

Die zweite Option besteht darin, Teile des Hintergrunds oder sogar den gesamten Hintergrund auszulagern, wenn häufiger die Lesbarkeit von Inhalten wichtiger ist als die Integrität des Entwurfs.

Diese Ausgabe von „Design Integrity“ bedeutet übrigens einfach nur, dass das Design immer gleich aussieht, egal auf welchem ​​Bildschirm es betrachtet wird. Das Gegenteil ist der Fall, bei dem der Inhalt (mehr oder weniger) immer gleich aussieht, egal auf welchem ​​Bildschirm er betrachtet wird.

Verwenden der Skalierung für die Reaktionsfähigkeit

Wenn Sie die Skalierung verwenden, um eine einheitliche Rahmung für verschiedene Gerätetypen und -ausrichtungen beizubehalten, wird die Integrität Ihres Designs beibehalten. Das Ergebnis ist jedoch möglicherweise nicht immer das, was Sie erwarten oder sogar wünschen, insbesondere wenn Sie einen fotografischen Hintergrund verwenden.

Schauen wir uns ein Beispiel dieser Technik in Aktion an. Beginnen Sie mit dem Samsung Galaxy S5 im Hochformatmodus (beachten Sie, dass diese Bilder an den Artikel angepasst werden, sodass der Text, den Sie dort sehen können, auf dem Gerät selbst lesbar ist).

So sieht es im Querformat aus (fast immer ist es besser, ein Telefon in Querformat für alles außer Telefonieren zu halten), doch die Menschen bestehen immer noch darauf, ihr Telefon im Hochformat zu halten.

Wie Sie sehen, ist das Layout perfekt skaliert, auch wenn Sie nur mit 640 x 360-Pixeln arbeiten. Als nächstes haben wir das iPad im Hochformat.

Und Landschaft.

Bei der Skalierung werden Sie feststellen, dass zwischen den verschiedenen Geräten und Auflösungen nur geringe Unterschiede bestehen, außer dass in der Hochformatansicht viel Platz verschwendet wird.

Es ist tatsächlich besser, verschiedene Methoden für Hintergrund- und Inhaltsteile zu verwenden, so dass die Menüelemente in ein 2 × 2-Gitter eingebettet werden, anstatt immer im 1 × 4-Layout zu verbleiben. Der Grund dafür ist jedoch nicht der Fall Es ist unmöglich vorherzusagen, wie viel vertikaler Raum verfügbar sein wird.

Daher ist der Vorteil der Skalierung der Fall, wenn Sie sicherstellen möchten, dass eine Komponente unabhängig von den Umständen immer im Blick bleibt.

Verwenden Sie phasenweise ausblenden und die Reaktionsfähigkeit zeigen

Ein praktischeres Szenario, das die meisten Designer am häufigsten verwenden möchten, ist ein Design, bei dem der Hintergrund (oder Teile davon) einfach abgebaut werden kann, wenn nicht genügend Platz für die Anzeige vorhanden ist, sodass der Inhalt der Website immer angezeigt wird erhält maximale Aufmerksamkeit.

Hier ist ein Beispiel für den Unterschied bei der Verwendung dieser Methode. Wir werden zur Veranschaulichung die gleichen Geräte und Ausrichtungen verwenden. Erstens ist Samsung Galaxy S5 Porträt.

Samsung Galaxy S5 Landschaft.

iPad Porträt.

iPad Landschaft.

Hier sehen Sie einen erheblichen Unterschied zwischen den Geräten. Auf dem kleinen Bildschirm des Samsung Galaxy S5 kann der Hintergrund nicht angezeigt werden, unabhängig davon, ob das Gerät im Hoch- oder Querformat gehalten wird und was angezeigt wird, um sich an den verfügbaren Platz anzupassen.

Wenn dieselbe Website auf dem iPad angezeigt wird, wird der Hintergrund unabhängig von der Ausrichtung angezeigt. Es gibt jedoch Unterschiede in der Anzeige.

Beste Konzepte für Hintergrunddesign (in Reihenfolge)

1. Vollfarbe (oder keine Farbe)

2. Fotografisch (gestreckt)

3. Kleine Fliese (perfekt nahtlos)

4. Große Fliese (perfekt nahtlos)

Was Sie vermeiden sollten, ist das Kacheln von fotografischen Hintergründen, es sei denn, dies kann so gemacht werden, dass es nicht auffällt. Dehnen ist normalerweise am besten für fotografische Hintergründe oder um sie in einem vordefinierten Raum zu begrenzen.

Die Ära des großen, spritzigen Hintergrunds ist ziemlich tot, außer für spezielle Websites, die nur für die Anzeige auf einem Desktop gedacht sind. Die meisten für Desktops entwickelten Hintergründe werden auf dem Telefon nicht gut dargestellt.

Als Workaround können Sie eine große Anzahl von Haltepunkten in Ihrer CSS-Datei einrichten und für jeden Haltepunkt individuelle Hintergründe entwerfen. Wie üblich besteht jedoch die Herausforderung, dass der verfügbare vertikale Speicherplatz niemals berechnet werden kann, selbst wenn der Gerätetyp bekannt ist .

Headerbild mit freundlicher Genehmigung von

Bogdan Rancea

Bogdan ist Gründungsmitglied von Inspired Mag und hat in diesem Zeitraum fast 6-Jahre Erfahrung gesammelt. In seiner Freizeit studiert er gern klassische Musik und erforscht die bildende Kunst. Er ist auch ziemlich besessen von Fixies. Er besitzt bereits 5.