Produktová grafika 6 Techniky tvorby obrazů informativnější

Weboví designéři se stali velmi chytrými s marketingovými technikami. Lákání obsahu stránky je vždy dobré, ale pokud jde o popadnutí návštěvníků pozornost obrázky jsou nejoblíbenější formou médií. Nevyžadují zvuk jako demo videa a mohou rychle předat důležité informace během několika vteřin. Může se to zdát snadné, ale existují určité pozoruhodné techniky pro vytváření informativních obrazů na webových stránkách.

Mezi ně patří popisky funkcí, detailní snímky obrazovky, porovnání cen a další drobné detaily. Weboví designéři mohou použít informační grafiku k modelování nových aplikací, softwaru, videoher nebo mnoha dalších produktů! I když nejčastěji vidíte tyto techniky využívané v různých oblastech techniky.

Podívejte se na níže uvedené nápady, kde nabízíme nejen tipy, ale i skutečné příklady krásné produktové grafiky, která je plná skvělých informací.

1. Rozbalte obsah

Informativní obrázky by neměly být používány místo dobrého obsahu webové stránky. Místo toho Použijte snímky pro rozšíření klíčových bodů a jasně vysvětlit pro vaše návštěvníky. Jedním z nejlepších způsobů, jak toho dosáhnout, je budování malého dema pro zvýraznění důležitých oblastí tutoriálu. S několika informativní grafikou a screenshoty je mnohem jednodušší udržet zájem čtenáře o pohyb v každém kroku.

Když se pokusíte ukázat výuku softwaru (například Photoshop tutorial), může být obtížné sdělení do písemného textu. Návštěvníci přistanou na váš článek a okamžitě začnou podvědomě posuzovat materiál během zlomku vteřiny. Web Designer Wall má fantastický návod na budování zaokrouhlených obrázků CSS3 doprovázených praktickou grafikou. To zahrnuje některé štítky a detailní záběr efektu.

Na původní stránce článku tento obrázek přidává mnohem jasnější obrázek do hlavy směrem k tomu, co budete vytvářet. Autor přidal malý demo odkaz, ale proč ne zahrnout i některé demo obrázky? Je mnohem pravděpodobnější, že vás zaujme řádně označená ukázka.

Zkusit vyhnout se přidávání obrázků pouze z důvodu mediálního obsahu ve vašem příspěvku. Pokud můžete vysvětlit své metody nebo důvody, aniž byste začali obraz jako první. Teprve poté, co se podíváte zpět na webovou kopii, byste měli zvážit opakované opakování některých bodů v podrobné grafické grafice. Konkrétně můžete najít výukový program vyžaduje více vizuálních podnětů, protože se zvyšuje složitost. Dva příklady by mohly zahrnovat sestavení databáze webových stránek nebo datové sady tabulek.

2. Zvýrazněte položku Významné funkce

Protože každý kus softwaru / technologie bude mít tolik funkcí, je téměř nemožné vysvětlit každý jednotlivý bit. Nejen to, ale je to velmi nepravděpodobné, vaši návštěvníci budou mít zájem číst 20 + štítky na vaší informační grafice. Držte se těch nejzajímavějších vlastností a Použijte štítky, abyste vysvětlili o něco hlouběji.

Při psaní webové kopie pro obsah štítku vyhnout se tupému jazyku kdykoli je to možné. Pokud se návštěvníci dívají na nejnovější verzi vaší aplikace, nemusí se o změny barevně starat. Jak to ovlivní jejich každodenní pracovní postup? Místo toho možná zdůraznit, co je pro ně přínosné, jako nový panel rozhraní nebo připojení pro více uživatelů. Obecně by to mělo být abstraktní prvky které nevidíte “hledá” u výrobku.

Mít takový popis vysvětlit tyto rysy úplně bude poskytovat nejhojnější odezvu. Návštěvníci budou mít pocit, že se s nimi zachází jako s inteligentními, zralými nakupujícími, kteří jsou schopni se sami rozhodovat. Pokud se vám líbí vaše funkce, to dává větší tlak na nákup softwaru nebo produktu.

Níže je uveden příklad z aktualizační stránky Mozilla Firefox.

Můžete vidět, že designéři použili tečkované křivky k označení štítků a nových funkcí. Jedná se vlastně o obrazy pozadí umístěné absolutně uvnitř kontejneru div. Překvapivě je veškerý text štítku napsán také ve značkách HTML (ne jen jeden velký obrázek).

