Produktgrafik 6 Tekniker för att göra bilder mer informativa

Webbdesigners har blivit väldigt smidiga med marknadsföringstekniker. Luring sidinnehåll är alltid bra, men när det gäller att ta tag i dina besökares uppmärksamhet bilder är den mest populära formen av media. De behöver inte ljud som demo-videor och de kan snabbt reläera viktig information inom några sekunder. Det kan tyckas enkelt, men det finns några anmärkningsvärda tekniker för att bygga informativa bilder på webbplatser.

Dessa inkluderar funktionskedjor, närbildsskärmbilder, prisjämförelser och andra minutdetaljer. Webbdesigners kan använda informationsgrafik för att modellera nya appar, programvara, videospel eller många andra produkter! Även om du vanligtvis ser dessa tekniker utnyttjas inom olika områden av teknik.

Kolla in de här idéerna nedan, där vi inte bara erbjuder tips, utan även verkliga exempel på vacker produktgrafik, fylld med bra info.

1. Expandera på ditt innehåll

Informativa bilder ska inte användas i stället för bra webbsidor. Istället använd bildspråk för att expandera på dina nyckelpunkter och illustrera dem tydligt för dina besökare. Ett av de bästa sätten att göra detta är bygga en liten demonstration för att belysa viktiga områden av en handledning. Med några informativa grafik och skärmdumpar är det mycket enklare att hålla din läsares intresse att flytta genom varje steg.

När du försöker visa en programvaruhandledning (till exempel Photoshop-tutorial) kan det vara svårt att förmedla meddelandet till skriftlig text. Besökare kommer att landa på din artikel och börja omedelbart att döma materialet under en bråkdel av en sekund. Web Designer Wall har en fantastisk handledning om att bygga CSS3 rundade bilder tillsammans med en praktisk grafik. Detta inkluderar några etiketter och ett närbild av effekten.

På den ursprungliga artikelsidan läggs den här bilden till en mycket tydligare bild i ditt huvud mot vad du ska skapa. Författaren har lagt till en liten demo länk, men varför innehåller inte några demo bilder också? Du är mycket mer benägna att dra uppmärksamhet med ett korrekt märkt demo-skott.

Försöka Undvik att lägga till bilder bara för mediainnehåll i ditt inlägg. Om du kan förklara dina metoder eller resonemang utan att en bild börjar här först. Bara efteråt tittar tillbaka över din webbkopia bör du överväga att omdirigera några punkter i en detaljerad bildgrafik. Specifikt kan du hitta en handledning kräver mer visuella signaler eftersom komplexiteten ökar. Två exempel kan innefatta att bygga en webbdatabas eller tabelldataset.

2. Markera anmärkningsvärda funktioner

Eftersom varje del av programvara / teknik kommer att ha så många funktioner är det nästan omöjligt att förklara varje enskild bit. Inte bara detta, men det är mycket osannolikt att dina besökare kommer att vara intresserade av att läsa 20+ etiketter på din informationsbild. Håll dig till de mest intressanta funktionerna och använd etiketter för att förklara lite mer djupgående.

När du skriver webbkopian för ditt etikettinnehåll Undvik tråkigt språk när det är möjligt. Om besökare tittar på den senaste versionen av din ansökan kanske de inte bryr sig mycket om förändringarna i färgschema. Hur påverkar det deras dagliga arbetsflöde? I stället kanske markera vad som är fördelaktigt för dem, som en ny gränssnittspanel eller flera användaranslutningar. Dessa bör i allmänhet vara abstrakta funktioner som du inte kan se bara av “ser” på produkten.

Att ha en sådan etikett för att förklara dessa funktioner direkt kommer att ge det mest rikliga svaret. Besökare kommer att känna att de behandlas som intelligenta, mogna kunder som kan ta sina egna beslut. Om de verkligen gillar dina funktioner ger detta ett större tryck mot att köpa din programvara eller produkt.

Nedan visas ett exempel på uppdateringssidan för Mozilla Firefox.

Du kan se att konstruktörerna har använt prickade kurvor för att peka ut etiketter och nya funktioner. Det här är faktiskt bakgrundsbilder placerade helt i en behållare div. Överraskande är all etiketttext också skrivet inuti HTML-taggar (inte bara en stor bild).

