Produktgrafik 6 Techniken, um Bilder informativer zu machen

Webdesigner sind mit Marketingtechniken sehr geschickt geworden. Der Inhalt der Seite ist immer gut, aber wenn es darum geht, die Aufmerksamkeit Ihrer Besucher auf sich zu lenken, sind Bilder die beliebteste Medienform. Sie benötigen keinen Sound wie Demo-Videos und können wichtige Informationen innerhalb weniger Sekunden weiterleiten. Es mag einfach erscheinen, aber es gibt einige bemerkenswerte Techniken zum Erstellen informativer Bilder auf Websites.

Dazu gehören Funktionsbeschriftungen, Nahaufnahmen, Preisvergleiche und andere Details. Webdesigner können Informationsgrafiken verwenden, um neue Apps, Software, Videospiele oder viele andere Produkte zu modellieren! Am häufigsten werden diese Techniken in verschiedenen Technologiebereichen verwendet.

Sehen Sie sich unten die Ideen an, bei denen wir nicht nur Tipps, sondern auch Beispiele aus der Praxis schöner Produktgrafiken bieten, die mit tollen Informationen gefüllt sind.

1. Erweitern Sie Ihren Inhalt

Informative Bilder sollten nicht anstelle von guten Webseiteninhalten verwendet werden. Stattdessen Verwenden Sie Bilder, um Ihre wichtigsten Punkte zu erweitern und illustriere sie klar für ihre besucher. Eine der besten Möglichkeiten, dies zu tun, ist Aufbau einer kleinen Demo, um wichtige Bereiche hervorzuheben eines Tutorials. Mit ein paar informativen Grafiken und Screenshots ist es viel einfacher, das Interesse des Lesers durch jeden Schritt zu lenken.

Wenn Sie versuchen, ein Software-Lernprogramm (z. B. ein Photoshop-Lernprogramm) zu demonstrieren, kann dies schwierig sein Übermitteln Sie die Nachricht in schriftlichen Text. Besucher landen auf Ihrem Artikel und beginnen sofort, das Material innerhalb von Sekundenbruchteilen unbewusst zu beurteilen. Web Designer Wall bietet ein fantastisches Tutorial zum Erstellen von abgerundeten CSS3-Bildern und einer praktischen Grafik. Dazu gehören einige Beschriftungen und eine Nahansicht des Effekts.

Auf der Original-Artikelseite fügt dieses Bild Ihrem Kopf ein viel klareres Bild zu dem hinzu, was Sie erstellen. Der Autor hat einen kleinen Demo-Link hinzugefügt, aber warum sind nicht auch einige Demo-Bilder dabei? Sie werden mit einer richtig beschrifteten Demo-Aufnahme viel wahrscheinlicher.

Versuchen zu Vermeiden Sie das Hinzufügen von Bildern nur für Medieninhalte in deinem Beitrag Wenn Sie Ihre Methoden oder Argumente ohne Bild erläutern können, beginnen Sie hier zuerst. Erst wenn Sie sich Ihre Web-Kopie noch einmal angesehen haben, sollten Sie einige Punkte in einer detaillierten Bildgrafik erneut durchlaufen. Insbesondere können Sie eine finden Das Tutorial erfordert mehr visuelle Hinweise, wenn die Komplexität zunimmt. Zwei Beispiele könnten das Erstellen einer Website-Datenbank oder eines Tabellendatensatzes umfassen.

2. Markieren Sie Bemerkenswerte Funktionen

Da jede Software / Technologie über so viele Funktionen verfügt, ist es nahezu unmöglich, jedes einzelne Element zu erklären. Nicht nur das, aber es ist sehr unwahrscheinlich, dass Ihre Besucher mehr als 20 Etiketten auf Ihrer Informationsgrafik lesen werden. Halten Sie sich an die interessantesten Funktionen und Verwenden Sie Etiketten, um ein wenig ausführlicher zu erklären.

