Produktgrafik 6 Teknikker til at gøre billeder mere informative
Webdesignere er blevet meget kloge med marketing teknikker. Luring sideindhold er altid godt, men når det kommer til at gribe dine besøgende opmærksomhed billeder er den mest populære form for medier. De kræver ikke lyd som demo videoer, og de kan hurtigt videresende vigtige oplysninger inden for få sekunder. Det kan virke nemt, men der er nogle bemærkelsesværdige teknikker til at opbygge informative billeder på hjemmesider.
Disse omfatter feature labels, nærbillede skærmbilleder, pris sammenligninger og andre minut detaljer. Webdesignere kan bruge informationsgrafik til at model nye apps, software, videospil eller mange andre produkter! Selvom du oftest ser disse teknikker udnyttes inden for forskellige områder af teknologi.
Tjek de nedenstående ideer, hvor vi ikke kun giver tip, men virkelig eksempler på smukke produktgrafik jam-packet med stor info.
1. Udvid på dit indhold
Informative billeder bør ikke bruges i stedet for god websideindhold. I stedet brug billeder til at udvide dine nøglepunkter og illustrere dem tydeligt til dine besøgende. En af de bedste måder at gøre dette på er opbygge en lille demo for at fremhæve vigtige områder af en tutorial. Med nogle få informative grafik og skærmbilleder er det meget enklere at holde din læsers interesse i hvert trin.
Når du forsøger at demonstrere en software tutorial (såsom Photoshop tutorial) kan det være svært at formidle meddelelsen til skriftlig tekst. Besøgende vil lande på din artikel og straks begynde at underbevidst dømme materialet inden for en brøkdel af et sekund. Web Designer Wall har en fantastisk tutorial om at bygge CSS3 afrundede billeder ledsaget af en praktisk grafik. Dette omfatter nogle mærker og et nærbillede af effekten.
På den oprindelige artikelside tilføjer dette billede et meget klarere billede i dit hoved mod det, du vil oprette. Forfatteren har tilføjet en lille demo link, men hvorfor indeholder ikke også nogle demo billeder? Du er meget mere tilbøjelig til at henlede opmærksomheden med et korrekt mærket demo skud.
Forsøge at undgå at tilføje billeder bare for mediernes indhold i dit indlæg. Hvis du kan forklare dine metoder eller ræsonnement uden et billede, start først her. Først efter at se tilbage på din webkopi, bør du overveje at gentage nogle punkter i et detaljeret billedbillede. Specielt kan du finde en Tutorial kræver flere visuelle tegn, da kompleksitet øges. To eksempler kan omfatte opbygning af en website database eller et tabellen datasæt.
2. Fremhæv bemærkelsesværdige funktioner
Fordi hvert stykke software / teknologi har så mange funktioner, er det næsten umuligt at forklare hver enkelt bit. Ikke kun dette, men det er meget usandsynligt, at dine besøgende vil være interesserede i at læse 20+ etiketter på din informationsfilm. Hold dig til de mest interessante funktioner og Brug etiketter til at forklare lidt mere dybtgående.
Når du skriver webkopien for dit etiketindhold undgå sløv sprog når det er muligt. Hvis besøgende ser på den nyeste version af din ansøgning, kan de ikke være meget opmærksom på ændringerne i farveskemaet. Hvordan vil det påvirke deres daglige arbejdsgang? I stedet måske fremhæve, hvad der er gavnligt for dem, som et nyt interfacepanel eller multi-user-forbindelse. Disse bør generelt være abstrakte funktioner som du ikke kan se lige ved “leder” på produktet.
At have en sådan etiket til at forklare disse funktioner direkte vil give det mest rigelige svar. Besøgende vil føle, at de bliver behandlet som intelligente, modne kunder, der er i stand til at træffe deres egne beslutninger. Hvis de virkelig kan lide dine funktioner, giver dette et større skub i retning af at købe din software eller dit produkt.
Nedenfor er et eksempel fra Mozilla Firefox opdateringssiden.
Du kan se designerne have brugt punkterede kurvede linjer til at pege på etiketter og nye funktioner. Disse er faktisk baggrundsbilder placeret helt inde i en beholder div. Overraskende er alle etiketteksterne også skrevet inde i HTML-tags (ikke kun et stort billede).
Jeg mener, at denne metode ikke kun er praktisk til Google-crawlerbots, men også mobilbrugere, som normalt ikke kunne opleve hele websiden.
Bemærk også, hvordan Panorama-funktionen er over til venstre tilbyder en lille “Lær mere” link. Dette er muligvis den bedste praksis, du kan komme ind i, når du bygger informationsgrafik! Hvis du har alternative sider eller ankre på samme side, kan dine besøgende klikke på disse links for at forstå mere om komplicerede funktioner.
Husk at informativ grafik bruges til nemt at vise teasers og produktfunktioner til dine besøgende. Så selvom du er begrænset i rummet omkring grafikken, kan du Giv altid chancen for at lære mere på en ekstern side.
3. Simple, diskrete etiketter
Etiketter er virkelig det vigtigste aspekt ved at skabe informativ produktgrafik. Besøgende skal sandsynligvis nødt til at forstå forskellige områder i dit produkt, software, hjemmesider, mobilapp osv. Desværre kan brugen af tabeller og punktlister kun gå så langt. Når du virkelig har brug for at forklare produktegenskaber, er det vigtigt at vælge hotspots til mærkning.
Apple Computers er muligvis det bedste eksempel på forenklede etiketoplysninger. Du kan bemærke disse nøjagtige teknikker på deres grafik, når du kigger over tabletter, bærbare computere eller den berygtede iPhone. Deres egenskaber og tekniske specifikationer er generelt de samme som andre store mærke computerproducenter. Men deres grafiske modeller er så uberørte, at produkterne praktisk talt sælger sig selv.
Bemærk, at når du nedbryder processen er det meget enklere end du måske tror! Produktgrafik er kun en standard del af det overordnede website design. Selvom du sælger gødning eller lagner eller handelskort, kan du sandsynligvis sætte disse mærkningsteknikker til gode. Og selv om Apple har nogle rigtig simplistiske informative grafik, er de ikke det eneste selskab, der gør det. Prøve Googling rundt for virksomheder i din niche for at se om de dyrker nogen fancy info etiketter eller teaser skærmbilleder på deres hjemmeside.
4. Billeder med dynamisk indhold
For nogle webudviklere er det måske ikke nok at simpelthen oprette en mærket grafik af din software. Der kan være mange unikke funktioner, du vil gå over, men indeholder inden for en lille del af din webside. Det er muligt at konstruere en række indledende trin der fører dig besøgende gennem en lille produktdemo.
Newsberry illustrerer elegant et eksempel på dette. På deres hjemmeside vil du bemærke et blokområde med en lille mini-navigation nedenunder. De omfatter 5 trin langs processen med forskellige skærmbilleder og nogle ledsagende beskrivende tekst. Selvom du ikke aner, hvad Newsberry er brugt til, deres indledende indhold forklarer ting meget tydeligt. Du tilbydes endda nogle få demo links i hele serien af dias.
Når du bevæger dig gennem deres indhold, skal du bemærke, at mange dias indeholder skærmbilleder inde i et lille browservindue. Denne effekt er faktisk meget simpel at efterligne! Du skal bare find et billede, der skal bruges som dit baggrundsbillede og skærmbilleder, der skal ændres, for at passe indvendigt. Tildelt denne effekt virker ikke for hvert produkt, men det er en god måde at ramme skærme fra en webapplikation.
5. Ryd skærmbilleder og produktbilleder
Det er muligt at inkludere alle de bedste etiketter og funktioner til dine produkter, men stadig mangler salg. Det screenshots og billeder du vælger til din grafik er i sidste ende lige så vigtige som alle de finere detaljer. På Windows og Mac OS X er der måder at tage skærmbilleder af hele dit skrivebord med tastaturgenveje. Brug af denne metode kombineret med et stykke tid i Photoshop kan du samle meget interessante feature demoer.
Hvis dit produkt er meget ubemærket, bør du prøve at sætte sammen et par forskellige billeder. Eksemplet ovenfor fra Tweetbots hjemmeside bruger blå cirkler til at angive en aflytning på appen. I stedet for et enkelt skærmbillede med mange etiketter overveje at bruge et lille jQuery billedgalleri til at kombinere 3-5 forskellige grafik. Dette giver dig flere muligheder for at fokusere på forskellige perspektiver af produktet mens besøgende tilbydes en meget rigere oplevelse.
Når du snap et skud fra din pc eller smartphone, gemmes billedet altid ved 100% zoom. Billedredaktører som Photoshop har evnen til at ændre størrelsen på disse, men de taber ofte detaljer. Så hvordan kan du passe en sådan grafik ind i dit lille websted? En af de bedste teknikker er forstørrelse hvor du skalere applikationen ned og oprette forstørrede sektioner af de vigtigste stykker. Denne teknik ses mere almindeligt i software end fysiske produkter - jeg har beskrevet designprocessen nedenfor.
6. Opbygning af en "Zoom Lens" -effekt
Jeg skal konstruere trinnene til at opbygge en forstørrelsesglas effekt i Adobe Photoshop. Hvis du bruger en anden grafikeditor, kan du højst sandsynligt udføre de samme opgaver, men menuer og kommandoer vil variere.
Et af de bedste eksempler på denne teknik er på Home for Mac-appens hjemmeside. Grafikken har appen nedskaleret lille, så den passer perfekt på siden sammen med en lille dropshadow. Men over nogle af de vigtige områder vil du se en cirkel med det indvendige indhold meget større. De har endda tilføjet en hvid indre glød til at fremstå som refrakteret lys skinner gennem en linse!
Bonus: "Zoom Lens" Effect Photoshop Tutorial
For at begynde at tage et skærmbillede, du gerne vil bruge til din grafik. Jeg har taget en hurtig skærm på Hongkiats hjemmeside. Jeg skal kun beskære browservinduet og ændre størrelsen til ca. 700px. Du skal ændre bredden for at passe ind i indholdsområdet på din egen hjemmeside. Lav nu et nyt lag oven på denne baggrund og lav et cirkulært valg, mens du holder skiftet for at holde det proportionalt. Udfyld enhver farve, du vil have.
Trin 1
Hvis du holder den valgte cirkel, skal du ændre fill% i lagpanelet til 0%. Under laget FX tilføjes en 1px-2px black stroke og en hvid indre glød. Du kan reducere opacitet for mindre hvid belysning.
Trin 2
Fortsæt med at holde den valgte cirkel bevæge sig på dit baggrundslag og tryk ctrl (Til Mac-bruger er det kommando- eller cmd-nøgle.) + c for at kopiere. Dernæst lav et nyt lag over baggrunden, men under forstørrelsescirklen og indsæt. Du kan alternativt bare ramme ctrl + j for at duplikere et nyt lag med kun markeringen in-tact.
Tryk på ctrl + t for at åbne transformationsværktøjet. Skal nu det nye duplikatlag ud, mens du holder flytte at holde alt proportional og alt for at holde centret stationært.
Trin 3
Tryk på ctrl og klik på ikonet for forstørrelsesglaslag for at gøre dit valg igen. Bemærk, at du stadig skal fremhæve det kopierede baggrundslag i lagpanelet (det ene direkte under vores forstørrelsesglas), hvilket betyder, at det vil have en lyseblå baggrund.
Tryk Ctrl + Shift + i for at vende det aktuelle valg. Klik nu på Slet for at fjerne det ekstra affald fra vores genskalerede screenshot. For lidt tilføjet effekt trækker du op i lag FX-menuen for at tilføje en lille dropshadow. Du kan også tegne en tynd 1px lodret linie og bruge Liquify Filter (Filter> Fortynd) Opret et lille håndtag!
Konklusion
For at designe fantastisk produktgrafik skal du huske det grundlæggende. Besøgende vil bare forstå, hvad du forsøger at sælge dem! Den nemmeste måde at få denne information på tværs af er gennem en række skærmbilleder eller en enkelt detalje grafik. Etiketter er blot det andet stykke til dette puslespil, hvor du kan skitsere de vigtigste funktionssæt.
Når du lægger alle disse teknikker sammen, vil du sandsynligvis begynde at se det større billede. Overførsler og køb vil skyrocket - især hvis du placerer dit grafikfront og -center på din startside. Disse teknikker er perfekte for grafiske og webdesignere at komme i gang inden for produktdesign. Vi har detaljeret et par abstrakte ideer, men vi vil gerne høre dine tanker i diskussionsområdet nedenfor!
