Productafbeeldingen 6 Technieken om afbeeldingen meer informatief te maken

Webontwerpers zijn zeer sluw geworden met marketingtechnieken. De inhoud van pagina's verleiden is altijd goed, maar als het erom gaat bezoekers te trekken, zijn beelden de meest populaire vorm van media. Ze vereisen geen geluid zoals demovideo's en kunnen binnen enkele seconden snel belangrijke informatie doorgeven. Het lijkt misschien eenvoudig, maar er zijn enkele opmerkelijke technieken om informatieve afbeeldingen op websites te bouwen.

Deze omvatten kenmerklabels, close-up screenshots, prijsvergelijkingen en andere kleine details. Webontwerpers kunnen informatie-afbeeldingen gebruiken om nieuwe apps, software, videogames of vele andere producten te modelleren! Hoewel meestal zie je deze technieken worden gebruikt in verschillende gebieden van de technologie.

Bekijk de ideeën hieronder waar we niet alleen tips bieden, maar ook echte voorbeelden van prachtige productgrafieken boordevol geweldige info.

1. Breid uw inhoud uit

Informatieve afbeeldingen mogen niet worden gebruikt in plaats van goede webpagina-inhoud. In plaats daarvan gebruik afbeeldingen om uit te vouwen op uw belangrijkste punten en illustreer ze duidelijk voor uw bezoekers. Een van de beste manieren om dit te doen is een kleine demo bouwen om belangrijke gebieden te markeren van een tutorial. Met een paar informatieve afbeeldingen en schermafbeeldingen is het veel eenvoudiger om de aandacht van uw lezer tijdens elke stap te houden.

Wanneer u een softwarehandleiding (zoals een Photoshop-zelfstudie) probeert te demonstreren, kan het moeilijk zijn om dit te doen breng het bericht over in geschreven tekst. Bezoekers zullen op uw artikel belanden en onmiddellijk beginnen met het sub-bewust beoordelen van het materiaal binnen een fractie van een seconde. Web Designer Wall heeft een fantastische zelfstudie over het bouwen van CSS3-afgeronde afbeeldingen, vergezeld van een handige afbeelding. Dit omvat enkele labels en een close-upfoto van het effect.

Op de originele artikelpagina voegt deze afbeelding een veel duidelijker beeld toe in uw hoofd naar wat u gaat maken. De auteur heeft een kleine demolink toegevoegd, maar waarom bevat hij ook geen enkele demo-afbeelding? Je trekt veel meer de aandacht met een correct gelabelde demo-opname.

Probeer vermijd het toevoegen van afbeeldingen alleen maar omwille van media-inhoud in je bericht. Als u uw methoden of redenering kunt uitleggen zonder een afbeelding, begin dan hier eerst. Pas achteraf over uw webexemplaar kunt u overwegen sommige punten opnieuw te behandelen in een gedetailleerde afbeelding. In het bijzonder vindt u mogelijk een tutorial vereist meer visuele aanwijzingen als de complexiteit toeneemt. Twee voorbeelden kunnen het bouwen van een websitedatabase of een tabeldataset zijn.

2. Markeer opvallende kenmerken

Omdat elk stuk software / technologie zoveel functies heeft, is het bijna onmogelijk om elk onderdeel uit te leggen. Niet alleen dit, maar het is hoogst onwaarschijnlijk dat uw bezoekers geïnteresseerd zullen zijn in het lezen van meer dan 20 labels op uw informatiegrafiek. Blijf bij de meest interessante functies en gebruik labels om een ​​beetje meer diepgaand uit te leggen.

Bij het schrijven van de webkopie voor uw labelinhoud vermijd saaie taal wanneer mogelijk. Als bezoekers naar de nieuwste versie van uw toepassing kijken, geven ze mogelijk niet veel om de wijzigingen in het kleurenschema. Welke invloed heeft dat op hun dagelijkse workflow? In plaats daarvan misschien benadrukken wat goed voor hen is, zoals een nieuw interfacepaneel of multi-user connectiviteit. Deze zouden over het algemeen moeten zijn abstracte functies die je niet gewoon kunt zien “op zoek” bij het product.

Het hebben van een label om deze functies duidelijk uit te leggen, zal de meest voorkomende reactie bieden. Bezoekers zullen voelen dat ze worden behandeld als intelligente, volwassen shoppers die in staat zijn om hun eigen beslissingen te nemen. Als ze echt van je functies houden, geeft dit een groter duwtje in de richting van de aanschaf van je software of product.

Hieronder ziet u een voorbeeld van de Mozilla Firefox-updatepagina.

Je kunt zien dat de ontwerpers gestippelde curvy lijnen hebben gebruikt om op labels en nieuwe functies te wijzen. Dit zijn eigenlijk achtergrondafbeeldingen die absoluut in een container zijn geplaatst div. Verrassend is dat alle labeltekst ook in HTML-tags is geschreven (niet slechts één grote afbeelding).