Cítím, že tato metoda není vhodná pouze pro roboty pro Google crawler, ale také pro mobilní uživatele, kteří nemohli běžně zažívat plnou webovou stránku.

Všimněte si také, jak funkce Panorama přejde doleva nabízí malý “Další informace” odkaz. To je možná nejlepší praxe, můžete se dostat do při budování informační grafiky! Pokud máte na stejné stránce alternativní stránky nebo kotvy, vaši návštěvníci mohli na tyto odkazy kliknout, aby lépe porozuměli složitým funkcím.

Nezapomeňte, že informativní grafika se používá pro snadné zobrazení ukázek a funkcí produktu pro vaše návštěvníky. Takže i když jste omezeni v prostoru kolem grafiky, můžete vždy nabízí možnost dozvědět se více na externí stránce.

3. Jednoduché, nenápadné štítky

Štítky jsou skutečně nejdůležitějším aspektem při tvorbě informační grafiky produktu. Návštěvníci budou pravděpodobně potřebovat porozumět různým oblastem vašeho produktu, softwaru, webových stránek, mobilních aplikací atd. Bohužel použití tabulek a seznamů s odrážkami může jít až tak daleko. Když opravdu potřebujete vysvětlit funkce produktu, je důležité vybrat si hotspoty pro označování.

Apple Computers je možná nejlepším příkladem zjednodušujících detailů štítků. Můžete si všimnout těchto přesných technik na jejich grafice při pohledu přes tablety, notebooky nebo neslavný iPhone. Jejich vlastnosti a technické specifikace jsou obecně stejné jako ostatní velké výrobce počítačů. Jejich grafické modely jsou však tak nedotčené, že se produkty prakticky prodávají sami.

Všimněte si, že když proces rozebíráte, je to mnohem jednodušší, než si můžete myslet! Grafika produktu je pouze standardní součástí celkového designu webových stránek. I když prodáváte hnojivo nebo prostěradla nebo obchodní karty, můžete tyto techniky označování dobře využít. A přestože Apple má opravdu zjednodušenou informativní grafiku, není to jediná společnost, která tak činí. Snaž se Googling kolem pro firmy ve vašem nika zjistit, zda sport nějaké fantastické informační štítky nebo teaser obrazovky na svých internetových stránkách.

4. Snímky s dynamickým obsahem

Pro některé webové vývojáře nemusí stačit jednoduše vytvořit označenou grafiku vašeho softwaru. Může existovat spousta unikátních funkcí, které chcete přejít, ale obsahují malou část vaší webové stránky. Je to možné sestavit řadu úvodních kroků vedoucí vás návštěvníci v celém malém produktu demo.

Newsberry elegantně ilustruje příklad tohoto. Na jejich domovské stránce si všimnete bloku oblasti s malou mini-navigace pod. Zahrnují 5 kroků v procesu s různými snímky obrazovky a některým doprovodným popisným textem. I když netušíte, na co se Newsberry používá, jejich úvodní obsah vysvětluje věci velmi jasně. Dokonce vám nabízíme několik demo odkazů v celé sérii snímků.

Když se pohybujete jejich obsahem, měli byste si všimnout mnoha snímků, které obsahují snímky v malém okně prohlížeče. Tento efekt je ve skutečnosti velmi jednoduchý na napodobování! Stačí jen najít obrázek, který chcete použít jako snímky na pozadí a znovu nastavit velikost obrázků, aby se vešly dovnitř. Udělit tento efekt nebude fungovat pro každý produkt, ale je to pěkný způsob, jak rámovat obrazovky z webové aplikace.

5. Vymazat snímky a fotografie produktů

Je možné zahrnout všechny nejlepší štítky a funkce pro vaše produkty, ale stále chybí v prodeji. screenshoty a fotografie, které si vyberete pro svou grafiku, jsou nakonec stejně důležité jako všechny detaily. V systémech Windows a Mac OS X existují způsoby, jak pořídit snímky z celé plochy pomocí klávesových zkratek. Pomocí této metody v kombinaci s nějakým časem ve Photoshopu můžete nahrát velmi zajímavé dema funkcí.

Pokud je váš produkt velmi spletitý, měli byste se pokusit dát dohromady několik různých obrázků. Příklad uvedený výše na webových stránkách společnosti Tweetbot používá modré kruhy k označení akce klepnutí na aplikaci. Namísto jediné obrazovky s mnoha štítky zvažte použití malé galerie obrázků jQuery pro kombinaci 3-5 různých grafik. To vám dává více příležitostí zaměřit se na různé perspektivy produktu zatímco návštěvníkům nabízíme mnohem bohatší zážitek.

