7 tipů pro lepší citlivost fotogalerie
Všichni víme a rozumíme významu navrhování webových stránek na responzivní platformě, že? To platí také pro obrázky a fotogalerie.
Není nic horšího, než jít na krásné webové stránky a vidět obrázky, které se prostě „nezajistí“ na místo nebo velikost správně. Téměř vás nechává myslet si, že návrhář něco zapomněl, nebo vynechal krok.
Dnes se podíváme na sedm věcí, které můžete při navrhování udělat, abyste vytvořili lépe reagující fotogalerie. (Nemluvíme zde o kódu; jedná se o proces návrhu, který vám a vývojáři může pomoci, ať už jde o jeden nebo stejný.)
Prozkoumejte prvky Envato
1. Zvažte poměr stran
Zážitek ze stolního počítače se může zcela lišit od zážitku na mobilním zařízení. U většiny webových stránek jsou však umístění obrázků stejná. Vaším úkolem je zajistit, aby stejná zpráva byla komunikována v obou prostředích a aby se obraz neztratil při různých velikostech obrazovky.
Tam přichází přemýšlení o poměru stran - vztahu mezi vodorovnými a svislými rovinami obrazu -.
Na této webové stránce pro stolní počítače by mohla super super tenká vodorovná fotografie vypadat úžasně v horní části designu vašeho webu. Co se ale stane s tímto obrázkem na menší obrazovce ve více čtvercovém prostředí? Zmenší se fotografie na velikost, kterou je těžké vidět? Nebo zmizí polovina fotky?
To je místo, kde poměr stran přichází. Výběrem horizontálně-vertikálního vztahu pro velikosti fotografií, které je podobné, se při přepínání zařízení ztratí menší obsah obrazu. Usnadní vám také práci s umístěními obrázků a nebudete se muset starat o nahrání více velikostí pro různé body přerušení.
2. Velikost a měřítko důsledně
Péče, kterou věnujete oříznutí, změně velikosti a nahrávání fotografií, může dramaticky ovlivnit váš pracovní postup.
Kolik z vás jen nahraje fotografie do CMS a doufáme v to nejlepší? Ano je špatná odpověď.
Každá fotografie by měla být oříznuta a dimenzována pro umístění v designu webových stránek. To zajistí, že fotografie budou vypadat tak, jak jsou zamýšleny, a nebudete skončit s chybějícími hlavami v horní části fotografií nebo prvků, které zůstanou na jedné nebo obou stranách.
Trvá trochu déle na zadním konci projektu, ale stojí za to námahu. (Zejména pokud pracujete s jezdci nebo galeriemi.)
3. Použijte posuvník nebo galerii
Použití kontejneru pro obrázky, jako je posuvník nebo galerie, vám může pomoci lépe spravovat responzivní obrázky v designu vašeho webu. Zejména pokud používáte dobře známý a zavedený nástroj třetích stran, většina těžkého zvedání se provádí za vás, abyste zajistili, že tyto prvky budou fungovat tak, jak bylo zamýšleno.
Dva z předchozích tipů zůstávají životně důležité i při použití prvků posuvníku nebo galerie; stále platí poměry stran a koncepty dimenzování a škálování.
Nejste si jisti, kterou možnost použít? Rozhodněte se pro posuvník, pokud máte hrst skvělých obrázků, které budou fungovat ve větších velikostech. Je to populární volba pro horní nebo „hrdinskou“ část webové stránky. Vyberte si galerii, pokud máte spoustu obrázků, které dokážou vykreslit malé obrázky bez problémů se čtením. Funguje to dobře pro portfolia nebo webové stránky se spoustou obrázků.
4. Pokud je to možné, držte se dál od titulků
Titulky mohou být skvělým nástrojem k přidávání hodnoty informacím v obrázku, ale mohou skutečně ovlivnit fungování webových stránek. Vyhněte se jim, pokud můžete nebo přijďte s alternativním řešením, které není ve formě tradičního titulku.
Velké textové bloky, jako jsou titulky, se mohou krásně vykreslit na velkých obrazovkách, ale v menších prostředích představují hlavní problémy. Výsledný efekt může být otřesný a potenciálně může způsobit, že uživatelé opustí váš web. (A s tolika přenosy přicházejícími z mobilních zařízení pro většinu webových stránek, to by mohlo být katastrofální.)
5. Při mixování videa a obrázků buďte opatrní
Jasně: Je naprosto přijatelné mít na svém webu prvky videa a obrazu. Je to asi něco, co byste měli udělat.
Nemíchejte však video a obrázky do stejných prvků návrhu, jako je umístění prvků videa a obrázků do stejného posuvníku. Někdy budete mít štěstí a bude to fungovat jako kouzlo. Jindy vám na některých zařízeních zůstanou prázdná pole, která vypadají podivně.
Nejlepší možností je dát každému jednotlivému typu prvku svůj vlastní prostor v návrhu. To se týká téměř všech konstrukčních prvků, ale zejména obrázků a videa.
6. Vyjmout zbytečné prvky
Jedním z největších problémů s jezdci a galeriemi je to, že návrhář příliš často vkládá do kontejneru příliš mnoho nevyžádané pošty. Existují navigační šipky, navigační tlačítka, text, výzvy k akci a seznam pokračuje.
Obecně uživatelé chápou, jak komunikovat s posuvníkem. Pokud neděláte něco úplně ze zdi, nepotřebujete dvě vrstvy navigace, které uživatelům ukazují, co mají dělat. Jeden řádek tlačítek nebo šipek je spousta (pokud je potřebujete vůbec).
Zahrňte pouze prvky, se kterými budou uživatelé muset komunikovat. Pokud má galerie obrázků nebo posuvník za cíl přimět uživatele, aby klikl / klepnul na výzvu k akci, měla by být tato fotografie jedinou možností na fotografii. Nech to být jednoduché. Neposkytujte příliš mnoho možností. Ve skutečnosti může pomoci vašim konverzním poměrům.
7. Používejte pouze vysoce kvalitní obrázky
Skoro je samozřejmé, ale stále se to stává příliš často. Pokud nemáte hvězdný obraz, nepoužívejte jej vůbec. Vysoce kvalitní obrázky s vysokým rozlišením jsou důležitější než kdy jindy. Uživatelé neztrácejí čas prohlížením webových stránek s pixelovanými nebo špatnými obrázky (a pravděpodobně vám nebudou důvěřovat, pokud je kvalita nižší).
Velký počet uživatelů se dívá na design vašich webových stránek pomocí zařízení s obrazovkami s vysokým rozlišením; očekávají špičkové vizuální efekty. Musíte dodat.
Některé formáty obrázků se mění tak, aby splňovaly tyto potřeby s vysokým rozlišením a současně poskytovaly více komprimovaných obrázků. Věšte se ve formátech - vývojáři Google jsou skvělým místem pro začátek - víte, jaké rozlišení obrazovky se nejčastěji používají, a zvykněte si ukládat soubory způsobem, který lze uživatelům nejlépe doručit.
Závěr
Všichni chceme vytvořit weby, se kterými uživatelé cítí potřebu interakce. Silné obrázky jsou klíčovou součástí této rovnice. Stejně důležité je, aby byly vykreslovány dobře bez ohledu na zařízení.
Naplánujte si prostory pro obrázky, které budou fungovat v různých velikostech zařízení, když se nacházíte v fázích wireframing projektu designu webových stránek. Možná zjistíte, že existuje několik možností, zejména co se týče tvaru obrazu, ale z dlouhodobého hlediska bude tato rozhodnutí brzy a vytvoření této konzistence z dlouhodobého hlediska prospěje designu vašich stránek.
