Beim Entwerfen einer Site müssen Sie zunächst entscheiden, wie das erste Pixel-Pixel aussehen soll, das den Benutzern angezeigt wird. Sie müssen ihre Aufmerksamkeit auf sich ziehen und Ihre Nachricht über die Falte oder das Risiko, dass die Person zu ihrer nächsten geöffneten Registerkarte wechselt, kommunizieren.
Leider fallen viele von uns in vorhersehbare Muster für diesen Teil der Website. Wir verwenden die gleichen alten Tricks, Formen und Plugins und kommen zu einem Ergebnis, das zwar gut aussieht, aber nicht wirklich aufregend ist. Heute schauen wir uns kurz an, wie Sie Ihre Header-Bilder interessanter gestalten können. Auf dem Weg werden wir einige Live-Beispiele von Sites sehen, die diese Techniken erfolgreich implementiert haben.
Das Standard, langweilige Header-Bild
Wenn ich mit dem Wireframing eines Projekts beginne, beginne ich zu oft mit einem der folgenden Punkte:
Versteht mich nicht falsch, dies ist ein grundsolides Layout und der Grund, warum es so beliebt ist, ist, dass es extrem gut funktioniert. Es gibt jedoch eine Zeit für den sicheren Weg und eine Zeit für kreatives Verzweigen und Erforschen neuer Ideen.
Der Teil, mit dem ich mich langweilt, ist das Header-Bild (ich verwende den Begriff? Header? Lose, um den oberen Teil der Seite zu bedeuten). Es ist nur ein großes statisches Rechteck. Wenn es dynamisch ist, ist es normalerweise etwas so einfaches wie ein jQuery-Bildschieber. Wieder einmal einer meiner Lieblingstrick-Tricks, jedoch nicht gerade eine gute Darstellung von "out of the box". zu diesem Zeitpunkt zu denken.
Wie können wir also aus der Bresche rennen, wenn wir jedes Mal, wenn wir ein großes, mutiges Bild in unserem Header benötigen, zum müden Rechteck rennen? Wenn wir uns wirklich mit dem Problem beschäftigen, bieten sich einige Lösungen leicht an.
Ändern Sie es nach oben
Hier ein paar kurze Gedanken, wie Sie Ihren Header-Bildern Abwechslung hinzufügen können. Fällt Ihnen noch etwas ein?
Ändern Sie die Form
Das erste, was mir einfällt, ist das Abgraben des Rechtecks. Versuchen Sie es mit einem Quadrat, einem Kreis, einem Dreieck oder sogar einer Reihe von Bildern. Sie können sogar den gesamten Container zusammenlegen und versuchen, ein Symbol oder eine Grafik direkt auf dem Hintergrund Ihrer Website zu platzieren.
Lassen Sie sich auch nicht einfach auf Standardformen ein. Versuchen Sie, ein Bild zu erstellen, das eine abstraktere, fließendere Form verwendet. Biegen Sie es um Ihren Inhalt, um Kreativität zu erzeugen.
Machen Sie es dynamischer
Gehen Sie über den jQuery-Bildschieber hinaus. Denken Sie an eine neue Art und Weise, wie Sie einen Benutzer dazu bringen können, mit dem Bild zu interagieren. Verwenden Sie Klicken, Scrollen, Mausbewegungen und mehr, um das Bild auf interessante Weise zu transformieren.
Ausbrechen
Eine weitere sehr einfache Möglichkeit, das Header-Bild interessanter zu gestalten, besteht darin, den Inhalt des Inhalts ausbrechen zu lassen oder den Inhalt, der sich außerhalb befindet, einzubrechen.
Ich habe diese Technik mit einem App-Screenshot in einem aktuellen Design Tricks-Artikel verwendet.
Jedes Mal etwas anderes
Ein beliebter Trick, den Apple häufig auf seiner Homepage verwendet, ist das Drehen einer Reihe von Header-Bildern. Wenn Sie die Seite aktualisieren, werden drei bis vier verschiedene Optionen nach dem Zufallsprinzip ausgewählt.
Dies macht Ihre Website nicht nur attraktiver für Nutzer, sondern hilft Ihnen auch dabei, zu ermitteln, was am besten funktioniert und welche Nutzer am meisten interessiert zu sein scheinen. Wenn Sie sich Ihre Statistiken ansehen, können Sie nachverfolgen, welches Bild die meisten Klicks erzielt, und dann eine neue Strategie erstellen, die auf diesem Wissen basiert.
Beispiele in freier Wildbahn
Nachdem wir nun einige Ideen für die interessantere Herangehensweise an Header-Bilder auf dem Tisch haben, schauen wir uns an, ob wir Beispiele für Designer finden können, die diese Techniken anwenden.
Mitarbeit
Eines meiner Lieblingsbeispiele, das ich kürzlich gesehen habe, ist auf der Site Co-Work. Der Bildschieber oben auf dieser Seite ist im Grunde dieselbe alte Standardtechnik. Der Designer fügte jedoch einige Kerben hinzu, die ihm eine unregelmäßige Form verleihen.
Beachten Sie, wie viel mehr dieses Bild mit dem Rest des Inhalts integriert ist als mit einem typischen Rechteck. Das Logo, die Navigation und der Text werden so gebogen, dass die Site ein fast abstraktes, modernes Kunstgefühl vermittelt, das perfekt für die sauberen, schön gestalteten Arbeitsräume ist, die die Site bewirbt.
Dies erfordert keine überaktive Phantasie oder gar viel Arbeit, sondern ist nur das Ergebnis einer zusätzlichen Anstrengung, die der Site einen ganz eigenen Look verleiht.
Adrian Baxter
Webentwickler Adrian Baxter hat ein weiteres hervorragendes Beispiel für ein einzigartiges Header-Bild auf seiner Website.
Abgesehen von der großartigen Idee, eine Zombiehorde mit nur einer Mac-Bluetooth-Tastatur abzuwehren, unterscheidet sich dieses Bild, da es in vier separate Bedienfelder aufgeteilt wurde. Funktionell gibt es wirklich keinen Grund dafür, aber aus Design-Sicht ist es eine nette Geste. Beachten Sie, wie sich die Anordnung der Links unten widerspiegelt, ein klassisches Beispiel für Wiederholungen im Design.
Der Spaß hört hier jedoch nicht auf, Adrian hat es noch einen Schritt weiter gemacht, indem er einen Parallax-Effekt hinzugefügt hat, der die Szene verschiebt, wenn Sie die Maus auf der Site bewegen. Wenn sich die Szene verschiebt, bluten Bilder aus einem Bild in ein anderes. Es ist ein wirklich schöner Effekt!
Sony Tablet S
Das beeindruckendste innovative Beispiel, das ich finden konnte, war die Site für das Sony Tablet. Die Seite sieht von Anfang an einfach aus, das Kopfbild zeigt eine Art gefalteten Stream, der im Tablet endet. Zu diesem Zeitpunkt war ich nicht wirklich beeindruckt und dachte sogar, dass die Seite etwas zu unübersichtlich aussah.
Wenn Sie nach unten scrollen (oder auf die Abwärtspfeiltaste drücken), wird die Site sehr schnell fancy. Das Tablett bleibt in der Mitte des Bildschirms, während sich der Rest des Inhalts bewegt. Es trennt sich vom gefalteten Strom und beginnt sich im 3D-Raum zu drehen und zu drehen.
Wenn Sie zu einem neuen Inhaltsbereich kommen, wird das Tablet in eine Pose gedreht, die sich in das Design dieses Bereichs einfügt.
Es geht unter anderem um Inhalte, über andere Teile, Überlagerungen erscheinen und zeigen auf Funktionen, Hände kommen heraus und verwenden den Touchscreen; Das Ergebnis ist sehr beeindruckend und sorgt für ein beeindruckendes, dynamisches und interaktives Browsing-Erlebnis, das nur einen Bildlauf erfordert.
Kyan
Diese Seite ist im Konzept der Sony-Tablet-Seite sehr ähnlich, nur in horizontaler Form. Die Ausgangsposition des Bildschiebereglers zeigt ein iPhone, Tablet und einen Computerbildschirm, der um verschiedene Entwurfswerkzeuge sitzt. Ich liebe den flachen, papierähnlichen Illustrationsstil.
Wenn Sie auf die Pfeiltaste auf der rechten Seite klicken, wird jedes Objekt, das die Geräte in der Mitte umgibt, nach und nach vom Bildschirm angezeigt, und der Bildschirm wird verschoben und die Geräte werden in eine neue Szene versetzt:
Dies ist viel beeindruckender, einzigartiger und ansprechender als ein typischer Schieberegler. Wenn Sie den Effekt zum ersten Mal sehen, können Sie nicht anders, drücken Sie die Taste noch ein paar Mal, um ihn erneut anzuzeigen.
Fazit
Der Zweck hier ist, dem Gehirn dabei zu helfen, das gleiche alte große Rechteckbild oben in Ihren Entwürfen einzufügen. Mit ein wenig Nachdenken und Mühe können Sie ganz einfach etwas Einzigartigeres und Verbindlicheres schaffen.
Dies kratzt kaum an der Oberfläche dessen, was aktuell mit Header-Bildern gemacht wird. Hast du noch andere interessante Beispiele gesehen? Hast du auch selbst tolle Ideen? Hinterlasse einen Kommentar und lass es uns wissen.