Tidigare i år lägger vi ut en artikel som beskriver 5 skäl till att bandwebbplatser suger. Idag följer vi upp det här inlägget genom att skapa en webbdesign för bandet som stryker bort problemen med de flesta webbplatser i den här kategorin.
Vi skapar mockup i Photoshop och lär dig om några funktioner samt en del solid designteori under vägen. Låt oss börja!
Projektet
Ladda ner gratis lagrad PSD
Dagens inlägg är ännu ett projekt som dras från vårt Design Dilemma-program. Två separata designers, Nathan Futo och Roman Hurton, skrev båda i denna vecka och frågade om hjälp med att designa en första layout för ett bandwebbplats.
Som vårt tidigare inlägg bevisat kan det vara ganska svårt och slutprodukten är ofta rörig och ful. Vi tar itu med detta problemhuvud genom att skapa en enkel och flexibel layout som alla kan använda för att hålla mycket innehåll.
Projektet
Dagens inlägg är ännu ett projekt som dras från vårt Design Dilemma-program. Två separata designers, Nathan Futo och Roman Hurton, skrev båda i denna vecka och frågade om hjälp med att designa en första layout för ett bandwebbplats.
Som vårt tidigare inlägg bevisat kan det vara ganska svårt och slutprodukten är ofta rörig och ful. Vi tar itu med detta problemhuvud genom att skapa en enkel och flexibel layout som alla kan använda för att hålla mycket innehåll.
Komma igång: Bakgrundsbilden
Det första steget är att skapa en Photoshop-fil som ligger runt 1200px vid 1600px vid 72dpi och i RGB. Därefter vill vi ha en bra fotografisk bakgrund för vår sida. Något dramatiskt men inte alltför distraherande och ser fortfarande bra ut, även om det mesta är täckt av annat innehåll.
Jag rekommenderar att du antingen köper ett billigt lagerfoto eller tag ditt eget, men eftersom det här är bara ett exempel, kryssade jag över till Flickr Creative Commons och tog tag i detta majsfältfoto från Snake-Eyes Photography.
När du kasta det här fotot på din PSD, borde det lämna en stor del tomt utrymme längst ner. För att åtgärda detta, sätt ditt bakgrundslager till svart och använd en mask till majsfältet. Ta sedan ditt gradientverktyg och sträck en linjär gradient vertikalt från vit till svart. Detta bör ge ditt foto en gradvis blekning till svart utan att egentligen skada någon av de ursprungliga pixlarna.
Om möjligt vill du alltid använda masker för att göra icke-destruktiva förändringar. Detta ger en oöverträffad mängd flexibilitet som är till nytta när du vill ändra saker runt. Att ändra det faktiska skiktet förstör den ursprungliga bilden och förhindrar att du återvänder till den punkten.
Layouten
Det största problemet med bandwebbplatser är att så mycket saker blir krympade på hemsidan att slutresultatet är en rörig röra. Innehållet tenderar att se disparat och cobbled tillsammans istället för att visa sig vara en sammanhängande enhet med olika delar.
Den enkla vägen är bara att berätta att du inte lägger så mycket på din hemsida, men det är ofta inte en väldigt praktisk lösning. Istället måste du lära dig hur du skapar en sida fylld med foton, blogginlägg, musikspelare, Twitter-flöden, turnédatum och mer samtidigt som du behåller en attraktiv design. Kan det göras? Absolut! Och det är faktiskt mycket enklare än du kanske tror.
Börja med att skapa några guider i ditt dokument så att de skapar en enda, centrerad kolumn som är 960 pixlar bred. Om du har Photoshop inställt att snapa dina val till några guider, så hjälper det dig att dra några få rutor för innehållet.
Skapa sedan fyra vita lådor som är ordnade som de som visas nedan. Detta kommer att ligga till grund för hela vår layout. För lätt att säga? Nej! Detta enkla och flexibla rutmönster kan innehålla en mängd olika innehåll. Faktum är att du kan ordna rutorna men du vill och försök att dela upp dem på ett annat sätt. Så länge ditt avstånd stannar jämnt och din anpassning är stark, kan du skapa enkla lådor för att hålla allt du vill ha.
Jag lade till en droppskugga i mina lådor för att hjälpa dem att stå utanför bakgrunden lite bättre.
Rubriken
För att genomgå detta projekt antar jag att du arbetar för ett riktigt band. Sådana grupper har vanligtvis massor av resurser att arbeta med: foton, albumomslag, etc. För vår hypotetiska webbplats hade jag ingen av dessa. Lyckligtvis var jag faktiskt i ett rockband på college och har fortfarande allt vårt reklammaterial så jag använder slumpmässiga saker från den samlingen för att fylla sidan.
Det första vi behöver göra är att fylla den rubrikrutan. Det här kan lätt vara något du vill, ett meddelande för ett kommande album eller turné, ett bandfoto eller ännu bättre, släng alla ovanstående till en jQuery-reglaget.
För det här projektet ska jag bara kasta in ett enkelt bandfoto. Snarare än att beskära ditt foto för att passa utrymmet, försök placera det direkt över lagret med den vita rutan och applicera en klippmask (Command + Opt + G). Detta ska automatiskt passa ditt foto till gränsen för inställningen av det vita rutskiktet. Detta är bara en annan icke destruktiv teknik som ger mer flexibilitet än beskärning.
För att hjälpa bilden sticka ut, gav jag den vita inre stroke. Så udda som det verkar, var noga med att tillämpa detta på det vita lådans lager och inte fotolaget direkt.
Du kommer märka att detta foto är ganska coolt jämfört med den varma bakgrunden. Jag tror att det här gör att fotot ser ut som det inte hör hemma så jag lade till ett uppvärmningsskikt för att göra de två mer konsekventa.
Som du kan se, kastade jag också lite grafik med bandnamnet. Bilden är för upptagen för att placera text över direkt så att den lilla offsetrekteln ger ökad läsbarhet och dubblerar som en fin grafisk touch.
Navigering och logotyp
Medan vi arbetar på rubriken måste vi placera in några vanliga webbsidor, nämligen logotypen och navigeringsområdet.Dessa är ganska enkla, justera logotypen till vänster och navigeringen till höger. Jag ritade ut några lilla svarta lådor för navigeringsflikarna. Detta ger en del fin upprepning med det element som vi lagt till ovan och hjälper texten att sticka ut på himmelsbakgrunden.
Därmed är vår rubrik färdig och vi kan nu gå vidare till mitten av avsnittet.
Visa datum och nytt album
Mellansektionen är det enklaste. Använd bara dessa två rutor för att hålla innehåll som du tycker är viktigt. Till exempel skapade jag ett grundläggande turnéschema och en banner som annonserar ett nytt album. Detta är också den perfekta platsen att kasta en musikspelare om du har en, var noga med att ställa in musiken för att bara spela när folk vill ha det! Det finns inget värre än en webbplats som plötsligt spränger dig med musik när sidan laddas.
Observera att jag använde samma Slab-Serif typsnitt (Museo) som vi såg på navigeringen för showdatum. Om möjligt, behåll dina tecken ganska konsekventa och begränsa dig till två till tre huvudfamiljer.
Allt annat
Undersektionen är den största och därför den mest komplicerade. Vi kommer verkligen att göra en massa innehåll här medan vi försöker hålla oss strukturerade och rena.
För att dra av det kommer vi att använda samma trick som vi använde på den övergripande webbplatslayouten. Den här gången hyser vi bara ett annat modulsystem inuti vår största primära modul.
För att börja, rita ut några lådor och ordna dem i ett annat rutmönster. Den här gången gick jag med fyra stora rutor och en sidogalleri.
Därefter kasta i fyra bilder och applicera klippmaskor precis som vi gjorde tidigare så att de överensstämmer med de rutor du ställt in. Längst ner på varje ruta lägger du till lite text som beskriver var länken kommer att leda.
Slutligen använd sidofältet som en social media-nav. Kasta in din Twitter, Facebook, Flickr, etc. widgets här och utforma dem när det är möjligt för att matcha utseendet på din webbplats.
Du kan verkligen se här hur mycket det här layoutsystemet kan hålla. Även om du har dubbelt så mycket innehåll som jag har placerat här, är det enkelt att expandera och det kommer inte att se routat ut.
Färdig produkt
Det avslutar vår webbplatsdesign! Här är det färdiga projektet (klicka för större förhandsgranskning).
Slutsats
Sammanfattningsvis suger bandwebbplatser ofta, men de behöver inte. Med hjälp av ovanstående metoder kan du enkelt skapa snygga, rena layouter som innehåller massor av innehåll utan att se ut som en MySpace-katastrof.
Lämna en kommentar nedan med en länk till några bra bandwebbplatser du har sett eller skapat. Fråga dig själv om webbplatsen kan förbättras med en mer sammanhängande layout eller om du redan har naglat den. Vi skulle gärna se lite av ditt arbete!
Också var noga med att sluta med vår Design Dilemma sida för att skicka in egna designrelaterade quandaries. Om vi tycker det är relevant för våra läsare, gör vi det till ett inlägg som den här!