Die Homepages der Kirche leiden häufig unter den gleichen Problemen, die wir kürzlich bei Band-Websites gesehen haben. Es gibt so viele Inhalte, die auf diese Seiten geworfen werden, und es ist alles so stark um Aufmerksamkeit, dass die meisten oder alle Inhalte jegliche beabsichtigte visuelle Bedeutung verlieren.
Heute lernen wir, wie wir das bekämpfen können, indem wir eine dramatisch einfache und attraktive Kirchenhomepage entwerfen, die noch viel Platz für verschiedene Mitteilungen, Ankündigungen und mehr bietet.
Vorgeschmack
Wenn Sie die Art von Person sind, die wissen möchte, wohin Sie wollen, sehen Sie sich unten das fertige Produkt an. Beachten Sie, dass wir heute einfach Photoshop-Arbeit erledigen, sodass das Ergebnis keine Live-Site, sondern eine mehrschichtige PSD ist.
Klicken Sie hier, um die kostenlose PSD herunterzuladen
Oder klicken Sie hier, um eine Vorschau anzuzeigen
Das Projekt
Vor kurzem hatte ein Freund von mir die Aufgabe, ein Redesign für die unten abgebildete Kirchenwebsite zu erstellen, und bat mich um einen Beitrag. Da ich der Over-Acheiver bin, ist ich meine Antwort.
Zugegeben, diese Site organisiert bereits viel besser unterschiedliche Informationen als die meisten anderen in ihrem Genre. Das grafische Gesamtschema wirkt sich jedoch nicht wirklich auf mich aus. Alles scheint ziemlich zurückgefahren zu sein und es gibt keine großen Auswirkungen.
Um einige andere Beispiele für typische Kirchen zu sehen, habe ich eine Google-Suche durchgeführt, um einige Kirchen in meiner Umgebung zu finden. Das, was ich auf Anhieb fand, bestätigte meinen Verdacht, dass Webdesign für viele Kirchen ein großer Kampfbereich ist.
Das Paradigma ändern
Aus den obigen Beispielen entschloss ich mich, die Idee der Inspiration von anderen Kirchenwebseiten aufzuwerfen. Ich weiß, dass ich dort einige wirklich herausragende kirchliche Website-Designs gesehen habe, aber die obigen Seiten haben mich dazu gebracht, etwas zu vereinen, das die aktuellen Trends im professionellen Webdesign widerspiegelt, anstatt einem übermäßig verwendeten und / oder veralteten Schema bei der Gestaltung zu folgen religiöse Organisationen.
Vergessen wir also alles, was wir bisher gesehen haben, oder? Dazu gehört auch die ursprüngliche Website (die nach Betrachtung der Konkurrenz viel besser aussieht!), Die wir mit der Neugestaltung beauftragen. Wir wissen, dass wir etwas Attraktives und Sauberes brauchen, aber auch etwas, das in der Lage ist, viele Informationen auf organisierte Weise zu speichern.
Der erste Schritt: Farbe
Meistens mache ich im Entwurfsprozess zunächst einige Farben, auf denen ich aufbauen möchte. Viele Designer behaupten, dass das Layout immer an erster Stelle stehen sollte, aber letztendlich liegt dies ganz bei Ihnen. Die Farben, die ich für eine Website auswähle, wirken sich auf das gesamte Thema aus, was sogar bestimmen kann, wie ich alles auslege, so dass dies wirklich ein entscheidender Schritt in meinem Prozess ist.
Um bewusst das vielbeschäftigte Design, das wir bereits gesehen haben, zu vermeiden, wollte ich mich hier nicht mit Farbe hinreißen lassen, sondern eher eine eher einfache Palette. Am Ende wählte ich die Farben aus, von denen die erste wirklich mein einziger Pop von interessanter Farbe ist. Rote und Orangen sind in letzter Zeit im Webdesign sehr beliebt und sind oft am effektivsten, wenn sie auf einer ansonsten gedämpften Seite sparsam eingesetzt werden. Ich werde die Helligkeit dieser Schattierung nutzen, um auf wichtige Bereiche auf der Seite aufmerksam zu machen.
Der Hintergrund
Erstellen Sie ein neues RGB-Dokument in Photoshop (mein ist 1265 x 1680 Pixel) und füllen Sie den Hintergrund mit #eaeaea. Füllen Sie nun die Hintergrundebene mit einem sehr subtilen Muster, das auf Multiplizieren gesetzt ist, sodass die Hintergrundfarbe durchscheint. Das hier verwendete Muster ist tatsächlich eine der Standardeinstellungen von Photoshop. Wenn Sie es nicht in Ihrem Effektmenü sehen, laden Sie einige weitere Mustersätze, bis Sie es erkennen.
Dies dient lediglich dazu, dem Hintergrund ein wenig mehr visuelles Interesse zu verleihen als eine feste Füllung. Wenn wir dies in eine Live-Site konvertieren würden, würden wir einfach ein kleines Quadrat des Musters nehmen und es so einstellen, dass es in unserem CSS wiederholt wird.
Die Schlagzeile
Als nächstes kommt die Überschrift, die einfach die Gemeinde identifiziert und einen Slogan herauswirft, um Sie wissen zu lassen, worum es in der Kirche geht. Um diesen Prozess zu starten, habe ich eine schöne, serifenlose Schrift gewählt: Humanist 521 BT Condensed. Wenn Sie nicht über diese bestimmte Schriftart verfügen, funktioniert jede andere kompakte Sans-Serif-Schriftart gut.
Als Nächstes tippte ich den Namen der Kirche ein und fertigte drei verschiedene Versionen in drei verschiedenen Farben an (siehe unten). Beachten Sie, dass die mittlere Ebene eigentlich die gleiche Farbe wie der Hintergrund haben sollte, aber ich habe sie hier weiß gemacht, damit Sie sie sehen können. Die unterste Farbe ist einfach die oberste Farbe mit verringerter Deckkraft (36%).
Wie Sie sehen, habe ich diese Ebenen dann gestapelt, um die resultierende Komposition unten zu erstellen. Sie können hier aufhören, aber da ich zuweilen ein kleiner OCD bin, habe ich die mittlere Ebene einfach dazu verwendet, die unterste Ebene auszublenden, so dass die Hintergrundtextur auf der mittleren Schicht sichtbar würde.
Als nächstes fügte ich etwas visuelles Flair in Form kleiner Wirbel auf beiden Seiten der Überschrift hinzu. Ich habe auch einen Platzhalter-Slogan mit einer dünnen Slab-Serifenschrift hinzugefügt, die meiner Meinung nach die Schlagzeile gut ergänzt. Diese Schriftart heißt AW Conqueror Slab und kann bei Font Squirrel kostenlos heruntergeladen werden.
Bildschieber und Navigation
Viele Designer sind auch Entwickler, das heißt, sie können ihre eigenen Designs in funktionierende Websites umwandeln. Andere erledigen einfach die Photoshop-Arbeit und lassen andere das Design live mitnehmen. Unabhängig davon, welcher Kategorie Sie angehören, ist es äußerst wichtig zu wissen, welche Art von Werkzeugen Entwickler zur Verfügung haben.
Nur weil Sie nichts über das Schreiben von JavaScript wissen, heißt das nicht, dass Sie keine interessanten jQuery-Effekte lesen und beachten sollten. Auf diese Weise können Sie über die dynamischen Funktionen nachdenken, während Sie eine statische Seite erstellen. Sie können dann die Idee der Funktionalität an den Code der Site weiterleiten.
Fast immer, wenn ich mit dem Problem der Unordnung im Webdesign zu kämpfen habe, schaue ich auf jQuery als Antwort.Ein grundlegender jQuery-Schieberegler ist einfach eine der besten Möglichkeiten, Tonnen von Informationen auf kleinem Raum zu platzieren, und Sie werden sehen, wie ich sie auf Design Shack immer wieder in Projekte einfügt.
Das ist natürlich genau das, was wir hier tun werden, um unser Clutter-Problem zu lösen. Unsere Kirchenhomepage benötigt große, auffällige Bilder und überträgt verschiedene nicht zusammenhängende Nachrichten, die sich wöchentlich ändern. Beide Ziele werden in einem Image-Slider erreicht. Zu Beginn warf ich ein Platzhalterbild ein und gab ihm einen Schatten, wobei die Federung auf 0 gesetzt war, also ist es schön hart.
An diesem Punkt gefiel mir nicht, wie sich das Bild in unser etabliertes Thema einfügte. Außerdem würde die Website nicht nur ein Foto hier haben, sondern eher eine Nachricht über etwas, das für Kirchgänger relevant ist, wie etwa die nächste Predigt. Ich nahm diese Idee und rannte davon, um das Bild unten zu finden.
Danach ist der Rest meist nur ein typischer Füllstoff, um sicherzustellen, dass alle notwendigen Funktionselemente vorhanden sind. Ich fügte einige Punkte hinzu, um anzuzeigen, wie der Schieberegler funktionieren würde, und fügte ein super einfaches, textbasiertes Navigationsmenü mit Helvetica hinzu.
Noch mehr Informationen
Das Problem mit dem Format des Schiebereglers oben ist, dass einige Informationen ausgeblendet sind. Sicher, der Benutzer kann auf jede Seite zugreifen, indem er auf die kleinen Punkte klickt. Wenn er jedoch nach etwas Bestimmtem sucht, woher soll er wissen, dass er im Schieberegler angezeigt wird? Aufgrund dieser Einschränkung ist dieses Format letztendlich das beste für allgemeine Ankündigungen, die die Nutzer davon profitieren werden, aber sie werden nicht wirklich gesucht, wenn sie nicht bereits mit dem Inhalt vertraut sind, den die Kirche normalerweise an diesem Ort platziert.
Wir haben noch viele weitere Informationen, die wir in die Homepage einpacken müssen und den Schieberegler nicht einfach wiederholen möchten, sowohl wegen der Redundanz als auch wegen der eben genannten Einschränkungen. Wie lautet die Antwort?
Ich wiederhole, dass Sie sich wirklich mit den üblichen Entwicklertools und -lösungen vertraut machen müssen, auch wenn Sie kein Entwickler sind. Um die Probleme zu lösen, mit denen wir hier konfrontiert sind, entschied ich, dass dies der perfekte Ort für die Implementierung eines SlideDecks ist, eines kommerziellen jQuery-Plugins, das nicht nur großartig aussieht und viele Informationen enthält, sondern auch den Benutzern ermöglicht, sofort einen Blick auf alles zu werfen, was darin enthalten ist . Besuchen Sie SlideDeck.com, um weitere Informationen zu erhalten und das unten gezeigte SlideDeck zu testen.
Mit diesem fantastischen Produkt habe ich eine Begrüßungsnachricht und einen weiteren Inhaltsbereich mit einem Platzhalter für ein SlideDeck erstellt. Benutzer können die im Schieberegler enthaltenen Informationen erkennen und sofort auf das Banner klicken, das sie sehen möchten. In Kombination mit unserem ersten Schieberegler entsteht auf einer Seite eine beeindruckende Informationsfähigkeit. Jedes Gerät kann so erweitert werden, dass es so viele Informationen enthält, wie die Kirche auf seiner Homepage präsentieren muss, und jedes Bild kann als Link zu einer dedizierten Seite dienen, die mehr Inhalt zum Thema enthält.
Die Fußzeile
Jetzt, da wir alle unsere Inhalte haben, bleibt nur noch eine Fußzeile auf das Baby und wir können loslegen. Denken Sie daran, dass die Fußzeile nicht im Nachhinein durchlaufen werden sollte. Es ist wichtig zu überlegen, welche Inhalte hier zu finden sind und wie sie vom Rest der Site reflektiert werden sollen.
Ich dachte, eine Kirche würde ihre Kontaktinformationen und ihre physische Adresse prominenter machen und leicht finden können, also entschied ich mich, die Fußzeile dafür zu verwenden. Ich entschied mich auch für unsere Grundfarbe (# ec492d) und verwende sie als Hintergrund für die Fußzeile. Es ist also eine Art Umkehrung der Kopfzeile. Dies verwendet einige schöne Wiederholungen und stellt sicher, dass die Fußzeile ein visuell unterscheidbares Element ist.
Fertiges Design
Unsere Homepage ist fertig! Hier sind die Stücke zusammengefügt. Beachten Sie, wie weit wir nicht nur vom ursprünglichen Entwurf, sondern von allen Kirchenentwürfen, die wir oben gesehen haben, abweichen. Die Inspiration ist großartig, aber manchmal muss man aufhören, nach Antworten zu suchen, und den eigenen Weg mit den Zielen zu beschreiten, die man erreichen möchte.
Klicken Sie auf das Bild, um eine größere Version zu sehen.
Fazit
Um es zusammenzufassen: Denken Sie daran, dass Sie Ihren Benutzern keinen Gefallen tun, indem Sie alles, was Sie sich vorstellen können, in Ihre Homepage packen. Durch das Durcheinander werden bestimmte Informationen schwieriger auffindbar und die Verwendbarkeit drastisch reduziert, während gleichzeitig Ihre Ästhetik zerstört wird.
Als Designer überdenken wir oft Probleme und suchen nach Antworten auf Komplexität. Meistens liegt eine viel bessere Antwort in der Vereinfachung.
Hinterlassen Sie unten einen Kommentar und lassen Sie uns wissen, wie Sie das fertige Design in Bezug auf den Ausgangspunkt sehen. Vergewissern Sie sich auch, dass Sie alle Links zu kirchlichen Websites teilen, von denen Sie glauben, dass sie die Form sprengen, und die Ästhetik und Funktionalität an Ihre Grenzen stoßen.
Bildnachweis:
http://www.flickr.com/photos/normanbleventhalmapcenter/2674833839/
http://www.flickr.com/photos/2create/2152949049/