Plus tôt cette année, nous avons publié un article décrivant 5 raisons pour lesquelles les sites Web des groupes Suck. Aujourd'hui, nous allons suivre cette publication en créant une page Web pour le groupe qui évite les problèmes rencontrés par la plupart des sites de cette catégorie.
Nous allons créer la maquette dans Photoshop et en apprendre davantage sur quelques fonctionnalités ainsi que sur une théorie solide du design. Commençons!
Le projet
Téléchargez gratuitement les couches PSD
La publication d'aujourd'hui est un autre projet tiré de notre programme Design Dilemma. Deux concepteurs distincts, Nathan Futo et Roman Hurton, ont tous deux écrit cette semaine pour demander de l’aide dans la conception d’une mise en page initiale pour le site Web d’un groupe.
Comme notre précédent article l'a prouvé, cela peut s'avérer une tâche ardue et le produit final est souvent encombré et moche. Nous allons nous attaquer de front à ce problème en créant une présentation simple et flexible que tout le monde peut utiliser pour stocker beaucoup de contenu.
Le projet
La publication d'aujourd'hui est un autre projet tiré de notre programme Design Dilemma. Deux concepteurs distincts, Nathan Futo et Roman Hurton, ont tous deux écrit cette semaine pour demander de l’aide dans la conception d’une mise en page initiale pour le site Web d’un groupe.
Comme notre précédent article l'a prouvé, cela peut s'avérer une tâche ardue et le produit final est souvent encombré et moche. Nous allons nous attaquer de front à ce problème en créant une présentation simple et flexible que tout le monde peut utiliser pour stocker beaucoup de contenu.
Mise en route: la photo d’arrière-plan
La première étape consiste à créer un fichier Photoshop d'environ 1200 x 1600 pixels à 72 dpi et en RVB. Ensuite, nous voulons un joli fond photographique pour notre site. Quelque chose de dramatique mais pas trop gênant et qui a toujours l’air beau, même lorsque la majeure partie est recouverte par d’autres contenus.
Je vous recommande d'acheter une photo ou de prendre la vôtre, mais comme il ne s'agit que d'un exemple, je me suis rendu à Flickr Creative Commons et j'ai saisi cette photo du champ de maïs de Snake-Eyes Photography.
Lorsque vous jetez cette photo sur votre PSD, elle doit laisser une grande partie de l'espace vide en bas. Pour résoudre ce problème, définissez votre calque d'arrière-plan sur noir et appliquez un masque à la photo du champ de maïs. Saisissez ensuite votre outil de dégradé et étirez un dégradé linéaire verticalement du blanc au noir. Cela devrait donner à votre photo une atténuation progressive du noir sans endommager les pixels d'origine.
Dans la mesure du possible, vous souhaitez toujours utiliser des masques pour effectuer des modifications non destructives. Cela offre une flexibilité inégalée qui s'avère pratique lorsque vous souhaitez changer les choses. La modification du calque réel détruit l'image d'origine et vous empêche de revenir à ce point.
La disposition
Le plus gros problème avec les sites Web des groupes est que tant de choses sont entassées sur la page d'accueil que le résultat final est un fouillis encombré. Le contenu a tendance à sembler disparate et à être pavé au lieu de paraître comme une unité cohérente avec des parties distinctes.
La solution de facilité est simplement de vous dire de ne pas trop en mettre sur votre page d'accueil, mais ce n'est souvent pas une solution très pratique. Au lieu de cela, vous devez apprendre à créer une page contenant des photos, des billets de blog, des lecteurs de musique, des flux Twitter, des dates de tournée, etc., tout en conservant un design attrayant. Cela peut-il être fait? Absolument! Et c'est en fait beaucoup plus facile que vous ne le pensez.
Pour commencer, configurez certains guides dans votre document de manière à créer une seule colonne centrée de 960 pixels de large. Si Photoshop est configuré pour aligner vos sélections sur des guides, cela vous aidera à dessiner quelques zones pour le contenu.
Ensuite, créez quatre cases blanches disposées comme celles illustrées ci-dessous. Ce sera la base de toute notre mise en page. Trop facile tu dis? Non! Ce modèle de grille simple et flexible peut contenir une grande variété de contenu. En fait, n'hésitez pas à organiser les boîtes comme bon vous semble et essayez même de les séparer différemment. Tant que votre espacement reste cohérent et que votre alignement est solide, vous pouvez créer des boîtes simples pour contenir tout ce que vous voulez.
J'ai ajouté une ombre portée à mes boîtes pour les aider à mieux distinguer l'arrière-plan.
L'en-tête
Pour entreprendre ce projet, je suppose que vous travaillez pour un vrai groupe. Ces groupes disposent généralement de nombreuses ressources: photos, couvertures d'albums, etc. Pour notre site hypothétique, je n'en possédais aucune. Heureusement, j'étais dans un groupe de rock à l'université et j'ai toujours tout notre matériel promotionnel, alors je vais utiliser des éléments aléatoires de cette collection pour remplir la page.
La première chose à faire est de remplir cette zone d’en-tête. Cela pourrait facilement être ce que vous préférez, une annonce pour un album ou une tournée à venir, une photo du groupe ou mieux encore, ajoutez tout ce qui précède à un curseur jQuery.
Pour ce projet, je vais juste ajouter une simple photo du groupe. Plutôt que de recadrer votre photo pour s’adapter à l’espace, essayez de la placer directement sur le calque avec la zone blanche et d’appliquer un masque de découpage (Command + Opt + G). Cela devrait automatiquement adapter votre photo aux limites définies par le calque de la boîte blanche. Ceci est juste une autre technique non destructive qui offre plus de flexibilité que le recadrage.
Pour aider la photo à se démarquer, je lui ai donné un trait blanc. Aussi étrange que cela paraisse, assurez-vous de l'appliquer directement au calque de la boîte blanche et non au calque de la photo.
Vous remarquerez que cette photo est assez cool par rapport à l'arrière-plan chaleureux. Je pense que cela donne à la photo l’apparence qu’elle n’appartient pas et j’ajoute un calque de réglage de réchauffement pour rendre les deux images plus cohérentes.
Comme vous pouvez le constater, j'ai également ajouté un petit graphique avec le nom du groupe. La photo est trop occupée pour placer du texte directement, aussi le petit rectangle excentré améliore la lisibilité et offre-t-il une belle touche graphique.
Navigation et logo
Pendant que nous travaillons sur l'en-tête, nous devons placer certains éléments standard du site Web, à savoir le logo et la zone de navigation.Celles-ci sont assez simples, il suffit d’aligner le logo à gauche et la navigation à droite. J'ai dessiné quelques petites boîtes noires pour les onglets de navigation. Cela donne une belle répétition avec l'élément que nous avons ajouté ci-dessus et permet au texte de ressortir sur le fond du ciel.
Avec cela, notre en-tête est terminé et nous pouvons maintenant passer à la section centrale.
Afficher les dates et le nouvel album
La section du milieu est la plus facile. Utilisez simplement ces deux cases pour contenir tout contenu que vous jugez important. Par exemple, j'ai créé un programme de tournée de base et une bannière annonçant un nouvel album. C’est également l’endroit idéal pour lancer un lecteur de musique si vous en avez un, mais veillez à ce que la musique ne soit lue que lorsque les gens le souhaitent! Il n'y a rien de pire qu'un site qui vous envoie de la musique de façon inattendue lors du chargement de la page.
Notez que j'ai utilisé la même police Slab-Serif (Museo) que nous avons vue lors de la navigation pour les dates du spectacle. Dans la mesure du possible, veillez à ce que vos polices soient relativement cohérentes et limitez-vous à deux ou trois familles principales.
Tout le reste
La section inférieure est la plus grande et donc la plus compliquée. Nous allons vraiment accumuler une tonne de contenu ici tout en essayant de rester structuré et propre.
Pour ce faire, nous allons utiliser le même truc que nous avons utilisé pour la mise en page globale du site. Cette fois, nous imbriquons simplement un autre système de module dans notre plus grand module principal.
Pour commencer, dessinez quelques cases et disposez-les dans un autre motif de grille. Cette fois, je suis allé avec quatre grands carrés et une barre latérale.
Ensuite, ajoutez quatre photos et appliquez des masques de découpage, comme nous le faisions auparavant, de manière à ce qu'ils se conforment aux boîtes que vous avez configurées. Au bas de chaque carré, ajoutez un texte décrivant la position du lien.
Enfin, utilisez la barre latérale en tant que centre de médias sociaux. Ajoutez vos widgets Twitter, Facebook, Flickr, etc. ici et appelez-les quand cela est possible pour correspondre au look de votre site.
Vous pouvez vraiment voir ici combien ce système de mise en page peut contenir. Même si vous avez doublé le contenu que j'ai placé ici, il est facilement extensible et n'a toujours pas l'air encombré.
Produit fini
Cela termine la conception de notre site! Voici le projet fini (cliquez pour un aperçu plus grand).
Conclusion
Pour résumer, oui, les sites Web des groupes sont souvent nuls, mais ils n’ont pas à le faire. En utilisant les méthodes ci-dessus, vous pouvez facilement créer des mises en page propres et agréables, qui contiennent des tonnes de contenu sans ressembler à une catastrophe de MySpace.
Laissez un commentaire ci-dessous avec un lien vers les sites Web de groupe que vous avez vus ou créés. Demandez-vous si le site pourrait être amélioré avec une mise en page plus cohérente ou si vous l'avez déjà cloué. Nous aimerions voir une partie de votre travail!
Veillez également à vous rendre sur notre page Dilemme du design pour soumettre vos propres dilemmes liés au design. Si nous pensons que cela concerne nos lecteurs, nous en ferons un article comme celui-ci!