Parfois, vous avez une mise en page parfaite, mais votre conception nécessite un petit quelque chose en plus pour la finaliser. Malheureusement, il est facile de rester bloqué et de devenir complètement vide d'idées.
Aujourd’hui, nous allons vous aider à résoudre ce problème en soulignant cinq idées de conception aléatoires que vous pouvez incorporer à vos astuces de conception. Commençons!
Lignes en pointillé
Les lignes pointillées ou pointillées sont un excellent moyen d’apporter un peu de flair à vos créations. Ils sont super faciles à mettre en œuvre et ont tendance à apporter une certaine vieille classe à un design. Dans Illustrator, créer un trait en pointillé est aussi simple que d’ouvrir le "Stroke". palette.
Essayez de varier l'utilisation de la ligne en pointillé. Placez-les verticalement entre les éléments d'une liste horizontale, essayez simplement de souligner le texte ou peut-être même de créer un rectangle complet.
Vous pouvez également réaliser une ligne en pointillé ou en pointillé à l'aide de CSS pur via le frontière propriété.
Traceflow, le site Web indiqué ci-dessous, illustre parfaitement l'utilisation de la technique des lignes en pointillés. Voici une photo de leur zone de navigation:
Cousu
Le même site Web montre une version légèrement modifiée de la technique. Si vous amenez les lignes pointillées un peu pour qu'elles soient décalées par rapport au bord, le résultat est un aspect cousu.
Blocages de texte faciles
Les blocages de texte comme celui ci-dessus sont extrêmement populaires pour le moment. Ils vont probablement être un mauvais cliché? dans un avenir proche, mais pour le moment, tout le monde semble les aimer. Ils ressemblent à un design vraiment sophistiqué mais sont en fait assez faciles à construire. Il suffit de saisir quelques polices qui vont bien ensemble et de rendre les largeurs de trait égales. Veillez à faire varier le nombre de mots par ligne afin que certains mots soient plus gros que d'autres et que l'accent soit placé à l'endroit souhaité.
Essayez de mélanger des graphiques simples mais attrayants avec le type pour un intérêt supplémentaire. Remarquez comment j'ai réellement utilisé la forme de ligne double de l'une des polices de caractères comme source d'inspiration pour une ligne de séparation verticale. Ceci est un exemple classique du principe de répétition. Vous devriez rechercher des opportunités similaires dans votre propre travail.
Ce qui rend ces opérations si faciles, c’est que les créateurs des polices ont fait tout le travail. L'attrait esthétique réside dans l'attrait des formes des lettres. C'est l'une des principales raisons pour lesquelles les concepteurs aiment tellement la typographie. Quelqu'un d'autre fait tout le travail, puis nous le jetons sur une toile et obtenons le crédit!
Bien sûr, tous les très grands blocages de texte exigent un peu plus de travail. Découvrez cet excellent exemple de Deda.me, qui présente quelques variations intéressantes avec le texte, les illustrations et les couleurs. Il y a aussi de nombreux effets de vol stationnaire au travail ici, alors ne manquez pas de vous arrêter sur le site pour y jeter un coup d'œil.
Effet autocollant
L'effet de la vignette est tellement ridiculement facile que c'est ridicule. Tout ce que vous faites réellement, c'est de prendre n'importe quelle image et de la jeter sur un arrière-plan avec un trait blanc épais et peut-être un peu d'ombre. C’est un bon truc à utiliser lorsque vous recherchez une ambiance lumineuse, amusante et rétro. Parce que cette technique se prête à des couleurs vives et à des illustrations intéressantes, elle est évidemment parfaite si vous concevez quelque chose pour les enfants.
Dans Photoshop, tout ce que vous avez à faire est d’augmenter le trait jusqu’à ce que tout se passe bien. Pour le texte, vous devrez peut-être entrer et remplir manuellement les zones négatives dans les lettres, mais c'est généralement un processus très rapide.
Nous pouvons voir cette technique en action sur, bien sûr, un site Web autocollant! Regardez l'illustration ci-dessous de Sticker Mule.
Une alternative bon marché à un bon tracé de détourage
Cette astuce peut également être utilisée pour résoudre un problème de conception courant. Si vous êtes trop paresseux ou inexpérimenté pour créer un tracé de détourage approprié, il peut s'avérer difficile de placer une photo prise sur un fond blanc sur une toile sombre sans laisser apparaître d'artefacts.
Ici, tout ce que vous avez à faire est de faire une sélection très rapide et sale, puis d’appliquer un trait épais et blanc. Le résultat semble assez intentionnel, personne ne saura même que vous êtes nul avec Photoshop!
Bannières de titre
Vous voulez une façon amusante d’animer un titre? Collez-le sur une bannière. C'est une autre tendance qui est très populaire dans la conception web aujourd'hui, vous pouvez trouver cette idée sur tout le web.
Comme vous pouvez le voir sur l'image ci-dessus, il existe trois variantes principales de votre bannière typique, qui peuvent toutes être utilisées conjointement sur un site. La première est une bannière autoportante, qui se replie sur elle-même aux extrémités.
Si vous vous demandez comment créer un effet 3D, rien de plus simple. Tout d’abord, choisissez une couleur pour la partie principale ou avant de la bannière. Puis choisissez un légèrement teinte plus foncée pour les portions latérales. Enfin, créez un petit triangle et rendez-le encore plus foncé. Les trois pièces sont présentées séparément, puis ensemble dans l'image ci-dessous.
Les deux autres versions de la bannière sont une variation de ce thème. Cette fois cependant, l’idée est d’enrouler la bannière autour d’un contenu. Vous pouvez faire en sorte que la bannière sorte d'un côté comme dans le deuxième exemple, ou enrouler tout l'objet comme dans le troisième exemple.
Le site Web WPCoder utilise réellement tous les trois variations de la bannière dans sa conception. Voici quelques captures d'écran de certains des éléments.
Celles-ci ont été créées avec des images, mais il est devenu assez courant d'obtenir un effet similaire en utilisant uniquement HTML5 et CSS3. Consultez ce didacticiel de WebDesignTuts pour une procédure pas à pas de ce processus.
Mettez une photo dans votre texte
Parfois, un titre de couleur simple et solide semble ennuyeux. Vous jetez une ombre dessus et essayez peut-être de la biseauter, mais cela tue le look classique et simple que vous recherchez. Quelle est la solution? C'est facile! Utilisez simplement une photo comme arrière-plan pour votre texte.
Construire l'un de ces titres dans Photoshop est un jeu d'enfant. Tout ce dont vous avez besoin est deux couches.Commencez par saisir du texte et obtenez-le comme vous le souhaitez. Puis jetez une photo par-dessus et appuyez sur Cmd-Option-G ou aller à Calque> Créer un masque de découpage. C'est tout ce qu'on peut en dire! Maintenant, vous pouvez déplacer les calques de texte et d'image indépendamment et le clip restera.
Utilisation de CSS
Vous pouvez réellement accomplir cette même technique en CSS via l'utilisation de background-clip: texte ou masque-image. Trent Walton propose un didacticiel bref mais pratique sur la réalisation de cette tâche.
Gardez à l'esprit que si vous voulez que tous les utilisateurs ressentent l'effet, vous devez utiliser une image. Comme avec la plupart des nouvelles fonctionnalités CSS, la prise en charge des navigateurs est inégale.
Conclusion
J'espère que ces astuces de conception simples et rapides vous ont incité à réfléchir un peu plus profondément à la manière dont vous pouvez changer les choses dans votre processus de conception typique. Vous avez probablement déjà vu cela mille fois en action, mais en prendre conscience vous aidera à élargir vos horizons en tant que designer.
Laissez un commentaire et dites-nous ce que vous pensez! Utilisez-vous régulièrement l'un de ces produits? Voulez-vous commencer maintenant?