Ein umfassender Leitfaden zum Entwerfen von Hintergründen im Jahr 2024

Wenn Sie einen Dienst über einen Link auf dieser Seite abonnieren, verdient Reeves and Sons Limited möglicherweise eine Provision. Siehe unsere Ethikerklärung.

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

Heutzutage ist das richtige Erstellen von Hintergründen schwieriger als früher und stellt einige neue Herausforderungen dar, während einige der Möglichkeiten, die andere Hintergründe haben, eingeschränkt werdenwise hätte.

Zum Beispiel könnte der Hintergrund in früheren Zeiten tatsächlich als praktischer Teil der Gestaltung verwendet werden. Sie könnten zum Beispiel Pfeile darauf platzieren, um die Aufmerksamkeit des Betrachters auf etwas Wichtiges zu lenken.

Warum sich die Dinge geändert haben, liegt an der Notwendigkeit von responsive Design und die Vielfalt der verschiedenen Bildschirmgrößen und Bildschirmtypen, die möglicherweise verwendet werden.

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 dem obigen Bild entnehmen können, kümmern sich die am besten platzierten Websites überhaupt nicht um Hintergründe, und es scheint ihnen in Bezug auf die Benutzerakzeptanz nicht den geringsten Schaden zugefügt zu haben.

Dies widerspricht dem konventionellen Denken in Bezug auf das Website-Design, aber es ist schwer, mit kalten, harten Fakten zu argumentieren. Erstaunlicherweise springt die erste Website auf der Liste mit einem Hintergrund erst an, wenn Sie die Nummer 10 erreichen, also Twitter, und 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:

  • Twittermit fotografischem Hintergrund (Rang 10)
  • 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 er hilft, ein Gefühl der Website-Identität über mehrere Seiten hinweg aufrechtzuerhalten, aber da es andere Elemente gibt, die dieses Ziel genauso gut und vielleicht besser erreichen können, ist das kein wirklich großer Vorteil.

Nachteile sind zahlreich. Hintergründe bringen zusätzliche Herausforderungen mit sich, wenn es um die Website geht responsiveness und erfordern möglicherweise häufige Aktualisierungen, um ein Veralten zu vermeiden.

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.

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

Hintergründe sollten enthalten sein

Inhalte müssen sich immer auf einer Ebene über dem Seitenhintergrund befinden. Wenn Sie Ihre Seitenelemente nicht in verschiedene Ebenen aufteilen, kann dies zu Problemen führen, 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 das für Sie im Moment nicht wichtig ist, aber es kommt oft vor, dass es später ein Faktor wird.

Das Wichtigste, was zu verstehen ist, ist, dass der „Hintergrund“ alles ist, was nicht zufrieden ist. Text oder Bilder, die auf der Seite sein sollen, aber nicht als Inhalt gelten, gelten als Teil des Hintergrunds, aber nicht jeder wird sie auf diese Weise klassifizieren.

Einrahmung

In den Anfängen des Webdesigns ging es beim Framing lediglich darum, herauszufinden, wo sich Ihre Inhalte im Verhältnis zum Hintergrund befinden sollten. An diesem Tag von responsive Das Design ist jedoch in der Regel komplizierter.

Mit der responsive Design haben Sie nur zwei Möglichkeiten, sich mit dem Framing-Problem zu befassen. Die erste Möglichkeit 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 sein wird.

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.

Dieses Problem der „Designintegrität“ bedeutet übrigens einfach, dass das Design immer gleich aussieht, unabhängig davon, auf welcher Art von Bildschirm es angezeigt wird. Im Gegenteil, der Inhalt sieht immer (mehr oder weniger) gleich aus, egal auf welcher Art von Bildschirm er angezeigt wird.

Verwenden der Skalierung für responsiveheit

Wenn Sie die Skalierung verwenden, um einen einheitlichen Rahmen über verschiedene Gerätetypen und Ausrichtungen hinweg beizubehalten, bleibt die Integrität Ihres Designs erhalten, aber das Ergebnis ist möglicherweise immer noch 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. Beginnend mit dem Samsung Galaxy S5 im Hochformat (beachten Sie, dass diese Bilder so skaliert sind, dass sie in den Artikel passen, sodass der Text, den Sie dort sehen, tatsächlich auf dem Gerät selbst lesbar ist).

So sieht es im Querformat aus (es ist fast immer besser, ein Telefon für alles außer zum Telefonieren im Querformat zu halten, aber die Leute 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.

Was Sie bei der Skalierung bemerken werden, ist, dass es kaum Unterschiede zwischen verschiedenen Geräten und Auflösungen gibt, außer dass in der Hochformatansicht viel vertikaler Platz verschwendet werden kann.

Es wäre eigentlich besser, verschiedene Methoden für den Hintergrund und den Inhalt zu verwenden, damit die Menüelemente in ein 2 × 2-Raster eingebunden werden, anstatt immer im 1 × 4-Layout zu bleiben. Der Grund dafür ist jedoch, dass dies nicht der Fall ist 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 von stufenweisem Verbergen und Aufdecken responsiveheit

Ein praktischeres Szenario, das die meisten Designer die meiste Zeit verwenden möchten, ist ein Design, bei dem der Hintergrund (oder Teile davon) einfach ausgeblendet werden kann, wenn nicht genügend Platz vorhanden ist, um ihn anzuzeigen, also immer der Inhalt der Website erhält maximale Aufmerksamkeit.

Hier ist ein Beispiel für den Unterschied bei der Verwendung dieser Methode. Wir verwenden zur Veranschaulichung dieselben Geräte und Ausrichtungen. Das erste ist das Samsung Galaxy S5-Porträt.

Samsung Galaxy S5 Landschaft.

iPad Porträt.

iPad Landschaft.

Hier sieht man einen erheblichen Unterschied zwischen den Geräten. Der kleine Bildschirm des Samsung Galaxy S5 lässt es nicht zu, dass der Hintergrund angezeigt wird, egal ob das Gerät im Hoch- oder Querformat gehalten wird, und was angezeigt wird, passt sich an den verfügbaren Platz an.

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 erfolgen, dass es nicht auffällt. Das Dehnen eignet sich normalerweise am besten für fotografische Hintergründe oder um sie auf einen vordefinierten Bereich zu beschränken.

Die Ära des großen, spritzigen Hintergrunds ist so gut wie tot, mit Ausnahme von Spezialseiten, die nur für die Anzeige auf einem gedacht sind desktop. Die meisten Hintergründe für desktops sehen nicht gut aus, wenn sie auf Telefonen angezeigt werden.

Eine Problemumgehung besteht darin, eine große Anzahl von Haltepunkten in Ihrer CSS-Datei einzurichten und in zu entwerfendiviDualer Hintergrund für jeden Haltepunkt, aber wie üblich besteht die Herausforderung darin, dass der verfügbare vertikale Raum 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.

Kommentare 0 Antworten

Hinterlassen Sie uns einen Kommentar

E-Mail-Adresse wird nicht veröffentlicht. Pflichtfelder sind MIT * gekennzeichnet. *

Rating *

Diese Seite verwendet Akismet, um Spam zu reduzieren. Erfahren Sie, wie Ihre Kommentardaten verarbeitet werden.