Eine der am häufigsten gestellten Fragen, die wir erhalten, ist eine Variante des Hintergrunds, den jemand für seine Website verwenden sollte. Diese Designer haben den grundlegenden Inhalt und das Layout ziemlich genau festgelegt, aber der Hintergrund ist entweder zu langweilig oder zu voll und sie wissen nicht, wie sie das beheben sollen.
Heute werfen wir einen Blick auf einige Live-Sites, um sich ein wenig inspirieren zu lassen, wie Sie einer Webseite effektiv interessante Hintergründe hinzufügen können. Setzen Sie ein Lesezeichen für diesen Artikel und kommen Sie darauf zurück, wenn Sie das nächste Mal eine Hintergrundentscheidung treffen.
# 1 Skizzieren Sie es
Diese Art von Hintergrund wurde vor einigen Jahren populär und bleibt bis heute bestehen. Sie entspringt der Idee eines Notizbuchs voller Kritzeleien, wie das eines typischen Teenagers im Englischunterricht. Alles hat eine grobe, schnell skizzierte Erscheinung und die Seite ist eine ziemlich zufällig aussehende Sammlung von Ideen, die alle verstreut sind und bei verschiedenen Rotationen platziert werden.
NotchStudio zieht diese Idee auf eine ziemlich gedämpfte Weise aus.
Auch wenn Sie nicht zeichnen können, lässt sich dieser Look relativ leicht abziehen, da die Kritzeleien im Allgemeinen super einfach sind. Wenn Sie ein Wacom oder ein iPad besitzen, können Sie leicht einige Ihrer eigenen Fotos oder gedruckten Texte auf eine Weise verfolgen, die diesen Stil widerspiegelt. Es gibt auch viele kostenlose Schriftarten wie Pointy, mit denen Sie mit wenig Aufwand fantastischen skizzierten Text erstellen können.
# 2 Subtiles Pergament
Papiertexturen haben Designer schon immer fasziniert, und wir werden sie wahrscheinlich noch lange einsetzen. Der aktuelle Trend ist nicht so sehr der intensive Grunge von vor einigen Jahren, sondern eher ein subtilerer Effekt, den Sie leicht übersehen könnten, wenn Sie nicht danach suchen würden.
Beachten Sie, dass die Textur, die auf der Website von Beautiful Type unten verwendet wird, nicht ablenkend oder übertrieben ist, sondern lediglich ein schönes Finish für eine Website ergibt, die ohne sie bereits perfekt aussehen würde.
Schauen Sie sich Lost and Taken für Tonnen von großartigen Texturen an, die Sie in all Ihren Designs verwenden können.
# 3 Ein radialer Farbverlauf
Gradienten haben in letzter Zeit einen schlechten Ruf von Designern bekommen, die sich für überlastet halten. Ich persönlich denke, dass sie leicht missbraucht und schlecht ausgeführt werden, aber es wird keine Zeit kommen, in der alle Designs überall reine Farben ohne jegliche Abstufungen verwenden. Da Farbverläufe die Realität widerspiegeln (in der Natur sehen wir niemals reine, unverfälschte Volltonfarben), werden Designer sie weiterhin verwenden, um ihre Designs realer zu gestalten.
Bei Gradienten ist es oft am besten, die Dinge einfach zu halten. Mischen Sie keine verrückten Farben und erzeugen Sie schlammige Übergänge, sondern entscheiden Sie sich für einen einfachen Farbverlauf. Einer meiner Favoriten ist der gute alte graue bis schwarze (oder dunklere graue) Radialverlauf. Es ist sauber und einfach zu implementieren und sieht sehr edel aus.
Sie können dies in der Praxis auf der unten gezeigten 177. Website nachlesen.
# 4 Zweifarbig!
Eine andere Lösung, die ich besonders elegant oder mutig finde (je nach Ausführung), besteht darin, einen harten Übergang direkt durch die Seite zu setzen. Dies geschieht in der Regel horizontal, kann sich jedoch vertikaler und auffälliger anfühlen.
Die Idee hier ist, die Magie des Kontrastes zu nutzen. Unsere Augen sind von Natur aus zum Kontrast hingezogen, wir können einfach umhin! Der Schlüssel zum Abziehen dieser Methode besteht darin, sicherzustellen, dass Ihre beiden Farben wirklich kontrastieren. Wählen Sie nichts aus, das Konflikte oder Konflikte hervorruft, sondern versuchen Sie stattdessen eine wirklich dunkle Farbe und dann einen wirklich hellen Farbton derselben Farbe.
Mein bevorzugtes Werkzeug zum Erstellen dieser Kombinationstypen ist 0to255, mit dem Sie schnell und einfach Webwerte für Variationen jeder Farbe ermitteln können.
# 5 Vollbildfotografien
Ich erwähne diese Idee so sehr, dass Sie es wahrscheinlich satt haben, aber ich werde sie mir so lange wie möglich in den Kopf bohren: großartige Fotografie macht großartiges Design. Es ist schlicht und einfach. Wir alle lieben es, ein gutes Foto anzuschauen, so dass die Bearbeitung eines Designs für eine Website, die jeder gerne betrachtet, ausreicht. Einfach richtig?
Fotos bieten Inspiration für das gesamte Site-Design. Sie können Farben, Texturen und sogar Typografie-Inspiration aus einem Foto ziehen und ein schönes, zusammenhängendes Thema erstellen.
Sehen Sie sich an, wie die dunklen Elemente der entworfenen Elemente auf der folgenden Website das Aussehen und Verhalten vieler der in der Homepage-Diashow verwendeten Fotos widerspiegeln.
Wenn Sie sich fragen, wie Sie eine Website wie folgt codieren können, lesen Sie unseren neuesten Artikel: Erstellen Sie ganz einfach eine Diashow-Website ohne Flash im Vollbildmodus.
# 6 Textur zum Ausblenden der Farbe
Ein Trick, den ich wirklich sehr mag, ist, dass ich in letzter Zeit viel gesehen habe, Lichteffekte oder ähnliches zu verwenden, um nur ein wenig Textur oben auf einer Seite einzufügen, die schnell zu einer Volltonfarbe übergeht.
Texturen können die Lesbarkeit Ihres Textes leicht verringern und unnötige visuelle Störungen auf einer ansonsten verwendbaren Seite verursachen. Indem Sie auf eine Textur an einem Ort hinweisen, können Sie die Vorteile der zusätzlichen Augenweide nutzen, ohne die Ästhetik und / oder Lesbarkeit der Website insgesamt zu beeinträchtigen.
Wir haben zu oft das Gefühl, eine Textur zu wählen, bedeutet, dass wir den Hintergrund mit einer CSS-Hintergrundwiederholung damit überfluten müssen. Seien Sie wählerischer bei der Textur, und Ihre Designs sehen sofort schöner aus.
# 7 Nachschlagen
Der Himmel ist eine konstante und fantastische Ablenkung für den Menschen. Wolken, Sonnenstrahlen, Sterne, Planeten, der Mond; All diese Objekte haben eine Art magischer Ort in unserem Kopf, der sie für das Auge unwiderstehlich macht.
Seien Sie sehr vorsichtig, wenn Sie diese Elemente in Ihren Hintergrund integrieren. Es ist sehr einfach, etwas Hässliches und / oder Klischees zu erzeugen. Diese Technik sollte nur von Designern verwendet werden, die ein echtes Gespür für Ästhetik haben und wie man eine Idee wie "Raum" nimmt. und machen Sie es nicht wie etwas von einem alten Windows-Bildschirmschoner aussehen.
Die folgende Website ist ein großartiges Beispiel für eine wirklich schöne Himmelszene, die als starker Hintergrund für die Website verwendet wird. Die Planeten werden wunderschön mit einem Vintage-Farb-Vibe und einer subtilen Textur aus diagonalen Linien dargestellt. Dies ist die Art von Liebe zum Detail, mit der Sie vertraut sein sollten, bevor Sie einen Himmelshintergrund auf Ihre Website werfen.
# 8 Argyle
Ich kann dich jetzt hören? Argyle? Bist du verrückt?? Bevor Sie mich in den Kommentaren ansprechen, können Rautenmuster einige wirklich attraktive Ergebnisse erzielen. Wie beim vorherigen Tipp sollten sie jedoch von niemandem versucht werden, außer von erfahrenen Designern, die wissen, wie man verrückte Muster verwendet, ohne eine wirklich hässliche Website zu erstellen.
Sehen Sie sich die wirklich gute Verwendung dieser Idee auf der unten stehenden Website an. Das modifizierte Muster im Argyle-Stil ist nur dazu da, um einige schöne farbige Akzente zu setzen, und ist nicht wirklich bemüht, Ihre Aufmerksamkeit zu erregen.
# 9 Abstrakt & Verrückt
Haben Sie meine Vorschläge satt, um vorsichtig zu sein? und? nimm es leicht? mit subtilen Designberührungen? Na dann ist dieser Tipp für dich. Manchmal ist der beste Hintergrund etwas Verrücktes und Mutiges, das mit dem Inhalt der Seite keinen Sinn machen muss, es zieht einfach Ihre Aufmerksamkeit auf sich.
Ich fand, dass beide der unten aufgeführten Websites wirklich gut abschneiden. Beachten Sie, wie der zweite besonders wie ein gemaltes Aquarellstück aussieht. Dies ist eine sehr beliebte Technik, mit der Sie online viele Ressourcen zum Nachahmen finden können.
Gehen Sie mit dem Begriff? Abstraktes Aquarell? um zu sehen, was Sie finden können. Es gibt viele billige Bilder in dieser Kategorie, die das visuelle Interesse Ihrer Seite wirklich steigern werden.
# 10 Keine Angst vor Volltonfarben
Alle oben genannten Ratschläge dienen dazu, Ihre Anforderungen an großartige Hintergrundideen für Ihre Website zu erfüllen. Es ist jedoch sehr wichtig, dass Sie als Designer verstehen, dass an einfarbigen weißen Flächen absolut nichts auszusetzen ist. Es ist eine wichtige Zutat in vielen meiner Lieblingsdesigns aller Zeiten und zu lernen, wie man es richtig einsetzt, ist ein wichtiger Teil der Entwicklung eines Designers.
Schauen Sie sich die wunderschöne Fuzion Ads-Website unten an. Das Design ist wirklich ein typografisches Fest, das Ihre Aufmerksamkeit auf sich zieht und effektiv kommuniziert, obwohl der Hintergrund nur eine einfache alte langweilige Volltonfarbe ist!
Schauen Sie sich unbedingt Piknik an, ein kostenloses Tool, das Sie Ihrem Designarsenal hinzufügen müssen. Auf dieser Website können Sie ganz einfach eine Vorschau und Farben auswählen, um Ihren Bildschirm auszufüllen. Sie bewegen einfach Ihre Maus und der Hintergrund ändert seine Farbe.
Fazit
Der Hintergrund, den Sie auswählen, bestimmt den Ton und die Persönlichkeit Ihrer gesamten Website. Ich arbeitete gerade mit einem Designer zusammen, der seine Site in unserer Galerie präsentieren wollte, aber einfach ein wirklich schlechtes Hintergrundbild ausgewählt hatte. Das Design und das Layout der Website waren großartig, aber ich konnte den hässlichen Hintergrund einfach nicht überwinden. Nachdem ich darauf hingewiesen hatte, stimmte er zu und wechselte zu etwas viel Einfacherem, das die Site auf ein ganz neues Niveau brachte.
Wie ich in den einleitenden Absätzen gesagt habe, wenn Sie das nächste Mal in einem Designfalle stecken und keinen guten Hintergrund für Ihre Website auswählen können, kehren Sie zu diesem Beitrag zurück und probieren Sie einige der Ideen, die ich hier vorgestellt habe. Früher oder später landen Sie auf einem Land, das für Ihr Projekt perfekt ist.
Wie immer danke fürs Lesen! Wenn dir der Artikel gefallen hat, gib uns einen Tweet, Stolpern, Liken oder sonst etwas, worauf du Lust hast!