Při pořizování snímků z počítače nebo smartphonu se obrázek vždy ukládá s přiblížením 100%. Obrazové editory jako Photoshop mají schopnost tyto velikosti měnit, ale často ztrácejí detaily. Tak, jak se vám vejde takové grafiky do své malé webové stránky? Jednou z nejlepších technik je zvětšení ve kterém měřítko aplikace dolů a vytvořit zvětšené části nejdůležitějších kusů. Tato technika je běžně vidět v softwaru než fyzické produkty - podrobně jsem popsal proces návrhu níže.

6. Vytvoření efektu „Zoom Lens“

Budu budovat kroky k vytvoření efektu zvětšovacího skla v aplikaci Adobe Photoshop. Pokud používáte jiný grafický editor, můžete s největší pravděpodobností provádět stejné úkoly, ale nabídky a příkazy se budou lišit.

Jeden z nejlepších příkladů této techniky je na domovské stránce aplikace pro aplikace Mac. Grafika má aplikaci zmenšenou na malé, takže se dokonale vejde na stránku, spolu s malým vrženým stínem. Nicméně nad některými důležitými oblastmi si všimnete kruhu s vnitřním obsahem mnohem větším. Dokonce přidali bílou vnitřní záři, která se jevila jako lomené světlo prosvítající čočkou!

Bonus: "Zoom objektiv" Effect Photoshop Tutorial

Chcete-li začít chytit snímek obrazovky, který chcete použít pro grafiku. Udělal jsem rychlou obrazovku domovské stránky Hongkiatu. Chystám se oříznout jen okno prohlížeče a změnit velikost na 700px. Měli byste změnit velikost šířky, aby se vešly do oblasti obsahu vlastního webu. Nyní vytvořte novou vrstvu nahoře na tomto pozadí a proveďte kruhový výběr, zatímco držíte posun, abyste jej udrželi proporcionální. Vyplňte jakoukoliv barvu, kterou chcete.

Krok 1

Pokud vyberete kruh, změňte výplň% v panelu vrstev na 0%. Pod vrstvou FX přidejte 1px-2px černý tah a bílou vnitřní záři. Krytí můžete snížit pro méně bílé osvětlení.

Krok 2

Stále si ponecháte vybraný kruh a přejdete na vrstvu pozadí a stisknete klávesu ctrl (Pro uživatele Mac je to příkaz nebo cmd klíč.) + c kopírovat. Poté vytvořte novou vrstvu nad pozadím, ale pod zvětšovacím kruhem a vložte ji. Alternativně můžete jednoduše stisknout klávesu ctrl + j, chcete-li kopírovat novou vrstvu pouze s volbou in-takt.

Stisknutím klávesy ctrl + t otevřete transformační nástroj. Nyní přidržte novou duplicitní vrstvu posun udržet vše úměrné a alt udržet stacionární střed.

Krok 3

Stiskněte klávesu Ctrl a klikněte na ikonu vrstvy lupy, abyste provedli výběr znovu. Všimněte si, že byste měli stále zvýrazňovat duplikovanou vrstvu pozadí v panelu vrstev (ten přímo pod naším lupou), což znamená, že bude mít světle modré pozadí.

Stiskněte Ctrl + Shift + i pro obrácení aktuálního výběru. Nyní stiskněte klávesu Delete, chcete-li smazat další odpadky z naší obrazovky. Pro trochu přidaný efekt vytáhněte nabídku FX vrstvy a přidejte malý stín. Můžete také nakreslit tenkou svislou čáru 1px a použít filtr Liquify (Filtr> Zkapalnit) vytvořit malou rukojeť!

Závěr

Aby bylo možné navrhnout fantastickou produktovou grafiku, musíte si pamatovat základy. Návštěvníci prostě chtějí pochopit, co se snažíte prodat! Nejjednodušší způsob, jak získat tyto informace napříč celou řadou snímků nebo grafikou jednoho detailu. Štítky jsou pouze druhým dílem této skládačky, kde můžete načrtnout nejdůležitější sady funkcí.

Když dáte všechny tyto techniky dohromady, pravděpodobně si všimnete většího obrazu. Stahování a nákupy budou prudce stoupat - zejména pokud umístíte svou grafiku dopředu a dopředu na domovskou stránku. Tyto techniky jsou ideální pro grafické a webové designéry, aby mohli začít v oblasti produktového designu. Podrobně jsme popsali několik abstraktních myšlenek, ale rádi bychom slyšeli vaše myšlenky v níže uvedené diskusní oblasti!