Ik vind dat deze methode niet alleen handig is voor Google-crawler-bots, maar ook voor mobiele gebruikers die normaal niet de volledige webpagina kunnen bekijken.

Merk ook op hoe de Panorama-functie naar links wijst biedt een kleine “Kom meer te weten” link. Dit is misschien wel de beste manier om informatie grafisch te maken! Als u alternatieve pagina's of ankers op dezelfde pagina hebt, kunnen uw bezoekers op deze links klikken om meer te weten te komen over gecompliceerde functies.

Vergeet niet dat informatieve afbeeldingen worden gebruikt om eenvoudig teasers en productfuncties aan uw bezoekers te tonen. Dus hoewel je in de ruimte rond de afbeelding beperkt bent, kan dat bied altijd de kans om meer te leren op een externe pagina.

3. Eenvoudige, onopvallende labels

labels zijn echt het belangrijkste aspect bij het maken van informatieve productafbeeldingen. Bezoekers zullen waarschijnlijk verschillende gebieden in uw product, software, websites, mobiele app, enz. Moeten begrijpen. Helaas kan het gebruik van tabellen en lijsten met opsommingstekens alleen zo ver gaan. Wanneer u productfuncties echt wilt uitleggen, is het belangrijk om uit te kiezen hotspots voor labelen.

Apple Computers is mogelijk het beste voorbeeld van simplistische labeldetails. Je kunt deze exacte technieken op hun grafische afbeeldingen zien wanneer je over tablets, laptops of de beruchte iPhone kijkt. Hun functies en technische specificaties zijn over het algemeen hetzelfde als die van andere fabrikanten van grote merken. Toch zijn hun grafische modellen zo smetteloos dat de producten praktisch zichzelf verkopen.

Merk op dat wanneer je het proces afbreekt het een stuk eenvoudiger is dan je denkt! Productafbeeldingen vormen slechts een standaardonderdeel van het algemene websiteontwerp. Zelfs als je kunstmest of lakens of ruilkaarten verkoopt, kun je deze labeltechnieken waarschijnlijk goed gebruiken. En hoewel Apple een aantal echt simplistische informatieve afbeeldingen heeft, zijn ze niet het enige bedrijf dat dit doet. Proberen Googlen rond voor bedrijven in uw niche om te zien of ze fancy fancy info labels of teaserschermen op hun website vertonen.

4. Beeldspraak met dynamische inhoud

Voor sommige webontwikkelaars is het misschien niet genoeg om eenvoudig een gelabelde afbeelding van uw software te maken. Er kunnen veel unieke functies zijn die u wilt overnemen, maar die zich binnen een klein gedeelte van uw webpagina bevinden. Het is mogelijk om bouw een reeks inleidende stappen leidt je bezoekers doorheen een kleine productdemo.

Newsberry illustreert elegant een voorbeeld hiervan. Op hun startpagina zie je een blokgebied met een kleine mini-navigatie eronder. Ze bevatten 5 stappen in het proces met verschillende schermafbeeldingen en een aantal bijbehorende beschrijvende tekst. Zelfs als je geen idee hebt waar Newsberry voor wordt gebruikt, is hun inleidende inhoud verklaart de dingen heel duidelijk. U krijgt zelfs een aantal demolinks aangeboden in de reeks dia's.

Terwijl je door hun inhoud loopt, zou je moeten merken dat veel dia's schermafbeeldingen bevatten in een klein browservenster. Dit effect is eigenlijk heel eenvoudig na te bootsen! Dat moet je gewoon doen vind een afbeelding om te gebruiken als achtergrondafbeeldingen en pas de schermafbeeldingen opnieuw aan om binnen te passen. Toegegeven dit effect zal niet voor elk product werken, maar het is een mooie manier om schermen van een webtoepassing in te kaderen.

5. Schermafbeeldingen en productfoto's wissen

Het is mogelijk om alle beste labels en functies voor uw producten op te nemen, maar mis nog altijd de omzet. De Schermafbeeldingen en foto's die u kiest voor uw afbeelding zijn uiteindelijk net zo belangrijk als alle fijnere details. Op Windows en Mac OS X zijn er manieren om schermafbeeldingen van uw hele bureaublad te maken met sneltoetsen. Door deze methode in combinatie met enige tijd in Photoshop te gebruiken, kunt u zeer interessante functiedemo's verzamelen.

Als uw product erg ingewikkeld is, moet u het proberen stel een paar verschillende afbeeldingen samen. Het bovenstaande voorbeeld van de website van Tweetbot maakt gebruik van blauwe cirkels om een ​​tikactie op de app aan te geven. In plaats van één screenshot met veel labels overweegt u een kleine jQuery-afbeeldingsgalerij te gebruiken om 3-5 verschillende afbeeldingen te combineren. Dit geeft u meer kans om focus op verschillende perspectieven van het product terwijl bezoekers een veel rijkere ervaring worden geboden.