Beim Schreiben der Web-Kopie für Ihren Etiketteninhalt vermeiden Sie langweilige Sprache wenn möglich. Wenn Besucher die neueste Version Ihrer Anwendung betrachten, ist ihnen die Änderung des Farbschemas möglicherweise egal. Wie wirkt sich das auf ihren täglichen Arbeitsablauf aus? Stattdessen vielleicht hervorheben, was für sie vorteilhaft ist, wie eine neue Benutzeroberfläche oder Mehrbenutzer-Konnektivität. Diese sollten im Allgemeinen sein abstrakte Funktionen die Sie nicht gerade durch sehen können “schauend” am Produkt.

Wenn Sie ein solches Etikett haben, um diese Funktionen direkt zu erklären, erhalten Sie die umfassendste Antwort. Die Besucher werden sich als intelligente, reife Käufer fühlen, die ihre eigenen Entscheidungen treffen können. Wenn sie Ihre Funktionen wirklich mögen, können Sie Ihre Software oder Ihr Produkt kaufen.

Unten finden Sie ein Beispiel von der Mozilla Firefox-Aktualisierungsseite.

Sie sehen, dass die Designer punktierte, kurvige Linien verwendet haben, um Beschriftungen und neue Funktionen hervorzuheben. Dies sind eigentlich Hintergrundbilder, die sich absolut in einem Container befinden div. Überraschenderweise wird der gesamte Etikettentext auch in HTML-Tags geschrieben (nicht nur ein großes Bild).

Ich denke, dass diese Methode nicht nur für Google Crawler-Bots nützlich ist, sondern auch für mobile Benutzer, die normalerweise nicht die gesamte Webseite nutzen können.

Beachten Sie auch, wie das Panorama nach links zeigt bietet ein kleines an “Lern mehr” Verknüpfung. Dies ist möglicherweise die beste Vorgehensweise, auf die Sie beim Erstellen von Informationsgrafiken zurückgreifen können! Wenn Sie alternative Seiten oder Anker auf derselben Seite haben, können Ihre Besucher auf diese Links klicken, um mehr über komplizierte Funktionen zu erfahren.

Denken Sie daran, dass informative Grafiken verwendet werden, um Ihren Besuchern Teaser und Produktfunktionen anzuzeigen. Obwohl Sie nur wenig Platz um die Grafik haben, können Sie dies Bieten Sie immer die Möglichkeit, auf einer externen Seite mehr zu erfahren.

3. Einfache, unauffällige Etiketten

Etiketten sind wirklich der wichtigste Aspekt bei der Erstellung informativer Produktgrafiken. Besucher werden wahrscheinlich verschiedene Bereiche Ihres Produkts, Ihrer Software, Websites, mobilen App usw. verstehen müssen. Leider kann die Verwendung von Tabellen und Aufzählungslisten nur so weit gehen. Wenn Sie die Produktfunktionen wirklich erklären müssen, ist es wichtig, darauf zu achten Hotspots zur Kennzeichnung.

Apple Computer ist möglicherweise das beste Beispiel für vereinfachte Etikettendetails. Sie können diese genauen Techniken auf ihren Grafiken feststellen, wenn Sie über Tablets, Laptops oder das berüchtigte iPhone schauen. Ihre Funktionen und technischen Daten entsprechen im Allgemeinen denen anderer Computerhersteller großer Marken. Ihre grafischen Modelle sind jedoch so makellos, dass die Produkte sich praktisch selbst verkaufen.

Beachten Sie, dass der Prozess viel einfacher ist, als Sie vielleicht denken! Produktgrafiken sind nur ein Standardbestandteil des gesamten Website-Designs. Selbst wenn Sie Düngemittel, Bettlaken oder Sammelkarten verkaufen, können Sie diese Etikettierungstechniken wahrscheinlich sinnvoll einsetzen. Und obwohl Apple einige wirklich vereinfachende, informative Grafiken hat, sind sie nicht das einzige Unternehmen, das dies tut. Versuchen Googeln für Unternehmen in Ihrer Nische um zu sehen, ob sie auf ihrer Website irgendwelche ausgefallenen Info-Labels oder Teaser-Screens tragen.

4. Bilder mit dynamischen Inhalten

