Produktgrafikk 6 Teknikker for å lage bilder mer informativ

Webdesignere har blitt veldig smarte med markedsføringsteknikker. Luring sideinnhold er alltid bra, men når det gjelder å ta tak i dine besøkende, er bilder den mest populære formen for media. De krever ikke lyd som demo videoer, og de kan raskt videresende viktig informasjon om noen sekunder. Det kan virke lett, men det er noen bemerkelsesverdige teknikker for å bygge informative bilder på nettsteder.

Disse inkluderer funksjonsetiketter, nærbilde skjermbilder, pris sammenligninger og andre minutt detaljer. Webdesignere kan bruke informasjonsgrafikk til å modellere nye programmer, programvare, videospill eller mange andre produkter! Selv om du vanligvis ser disse teknikkene som brukes i ulike fagområder.

Ta en titt på ideene nedenfor, der vi tilbyr ikke bare tips, men ekte eksempler på vakker produktgrafikk, jam-pakket med god info.

1. Utvid på innholdet ditt

Informative bilder bør ikke brukes i stedet for god nettsideinnhold. I stedet bruk bilder å utvide på dine viktigste punkter og illustrere dem tydelig for dine besøkende. En av de beste måtene å gjøre dette på er bygge en liten demonstrasjon for å markere viktige områder av en opplæring. Med noen informative grafikk og skjermbilder er det mye enklere å holde leserens interesse i hvert trinn.

Når du prøver å demonstrere en programvareopplæring (for eksempel Photoshop-opplæring) kan det være vanskelig å formidle meldingen til skriftlig tekst. Besøkende vil lande på artikkelen din og begynner umiddelbart å underbevisst dømme materialet innen en brøkdel av et sekund. Web Designer Wall har en fantastisk opplæring om å bygge CSS3 avrundede bilder ledsaget av en praktisk grafikk. Dette inkluderer noen etiketter og et nærbilde av effekten.

På den opprinnelige artikkelsiden legger dette bildet et mye tydeligere bilde i hodet mot det du skal skape. Forfatteren har lagt til en liten demo-kobling, men hvorfor inneholder ikke noen demo-bilder også? Du er mye mer sannsynlig å trekke oppmerksomhet med et skikkelig merket demo-skudd.

Prøv å unngå å legge til bilder bare for mediainnholdets skyld i innlegget ditt. Hvis du kan forklare dine metoder eller resonnement uten et bilde, start først her. Bare etterpå ser du tilbake på webkopien din, bør du vurdere å re-iterere noen punkter i et detaljert bildegrafikk. Spesielt kan du finne en opplæringen krever flere visuelle tegn som kompleksitet øker. To eksempler kan omfatte å bygge en nettside database eller tabell datasett.

2. Fremhev bemerkelsesverdige funksjoner

Fordi hvert stykke programvare / teknologi vil ha så mange funksjoner, er det nesten umulig å forklare hver eneste bit. Ikke bare dette, men det er svært lite sannsynlig at dine besøkende vil være interessert i å lese 20+ etiketter på informasjonen din. Hold deg til de mest interessante funksjonene og bruk etiketter for å forklare litt mer grundig.

Når du skriver webkopien for etikettinnholdet ditt unngå kjedelig språk når det er mulig. Hvis besøkende ser på den nyeste versjonen av søknaden, kan de ikke bryr seg mye om endringene i fargevalg. Hvordan påvirker det deres daglige arbeidsflyt? I stedet kanskje Fremhev hva som er gunstig for dem, som et nytt grensesnittpanel eller multi-user-tilkobling. Disse bør generelt være abstrakte funksjoner som du ikke kan se like ved “ser” på produktet.

Å ha en slik etikett for å forklare disse funksjonene direkte vil gi den mest omfattende responsen. Besøkende vil føle at de blir behandlet som intelligente, modne kunder som er i stand til å bestemme seg selv. Hvis de virkelig liker funksjonene dine, gir dette et større inntrykk mot å kjøpe programvare eller produkt.

Nedenfor er et eksempel fra Mozilla Firefox-oppdateringssiden.

Du kan se designerne har brukt stiplede kurvede linjer for å peke ut etiketter og nye funksjoner. Disse er faktisk bakgrunnsbilder plassert helt inne i en beholder div. Overraskende er all etikettteksten også skrevet inne i HTML-koder (ikke bare ett stort bilde).

