Concevoir un site centré sur le bébé n'est pas une tâche facile, en particulier pour les personnes comme moi qui privilégient généralement les thèmes, les couleurs et les textures masculins dans leurs conceptions. Aujourd'hui, nous allons nous attaquer de front à cette tâche en créant un site d'annonce bébé amusant et unique, loin d'être typique.
N'hésitez pas à suivre et à télécharger le PSD pour pouvoir le consulter ou même l'utiliser sur votre propre site.
Le projet
Télécharger PSD en couches
Tout lecteur de Design Shack peut s’inscrire comme membre gratuit. L'un des avantages de l'adhésion est que vous pouvez soumettre vos? Dilemmes de conception? et recevez une aide gratuite de Design Shack! Si nous pensons que votre dilemme est pertinent pour notre public, nous en ferons un article comme celui-ci.
Nous avons récemment reçu une soumission de Jonathan Jose qui est actuellement très heureux de devenir bientôt un père. Tellement excité qu'il souhaite créer un site Web sur lequel les gens peuvent tenter de deviner le nom de son bébé et gagner 100 $! Jonathan a l'air de savoir comment configurer le site dans WordPress, mais qu'il a besoin d'aide pour la conception.
Bien, vous avez de la chance, Jonathan, car ce genre de problème est précisément la raison pour laquelle nous avons créé le programme Design Dilemma. Commençons!
Concevoir pour les bébés
Apprendre à cibler correctement vos conceptions est une compétence importante. Si vous n'évaluez pas correctement votre public, votre conception pourrait facilement devenir complètement inefficace. Par exemple, votre salon de manucure typique ne voudrait probablement pas un site Web qui ressemble à celui d'un bar pour motards.
Dans cet esprit, vous pourriez penser que puisque notre projet concerne un bébé, il doit ressembler à ceci:
Il est indéniable que ce modèle est parfaitement adapté à son objectif. Pour commencer, la mère est généralement la personne vers laquelle s’adressent des sites comme celui ci-dessus. Lorsque vous combinez le concept de bébés et de mères, vous obtenez généralement beaucoup de design féminin avec des pastels, des graphismes centrés sur les enfants, etc.
En revanche, notre site concerne un père fier qui veut partager son enthousiasme avec ses amis. Par conséquent, nous pouvons en profiter pour transformer le thème de votre bébé typique en créant quelque chose d'un peu plus rétro et sale. Il sera toujours évident que le site concerne un bébé, nous allons simplement nous écarter volontairement des thèmes communs trouvés dans des conceptions comme celle ci-dessus.
Étape 1: le fond et la texture
Pour commencer, créez un document Photoshop de 1200 pixels par 1200 pixels à 72 dpi. Ensuite, remplissez-le avec # 55b06f. Créez maintenant un nouveau calque, remplissez-le de blanc et sélectionnez Filtre> Ajouter du bruit avec les paramètres ci-dessous.
Notez que nous sommes partis? Monochromatique? décoché. Après quelques expériences, cela a semblé produire la plus belle propagation de bruit, alors je l'ai suivi, puis j'ai désaturé le calque (Commande-Maj-U). Enfin, définissez le calque sur Color Burn et réduisez le remplissage (et non l'opacité) à 53%.
Étape 2: le titre
Une fois que vous avez tous les éléments en main, téléchargez Chunk Five et Museo à partir de l’article 12 des polices Elab Free et Slab Serif d’hier.
Utilisez ces deux polices ensemble pour créer un joli titre typographique comme celui présenté ci-dessous. Notez que j'ai utilisé un certain nombre d'outils de conception différents ici. Premièrement, j'ai considérablement modifié la taille et l'audace du type pour ajouter de la variation et mettre l'accent sur les parties importantes. Ensuite, j'ai eu un peu de créativité avec l'empilement de sorte que le titre remplisse bien l'espace horizontal.
Maintenant que nous avons défini le titre comme nous le voulons, laissons une partie de cette texture d’arrière-plan transparaître. Changez le mode de fusion en Couleur et l’opacité à 62%.
Étape 3: la photo
Ensuite, ajoutons une photo pour apporter de la vie et de l’humour à la page. Évidemment, puisque le bébé n'est pas encore né, nous devrons y aller avec la mère. Comme je n'ai pas de photos de la future maman, j'ai trouvé une photo amusante sur Flickr, parfaite pour ce projet.
Maintenant, vous remarquerez que la photo ne correspond pas tout à fait au site si on la jette dessus. Pour résoudre ce problème, j'ai créé un calque de réglage de filtre photo et appliqué un filtre de réchauffement.
Enfin, j'ai créé une ombre déformée et l'a ajoutée à la photo. Ce processus est assez facile. Vous créez simplement un effet de calque d'ombre portée, cliquez avec le bouton droit de la souris sur l'effet et sélectionnez "créer un calque". utilisez ensuite l’outil Déformation pour ajouter un arc au bas du calque d’ombre.
Pour finir l’effet rétro que nous avons obtenu ici, j’ai téléchargé d’excellents pinceaux grunge gratuits et subtils et appliqué un peu de vieillissement au texte et à la photo.
Étape 4: ours, étoiles et texte
Pour que vous puissiez voir où nous allons, voici le produit fini de cette étape:
Comme vous pouvez le constater, il évolue vers une sorte de vieux thème d’affiche de boxe. Je vous laisse gérer vous-même les étoiles. Il vous suffit de saisir l'outil de création de forme de Photoshop, de dessiner une étoile, puis de le dupliquer plusieurs fois.
De même, le texte est assez simple: créez simplement une zone de paragraphe et ajoutez un type. L'ours est cependant un peu plus compliqué. Je voulais un élément graphique simple, mais je ne voulais pas prendre le temps d'en dessiner un, j'ai donc décidé de manipuler la photo ci-dessous.
Pour commencer, appliquez le filtre Photoshop Torn Edges avec les paramètres suivants. Image Balance: 33, Smoothhness: 13 et Contraste: 10. Cela devrait vous donner quelque chose comme l’image ci-dessous:
Maintenant pour la partie la plus délicate. Vous avez une image en noir et blanc, mais vous souhaitez uniquement transférer les pixels noirs sur le site Web, en laissant un arrière-plan transparent. Il existe une multitude de façons de le faire, mais l’une des plus faciles que j’ai trouvée est de cliquer en maintenant la touche Commande enfoncée sur le canal bleu pour créer une sélection. Puis inversez votre sélection avec Commande-Maj-I. Enfin, appuyez sur Commande-J pour dupliquer la sélection dans un nouveau calque.
Vous pouvez ensuite prendre ce calque et le positionner, lui donner une superposition de couleurs et faire tout ce que vous voulez!
Étape 5: Les blocs
Puisque le but du jeu est de deviner le nom du bébé, je pensais que ce pourrait être une bonne idée de réduire les options (évidemment, cela augmenterait les chances que vous payiez quelqu'un). Dans le cadre du jeu, vous pouvez révéler une seule lettre du nom du bébé chaque mois, à partir du nombre de mois précédant la naissance car il y a des lettres au nom de l'enfant.
Ainsi, par exemple, si le nom contenait cinq portées, vous révéleriez la première lettre cinq mois après la date d'échéance. Pour présenter cet aspect du jeu, j’ai proposé les blocs de forme ci-dessous. Les lunes et les étoiles représentent des lettres qui n'ont pas encore été révélées. Chaque lune ou étoile deviendra alors une lettre un mois donné.
Le produit fini
Comme vous pouvez le voir ci-dessous, j'ai décidé d'appliquer l'idée de bloc dans une bande verticale et j'ai terminé le site avec une zone pour les commentaires. J'ai également ajouté un peu plus de variation de couleur pour que les blocs ne semblent pas à la place.
Et avec ça on a tous fini! Comme promis, le produit final ne ressemble en rien à votre site Web habituel pour bébé et crée un espace génial pour le concours. En prime, la conception est suffisamment polyvalente pour que vous puissiez la modifier pour refléter le but que vous souhaitez.
Conclusion
Le but de cet exercice était de mener un projet de conception dans une direction complètement inattendue. Ceci est un excellent exercice qui ouvre vraiment vos possibilités de conception si elle est pratiquée de manière régulière. Rappelez-vous à qui le projet est destiné et comment vous pouvez faire appel à ce client de manière intéressante.
Laissez un commentaire ci-dessous et dites-nous ce que vous pensez! De plus, si vous avez créé de superbes sites Web, logos ou autres éléments sur le thème des bébés, laissez un lien ci-dessous pour que nous puissions y jeter un coup d'œil.