Für einige Webentwickler reicht es möglicherweise nicht aus, einfach eine beschriftete Grafik Ihrer Software zu erstellen. Es gibt möglicherweise viele einzigartige Funktionen, auf die Sie eingehen möchten, die aber nur einen kleinen Teil Ihrer Webseite enthalten. Es ist möglich zu Konstruieren Sie eine Reihe von Einführungsschritten führt Sie Besucher durch eine kleine Produktdemo.

Newsberry veranschaulicht dies auf elegante Weise. Auf ihrer Startseite sehen Sie einen Blockbereich mit einer kleinen Mini-Navigation darunter. Sie umfassen 5 Schritte mit verschiedenen Screenshots und begleitendem beschreibendem Text. Selbst wenn Sie keine Ahnung haben, wofür Newsberry verwendet wird, ist es das Einführender Inhalt erklärt die Dinge sehr klar. In der gesamten Diaserie werden Ihnen sogar einige Demo-Links angeboten.

Beim Durchlaufen des Inhalts sollten Sie feststellen, dass viele Folien Screenshots in einem kleinen Browserfenster enthalten. Dieser Effekt ist eigentlich sehr einfach nachzuahmen! Du musst es nur tun Finden Sie ein Bild, das Sie als Hintergrundbild verwenden können, und passen Sie die Größe der Screenshots entsprechend an. Zugegeben, dieser Effekt funktioniert nicht für jedes Produkt, aber es ist eine gute Möglichkeit, Bildschirme von einer Webanwendung aus zu gestalten.

5. Löschen Sie Screenshots und Produktfotos

Es ist möglich, die besten Labels und Funktionen für Ihre Produkte einzubeziehen, den Umsatz jedoch zu verpassen. Das Screenshots und Fotos, die Sie für Ihre Grafik auswählen, sind im Endeffekt genauso wichtig wie alle Details. Unter Windows und Mac OS X gibt es Möglichkeiten, Screenshots Ihres gesamten Desktops mit Tastenkombinationen aufzunehmen. Wenn Sie diese Methode zusammen mit einiger Zeit in Photoshop verwenden, können Sie sehr interessante Feature-Demos sammeln.

Wenn Ihr Produkt sehr verschlungen ist, sollten Sie es versuchen ein paar verschiedene Bilder zusammenstellen. Das obige Beispiel von der Tweetbot-Website verwendet blaue Kreise, um eine Antippen der App anzuzeigen. Anstelle eines einzelnen Screenshots mit vielen Etiketten sollten Sie die Verwendung einer kleinen jQuery-Bildergalerie in Betracht ziehen, um 3-5 verschiedene Grafiken zu kombinieren. Dies gibt Ihnen mehr Möglichkeiten dazu konzentrieren sie sich auf verschiedene perspektiven des produkts den Besuchern wird ein viel reicheres Erlebnis geboten.

Wenn Sie eine Aufnahme von Ihrem PC oder Smartphone aus machen, wird das Bild immer mit 100% Zoom gespeichert. Bildbearbeitungsprogramme wie Photoshop können diese Größe ändern, verlieren jedoch häufig Details. Wie können Sie eine solche Grafik in Ihre kleine Website einfügen? Eine der besten Techniken ist Vergrößerung in dem Sie die Anwendung verkleinern und vergrößerte Abschnitte der wichtigsten Teile erstellen. Diese Technik wird häufiger in Software als in physischen Produkten gesehen - ich habe den Entwurfsprozess unten detailliert beschrieben.

6. Erstellen eines "Zoom Lens" -Effekts

Ich werde die Schritte zum Erstellen eines Lupeneffekts in Adobe Photoshop erstellen. Wenn Sie einen anderen Grafikeditor verwenden, können Sie höchstwahrscheinlich dieselben Aufgaben ausführen, jedoch unterscheiden sich die Menüs und Befehle.

Eines der besten Beispiele für diese Technik ist auf der Homepage der App "Things for Mac". Bei der Grafik wurde die App so klein gemacht, dass sie zusammen mit einem kleinen Schlagschatten perfekt auf die Seite passt. In einigen wichtigen Bereichen ist jedoch ein Kreis erkennbar, dessen Inneninhalt viel größer ist. Sie haben sogar einen weißen inneren Schein hinzugefügt, um als gebrochenes Licht zu erscheinen, das durch eine Linse scheint!