Jag tycker att den här metoden inte bara är användbar för Google-sökrobotar, men också för mobila användare som normalt inte kan uppleva hela webbsidan.

Observera också hur panoramafunktionen är över till vänster erbjuder en liten “Läs mer” länk. Det här är kanske den bästa praxis du kan komma in när du bygger informationsgrafik! Om du har alternativa sidor eller ankare på samma sida kan dina besökare klicka på dessa länkar för att förstå mer om komplicerade funktioner.

Kom ihåg att informativ grafik används för att enkelt visa teasers och produktegenskaper för dina besökare. Så även om du är begränsad i rymden runt grafiken kan du Ge alltid chansen att lära dig mer på en extern sida.

3. Enkla, diskreta etiketter

Etiketter är verkligen den viktigaste aspekten för att skapa informativ produktgrafik. Besökare kommer sannolikt att behöva förstå olika områden i din produkt, programvara, webbplatser, mobilapp osv. Tyvärr kan användningen av tabeller och punktlistor bara gå så långt. När du verkligen behöver förklara produktegenskaper är det viktigt att välja ut hotspots för märkning.

Apple Datorer är möjligen det bästa exemplet på enklare etikettdetaljer. Du kanske märker dessa exakta tekniker på grafiken när du tittar över tabletter, bärbara datorer eller den ökända iPhone. Deras egenskaper och tekniska specifikationer är i allmänhet desamma som andra stora varumärkes-datortillverkare. Ändå är deras grafiska modeller så orörda att produkterna praktiskt säljer sig själva.

Observera att när du bryter ner processen är det mycket enklare än du kanske tror! Produktgrafik är bara en vanlig del av den övergripande webbdesignen. Även om du säljer gödningsmedel eller lakan eller handelskort kan du troligen sätta dessa märkningstekniker till god användning. Och även om Apple har några riktigt förenklade informativa grafik, är de inte det enda företaget att göra det. Prova Googling runt för företag i din nisch för att se om de sportar några fina info-etiketter eller teaser-skärmar på deras hemsida.

4. Bildspråk med dynamiskt innehåll

För vissa webbutvecklare kanske det inte räcker för att helt enkelt skapa en märkt grafik av din programvara. Det kan finnas många unika egenskaper du vill gå över men innehåller inom en liten del av din webbsida. Det är möjligt att konstruera en serie introduktionssteg vilket leder dig besökare genom en liten produktdemo.

Newsberry illustrerar elegant ett exempel på detta. På deras hemsida märker du ett blockområde med en liten mini-navigation under. De innehåller 5 steg längs processen med olika skärmdumpar och en del medföljande beskrivande text. Även om du inte har någon aning om vad Newsberry används för, deras Inledande innehåll förklarar saker mycket tydligt. Du erbjuds även några demo länkar i hela serien av bilder.

När du flyttar genom innehållet bör du märka att många bilder innehåller skärmdumpar i ett litet webbläsarfönster. Denna effekt är faktiskt väldigt enkel att efterlikna! Du behöver bara hitta en bild som ska användas som bakgrundsbilder och skärmbilder för att återställa storlek så att de passar inuti. Beviljas denna effekt fungerar inte för varje produkt, men det är ett bra sätt att rama skärmar från en webbapplikation.

5. Rensa skärmdumpar och produktfoton

Det är möjligt att inkludera alla de bästa etiketterna och funktionerna för dina produkter men saknar fortfarande försäljning. De skärmdumpar och foton du väljer för din grafik är i sista hand lika viktiga som alla fina detaljer. På Windows och Mac OS X finns det sätt att ta skärmdumpar av hela skrivbordet med tangentbordsgenvägar. Genom att använda den här metoden i kombination med en viss tid i Photoshop kan du samla mycket intressanta funktionsdemoder.

Om din produkt är väldigt grov bör du försöka sätta ihop några olika bilder. Exemplet ovan från Tweetbots hemsida använder blå cirklar för att indikera en tappande åtgärd i appen. I stället för en enda skärmdump med många etiketter, överväga att använda ett litet jQuery bildgalleri för att kombinera 3-5 olika grafik. Detta ger dig mer möjlighet att fokusera på olika perspektiv på produkten medan besökare erbjuds en mycket rikare upplevelse.

