Jak vytvořit náhled webu na počítači nebo mobilu (mockup)

Pravděpodobně jste již někdy narazili na ukázku webu nebo nějaké webové aplikace, jak vypadá na různých zařízeních (počítač, notebook, tablet, mobil…). Je to dobrý způsob, jak atraktivní formou představit lidem nový web nebo jim ukázat, že vaše webová služba funguje na různých typech zařízení. Jak ale tento náhled vytvořit? Není to tak těžké, jak se na první pohled může zdát…

Jak vytvořit náhled webu na počítači nebo mobilu (mockup)

První z možností je stáhnout si již připravený soubor pro Photoshop. Stačí do Googlu zadat např. macbook mockup free psd a můžete se do toho ihned pustit. Další možnost je o něco snažší a rychlejší. Jako vždycky si ukážeme užitečné stránky, kde si toto můžete sami vytvořit. Asi nejznámnější je web Placeit, kde je velké množství různých šablon. Zdarma si ale můžete stáhnout výsledný obrázek pouze v nízkém rozlišení. Za vyšší kvalitu již musíte utratit několik dolarů, což platí i pro obrázky s průhledným pozadím. Existují ale i další alternativy 🙂

SmartMockups

Skvělá stránka, kde si můžete vytvořit náhled webu na libovolném zařízení (počítač, laptop, notebook, mobil, hodinky) zcela zdarma ve vysokém rozlišení. Šablon je zde dostatek a jistě si každý vybere. Můžete se rozhodnout, zda chcete nahrát vlastní obrázek, který bude umístěn na obrazovku, případně lze zadat url adresu webu, přičemž se náhled vytvoří automaticky.

Postup:

1. Otevřeme si stránku SmartMockups, kde si vybereme obrázek, který se nám líbí.

   

   Domovská stránka

   

   Výběr kategorie (zařízení)

   
   
2. V dalším kroku přes tlačítko Upload image nahrajeme vlastní obrázek, nebo klikneme na URL Screenshot a zadáme adresu webu, který chceme na displeji zobrazit.

   

   Vložení obrázku nebo URL

   

   Zadání URL webu

   
   
3. Následně klikneme na tlačítko Choose image size a vybereme požadované rozměry obrázku. (po umístění stránky na displej vypadá obrázek celkově nekvalitní, po jeho stažení je však výsledek ve vysokém rozlišení a ostrý). Zobrazí se nám samostatná stránka, odkud obrázek stáhneme klasicky pomocí pravého tlačítka myši.

   

   Výběr velikosti obrázku

   

   Stránka s obrázkem ke stažení

   
   

MagicMockups

Tato stránka je velice podobná předchozí. Není zde sice takové množství šablon, přesto zde najdete také pěkné kousky. Postup je velice podobný jako v předchozím případě.

1. Otevřeme si stránku MagicMockups, kde si v levém sloupci vybereme obrázek, který se nám líbí.

   

   Domovská stránka

   

   Výběr kategorie (zařízení)

   
   
2. V dalším kroku v horní části stránky přes tlačítko Upload image nahrajeme vlastní obrázek, nebo klikneme na Capture URL a zadáme adresu webu, který chceme na displeji zobrazit. Pokud jsou na obrázku 2 zařízení (např. notebook a telefon), klikneme na Image A nebo Image B podle toho, kam chceme obrázek umístit.

   

   Vložení obrázku nebo URL

   

   Vyběr displeje

   

   Vložení adresy URL

   
   
3. Nyní klikneme na tlačítko Download a vybereme požadované rozměry obrázku. Klikneme na rozměry obrázku a následně se nám zobrazí samostatná stránka, odkud obrázek stáhneme klasicky pomocí pravého tlačítka myši.

   

   Volba velikosti obrázku

   

   Stažení obrázku

   
   

Mockuphone

Jednoduchá stránka, kde si zvolíte zařízení, nahrajete obrázek a nakonec si vysledek necháte zaslat na email nebo uložíte pomocí pravého tlačítka myši. Pokud se vám vygeneruje výsledný mockup například v landscape poloze a vy ho chcete vertikálně, stačí několikrát obnovit stránku a měla by se zobrazit jiná varianta. Nemusíte tak zadávat email, aby vám přišly všechny varianty najednout, pokud to nepotřebujete.

Mockuphone – mockup iPhone

Ověřte si responzivitu vašeho webu

V dnešní době je responzivní web naprostý základ. Znamená to, že se stránka přizpůsobí velikosti obrazovky zařízení, ze kterého návštěvník přichází. Navíc počet návštěvníků přistupujících z mobilních zařízení je čím dál vyšší. Rychlá kontrola může proběhnout tak, že na počítači zmenšujtete okno prohlížeče a při tom by se obsah stránky měl přizpůsobit. Nástrojů na testování je opravdu mnoho, uvádím jeden příklad.

TechSini

Zde stačí zadat v horní části stránky url adresu webu. Vaše stránky se zobrazí na různých zařízeních. Na jednotlivých obrazovkách můžete normálně scrollovat na stránce nahoru a dolů. Pomocí tlačítek pak můžete některé ze zařízení skrýt. Alternativou je pak stránka AmIResponsive.