Les pages d'accueil de l'église ont tendance à souffrir de nombreux problèmes similaires à ceux que nous avons vus récemment avec les sites Web des groupes. Il y a tellement de contenu qui est jeté sur ces pages et tout cela attire l'attention au point que tout ou partie de celui-ci perd toute signification visuelle souhaitée.
Aujourd'hui, nous allons apprendre à lutter contre cela en concevant une page d'accueil d'église extrêmement simple et attrayante qui laisse encore beaucoup de place pour différents messages, annonces et plus encore.
Aperçu
Si vous êtes le genre de personne qui aime savoir où vous vous dirigez, consultez le produit fini ci-dessous. Notez que nous travaillons simplement sur Photoshop aujourd'hui, de sorte que le résultat ne sera pas un site actif, mais un fichier PSD en couches.
Cliquez ici pour télécharger le PSD gratuit
Ou cliquez ici pour voir un aperçu
Le projet
Récemment, un de mes amis a été chargé d’élaborer une nouvelle conception du site Web de l’église ci-dessous et m’a demandé mon avis. Étant le sur-acheiver que je suis, ceci est ma réponse.
Certes, ce site réussit déjà beaucoup mieux à organiser des informations disparates que la plupart des informations de son genre. Cependant, le schéma graphique global ne résonne pas vraiment avec moi. Tout semble assez réduit et il n'y a aucun impact majeur.
Pour voir d'autres exemples de sites d'églises typiques, j'ai effectué une recherche sur Google afin de trouver des églises dans ma région. Dès le départ, ce que j'ai trouvé a réaffirmé mes soupçons selon lesquels la conception de sites Web est un domaine de lutte majeur pour de nombreuses églises.
Changer le paradigme
D'après les exemples ci-dessus, j'ai décidé de lancer l'idée de m'inspirer des sites Web d'autres églises. Je sais que j'ai vu des conceptions de sites d'églises vraiment remarquables, mais les pages ci-dessus me donnaient vraiment envie de rassembler quelque chose qui reflète les tendances actuelles en matière de conception de sites Web professionnels plutôt que de suivre un schéma surutilisé et / ou dépassé dans la conception. organisations religieuses.
Donc, oublions tout ce que nous avons vu jusqu'à présent, allons-nous? Cela inclut le site d'origine (qui a l'air bien mieux après avoir vu la concurrence!) Que nous avons été chargé de redessiner. Nous savons que nous avons besoin de quelque chose d’attrayant et de propre, mais aussi de pouvoir contenir des tonnes d’informations de manière organisée.
La première étape: la couleur
La plupart du temps, la première étape que je franchis dans le processus de conception consiste à trouver des couleurs sur lesquelles je veux construire. De nombreux designers affirment que la mise en page doit toujours figurer en premier lieu, mais que cela dépend entièrement de vous. Les couleurs que je choisis pour un site ont une incidence sur l'ensemble du thème, ce qui peut même dicter la manière dont je décide de tout disposer. Il s'agit donc d'une étape cruciale de mon processus.
Pour éviter consciemment le type de dessin occupé que nous avons déjà vu, je ne voulais pas me laisser aller à la couleur, mais plutôt opter pour une palette assez simple. J'ai fini par choisir les couleurs ci-dessous, dont le premier est vraiment mon seul éclat de couleur intéressante. Les rouges et les oranges sont devenus très populaires dans la conception Web récemment et sont souvent plus efficaces lorsqu'ils sont utilisés avec parcimonie sur une page par ailleurs assourdie. J'utiliserai la luminosité de cette nuance pour attirer l'attention sur des zones clés de la page.
L'arrière-plan
Créez un nouveau document RVB dans Photoshop (le mien mesure 1265 pixels sur 1680 pixels) et remplissez l'arrière-plan avec #eaeaea. Remplissez maintenant le calque d'arrière-plan avec un motif très subtil défini sur Multiplier pour que la couleur d'arrière-plan soit visible. Le motif que j'ai utilisé ci-dessous est en fait l'un des paramètres par défaut de Photoshop. Si vous ne le voyez pas dans votre menu Effets, essayez de charger quelques jeux de motifs supplémentaires jusqu'à ce que vous le remarquiez.
Cela sert simplement à donner à l'arrière-plan un tout petit peu plus d'intérêt visuel qu'un remplissage plein. Si nous devions convertir cela en un site actif, nous saisirions simplement un petit carré du modèle et le placerions dans notre code CSS.
Le titre
La prochaine étape est le titre, qui identifie simplement l’église et jette un slogan pour vous laisser savoir de quoi il s’agit. Pour commencer ce processus, j'ai choisi une belle police condensée sans empattement: Humanist 521 BT Condensed. Si vous ne possédez pas cette police particulière, toute autre police condensée sans-serif fonctionnera parfaitement.
Ensuite, j'ai tapé le nom de l'église et en ai fait trois versions différentes en trois couleurs différentes, comme indiqué ci-dessous. Notez que le calque du milieu devrait vraiment avoir la même couleur que l'arrière-plan, mais je l'ai fait en blanc ici pour que vous puissiez le voir. En outre, la couleur de fond est simplement la couleur de dessus avec une opacité réduite (36%).
Comme vous pouvez le constater, j'ai ensuite empilé ces calques pour créer la composition résultante sur le fond. Vous pouvez vous arrêter ici, mais comme je suis parfois un peu OCD, j'ai utilisé le calque du milieu simplement pour masquer le calque du bas, ainsi la texture de l'arrière-plan serait visible sur la tranche du milieu.
Ensuite, j'ai ajouté une touche visuelle sous forme de petits tourbillons de part et d'autre du titre. J'ai également ajouté un slogan de substitution avec une police de caractères avec une empreinte fine pour dalle, qui, à mon avis, complétait bien le titre. Cette police s’appelle AW Conqueror Slab et peut être téléchargée gratuitement à Font Squirrel.
Curseur d'image et navigation
De nombreux concepteurs sont également des développeurs, ce qui signifie qu'ils peuvent coder leurs propres conceptions sur des sites Web opérationnels. D'autres font simplement le travail de Photoshop et laissent quelqu'un d'autre prendre le design en direct. Quelle que soit la catégorie dans laquelle vous appartenez, il est extrêmement important de savoir de quel type d'outils les développeurs disposent.
Par exemple, ce n’est pas parce que vous n’êtes pas au courant de l’écriture de JavaScript que vous ne devriez pas lire ni remarquer d’intéressants effets jQuery. Cela vous permet de penser à une fonction dynamique même lorsque vous créez une page statique. Vous pouvez ensuite communiquer l'idée de la fonctionnalité à quiconque code le site.
Presque chaque fois que je lutte avec le problème d'encombrement dans la conception Web, je me tourne vers jQuery comme solution.Un curseur jQuery de base est simplement l’un des meilleurs moyens de placer des tonnes d’informations dans un espace restreint et vous verrez que je les incorporerai maintes fois dans des projets ici, sur Design Shack.
Donc, naturellement, c'est exactement ce que nous ferons ici pour gérer notre problème d'encombrement. La page d'accueil de notre église a besoin de grandes images accrocheuses, en plus de la communication de divers messages déconnectés qui changeront chaque semaine. Ces deux objectifs sont atteints dans un curseur d'image. Pour commencer, j'ai ajouté une image de marque de substitution et lui ai donné une ombre avec le paramètre de mise en drapeau défini sur 0, donc c'est agréable et difficile.
À ce stade, je n'aimais pas vraiment la façon dont l'image se fondait dans notre thème établi. En outre, le site n'aurait pas seulement une photo ici, mais plutôt un message sur quelque chose de pertinent pour les fidèles, comme ce serait le cas du prochain sermon. J'ai pris cette idée et ai couru avec elle pour venir avec l'image ci-dessous.
Après cela, le reste consiste principalement en une matière de remplissage typique afin de s'assurer que tous les éléments fonctionnels nécessaires sont en place. J'ai ajouté quelques points pour indiquer le fonctionnement du curseur, puis un menu de navigation textuel très basique utilisant Helvetica.
Encore plus d'informations
Le problème avec le format du curseur ci-dessus est que certaines informations sont masquées. Bien sûr, l'utilisateur peut accéder à chaque page en cliquant sur les petits points, mais s'il cherche quelque chose de spécifique, comment peut-il savoir qu'il apparaîtra dans le curseur? En fin de compte, cette limitation rend ce format idéal pour les annonces générales que les utilisateurs bénéficieront de voir, mais ne rechercheront pas vraiment s'ils ne sont pas déjà familiarisés avec le contenu que l'église place généralement à cet endroit.
Nous avons toujours beaucoup plus d'informations à enregistrer dans la page d'accueil et nous ne voulons pas simplement répéter le curseur ci-dessus, à la fois en raison de la redondance et des limitations susmentionnées. Alors, quelle est la réponse?
Encore une fois, j’affirme que vous devez vraiment vous familiariser avec les outils et solutions de développement courants, même si vous n’êtes pas développeur. Pour résoudre les problèmes auxquels nous sommes confrontés ici, j'ai décidé que ce serait un endroit idéal pour implémenter un SlideDeck, un plugin commercial jQuery qui non seulement a l'air magnifique et contient beaucoup d'informations, mais permet également aux utilisateurs d'avoir un aperçu de tout ce qu'il contient. . Visitez SlideDeck.com pour plus d'informations et pour tester le SlideDeck présenté ci-dessous.
En pensant à ce produit génial, j'ai créé un message de bienvenue et une autre zone de contenu avec un espace réservé pour un SlideDeck. Là encore, les utilisateurs pourront repérer les informations contenues dans le curseur et cliquer instantanément sur la bannière qu’ils souhaitent voir. Cette combinaison avec notre premier curseur crée une impressionnante capacité d’information sur une seule page. Chaque appareil peut être étendu pour inclure autant d'informations que l'église doit présenter sur sa page d'accueil et chaque image peut servir de lien vers une page dédiée contenant davantage de contenu sur le sujet.
Le pied de page
Maintenant que notre contenu est au point, il ne reste plus qu'à gifler un pied de page sur ce bébé et nous sommes prêts à partir. Rappelez-vous que le pied de page ne doit pas être précipité après coup. Il est important de déterminer quel contenu doit être placé ici et comment il doit refléter et se distinguer du reste du site.
J'ai pensé qu'une église voudrait que ses coordonnées et son adresse physique soient bien visibles et faciles à trouver. J'ai donc choisi d'utiliser le pied de page pour cela. J'ai également décidé de récupérer notre couleur principale (# ec492d) et de l'utiliser comme arrière-plan pour le pied de page, c'est donc en quelque sorte l'inverse de l'en-tête. Cela utilise une répétition agréable et fera en sorte que le pied de page est un élément visuellement distinct.
Design fini
Notre page d'accueil est maintenant terminée! Voici les morceaux tous mis ensemble. Remarquez à quel point nous avons dévié non seulement de la conception originale, mais également de toutes les conceptions d'église que nous avons vues ci-dessus. L'inspiration, c'est bien, mais vous devez parfois cesser de chercher des réponses et simplement tracer votre propre chemin en gardant à l'esprit les objectifs que vous souhaitez atteindre.
Cliquez sur l'image ci-dessous pour voir une version plus grande.
Conclusion
Pour résumer, rappelez-vous que vous ne faites aucune faveur à vos utilisateurs en mettant tout ce que vous pouvez penser dans votre page d'accueil. Clutter rend plus difficile la recherche d'informations spécifiques et réduit considérablement votre facilité d'utilisation tout en détruisant votre esthétique.
En tant que concepteurs, nous réfléchissons souvent aux problèmes et nous nous tournons vers la complexité pour trouver la réponse. Le plus souvent, une réponse bien meilleure réside dans la simplification.
Laissez un commentaire ci-dessous et laissez-nous savoir ce que vous pensez de la conception finale par rapport à l'endroit où nous avons commencé. Assurez-vous également de partager tous les liens que vous avez avec des sites d’église qui, selon vous, briseront le moule et repousseront réellement les limites en matière d’esthétique et de fonctionnalité.
Crédits photo:
http://www.flickr.com/photos/normanbleventhalmapcenter/2674833839/
http://www.flickr.com/photos/2create/2152949049/