Bonus: "Zoom Lens" -Effekt Photoshop-Tutorial

Um zu beginnen, schnappen Sie sich einen Screenshot, den Sie für Ihre Grafik verwenden möchten. Ich habe eine kurze Ansicht der Hongkiat-Homepage gemacht. Ich werde nur das Browserfenster beschneiden und die Größe auf etwa 700px ändern. Sie sollten die Breite so anpassen, dass sie in den Inhaltsbereich Ihrer eigenen Website passt. Erstellen Sie nun eine neue Ebene über diesem Hintergrund und nehmen Sie eine Umlaufauswahl vor, während Sie die Umschalttaste gedrückt halten, um sie proportional zu halten. Füllen Sie mit einer beliebigen Farbe.

Schritt 1

Wenn Sie den Kreis ausgewählt lassen, ändern Sie den Füllungsgrad in der Ebenenleiste auf 0%. Fügen Sie unter der Ebene FX einen 1px-2px schwarzen Strich und ein weißes Innenlicht hinzu. Sie können die Deckkraft für weniger weiße Beleuchtung reduzieren.

Schritt 2

Behalten Sie den Kreis weiterhin bei, bewegen Sie sich auf Ihre Hintergrundebene und drücken Sie die Strg-TasteFür Mac-Benutzer ist dies die Befehls- oder Cmd-Taste.) + c zu kopieren. Erstellen Sie dann eine neue Ebene über dem Hintergrund, aber unter dem Vergrößerungskreis und fügen Sie sie ein. Sie können alternativ auch einfach Strg + j drücken, um eine neue Ebene nur mit dem Auswahlkontakt zu duplizieren.

Drücken Sie Strg + T, um das Transformationswerkzeug zu öffnen. Skalieren Sie nun die neue duplizierte Ebene, während Sie gedrückt halten Verschiebung alles proportional halten und alt das Zentrum stationär halten.

Schritt 3

Drücken Sie die Strg-Taste und klicken Sie auf das Lupensymbol, um die Auswahl erneut zu treffen. Beachten Sie, dass Sie die duplizierte Hintergrundebene im Ebenenfenster (die direkt unter unserer Lupe) immer noch hervorheben möchten, dh, dass sie einen hellblauen Hintergrund hat.

Drücken Sie Strg + Umschalttaste + i, um die aktuelle Auswahl umzukehren. Klicken Sie nun auf "Löschen", um den zusätzlichen Müll von unserem neu skalierten Screenshot zu löschen. Um einen zusätzlichen Effekt zu erzielen, rufen Sie das Ebenen-FX-Menü auf, um einen kleinen Schatten hinzuzufügen. Sie können auch eine dünne senkrechte 1px-Linie zeichnen und den Verflüssigungsfilter verwenden (Filter> Verflüssigen) einen kleinen Griff erstellen!

Fazit

Um fantastische Produktgrafiken entwerfen zu können, müssen Sie sich an die Grundlagen erinnern. Besucher möchten einfach nur verstehen, was Sie verkaufen wollen! Der einfachste Weg, diese Informationen zu vermitteln, ist eine Reihe von Screenshots oder eine einzelne Detailgrafik. Beschriftungen sind nur das zweite Teil dieses Puzzles, in dem Sie die wichtigsten Feature-Sets beschreiben können.

Wenn Sie alle diese Techniken zusammenstellen, werden Sie wahrscheinlich das größere Bild wahrnehmen. Downloads und Einkäufe werden in die Höhe schnellen - insbesondere, wenn Sie Ihre Grafiken vorne und hinten auf Ihrer Startseite platzieren. Diese Techniken sind ideal für Grafik- und Webdesigner, um im Bereich Produktdesign anzufangen. Wir haben einige abstrakte Ideen detailliert beschrieben, würden uns aber gerne Ihre Gedanken im unten stehenden Diskussionsbereich anhören!