Kyrkans hemsidor tenderar att drabbas av många av samma problem som vi nyligen såg med bandwebbplatser. Det finns så mycket innehåll som kastas på dessa sidor, och det är allt som konkurrerar om uppmärksamhet i en sådan grad att de flesta eller alla förlorar någon visuell visuell betydelse.
Idag lär vi oss att slåss det genom att utforma en dramatiskt enkel och attraktiv kyrkans hemsida som fortfarande har gott om utrymme för olika meddelanden, meddelanden och mer.
Sneak Peek
Om du är den typ av person som gillar att veta var du är på väg, kolla in den färdiga produkten nedan. Observera att vi bara gör Photoshop-arbete idag så resultatet blir inte en levande webbplats utan en skiktad PSD.
Klicka här för att ladda ner gratis PSD
Eller klicka här för att se en förhandsvisning
Projektet
Nyligen fick min vän en uppgift att utarbeta en redesign för kyrkans hemsida som visas nedan och frågade mig om min inmatning. Att vara över-acheiver som jag är, det här är mitt svar.
Visst, den här webbplatsen gör redan mycket bättre på att organisera olika uppgifter än de flesta i sin genre. Men det övergripande grafiska systemet är inte riktigt resonerat med mig. Allt verkar ganska skalat tillbaka och det finns ingen stor inverkan av något slag.
För att se några andra exempel på typiska kyrkans webbplatser körde jag en Google-sökning för att hitta några kyrkor i mitt område. Strax utanför fladdermusen bekräftade jag min misstanke om att webbdesign är ett stort område för kamp för många kyrkor.
Ändra paradigmet
Från ovanstående exempel bestämde jag mig för att kasta ut tanken på att dra inspiration från andra kyrkans webbplatser. Jag vet att jag har sett några riktiga stavar på kyrkans webbplats där ute, men sidorna ovan har verkligen gjort att jag vill dra ihop något som speglar nuvarande trender i professionell webbdesign i stället för att följa några överanvända och / eller föråldrade scheman vid utformning av religiösa organisationer.
Så låt oss glömma allt som vi har sett fram till den här tiden ska vi? Det inkluderar den ursprungliga webbplatsen (som ser mycket bättre ut efter att ha tittat på tävlingen!) Som vi har till uppgift att omforma. Vi vet att vi behöver något attraktivt och rent, men också något som kan hålla en massa information på ett organiserat sätt.
Det första steget: Färg
För det mesta är det första steget jag tar i designprocessen att hitta några färger som jag vill bygga på. Många designers hävdar att layout alltid ska komma först men i sista hand är det helt upp till dig. Färgerna som jag väljer för en webbplats påverkar hela temat, vilket även kan diktera hur jag väljer att lägga ut allt så det här är verkligen ett avgörande steg i min process.
För att medvetet undvika den typ av upptagen design som vi redan har sett, ville jag inte komma bort med färg här men hellre gå för en ganska enkel palett. Jag slutar välja färgerna nedan, den första som verkligen är min enda pop av intressant färg. Röda och apelsiner har blivit ganska populära i webbdesign på senare tid och är ofta mest effektiva när de används sparsamt på en annars dämpad sida. Jag använder ljusets ljusstyrka för att uppmärksamma viktiga områden på sidan.
Bakgrunden
Skapa ett nytt RGB-dokument i Photoshop (min är 1265px med 1680px) och fyll i bakgrunden med #eaeaea. Fyll nu bakgrundsskiktet med ett mycket subtilt mönster som är inställt på Multiplicera så att bakgrundsfärgen visar sig. Mönstret som jag använde nedan är faktiskt ett av Photoshops standardinställningar, om du inte ser det på din Effects-meny, försök ladda i några fler mönsteruppsättningar tills du upptäcker det.
Detta tjänar bara för att ge bakgrunden en liten bit mer visuellt intresse än en solid fyllning. Om vi skulle konvertera detta till en levande webbplats skulle vi helt enkelt ta en liten ruta av mönstret och ställa in det att repetera i vår CSS.
Rubriken
Nästa upp är rubriken, som bara identifierar kyrkan och kastar ut en tagline för att låta dig veta vad de handlar om. För att starta denna process valde jag en fin, sans-serif kondenserad typsnitt: Humanist 521 BT Condensed. Om du inte har det här typsnittet, kommer alla andra sans-serif-kondenserade teckensnitt att fungera bra.
Därefter skrev jag kyrkans namn och gjorde tre olika versioner av det i tre olika färger som visas nedan. Observera att mellankiktet verkligen borde ha samma färg som bakgrunden, men jag gjorde den vit här bara så att du kan se den. Bottenfärgen är också helt enkelt toppfärgen med minskad opacitet (36%).
Som du kan se stackade jag dessa lager för att skapa den resulterande kompositionen på botten. Du kan stanna här, men för att jag till och med är en liten OCD, använde jag mellanskiktet helt enkelt för att maskera ut det undre skiktet, så att bakgrundsstrukturen skulle visa sig på mellanslipan.
Därefter lade jag till visuell känsla i form av små virvlar på vardera sidan av rubriken. Jag lade också till en platshållare tagline med en tunn skiva serif typsnitt som jag trodde kompletterar rubriken snyggt. Denna typsnitt kallas AW Conqueror Slab och är en gratis nedladdning vid Font Equirrel.
Bildreglage och navigering
Många designers är också utvecklare, vilket innebär att de kan koda sina egna mönster till fungerande webbplatser. Andra gör helt enkelt Photoshop-arbetet och låter någon annan ta designen live. Oavsett vilken kategori du faller i är det otroligt viktigt att veta vilken typ av verktygsutvecklare som står till deras förfogande.
Till exempel, bara för att du inte vet något om att skriva JavaScript betyder inte att du inte bör läsa om och märka intressanta jQuery-effekter. Detta låter dig tänka på dynamisk funktion även när du lägger ut en statisk sida. Du kan sedan kommunicera idén om funktionaliteten till den som kodar webbplatsen.
Nästan varje gång jag kämpar med problemet med rodnad i webbdesign, ser jag till jQuery som svaret.En grundläggande jQuery-skjutreglage är helt enkelt ett av de bästa sätten att placera massor av information i ett litet utrymme och du får se mig att integrera dem i projekt gång på gång här på Design Shack.
Så naturligtvis är det precis vad vi ska göra här för att hantera vårt rodproblem. Vår kyrkans hemsida behöver några stora, iögonfallande bilder samt att kommunicera olika bortkopplade meddelanden som kommer att förändras varje vecka. Båda dessa mål är uppfyllda i en bildreglage. För att börja, kastade jag in en platshållare bild och gav den en skugga med fjädringssatsen till 0 så det är trevligt och svårt.
Vid denna tidpunkt tyckte jag inte riktigt hur bilden blandades i vårt etablerade tema. Dessutom skulle webbplatsen inte bara ha ett foto här utan snarare ett meddelande om något som är relevant för churchgoers, som vad den nästa predikan skulle handla om. Jag tog den här tanken och sprang med den för att komma med bilden nedan.
Efter detta är resten mestadels typiskt fyllmedel för att säkerställa att alla nödvändiga funktionella element är på plats. Jag lade till några punkter för att ange hur reglaget skulle fungera och slängde in i en super grundläggande, textbaserad navigeringsmeny med Helvetica.
Ännu mer information
Problemet med formatet för reglaget ovan är att viss information är dold. Visst kan användaren komma åt varje sida genom att klicka på de små prickarna, men om de letar efter något specifikt, hur ska de veta att det kommer att dyka upp i reglaget? I slutändan gör denna begränsning detta format bäst för allmänna meddelanden som användarna kommer att dra nytta av att se, men kommer inte riktigt att leta efter om de inte redan är bekanta med det innehåll kyrkan normalt placerar på den platsen.
Vi har fortfarande mycket mer information som vi behöver klämma in på hemsidan och vill inte bara upprepa skjutreglaget ovan, både på grund av redundans och de begränsningar som just nämnts. Så vad är svaret?
Återigen säger jag att du verkligen behöver bekanta dig med gemensamma utvecklingsverktyg och lösningar, även om du inte är en utvecklare. För att lösa problemen vi står inför här bestämde jag mig för att det skulle vara en perfekt plats att implementera ett SlideDeck, ett kommersiellt jQuery-plugin som inte bara ser snyggt ut och har mycket information, men låter användarna omedelbart få en titt på allt som finns inne . Besök SlideDeck.com för mer information och för att testa SlideDeck som visas nedan.
Med denna fantastiska produkt i åtanke skapade jag ett välkomstmeddelande och ett annat innehållsområde med en platshållare för en SlideDeck. Återigen kan användarna spåra informationen i reglaget och direkt klicka på bannern som de vill se. Detta kombinerat med vår första skjutreglage skapar en imponerande kapacitet för information på en enda sida. Varje enhet kan utökas så att den innehåller så mycket information som kyrkan behöver visa upp på sin hemsida och varje bild kan fungera som en länk till en dedikerad sida som innehåller mer innehåll om ämnet.
Footer
Nu när vi har vårt innehåll allt kvadrerat bort är allt som finns kvar att slå en footer på den här barnen och vi är redo att gå. Kom ihåg att fotfoten inte ska rusas genom som en eftertanke. Det är viktigt att överväga vad innehållet behöver gå här och hur det ska både reflektera och sticka ut från resten av webbplatsen.
Jag tänkte att en kyrka skulle vilja göra kontaktinformation och fysisk adress framstående och lätt att hitta, så jag valde att använda sidfoten för detta. Jag bestämde mig också för att fånga vår primära färg (# ec492d) och använda den som bakgrund för sidfoten, så det är ett slags inverterad rubrik. Detta använder en del fin upprepning och kommer att se till att sidfoten är ett visuellt distinkt element.
Färdig design
Vår hemsida är nu klar! Här är bitarna alla sammanfogade. Lägg märke till hur långt vi har avvikit från inte bara den ursprungliga designen, men från alla kyrkans mönster vi såg ovan. Inspiration är bra, men ibland måste du sluta leta efter andra för svar och helt enkelt bläddra i din egen väg med de mål som du tänker uppnå.
Klicka på bilden nedan för att se en större version.
Slutsats
Sammanfattningsvis, kom ihåg att du inte gör dina användares favörer genom att cramming allt du kan tänka dig på din hemsida. Clutter gör specifik information svårare att hitta och minska användbarheten dramatiskt samtidigt som du dödar din estetiska.
Som designare överväger vi ofta problem och ser till komplexitet för svaret. Ofta ligger inte ett mycket bättre svar i förenkling.
Lämna en kommentar nedan och låt oss veta vad du tycker om den färdiga designen i förhållande till var vi började. Också vara säker på att dela alla länkar du har till kyrkans webbplatser som du tycker bryter mögel och verkligen driva gränsen i både estetik och funktionalitet.
Fotokrediter:
http://www.flickr.com/photos/normanbleventhalmapcenter/2674833839/
http://www.flickr.com/photos/2create/2152949049/