Product Graphics 6 Techniques pour rendre les images plus informatives
Les concepteurs de sites Web sont devenus très rusés avec les techniques de marketing. Attirer le contenu de la page est toujours une bonne chose, mais lorsqu'il s'agit d'attirer l'attention de vos visiteurs, les images sont la forme de média la plus populaire. Ils ne nécessitent pas de son comme des vidéos de démonstration et peuvent rapidement relayer des informations importantes en quelques secondes. Cela peut sembler facile, mais il existe certaines techniques remarquables pour créer des images informatives sur des sites Web..
Ceux-ci incluent des étiquettes de caractéristiques, des captures d’écran en gros plan, des comparaisons de prix et d’autres détails minutieux. Les concepteurs Web peuvent utiliser des graphiques d’information pour modéliser de nouvelles applications, logiciels, jeux vidéo ou de nombreux autres produits! Bien que le plus souvent, ces techniques soient utilisées dans différents domaines technologiques.
Découvrez les idées ci-dessous où nous offrons non seulement des conseils, mais aussi des exemples concrets de superbes graphismes de produits, qui regorgent d'informations intéressantes..
1. Développez votre contenu
Les images informatives ne doivent pas être utilisées à la place d'un bon contenu de page Web. Au lieu utiliser des images pour développer vos points clés et illustrez-les clairement pour vos visiteurs. Une des meilleures façons de le faire est construire une petite démo pour mettre en évidence des domaines importants d'un tutoriel. Avec quelques graphiques informatifs et des captures d'écran, il est beaucoup plus simple de maintenir l'intérêt de votre lecteur à chaque étape..
Lorsque vous essayez de démontrer un tutoriel logiciel (tel que Photoshop), il peut être difficile de transmettre le message en texte écrit. Les visiteurs débarqueront sur votre article et commenceront immédiatement à juger inconsciemment le contenu en une fraction de seconde. Web Designer Wall propose un didacticiel fantastique sur la création d’images arrondies CSS3 accompagnées d’un graphique pratique. Cela inclut des étiquettes et un plan rapproché de l'effet.
Sur la page de l'article d'origine, cette image ajoute une image beaucoup plus claire dans votre tête pour ce que vous allez créer. L'auteur a ajouté un petit lien de démonstration, mais pourquoi ne pas inclure également des images de démonstration? Vous êtes beaucoup plus susceptible d'attirer l'attention avec un coup de démo bien étiqueté.
Essayez de éviter d'ajouter des images uniquement pour le contenu multimédia dans votre post. Si vous pouvez expliquer vos méthodes ou raisonnement sans image, commencez ici par d’abord. Ne revenez plus sur votre copie Web que si vous envisagez de réitérer certains points dans un graphique d’image détaillée. Plus précisément, vous pouvez trouver un Le tutoriel nécessite plus de repères visuels à mesure que la complexité augmente. Deux exemples pourraient inclure la construction d'une base de données de site Web ou d'un jeu de données de table.
2. Mettez en surbrillance les caractéristiques notables
Parce que chaque logiciel / technologie aura tellement de fonctionnalités, il est presque impossible d'expliquer chaque bit. Non seulement cela, mais il est très peu probable que vos visiteurs soient intéressés à lire plus de 20 étiquettes sur votre graphique d'information.. S'en tenir aux fonctionnalités les plus intéressantes et utiliser des étiquettes pour expliquer un peu plus en profondeur.
Lors de la rédaction de la copie Web pour le contenu de votre étiquette éviter le langage plat dès que possible. Si les visiteurs consultent la dernière version de votre application, ils ne se soucient peut-être pas beaucoup des modifications apportées à la palette de couleurs. Comment cela affectera-t-il leur flux de travail quotidien? Au lieu peut-être souligner ce qui est bénéfique pour eux, comme un nouveau panneau d'interface ou une connectivité multi-utilisateurs. Ceux-ci devraient généralement être caractéristiques abstraites que vous ne pouvez pas voir juste par “regardant” au produit.
Le fait d’avoir une telle étiquette pour expliquer clairement ces caractéristiques fournira la réponse la plus abondante. Les visiteurs auront le sentiment d'être traités comme des acheteurs intelligents et matures, capables de prendre leurs propres décisions. S'ils aiment vraiment vos fonctionnalités, cela donne une plus grande impulsion à l'achat de votre logiciel ou produit..
Vous trouverez ci-dessous un exemple tiré de la page de mise à jour de Mozilla Firefox..
Vous pouvez voir que les concepteurs ont utilisé des lignes courbes pointillées pour indiquer les étiquettes et les nouvelles fonctionnalités. Ce sont en fait des images d'arrière-plan positionnées absolument dans un conteneur. div. Étonnamment, tout le texte de l'étiquette est également écrit à l'intérieur de balises HTML (ne pas juste une grande image).
Je pense que cette méthode n'est pas seulement pratique pour les robots d'exploration de Google, mais également pour les utilisateurs mobiles qui ne pourraient normalement pas accéder à la totalité de la page Web..
Notez également que la fonction Panorama se trouve à gauche. offre un petit “Apprendre encore plus” lien. C’est peut-être la meilleure pratique à laquelle vous pouvez avoir recours pour créer des graphiques d’information! Si vous avez d'autres pages ou des ancres dans la même page, vos visiteurs peuvent cliquer sur ces liens pour en savoir plus sur les fonctionnalités complexes..
N'oubliez pas que des graphiques informatifs sont utilisés pour afficher facilement des teasers et des fonctionnalités de produits à vos visiteurs. Ainsi, même si vous êtes limité dans l'espace autour du graphique, vous pouvez toujours offrir la possibilité d'en apprendre plus sur une page externe.
3. Des étiquettes simples et discrètes
Étiquettes sont vraiment l'aspect le plus important dans la création de graphiques de produits informatifs. Les visiteurs devront probablement comprendre différents domaines de votre produit, logiciel, sites Web, applications mobiles, etc. Malheureusement, l'utilisation de tableaux et de listes à puces ne peut aller aussi loin. Lorsque vous avez vraiment besoin d'expliquer les caractéristiques du produit, il est important de choisir points chauds pour l'étiquetage.
Apple Computers est probablement le meilleur exemple de détails simplistes sur les étiquettes. Vous remarquerez peut-être ces techniques exactes sur leurs graphiques lorsque vous regardez sur des tablettes, des ordinateurs portables ou le tristement célèbre iPhone. Leurs caractéristiques et spécifications techniques sont généralement les mêmes que celles des autres fabricants d’ordinateurs de grandes marques. Pourtant, leurs modèles graphiques sont si vierges que les produits se vendent pratiquement.
Notez que lorsque vous décomposez le processus, il est beaucoup plus simple que vous ne le pensez! Les graphiques de produits ne sont qu'un élément standard de la conception générale du site Web. Même si vous vendez des engrais, des draps de lit ou des cartes à collectionner, vous pouvez probablement utiliser ces techniques d'étiquetage à bon escient. Et bien que Apple ait des graphiques informatifs très simplistes, ils ne sont pas les seuls à le faire. Essayer Googling autour des entreprises dans votre niche pour voir si elles arborent des étiquettes d’informations fantaisie ou des teasers sur leur site Web.
4. Images avec contenu dynamique
Pour certains développeurs Web, il ne suffit peut-être pas de créer simplement un graphique étiqueté de votre logiciel. Vous voudrez peut-être passer en revue de nombreuses fonctionnalités uniques, mais en contenir une petite partie sur votre page Web. Il est possible de construire une série d'étapes d'introduction conduisant vos visiteurs tout au long d'une petite démonstration de produit.
Newsberry illustre élégamment un exemple de cela. Sur leur page d'accueil, vous remarquerez une zone de blocage avec une petite mini-navigation en dessous. Elles comprennent 5 étapes tout au long du processus, avec différentes captures d’écran et un texte descriptif d’accompagnement. Même si vous n’avez aucune idée de ce à quoi Newsberry est utilisé, leur contenu introductif explique les choses très clairement. Quelques liens de démonstration vous sont même proposés tout au long de la série de diapositives..
Lorsque vous vous déplacez dans leur contenu, vous remarquerez que de nombreuses diapositives contiennent des captures d’écran dans une petite fenêtre du navigateur. Cet effet est en réalité très simple à imiter! Vous avez juste besoin de trouver une image à utiliser comme image d'arrière-plan et redimensionner les captures d'écran pour les adapter à l'intérieur. Certes, cet effet ne fonctionnera pas pour tous les produits, mais c'est un bon moyen de cadrer les écrans à partir d'une application Web..
5. Effacer les captures d'écran et les photos du produit
Il est possible d'inclure toutes les meilleures étiquettes et fonctionnalités pour vos produits tout en manquant des ventes. le les captures d'écran et les photos que vous choisissez pour votre graphique sont finalement aussi importantes que tous les détails les plus fins. Sous Windows et Mac OS X, il existe des moyens de prendre des captures d'écran de l'ensemble de votre bureau à l'aide de raccourcis clavier. En combinant cette méthode avec du temps dans Photoshop, vous pouvez accumuler des démos de fonctionnalités très intéressantes..
Si votre produit est très compliqué, vous devriez essayer de mettre en place quelques images différentes. L'exemple ci-dessus du site Web de Tweetbot utilise des cercles bleus pour indiquer une action de tapotement sur l'application. Au lieu d’une seule capture d’écran avec de nombreuses étiquettes, envisagez d’utiliser une petite galerie d’images jQuery pour combiner 3 à 5 graphismes différents. Cela vous donne plus de possibilité de se concentrer sur les différentes perspectives du produit tandis que les visiteurs sont offerts une expérience beaucoup plus riche.
Lorsque vous prenez une photo depuis votre PC ou votre smartphone, la photo est toujours enregistrée avec un zoom de 100%. Les éditeurs d'images tels que Photoshop ont la possibilité de les redimensionner, mais ils perdent souvent des détails. Alors, comment pouvez-vous adapter un tel graphique à votre petit site Web? Une des meilleures techniques est grossissement dans lequel vous réduisez l’application et créez des sections agrandies des éléments les plus importants. Cette technique est plus courante dans les logiciels que dans les produits physiques - j'ai détaillé le processus de conception ci-dessous..
6. Créer un effet "Zoom Zoom"
Je construirai les étapes pour créer un effet de loupe dans Adobe Photoshop. Si vous utilisez un autre éditeur graphique, vous pouvez probablement exécuter les mêmes tâches, mais les menus et les commandes seront différents..
L'un des meilleurs exemples de cette technique se trouve sur la page d'accueil de l'application Things for Mac. Le graphisme de l'application est réduit, ce qui l'adapte parfaitement à la page, avec une petite ombre portée. Cependant, dans certains domaines importants, vous remarquerez un cercle dont le contenu intérieur est beaucoup plus grand. Ils ont même ajouté une lueur intérieure blanche pour apparaître sous forme de lumière réfractée à travers une lentille!
Bonus: Effet "Zoom Lens" Tutoriel Photoshop
Pour commencer, prenez une capture d’écran que vous souhaitez utiliser pour votre graphique. J'ai pris un rapide écran de la page d'accueil de Hongkiat. Je vais rogner juste la fenêtre du navigateur et redimensionner à environ 700px. Vous devez redimensionner la largeur pour s’adapter à la zone de contenu de votre propre site Web. Maintenant, créez un nouveau calque au-dessus de cet arrière-plan et faites une sélection circulaire tout en maintenant la touche Maj enfoncée pour le maintenir proportionnel. Remplissez avec n'importe quelle couleur que vous voudriez.
Étape 1
En gardant le cercle sélectionné, définissez le pourcentage de remplissage du panneau Calques sur 0%. Sous le calque FX, ajoutez un trait noir de 1px-2px et une lueur intérieure blanche. Vous pouvez réduire l'opacité pour un éclairage moins blanc..
Étape 2
Tout en maintenant le cercle sélectionné, déplacez-vous sur votre calque d'arrière-plan et appuyez sur ctrl (Pour les utilisateurs Mac, c'est la commande ou la clé cmd.) + c pour copier. Créez ensuite un nouveau calque au-dessus de l’arrière-plan, mais en dessous du cercle grossissant, puis collez-le. Vous pouvez également appuyer sur Ctrl + J pour dupliquer un nouveau calque avec uniquement la sélection intacte..
Appuyez sur ctrl + t pour ouvrir l'outil de transformation. Maintenant, redimensionnez le nouveau calque dupliqué en maintenant décalage garder tout proportionnel et alt garder le centre immobile.
Étape 3
Appuyez sur ctrl et cliquez sur l'icône en forme de loupe pour refaire votre sélection. Notez que vous devez toujours mettre en surbrillance le calque d'arrière-plan dupliqué dans le panneau des calques (celui situé directement sous notre loupe), ce qui signifie qu'il aura un arrière-plan bleu clair..
Appuyez sur Ctrl + Maj + i pour inverser la sélection actuelle. Appuyez maintenant sur Supprimer pour effacer les déchets supplémentaires de notre capture d'écran redimensionnée. Pour ajouter un peu d’effet, ouvrez le menu des effets de calque et ajoutez une petite ombre portée. Vous pouvez également dessiner une mince ligne verticale de 1 px et utiliser le filtre Liquify (Filtre> Liquéfier) créer une petite poignée!
Conclusion
Pour concevoir des graphiques de produits fantastiques, vous devez vous rappeler les bases. Les visiteurs veulent simplement comprendre ce que vous essayez de leur vendre! Le moyen le plus simple de transmettre ces informations consiste à effectuer une série de captures d'écran ou un graphique de détail. Les étiquettes ne sont que la deuxième pièce de ce casse-tête, où vous pouvez décrire les ensembles de fonctionnalités les plus importants..
Lorsque vous mettez toutes ces techniques ensemble, vous commencerez probablement à remarquer la situation dans son ensemble. Les téléchargements et les achats vont monter en flèche - en particulier si vous placez vos graphiques en avant-centre sur votre page d'accueil. Ces techniques sont parfaites pour que les concepteurs graphiques et les concepteurs Web se lancent dans la conception de produits. Nous avons détaillé quelques idées abstraites, mais nous aimerions connaître votre opinion dans la zone de discussion ci-dessous.!