Jeg føler at denne metoden ikke bare er nyttig for Google-robotsøkebots, men også for mobilbrukere som vanligvis ikke kunne oppleve hele nettsiden.

Legg også merke til hvordan panoramaen er over til venstre tilbyr en liten “Lære mer” link. Dette er muligens den beste praksisen du kan komme inn på når du bygger informasjonsgrafik! Hvis du har alternative sider eller ankre på samme side, kan dine besøkende klikke på disse koblingene for å forstå mer om kompliserte funksjoner.

Husk at informativ grafikk brukes til å enkelt vise teasers og produktfunksjoner til de besøkende. Så selv om du er begrenset i rommet rundt grafikken kan du Gi alltid muligheten til å lære mer på en ekstern side.

3. Enkle, ikke-påtrengende etiketter

etiketter er virkelig det viktigste aspektet i å skape informativ produktgrafikk. Besøkende vil sannsynligvis trenge å forstå forskjellige områder i produktet ditt, programvaren, nettsteder, mobilapp, etc. Dessverre kan bruk av tabeller og punktlister bare gå så langt. Når du virkelig trenger å forklare produktegenskaper, er det viktig å plukke ut hotspots for merking.

Apple-datamaskiner er muligens det beste eksemplet på enkle etikettdetaljer. Du kan legge merke til disse eksakte teknikkene på grafikken når de ser over tabletter, bærbare datamaskiner eller den beryktede iPhone. Deres egenskaper og tekniske spesifikasjoner er generelt de samme som andre store merkevareprodusenter. Likevel er deres grafiske modeller så uberørte at produktene praktisk talt selger seg selv.

Legg merke til at når du bryter ned prosessen, er det mye enklere enn du kanskje tror! Produktgrafikk er bare en standard del av det samlede nettsteddesign. Selv om du selger gjødsel eller laken eller handelskort, kan du sannsynligvis sette disse merketeknikkene til gode. Og selv om Apple har noen veldig enkle informative grafikk, er de ikke det eneste selskapet å gjøre det. Prøve Googling rundt for bedrifter i din nisje for å se om de har sportslige fancy info etiketter eller teaser skjermer på deres hjemmeside.

4. Imagery med dynamisk innhold

For noen webutviklere kan det ikke være nok å bare lage en merket grafikk av programvaren din. Det kan være mange unike funksjoner du vil gå over, men inneholder innenfor en liten del av nettsiden din. Det er mulig å konstruere en serie innledende trinn leder deg besøkende gjennom en liten produktdemo.

Newsberry illustrerer elegant et eksempel på dette. På deres hjemmeside vil du legge merke til et blokkområde med en liten mini-navigasjon under. De inkluderer 5 trinn langs prosessen med forskjellige skjermbilder og noen tilhørende beskrivende tekst. Selv om du ikke aner hva Newsberry er brukt til, deres innledende innhold forklarer ting veldig tydelig. Du tilbys selv noen få demo lenker gjennom hele lysbildeserien.

Når du beveger deg gjennom innholdet, bør du legge merke til at mange lysbilder inneholder skjermbilder i et lite nettleservindu. Denne effekten er faktisk veldig enkel å etterligne! Du trenger bare å finn et bilde som skal brukes som bakgrunnsbilde og skjermbilder på nytt for å passe innvendig. Gitt denne effekten vil ikke fungere for hvert produkt, men det er en fin måte å ramme skjermer fra et webprogram.

5. Fjern skjermbilder og produktbilder

Det er mulig å inkludere alle de beste etikettene og funksjonene for produktene dine, men mangler fortsatt salg. De skjermbilder og bilder du velger for grafikken din er i siste liten like viktige som alle de finere detaljene. På Windows og Mac OS X finnes det måter å ta skjermbilder av hele skrivebordet med hurtigtaster. Ved å bruke denne metoden kombinert med litt tid i Photoshop kan du samle svært interessante funksjonalder.

Hvis produktet ditt er veldig innviklet, bør du prøve å sette sammen noen forskjellige bilder. Eksemplet ovenfor fra Tweetbots nettsted bruker blå sirkler for å indikere en tappende handling på appen. I stedet for et enkelt skjermbilde med mange etiketter, bør du vurdere å bruke et lite jQuery-bildegalleri for å kombinere 3-5 forskjellige grafikk. Dette gir deg flere muligheter til å fokusere på ulike perspektiver av produktet mens besøkende tilbys en mye rikere opplevelse.