När du snapar ett skott från din dator eller smartphone sparas bilden alltid med 100% zoom. Bildredigerare som Photoshop har möjlighet att omforma dessa, men de förlorar ofta detaljer. Så hur kan du passa en sådan grafik i din lilla hemsida? En av de bästa teknikerna är förstoring där du skala ner programmet och skapa förstorade delar av de viktigaste bitarna. Denna teknik ses mer vanligt i mjukvara än fysiska produkter - jag har beskrivit designprocessen nedan.

6. Bygga en "Zoom Lens" -effekt

Jag ska bygga stegen för att bygga en förstoringsglasseffekt i Adobe Photoshop. Om du använder en annan grafikredigerare kan du troligtvis utföra samma uppgifter, men menyer och kommandon skiljer sig åt.

Ett av de bästa exemplen på den här tekniken är på hemsidan för saker till Mac. Grafiken har appen nedskalad så att den passar perfekt på sidan, tillsammans med en liten droppskugga. Men över några av de viktiga områdena märker du en cirkel med innehållet i innehållet mycket större. De har till och med lagt till en vit inre glöd för att framstå som brutet ljus som skiner genom en lins!

Bonus: "Zoom Lens" Effekt Photoshop Handledning

För att börja ta en skärmdump som du vill använda för din grafik. Jag har tagit en snabb skärm på Hongkiats hemsida. Jag ska beskära bara webbläsarfönstret och ändra storlek till ca 700px. Du bör ändra storlek på bredden för att passa in i innehållsområdet på din egen webbplats. Skapa nu ett nytt lager ovanpå denna bakgrund och gör ett cirkulärt urval medan du håller skiftet för att hålla det proportionellt. Fyll i vilken färg du vill.

Steg 1

Om du håller den valda cirkeln ändras fyllningen% i lagpanelen till 0%. Under skiktet FX läggs en 1px-2px svart slag och en vit inre glöd. Du kan minska opaciteten för mindre vit belysning.

Steg 2

Fortsätt att hålla den valda cirkeln flyttad till ditt bakgrundslag och tryck på ctrl (För Mac-användare är det kommandot eller cmd-tangenten.) + c för att kopiera. Gör sedan ett nytt lager ovanför bakgrunden men under förstoringscirkeln och klistra in. Du kan alternativt bara slå ctrl + j för att duplicera ett nytt lager med endast urvalet in-tact.

Höger ctrl + t för att öppna transformeringsverktyget. Skala nu ut det nya dubbla lagret medan du håller flytta att hålla allt proportionellt och alt för att hålla centret stationärt.

Steg 3

Tryck på ctrl och klicka på ikonen för förstoringsglasskiktet för att göra ditt val igen. Observera att du fortfarande bör markera det duplicerade bakgrundsskiktet i lagpanelen (den som är direkt under vårt förstoringsglas), vilket betyder att det kommer att ha en ljusblå bakgrund.

Tryck Ctrl + Shift + i för att invertera det aktuella valet. Klicka nu på radera för att rensa bort det extra skräpet från vår återskalade skärmdump. För lite tillförd effekt dra upp skiktet FX-menyn för att lägga till en liten droppskugga. Du kan också rita en tunn 1px vertikal linje och använda Liquify Filter (Filtrera> Liquify) skapa ett litet handtag!

Slutsats

För att designa en fantastisk produktgrafik måste du komma ihåg grunderna. Besökare vill helt enkelt förstå vad du försöker sälja dem! Det enklaste sättet att få den här informationen är genom en serie skärmdumpar eller en enda detaljgrafik. Etiketter är bara den andra delen till detta pussel, där du kan beskriva de viktigaste särdragssatserna.

När du lägger alla dessa tekniker tillsammans kommer du sannolikt att märka den större bilden. Nedladdningar och inköp kommer skyrocket - speciellt om du placerar din grafikfront och -centrum på din hemsida. Dessa tekniker är perfekta för grafiska och webbdesigners att komma igång inom produktdesign. Vi har detaljerat några abstrakta idéer, men vi skulle gärna höra dina tankar på diskussionsområdet nedan!