Grafica produsului 6 Tehnici de a face imaginile mai informative
Designerii de web au devenit foarte harnici cu tehnicile de marketing. Atenția conținutului paginii este întotdeauna bună, dar când vine vorba de apucarea atenției vizitatorilor, imaginile sunt cea mai populară formă de media. Nu au nevoie de sunet ca videoclipuri demo și pot transmite rapid informații importante în câteva secunde. Ar putea părea ușor, dar există câteva tehnici notabile de a construi imagini informative pe site-uri web.
Acestea includ etichete de caracteristici, capturi de ecran închise, comparații de prețuri și alte detalii minime. Designerii de web pot folosi grafice informatice pentru a modela aplicații, software, jocuri video sau multe alte produse! Deși cel mai frecvent vedeți aceste tehnici utilizate în diferite domenii ale tehnologiei.
Verificați ideile de mai jos, în care vă oferim nu doar sfaturi, ci și exemple din viața reală de grafică frumoasă a produsului, care este ambalată cu informații foarte bune.
1. Extindeți conținutul
Imaginile informative nu ar trebui folosite în locul conținutului bun al paginii web. In schimb utilizați imaginile pentru a vă extinde punctele cheie și să le ilustreze în mod clar pentru vizitatorii dvs. Una dintre cele mai bune moduri de a face acest lucru este construind un mic demo pentru a evidenția zone importante a unui tutorial. Cu câteva grafice informative și capturi de ecran, este mult mai simplu să vă păstrați interesul cititorului care trece prin fiecare pas.
Atunci când încercați să demonstrați un tutorial software (cum ar fi tutorialul Photoshop), poate fi dificil transmiteți mesajul în text scris. Vizitatorii vor ateriza pe articolul dvs. și vor începe imediat să judece sub-conștient materialul într-o fracțiune de secundă. Web Designer Wall are un tutorial fantastic pentru a construi imagini rotunde CSS3 însoțite de un grafic util. Acestea includ unele etichete și o fotografie a efectului.
Pe pagina originală a articolului, această imagine adaugă o imagine mult mai clară în capul tău spre ceea ce vei crea. Autorul a adăugat un mic link demo, dar de ce nu include și câteva imagini demo? Sunteți mult mai probabil să atrageți atenția cu o șansă demo bine marcată.
Încercați să evitați să adăugați imagini doar de dragul conținutului media în postarea ta. Dacă vă puteți explica metodele sau raționamentul fără o imagine, începeți mai întâi aici. Numai după aceea, căutând înapoi peste copia dvs. de pe web, ar trebui să luați în considerare re-iterarea unor puncte într-o imagine grafică detaliată. Mai exact, puteți găsi a tutorialul necesită mai multe repere vizuale, pe măsură ce complexitatea crește. Două exemple ar putea include construirea unei baze de date a site-urilor web sau a unui set de date pentru tabele.
2. Evidențiați caracteristicile notabile
Deoarece fiecare bucată de software / tehnologie va avea atât de multe caracteristici, este aproape imposibil să explicăm fiecare bit. Nu numai acest lucru, dar este foarte puțin probabil ca vizitatorii dvs. să fie interesați să citească 20 de etichete pe graficul dvs. de informații. Alegeți cele mai interesante caracteristici și utilizați etichete pentru a explica un pic mai mult în profunzime.
Când scrieți copia web pentru conținutul etichetei evitați limba plictisitoare ori de câte ori este posibil. Dacă vizitatorii se uită la cea mai recentă versiune a aplicației dvs., este posibil să nu aibă grijă de schimbările din schema de culori. Cum va afecta fluxul lor de lucru zilnic? În schimb, poate evidențiați ce este benefic pentru ei, ca un nou panou de interfață sau conectivitate pentru mai mulți utilizatori. Acestea ar trebui, în general, să fie caracteristici abstracte pe care nu îl puteți vedea doar prin “in cautarea” la produs.
A avea o astfel de etichetă pentru a explica aceste caracteristici în mod direct va oferi răspunsul cel mai abundent. Vizitatorii vor simți că sunt tratați ca niște cumpărători inteligenți și maturi capabili să-și facă propriile decizii. Dacă acestea îți plac foarte mult funcțiile, acest lucru oferă o mai mare impuls pentru achiziționarea software-ului sau a produsului.
Mai jos este un exemplu din pagina de actualizare Mozilla Firefox.
Puteți vedea că designerii au folosit linii punctate curbate pentru a indica etichete și caracteristici noi. Acestea sunt de fapt imagini de fundal pozitionate absolut in interiorul unui container div. Surprinzător, tot textul etichetei este, de asemenea, scris în interiorul etichetelor HTML (nu doar o imagine mare).
Consider că această metodă nu este doar utilă pentru motoarele de crawler Google, ci și pentru utilizatorii de telefonie mobilă care, în mod normal, nu au putut experimenta pagina web completă.
De asemenea, observați modul în care caracteristica Panorama se află în stânga oferă un mic “Aflați mai multe” legătură. Aceasta este probabil cea mai bună practică pe care o puteți obține când construiți grafică informativă! Dacă aveți pagini alternative sau ancore în cadrul aceleiași pagini, vizitatorii dvs. pot face clic pe aceste linkuri pentru a înțelege mai multe despre caracteristicile complicate.
Amintiți-vă că grafica informativă este utilizată pentru a afișa cu ușurință teaserii și caracteristicile produsului pentru vizitatorii dvs. Deci, deși sunteți limitat în spațiu în jurul graficului puteți oferă întotdeauna șansa de a afla mai multe pe o pagină externă.
3. Etichete simple, discrete
etichete sunt cu adevărat cel mai important aspect al creării de grafice de produs informative. Este posibil ca vizitatorii să fie nevoiți să înțeleagă diferite domenii ale produsului, ale software-ului, ale site-urilor web, ale aplicației mobile etc. Din păcate, utilizarea tabelelor și a listelor cu marcatori poate merge doar până acum. Când într-adevăr aveți nevoie să explicați caracteristicile produsului, este important să alegeți hotspot-uri pentru etichetare.
Apple Computers este probabil cel mai bun exemplu de detalii despre etichete simpliste. Este posibil să observați aceste tehnici exacte pe grafica lor atunci când căutați peste tablete, laptop-uri, sau infamul iPhone. Caracteristicile lor și specificațiile tehnice sunt în general aceleași ca și alți producători de calculatoare de mari dimensiuni. Cu toate acestea, modelele lor grafice sunt atât de clare încât produsele se vinde practic.
Observați că atunci când defalcați procesul este mult mai simplu decât credeți! Grafica produselor este doar o parte standard a designului general al site-ului web. Chiar dacă vindeți îngrășăminte sau foi de pat sau carduri de tranzacționare, puteți pune probabil aceste tehnici de etichetare la o bună utilizare. Și, deși Apple are niște grafice informative cu adevărat simpliste, nu sunt singura companie care o face. Încerca Căutați în jurul companiei pentru afacerea din nișă pentru a vedea dacă aceștia folosesc pe site-ul lor orice etichete de informații fanteziste sau ecrane teaser.
4. Imagini cu conținut dinamic
Pentru unii dezvoltatori web, este posibil să nu fie suficient să creați o imagine grafică a software-ului. S-ar putea să existe o mulțime de caracteristici unice pe care doriți să le depășiți, dar să conțină într-o mică parte a paginii dvs. web. E posibil să construi o serie de etape introductive vă vizitatorii pe parcursul unui demo de produse mici.
Newsberry ilustrează elegant un exemplu de acest lucru. În pagina lor de pornire veți observa o zonă blocată cu o mică mini-navigație dedesubt. Acestea includ 5 pași de-a lungul procesului, cu diferite capturi de ecran și unele texte descriptive însoțitoare. Chiar dacă nu aveți nicio idee despre ce este folosit pentru utilizarea lui Newsberry, ei conținutul introductiv explică lucrurile foarte clar. Vi se oferă chiar și câteva link-uri demo în întreaga serie de diapozitive.
Pe măsură ce treceți prin conținutul lor, trebuie să observați că multe diapozitive conțin capturi de ecran în interiorul unei ferestre de browser mici. Acest efect este de fapt foarte simplu de a imita! Trebuie doar să găsiți o imagine pe care să o utilizați ca imagini de fundal și capturi de ecran pentru a se potrivi în interior. Acordat acest efect nu va funcționa pentru fiecare produs, dar este o modalitate frumoasă de a încadra ecrane dintr-o aplicație web.
5. Ștergeți capturile de ecran și fotografiile de produse
Este posibil să includeți toate cele mai bune etichete și caracteristici pentru produsele dvs., dar totuși să lipsiți din vânzări. capturile de ecran și fotografiile pe care le alegeți pentru grafica dvs. sunt în cele din urmă la fel de importante ca toate detaliile mai fine. Pe sistemele Windows și Mac OS X există modalități de a face capturi de ecran ale întregului spațiu de lucru prin intermediul comenzilor rapide de la tastatură. Folosind această metodă combinată cu ceva timp în Photoshop, puteți acumula demo-uri de caracteristici foarte interesante.
Dacă produsul dvs. este foarte convoluționat, ar trebui să încercați a pus împreună câteva imagini diferite. Exemplul de mai sus de pe site-ul web al lui Tweetbot utilizează cercuri albastre pentru a indica o acțiune de accesare a aplicației. În locul unei singure imagini cu numeroase etichete, luați în considerare utilizarea unei mici galerii de imagini jQuery pentru a combina 3-5 diagrame diferite. Acest lucru vă oferă mai multe șanse se concentreze pe diferite perspective ale produsului în timp ce vizitatorilor li se oferă o experiență mult mai bogată.
Când faceți o fotografie dintr-un PC sau de la un smartphone, imaginea este întotdeauna salvată la zoom-ul de 100%. Editorii de imagini, cum ar fi Photoshop, au capacitatea de a redimensiona aceste elemente, dar pierd deseori detalii. Deci, cum puteți potrivi o astfel de grafică în site-ul dvs. mic? Una dintre cele mai bune tehnici este mărire în care scalați aplicația în jos și creați secțiuni mari ale celor mai importante bucăți. Această tehnică este văzută mai frecvent în software decât în produsele fizice - am detaliat procesul de proiectare de mai jos.
6. Construirea unui efect "Zoom Lens"
Voi construi pașii pentru construirea unui efect de lupă în Adobe Photoshop. Dacă utilizați un alt editor de grafică, cel mai probabil puteți efectua aceleași sarcini, dar meniurile și comenzile vor fi diferite.
Unul dintre cele mai bune exemple de această tehnică este pe pagina de lucru Things for Mac. Grafica are aplicația redusă, astfel încât aceasta să se potrivească perfect pe pagină, împreună cu o mică umbră de picătură. Cu toate acestea, în unele dintre domeniile importante veți observa un cerc cu conținutul interior mult mai mare. Ei chiar au adăugat o strălucire interioară albă care apare ca lumină refractată strălucind printr-o lentilă!
Bonus: Tutorialul Photoshop Tutorial "Zoom Lens"
Pentru a începe să apucați o captură de ecran pe care doriți să o utilizați pentru grafica dvs. Am luat un ecran rapid al paginii de pornire Hongkiat. Voi distruge doar fereastra browserului și voi redimensiona la aproximativ 700 de pixeli. Ar trebui să redimensionați lățimea pentru a se încadra în zona de conținut a site-ului dumneavoastră. Acum, faceți un nou strat în partea de sus a acestui fundal și faceți o selecție circulară în timp ce țineți trecerea pentru ao menține proporțională. Umpleți cu orice culoare doriți.
Pasul 1
Ținând cercul selectat, modificați procentajul de umplere din panoul straturilor la 0%. Sub stratul FX adăugați o lovitură neagră 1px-2px și o strălucire interioară albă. Puteți reduce opacitatea pentru iluminarea mai puțin albă.
Pasul 2
Mențineți încă mișcarea selectată pe cercul dvs. de fundal și apăsați ctrl (Pentru utilizatorul Mac, este comanda sau cheia cmd.) + c pentru a copia. Apoi faceți un strat nou deasupra fundalului, dar sub cercul de mărire și lipiți-l. Alternativ, puteți apăsa ctrl + j pentru a duplica un nou strat, cu doar selecția in-tact.
Apăsați ctrl + t pentru a deschide instrumentul de transformare. Acum scalați noul strat duplicat în timp ce țineți apăsat schimb să păstreze totul proporțional și Alt pentru a menține centrul staționar.
Pasul 3
Apăsați pe ctrl și faceți clic pe pictograma stratului de lupă pentru a selecta din nou selecția. Rețineți că trebuie să evidențiați în continuare stratul de fundal duplicat din panoul straturilor (cel care se află direct sub lupa noastră), ceea ce înseamnă că va avea un fundal albastru deschis.
Apăsați Ctrl + Shift + i pentru a inversa selecția curentă. Apăsați ștergeți pentru a șterge gunoiul suplimentar din screenshot-ul nostru redimensionat. Pentru un pic de efect adăugat trageți în sus meniul FX al stratului pentru a adăuga o umbră mică de picătură. De asemenea, puteți desena o linie verticală subțire de 1px și utilizând Filtrul de lichidare (Filtru> Liquify) a crea un mâner mic!
Concluzie
Pentru a proiecta o grafică fantastică a produsului, trebuie să vă amintiți elementele de bază. Vizitatorii doresc pur și simplu să înțeleagă ce încercați să le vindeți! Cea mai ușoară modalitate de a obține aceste informații este printr-o serie de capturi de ecran sau un singur grafic detaliat. Etichetele sunt doar cea de-a doua piesă a acestui puzzle, unde puteți schița cele mai importante seturi de caracteristici.
Când puneți toate aceste tehnici împreună, probabil veți începe să observați imaginea mai mare. Descărcările și achizițiile vor da naștere la viteză - mai ales dacă plasați imaginile pe față și pe centru în pagina dvs. de pornire. Aceste tehnici sunt perfecte pentru graficii și designerii de web pentru a începe să lucreze în domeniul designului de produs. Am detaliat câteva idei abstracte, dar ne-ar plăcea să vă auzim gândurile în zona de discuții de mai jos!