Når du tar et bilde fra PC eller smarttelefon, lagres bildet alltid ved 100% zoom. Bildeditorer som Photoshop har muligheten til å omforme disse, men de mister ofte detaljer. Så hvordan kan du passe en slik grafikk inn i ditt lille nettsted? En av de beste teknikkene er forstørrelse der du skalere programmet ned og lage forstørrede deler av de viktigste brikkene. Denne teknikken ses mer generelt i programvare enn fysiske produkter - jeg har detaljert designprosessen nedenfor.

6. Bygg en "Zoom Lens" Effect

Jeg skal bygge opp trinnene for å bygge en forstørrelsesglasseffekt i Adobe Photoshop. Hvis du bruker en annen grafikkredigerer, kan du mest sannsynlig utføre de samme oppgavene, men menyer og kommandoer vil variere.

Et av de beste eksemplene på denne teknikken er på startsiden for ting for Mac. Grafikken har appen skalert ned, slik at den passer perfekt på siden, sammen med en liten dråpe skygge. Men over noen av de viktige områdene vil du merke en sirkel med innholdet på innsiden mye større. De har til og med lagt til en hvit indre glød som vises som brent lys som skinner gjennom en linse!

Bonus: "Zoom Lens" Effect Photoshop Tutorial

For å begynne å ta en skjermdump du vil bruke til grafikken din. Jeg har tatt en rask skjerm på Hongkiats hjemmeside. Jeg skal beskjære nettleservinduet og endre størrelsen til omtrent 700px. Du bør endre størrelsen på bredden slik at den passer inn i innholdsområdet på ditt eget nettsted. Legg nå et nytt lag på toppen av denne bakgrunnen, og gjør et sirkulært utvalg mens du holder skiftet for å holde det proporsjonalt. Fyll med hvilken som helst farge du vil ha.

Trinn 1

Hvis du holder sirkelen valgt, endrer du fyllingen% i lagpanelet til 0%. Under laget FX legger du til en 1px-2px svart slag og en hvit indre glød. Du kan redusere opaciteten for mindre hvit belysning.

Steg 2

Fortsett å holde sirkelen valgt flytte på bakgrunnslaget ditt og trykk ctrl (For Mac-brukere er det kommando- eller cmd-nøkkel.) + c for å kopiere. Deretter lager et nytt lag over bakgrunnen, men under forstørrelsessirkelen og lim inn. Du kan alternativt bare trykke ctrl + j for å duplisere et nytt lag med bare valget in-tact.

Trykk ctrl + t for å åpne transformasjonsverktøyet. Nå skal du skille ut det nye duplikatlaget mens du holder skifte å holde alt proporsjonalt og alt å holde senteret stasjonært.

Trinn 3

Trykk ctrl og klikk på ikonet for forstørrelsesglasset for å gjøre ditt valg igjen. Legg merke til at du fremdeles bør fremheve duplisert bakgrunnslag i lagpanelet (den ene direkte under forstørrelsesglasset), noe som betyr at den vil ha en lyseblå bakgrunn.

Trykk Ctrl + Shift + i for å vende om det gjeldende valget. Klikk nå slett for å fjerne det ekstra søppelet fra vår skjermbildet som er omskalert. For litt ekstra effekt trekker du opp lag FX-menyen for å legge til en liten dråpeskygge. Du kan også tegne en tynn 1px vertikal linje og bruke Liquify Filter (Filter> Liquify) Lag et lite håndtak!

Konklusjon

For å designe fantastisk produktgrafikk må du huske det grunnleggende. Besøkende vil bare forstå hva du prøver å selge dem! Den enkleste måten å få denne informasjonen på tvers av, er gjennom en rekke skjermbilder eller en enkelt detaljgrafikk. Etiketter er bare det andre brikken til dette puslespillet, hvor du kan skissere de viktigste funksjonene.

Når du legger alle disse teknikkene sammen, vil du sannsynligvis begynne å legge merke til det større bildet. Nedlastinger og kjøp vil skyrocket - spesielt hvis du plasserer grafikkfronten og -senteret ditt på hjemmesiden din. Disse teknikkene er perfekte for grafiske og webdesignere å komme i gang innen produktdesign. Vi har detaljert noen få abstrakte ideer, men vi vil gjerne høre dine tanker i diskusjonsområdet under!