Wanneer u een foto van uw pc of smartphone maakt, wordt de foto altijd opgeslagen met een zoom van 100%. Afbeeldingseditors zoals Photoshop hebben de mogelijkheid om deze opnieuw te vergroten, maar ze verliezen vaak details. Dus hoe kun je zo'n afbeelding in je kleine website passen? Een van de beste technieken is vergroting waarin je de applicatie opschaalt en vergrote delen van de belangrijkste stukken maakt. Deze techniek komt vaker voor in software dan fysieke producten - ik heb het ontwerpproces hieronder beschreven.

6. Een "zoomlens" -effect opbouwen

Ik bouw de stappen voor het bouwen van een vergrootglaseffect in Adobe Photoshop. Als u een andere grafische editor gebruikt, kunt u hoogstwaarschijnlijk dezelfde taken uitvoeren, maar de menu's en opdrachten verschillen.

Een van de beste voorbeelden van deze techniek is de startpagina Things for Mac. In de afbeelding is de app klein geschaald zodat deze perfect op de pagina past, samen met een kleine slagschaduw. Op sommige van de belangrijke gebieden zul je echter merken dat een cirkel met een inside-inhoud veel groter is. Ze hebben zelfs een witte binnengloed toegevoegd om te verschijnen als gebroken licht dat door een lens schijnt!

Bonus: "Zoomlens" Effect Photoshop zelfstudie

Om een ​​schermafbeelding te maken die je wilt gebruiken voor je afbeelding. Ik heb een snel scherm van de startpagina van Hongkiat gemaakt. Ik ga alleen het browservenster bijsnijden en het formaat wijzigen naar ongeveer 700 px. U moet de breedte aanpassen om binnen het inhoudsgebied van uw eigen website te passen. Maak nu een nieuwe laag bovenop deze achtergrond en maak een cirkelvormige selectie terwijl je de shift ingedrukt houdt om het proportioneel te houden. Vul met elke gewenste kleur.

Stap 1

Houd de cirkel geselecteerd en wijzig het vul% in het deelvenster Lagen in 0%. Onder de laag FX voeg je een 1px-2px zwarte lijn en een witte binnengloed toe. U kunt de dekking verminderen voor minder wit licht.

Stap 2

Blijf de geselecteerde cirkel behouden en ga naar je achtergrondlaag en druk op ctrl (Voor een Mac-gebruiker is dit de opdracht of de cmd-toets.) + c om te kopiëren. Maak vervolgens een nieuwe laag boven de achtergrond, maar onder de vergrootcirkel en plak. Je kunt ook gewoon op ctrl + j drukken om een ​​nieuwe laag te dupliceren met alleen de selectie in-tact.

Druk op ctrl + t om de transformatietool te openen. Schaal nu de nieuwe duplicaatlaag uit terwijl u vasthoudt verschuiving alles proportioneel houden en alt om het midden stil te houden.

Stap 3

Druk op ctrl en klik op het pictogram van de laag met het vergrootglas om uw selectie opnieuw te maken. Merk op dat je nog steeds de gedupliceerde achtergrondlaag in het deelvenster met lagen moet benadrukken (die direct onder ons vergrootglas), wat betekent dat het een lichtblauwe achtergrond zal hebben.

Druk op Ctrl + Shift + i om de huidige selectie om te keren. Druk nu op delete om de extra afval weg te halen uit ons opnieuw geschaalde screenshot. Voor een beetje extra effect trek je het FX-menu van de laag omhoog om een ​​kleine slagschaduw toe te voegen. Je kunt ook een dunne 1px verticale lijn tekenen en het Liquify Filter gebruiken (Filter> Uitvloeien) maak een klein handvat!

Conclusie

Om fantastische productafbeeldingen te ontwerpen, moet u de basiskennis onthouden. Bezoekers willen gewoon begrijpen wat u hen probeert te verkopen! De gemakkelijkste manier om deze informatie over te brengen is door een reeks screenshots of een enkele detailafbeelding. Labels zijn slechts het tweede deel van deze puzzel, waarin u de belangrijkste functiesets kunt schetsen.

Wanneer je al deze technieken samenvoegt, zul je waarschijnlijk het grotere geheel gaan opmerken. Downloads en aankopen schieten omhoog - vooral als u uw afbeeldingen op uw homepage plaatst. Deze technieken zijn perfect voor grafische en webontwerpers om aan de slag te gaan op het gebied van productontwerp. We hebben enkele abstracte ideeën gedetailleerd, maar we horen graag uw gedachten in het onderstaande discussiegebied!