Anfang dieses Jahres haben wir einen Artikel herausgegeben, der 5 Reasons Band Websites Suck umreißt. Heute werden wir diesem Beitrag folgen, indem wir ein Band-Webseiten-Design erstellen, das die Probleme der meisten Websites in dieser Kategorie vermeidet.
Wir erstellen das Modell in Photoshop und lernen ein paar Features sowie solide Designtheorie kennen. Lass uns anfangen!
Das Projekt
Laden Sie die kostenlose geschichtete PSD herunter
Der heutige Beitrag ist ein weiteres Projekt aus unserem Design Dilemma-Programm. Zwei separate Designer, Nathan Futo und Roman Hurton, haben in dieser Woche beide um Hilfe gebeten, um ein erstes Layout für eine Band-Website zu entwerfen.
Wie unser vorheriger Beitrag bewiesen hat, kann dies eine ziemlich schwierige Aufgabe sein und das Endprodukt ist oft unübersichtlich und hässlich. Wir werden dieses Problem direkt angehen, indem wir ein einfaches und flexibles Layout erstellen, das jeder verwenden kann, um viele Inhalte zu speichern.
Das Projekt
Der heutige Beitrag ist ein weiteres Projekt aus unserem Design Dilemma-Programm. Zwei separate Designer, Nathan Futo und Roman Hurton, haben in dieser Woche beide um Hilfe gebeten, um ein erstes Layout für eine Band-Website zu entwerfen.
Wie unser vorheriger Beitrag bewiesen hat, kann dies eine ziemlich schwierige Aufgabe sein und das Endprodukt ist oft unübersichtlich und hässlich. Wir werden dieses Problem direkt angehen, indem wir ein einfaches und flexibles Layout erstellen, das jeder verwenden kann, um viele Inhalte zu speichern.
Erste Schritte: Das Hintergrundfoto
Der erste Schritt besteht darin, eine Photoshop-Datei zu erstellen, die bei 72 dpi und in RGB etwa 1200 x 1600 x 1600 Pixel groß ist. Als nächstes möchten wir einen schönen fotografischen Hintergrund für unsere Website. Etwas Dramatisches, aber nicht zu ablenkend und sieht trotzdem gut aus, auch wenn das meiste davon von anderen Inhalten verdeckt wird.
Ich empfehle Ihnen, entweder ein billiges Foto zu kaufen oder ein eigenes zu nehmen, aber da dies nur ein Beispiel ist, bin ich zu Flickr Creative Commons gegangen und habe dieses Maisfeld-Foto von Snake-Eyes Photography mitgenommen.
Wenn Sie dieses Foto auf Ihre PSD werfen, sollte am unteren Rand ein großer Teil des leeren Bereichs verbleiben. Um dies zu beheben, setzen Sie die Hintergrundebene auf Schwarz und wenden Sie eine Maske auf das Maisfeldfoto an. Dann schnappen Sie sich Ihr Farbverlaufswerkzeug und strecken Sie einen linearen Farbverlauf vertikal von Weiß nach Schwarz. Dadurch sollte Ihr Foto allmählich schwarz werden, ohne die Originalpixel zu beschädigen.
Wo immer möglich, möchten Sie immer Masken verwenden, um zerstörungsfreie Änderungen vorzunehmen. Dies sorgt für eine unerreichte Flexibilität, die sich als nützlich erweist, wenn Sie Änderungen an der Umgebung vornehmen möchten. Wenn Sie die aktuelle Ebene ändern, wird das Originalbild zerstört und Sie können nicht zu diesem Punkt zurückkehren.
Das Layout
Das größte Problem bei Band-Websites ist, dass so viel Zeug auf die Homepage gestopft wird, dass das Endergebnis ein überladenes Durcheinander ist. Der Inhalt sieht tendenziell ungleichmäßig aus und ist nicht als zusammenhängende Einheit mit unterschiedlichen Teilen zu erscheinen.
Der einfache Ausweg ist einfach, Ihnen zu sagen, dass Sie nicht so viel auf Ihrer Homepage ablegen sollen, aber dies ist oft keine sehr praktische Lösung. Stattdessen müssen Sie lernen, wie Sie eine Seite erstellen, die mit Fotos, Blogeinträgen, Musikplayern, Twitter-Feeds, Tourdaten und mehr gefüllt ist, und dabei ein attraktives Design beibehalten. Kann es gemacht werden Absolut! Und es ist tatsächlich viel einfacher als Sie vielleicht denken.
Richten Sie zunächst einige Hilfslinien in Ihrem Dokument ein, sodass eine einzige zentrierte Spalte mit einer Breite von 960 Pixeln erstellt wird. Wenn Sie Photoshop so eingerichtet haben, dass Ihre Auswahl an den Hilfslinien ausgerichtet wird, können Sie einige Felder für den Inhalt zeichnen.
Als Nächstes erstellen Sie vier weiße Felder, die wie unten dargestellt angeordnet sind. Dies wird die Basis unseres gesamten Layouts sein. Zu leicht sagst du? Nein! Dieses einfache und flexible Gittermuster kann eine Vielzahl von Inhalten aufnehmen. Fühlen Sie sich frei, die Boxen nach Ihren Wünschen zusammenzustellen und sogar zu versuchen, sie anders aufzuteilen. Solange Ihr Abstand konstant bleibt und Ihre Ausrichtung stark ist, können Sie einfache Boxen erstellen, um alles zu speichern, was Sie möchten.
Ich fügte meinen Boxen einen Schlagschatten hinzu, um sie besser vom Hintergrund abheben zu können.
Die Kopfzeile
Um dieses Projekt zu durchlaufen, gehe ich davon aus, dass Sie für eine echte Band arbeiten. Solche Gruppen verfügen normalerweise über viele Ressourcen, mit denen Sie arbeiten können: Fotos, Albumcover usw. Für unsere hypothetische Website hatte ich keine davon. Glücklicherweise war ich tatsächlich in einer Rockband am College und habe immer noch unser gesamtes Werbematerial, also werde ich zufälliges Material aus dieser Sammlung verwenden, um die Seite zu füllen.
Das erste, was wir tun müssen, ist das Kopffeld zu füllen. Dies könnte leicht alles sein, was Sie möchten, eine Ankündigung für ein bevorstehendes Album oder eine neue Tour, ein Bandfoto oder, noch besser, werfen Sie all das in einen jQuery-Slider.
Für dieses Projekt werfe ich einfach ein einfaches Bandfoto ein. Beschneiden Sie Ihr Foto nicht, um es an die Leerstelle anzupassen, sondern platzieren Sie es mit dem weißen Feld direkt über der Ebene und verwenden Sie eine Schnittmaske (Befehl + Wahl + G). Dies sollte Ihr Foto automatisch an die von der White-Box-Ebene festgelegten Grenzen anpassen. Dies ist nur eine weitere zerstörungsfreie Technik, die mehr Flexibilität bietet als das Zuschneiden.
Um das Foto hervorzuheben, gab ich ihm einen weißen inneren Strich. So seltsam es auch scheint, wenden Sie dies unbedingt auf die White-Box-Ebene und nicht direkt auf die Fotoebene an.
Sie werden feststellen, dass dieses Foto im Vergleich zum warmen Hintergrund ziemlich cool ist. Ich denke, dass das Foto so aussieht, als würde es nicht dazugehören. Deshalb habe ich eine wärmende Einstellungsebene hinzugefügt, um die beiden konsistenter zu machen.
Wie Sie sehen können, habe ich auch eine kleine Grafik mit dem Bandnamen angelegt. Das Foto ist zu beschäftigt, um Text direkt zu platzieren, sodass das kleine versetzte Rechteck für eine bessere Lesbarkeit sorgt und eine schöne grafische Note ergibt.
Navigation und Logo
Während wir an der Kopfzeile arbeiten, müssen wir einige Standard-Website-Elemente einfügen: das Logo und der Navigationsbereich.Diese sind ziemlich einfach. Richten Sie einfach das Logo links und die Navigation rechts aus. Ich habe ein paar kleine schwarze Kästchen für die Navigationsregisterkarten gezeichnet. Dies gibt einige schöne Wiederholungen mit dem Element, das wir oben hinzugefügt haben, und hilft, den Text auf dem Himmelshintergrund hervorzuheben.
Damit ist unser Header fertig und wir können jetzt zum mittleren Abschnitt übergehen.
Termine und neues Album anzeigen
Der Mittelteil ist der einfachste. Verwenden Sie einfach diese beiden Felder, um alle Inhalte zu speichern, die Sie für wichtig halten. Zum Beispiel habe ich einen grundlegenden Tourplan erstellt und ein Banner für ein neues Album veröffentlicht. Dies ist auch der perfekte Ort, um einen Musik-Player zu werfen, wenn Sie einen haben. Es gibt nichts Schlimmeres als eine Website, die Sie beim Laden der Seite unerwartet mit Musik überhäuft.
Beachten Sie, dass ich die gleiche Slab-Serif-Schriftart (Museo) verwendet habe, die wir für die Showdaten in der Navigation gesehen haben. Wenn möglich, halten Sie Ihre Schriften ziemlich konsistent und beschränken Sie sich auf zwei bis drei Hauptfamilien.
Alles andere
Der untere Abschnitt ist der größte und daher der komplizierteste. Wir werden hier wirklich jede Menge Inhalte stopfen, während wir versuchen, strukturiert und sauber zu bleiben.
Um dies zu erreichen, verwenden wir den gleichen Trick, den wir im gesamten Website-Layout verwendet haben. Diesmal verschachteln wir einfach ein anderes Modulsystem in unserem größten Primärmodul.
Ziehen Sie zunächst einige Kästchen heraus und ordnen Sie sie in einem anderen Raster an. Diesmal bin ich mit vier großen Plätzen und einer Sidebar gegangen.
Als nächstes werfen Sie vier Fotos ein und bringen Schnittmasken wie zuvor an, damit sie den von Ihnen eingerichteten Boxen entsprechen. Fügen Sie am unteren Rand jedes Quadrats einen Text hinzu, der beschreibt, wohin der Link führt.
Verwenden Sie die Seitenleiste schließlich als Social Media-Hub. Fügen Sie hier Ihre Widgets für Twitter, Facebook, Flickr usw. hinzu und gestalten Sie sie nach Möglichkeit so, dass sie dem Erscheinungsbild Ihrer Website entsprechen.
Sie können hier wirklich sehen, wie viel dieses Layoutsystem aufnehmen kann. Selbst wenn Sie doppelt so viele Inhalte haben, die ich hier platziert habe, ist er leicht erweiterbar und wirkt dennoch nicht überladen.
Fertiges Produkt
Damit ist unser Website-Design abgeschlossen! Hier ist das fertige Projekt (Klick für größere Vorschau).
Fazit
Zusammenfassend kann gesagt werden, dass Band-Websites oft scheiße sind, aber sie müssen nicht. Mit den oben genannten Methoden können Sie einfach schöne, saubere Layouts erstellen, die Tonnen von Inhalten enthalten, ohne wie eine MySpace-Katastrophe auszusehen.
Hinterlasse einen Kommentar mit einem Link zu allen großartigen Bandseiten, die du gesehen oder erstellt hast. Fragen Sie sich, ob die Website durch ein zusammenhängenderes Layout verbessert werden könnte oder ob Sie es bereits festgenagelt haben. Wir würden uns freuen, einige Ihrer Arbeiten zu sehen!
Besuchen Sie auch unsere Design Dilemma-Seite, um Ihre eigenen Design-bezogenen Quandare einzureichen. Wenn wir glauben, dass es für unsere Leser relevant ist, werden wir es in einen Post wie diesen verwandeln!