Figma očima grafika / UI designera a vývojáře
„Pokud jste začínající vývojář, zkuste najít systém v daném designu. Palety barev, styly písem a tak dále. Z toho si pak vytvořte komponenty, které používejte.“.
přečtěte můj článek o Loomu
Ach ano, Loom. Pro ty kdo Loom neznají, určitě si <anchor>přečtěte můj článek o Loomu</anchor> . Ušetří vám to desítky hodin nedorozumění a špatně předaných podkladů. Věřím, že podklady by vždy měly být předány profesionálně, to znamená dobře pojmenované groupy a elementy. K tomu je vždy dobré dodat vysvětlení a popsání toho, proč jsem se tak rozhodl a jak se daný element chová. To aby měl UI designer přehled o tom, co daná část bude dynamicky dělat, je nesmírně důležité proto, aby mohl navrhnout vizuální řešení, které bude fungovat v každé situaci.
Loom: Nástroj, díky kterému předáte podklady o 100 % snadněji
Loom: Nástroj, díky kterému předáte podklady o 100 % snadněji

[Velká narozeninová sleva -40%! Zjistit více](https://www.simonjun.cz/kurzy/figma)

[![](https://cdn.prod.website-files.com/61f03d5bae823d7f26ecc10f/6204d46fc027cfd717493e1c_sj-new-logo.svg)](/) [O mně](http://simonjun.cz/#About) [Blog](/blog) [Newsletter](/newsletter) [Blog](/blog) [Newsletter](/newsletter)

Naučte se design

###### Online kurzy

[Figma MasterClass](/kurzy/figma) [Figma Pro manažery](/kurzy/figma-pro-manazery) [🔗 Přihlášení do kurzů](https://kurzy.simonjun.cz/)

###### Mentoring

[Design Mentoring](/mentoring)

###### Povídání nejen o designu

[UX Friendly Podcast](/ux-friendly-podcast)

Produkty

[UX Design Kit 2.0](/produkt/ux-kit) [Moodboard Business Pack](/produkt/moodboard-sablona)

[Ke stažení](/ke-stazeni)

Naučte se design

###### Online kurzy

[Figma MasterClass](/kurzy/figma) [Figma Pro manažery](/kurzy/figma-pro-manazery) [🔗 Přihlášení do kurzů](https://kurzy.simonjun.cz/)

###### Mentoring

[Design Mentoring](/mentoring)

###### Povídání nejen o designu

[UX Friendly Podcast](/ux-friendly-podcast)

Produkty

###### Produkty

[UX Design Kit 2.0](/produkt/ux-kit) [Moodboard Business Pack](/produkt/moodboard-sablona)

[Ke stažení](/ke-stazeni) [Kontakt\
\
![](https://cdn.prod.website-files.com/61f03d5bae823d7f26ecc10f/6204d5d7421aaa225ba8cef6_Vector-arrow.svg)](/kontakt)

[**Nástroje**](http://www.simonjun.cz/kategorie/nastroje)

# Loom: Nástroj, který zlepšil předávání podkladů o 100 %

![](https://cdn.prod.website-files.com/61f03d5bae823d3235ecc12a/6219019eaa595d020e40bd25_60918517b137e71ef85b8537_loom.svg)

[![](https://cdn.prod.website-files.com/61f03d5bae823d7f26ecc10f/61f03d5bae823d8cf9ecc148_Vector-5.svg)\
\
![](https://cdn.prod.website-files.com/61f03d5bae823d7f26ecc10f/61f03d5bae823d8cf9ecc148_Vector-5.svg)](#Blog-Post)

Osnova

Předávání podkladů vývoji je noční můra každého designera. Loom z tohoho, dříve složitého, procesu dělá krásnou procházku lesní cestou, nad kterou svítí duha. Pokud nejste designer, ale měli jste někdy problém s předáváním podkladů/feedbacku, Loom vám celý proces zrychlí a zjednoduší. Prostě ve zkratce, **předáváte nějaké podklady/feedback online? Doporučuji začít používat Loom**.

## Loom a jeho funkce

**Loom umožňuje vytvářet rychlé záznamy obrazovky společně se zvukem**, které obratem nahraje na cloud a vytvoří pro ně privátní link. Představte si rychlý nástroj, co nahrává videa na privátní YouTube. Posléze můžete odkaz poslat nebo video vložit do složky, ke které je možné vytvořit veřejný odkaz (kdo má odkaz, může sledovat všechna videa ve složce). Toto je v základu to k čemu je Loom určen. **Nástroj pak umí videa i stříhat, přidávat komentáře, popisy** atd., ale to jsou už sekundární funkce.

Může se to zdát jako jednoduchá funkcionalita, a ona ve výsledku je, ale **video se zvukem přesune informaci mnohonásobně rychleji a lépe** než psaný text a statické obrázky.

**Předávání feedbacku je lehčí a plno informací se neztratí v komunikačním šumu**. Rovnou ukážete, co se špatně a klidně přidáte i ukázku z jiného webu, kde daná animace funguje přesně tak, jak si to představujete (představil si to vlastně někdo jiný, ale vy ji chytře okopírujete – _pozn. každý to dělá_).

Už nemusíte někomu popisovat, kde v nastavení najde tu a tu záložku, kterou hledá. Prostě zapnete Loom a **v rámci sekund mu to nahrateje a pošlete na chatu nebo mailem**.

**Už nikdy nebudete muset vytvářet složité předávací dokumenty klientům**, jak mají upravovat určité sekce jejich webu, prostě jim nahrajete **krátká instruktážní videa** (klidně i s kamerou). Vše vypadá mnohem profesionálněji a pro vás jednodušeji.

Asi je zřejmé, že **jediné omezení Loomu je vaše představivost a připojení k internetu**.

![Loom přehrávání videa](https://cdn.prod.website-files.com/61f03d5bae823d3235ecc12a/6204f6430e8dbdf4d033712a_60918522a4df9ba802536d27_md0Fzlaa_6G3CJhZn50AHxgExBxJvkbnhwH-OUKjk-YAxloJDGcONY-Y23LClJ1kYBc3viW5gC3B1ccz5B42GBYERmQ-_N99HlIPKd1Yt0KYaK3OfrO9z0Q86Gz2v0kG1qAZgUbX.png)

## Tipy a triky, které v Loomu využijete

Pár příkladů k čemu využívat Loom jsem už popsal výše, ale zde bych rád uvedl moji workflow a to, co jsem se naučil za rok používání Loomu.

Zde je pár bodů, kterých je dobré se obecně držet:

1. **Pokud máte placenou verzi nemažte nikdy žádná videa a složky**, pokud v nich není jasná chyba jako např. nefunkční zvuk.
2. **Pořiďte si placenou verzi** (stojí jen 8 $ na měsíc) a znovu si přečtěte krok 1.
3. **Složkujte – vytvořte pro každý tým/klienta složku**. V té si pak vytvořte složku pro každý projekt a v té složku pro každý balíček úkolů.
4. **Pokud točíte sérii videí, označujte je čísly** např. #1 Homepage, #2 Produktový detail. Často totiž budete navazovat na něco, co jste řekli v předchozím videu a druhá strana je potřebuje sledovat ve správném pořadí.
5. **Pokud je potřeba něco “dotočit”**, na něco se zapomnělo nebo přibyla nějaká informace, **je dobré videa pojmenovat desetinnými čísly** např. #1.1 Homepage – Upřesnění Banneru. Loom totiž ukládá chronologicky a tudíž zde navazuji na předchozí bod, že bude jednodušší předat informaci ať druhá strana postupuje podle čísel na začátku videa.
6. **U složitějších/komplexnějších projektů sdílejte celé složky a ne videa**. Toto navazuje na bod 3. Poté se vám nikdy nestane, že zapomente předat informaci. Ideální je to např. na korektury, kde vývojářům nasdílíte složku, do které přibývají úkoly.
7. **Pokud je videí ve složce více než 20, je dobré vytvořit další podsložku a označit ji datem** např. 16.5.2020. Takže bude složka Korektury -> 16.5.2020, 17.5.2020, atd. **Toto dobře slouží projekťákům**, kteří mají přehled co, kdy přibylo a co musí nahodit do Jiry nebo Asany.
8. Poslední bod je spíš takové motto: **_“To, co můžete udělat jen jednou s Loomem, udělejte jen jednou s Loomem” – Šimon 2021_.** Mám tím namysli např. onboarding nového člověka, výuku nového nástroje nebo úvodní video pro každého, jak si udělat super kávu. **Využívejte Loom, proto aby vám zamezil po sté vysvětlovat stejný postup nebo úkol.** Videa lze dobře zakomponovat i do Asany, Slacku nebo dokumentu.

## Jak využívám Loom já

Když pomineme tipy a triky je dobré si ukázat modelové příklady, ve kterých používám Loom já, jakožto freelance UX & Product designer. Společně i s detailnějším popisem, jak postupuji v každém scénáři.

### Předání podkladů grafikovi

**Vždy, když dokončím wireframy a udělám z nich interaktivní prototyp, točím předávací Loom**. Jak jsem psal v tipech nahoře, vždy jednotlivé stránky/sekce stránek označuji #1 Homepage, #2 Filtry, atd.

Zároveň vše dávám do složky _Klient -> Podklady pro grafika -> #1 –  #5_ (pokud je projekt rozsáhlý). **Grafikovi posílám předpřipravený mail, kde vysvětluji v krátkosti co je Loom, jak s ním pracovat a jak funguje celá struktura složek, aby se v nich neztratil a věděl hned co a kde najde.** Zároveň vše rozděluji do menších složek po pár videích, aby nevznikl takový ten pocit leknutí z nového toolu, že se do něj přihlásí a najednou je tam 40 videí.

‍

Z osobní zkušenosti **je lepší dávkovat a nahrávat videa do složek postupně**. Často dělám, že si nahraji všechny podklady předem, ale do složky, kterou má nasdílenou grafik, to přidávám co den, dva po pár videích. Jak jsem psal, třeba _#1 –  #5_. Za dva dny mu tam nahraji další složku _#6 –  #10,_ a takhle pokračuji dál. **Pokud je už grafik zvyklý na Loom, tak nahrávám vše najednou.**

**‍** Ideální je ho přesvědčit, aby měl taky Loom a nahrával vám otázky do složky _Klient -> Podklady pro grafika -> #1 –  #5 -> Otázky_. Bude to zase snazší než si dopisovat a máte všechno na jednom místě, kdybyste se k tomu potřebovali vrátit.

### Předání podkladů vývoji

**Předání podkladů vývojářům dělám podle stejného postupu jako grafikovi, akorát vytvářím nové složky speciálně pro kodéry a pak back-end**. Dobré je videa rovnou **prolinkovat do tasků v Jiře**, pokud ji používáte.

‍

Většinou má vývoj svého leadera/projekťáka, který tohle řeší za mě, takže mám zase připravenou šablonu mailu, kde mu všechno vysvětlím, jak postupovat a jak s tím pracovat.

‍

Zatím mám jen pozitivní feedback od všech vývojářů, protože jsou pro ně podklady v Loomu ve spojením s designem ve [Figmě](https://www.simonjun.cz/blog/proc-je-figma-dar-z-nebes) a slovním popisem v Jiře nejideálnější přesun informací.

### Korektury složitějších animací a flows

**Na korektury tvořím novou, speciální složku, aby měl vývoj všechno pohromadě**. Z mé zkušenosti je lepší ji mít samostatnou a ne, jako u předání grafiky, ve složkách s videi, protože vývoj často jede na tasky / tickety a _bouchaj_ to postupně. Je pro ně jednodušší to rozdělovat podle data a hned to dávat do Jiry, aby si vše mohli odbavovat podle svého tempa.

‍

Vždy jim dávám odkaz na konkrétní video, které rozebírá pouze jeden problém/jednu korekturu. **To nejhorší, co můžete udělat, je popsat více chyb v jednom Loomu, protože to nebude jeden task.** Zde je jasné pravidlo, co samostatný task, to samostatný Loom.

‍

Pokud se jedná o korektury animací, a my je nemáme připravené přesně na míru v Adobe After Effects, často se snažím ukázat co nejvěrnější ukázku na jiném webu. Poté vložím do Loomu do popisu odkaz na tuto stránku, aby si ji kodéři mohli rychle zobrazit a podívat se, jak vlastně animace funguje.

### Ovládání CMS / e-shopu

Na Loomu mám pár složek s přednatočenými videi ohledně ovládání Webflow a Shopify. Často to někdo potřebuje a když jsem to vysvětloval asi po desáté, rozhodl jsem se to všechno sepsat a udělat z toho Loomy. Teď už jen posílám odkazy na jednotlivá videa. **Pokud něco vysvětlujete pořád dokola (v týmu, klientům atd.) doporučuji si sednout a připravit hezké Loomy s dobrým zvukem a bez přeřeků**.

‍

Vše bude vypadat profesionálně a vám to ušetří plno práce.

### Co přidám do budoucna

Poslední dobou si hodně _hraju_ s Integromatem a nastavování automatizací. Pracuji na automatických personalizovaných mailech pro studenty mého [Figma Kurzu](https://www.simonjun.cz/kurzy/figma) a designery, co si koupili [UX Kit](https://www.simonjun.cz/produkt/ux-kit). Zvažuji přednatočená videa, která budou reagovat na chování studenta – pokud se zasekne na nějaké kapitole, pošle se mu krátký e-mail s Loomem, kde budu rozebírat, jak postupovat dál a jaké jsou nejčastější problémy dalších studentů.

‍

Věřím, že pro Loom najdu plno využití i v budoucnu a postupně budu tenhle článek doplňovat o nové scénáře a situace, kdy mi Loom kryje záda.

## Tarify Loomu: Free vs. Pro

[Pricing](https://www.loom.com/pricing) jsem už lehce nakousnul, ale je dobré se o něm trošku rozepsat.

**Loom má 3 tarify**:

1. Free
2. Business $8
3. Enterprise

![Pricing aneb kolik stojí Loom](https://cdn.prod.website-files.com/61f03d5bae823d3235ecc12a/6204f643c027cf0bcf4a8895_60918521b137e77fd35b853c_nXtn0bnQ3-QeG-x_NFU_rIvfKpN6AxRJzI04r664yxJCUiU4HFWv8JvL-qZMjIV2jsYeA8fFa5zEDB5z4Lswf2cDfX1uXY7puL2Pe_CSlghl3GcdxjAh1rg_K99tMcRPg6cIXWwN.png)

Pro většinu lidí budou relevantní první dva, takže se na ně podíváme blíže.

**Free tarif vám bohatě postačí na test celého programu**. Můžete zde mít **100 videí** (což je více než dost) **do maximální délky 5 minut**. To vám bude taky stačit, pokud budete Loom využívat v některých scénářích, které jsem popisoval výše. Až se vám bude vaše video kolekce plnit, je čas přejít na Business tarif.

**Business tarif vás vyjde na cca 175 Kč měsíčně** a otevře vám **neomezenou možnost uložených videí** a další vychytávky jako je přidávání buttonů, váš branding atd. Tyto funkce jsou dobré, pokud **používáte Loom na předávání podkladů klientům**, protože vše vypadá profesionálně a je možné zde vytvořit komplexní flows, které je provedou celým novým CMS, e-shopem nebo novým nástrojem.

## Shrnutí

Ve zkratce: **Loom doporučuji minimálně vyzkoušet všem, kteří předávají podklady někomu dalšímu a vnímají, že e-mail prostě nestačí**. Tarif Free vám bude stačit, troufám si říct i na několik měsíců, takže jediné, co ztratíte pokud vám Loom nebude vyhovovat, je jedno odpoledne.

##### Tagy

[Inspirace](http://www.simonjun.cz/tagy/inspirace)

[Ecommerce](http://www.simonjun.cz/tagy/ecommerce)

[Prototyp](http://www.simonjun.cz/tagy/prototyp)

### Největší online kurz na Figmu v Česku

MasterClass jsem postavil jako komplexní hub vědomostí. Najdete v něm vše o Figmě a práci v ní. Od jednoduchého nastavení po složitější prototypy a aplikace.

Kurz obsahuje 14+ hodin contentu. Konkrétně 127 videolekcích, díky kterým se rychle naučíte to, co zrovna potřebujete.

[Zjistit vše o kurzu\
\
Let’s talk now!](/kurzy/figma)

#### Osnova

###### Blog

## Další články

[Přejít na blog\
\
Let’s talk now!](/kontakt)

[**Nástroje**\
\
**Calendly vs. TidyCal vs. DotCal**\
\
Přečíst článek\
\
![](https://cdn.prod.website-files.com/61f03d5bae823d7f26ecc10f/61f03d5bae823d26d4ecc14a_Vector-2.svg)](/blog/nastroje-na-bookovani-meetingu)

[**Nástroje**\
\
**28 nejlepších pluginů do Figmy**\
\
Přečíst článek\
\
![](https://cdn.prod.website-files.com/61f03d5bae823d7f26ecc10f/61f03d5bae823d26d4ecc14a_Vector-2.svg)](/blog/nejlepsi-pluginy-do-figmy)

[**Nástroje**\
\
**Webflow v kostce**\
\
Přečíst článek\
\
![](https://cdn.prod.website-files.com/61f03d5bae823d7f26ecc10f/61f03d5bae823d26d4ecc14a_Vector-2.svg)](/blog/webflow-v-kostce)

[**Nástroje**\
\
**Loom: Nástroj, který zlepšil předávání podkladů o 100 %**\
\
Přečíst článek\
\
![](https://cdn.prod.website-files.com/61f03d5bae823d7f26ecc10f/61f03d5bae823d26d4ecc14a_Vector-2.svg)](/blog/loom-nastroj-pro-predavani-podkladu)

[**Nástroje**\
\
**Nová appka od tvůrců Figmy: FigJam**\
\
Přečíst článek\
\
![](https://cdn.prod.website-files.com/61f03d5bae823d7f26ecc10f/61f03d5bae823d26d4ecc14a_Vector-2.svg)](/blog/figma-figjam)

#### Newsletter

### Moje know-how do vaší schránky.

Přihlaste se k newsletteru a získejte best practices a tipy z oblasti UX & Product designu a života designera.

Jméno \*

E-mail \*

Let’s talk now!

Vyplňte prosím všechna pole. Nebo si zkontrolujte, jestli máte e-mail ve správném tvaru.

###### FAQ

## Na co se nejčastěji ptáte

Na jakých projektech nejčastěji pracujete?

![](https://cdn.prod.website-files.com/61f03d5bae823d7f26ecc10f/61f03d5bae823db5bcecc13f_arrow-down-s-line%201.svg)

Zaměřuji se především na e-commerce projekty nebo nástroje, které úzce pracují s e-commerce zákazníkem.

E-commerce se věnuji přes 6 let. Za tu dobu jsem spolupracoval s několika velkými, mezinárodními klienty na redesignu, výzkumu, expanzi a mobilních aplikacích.

Jaký je typický timeline projektu?

![](https://cdn.prod.website-files.com/61f03d5bae823d7f26ecc10f/61f03d5bae823db5bcecc13f_arrow-down-s-line%201.svg)

Stejně jako u ceny i timeline je jiná projekt od projektu. Poté co mě kontaktujete se snažím do pár dnů naplánovat kick-off meeting.

Na něm probereme váš projekt dopodrobna – očekávání, budgety, termíny a vše potřebné. Po meetingu už vám budu schopný vykopnout timeline projektu, pod kterou se podepíšu.

Jak vypadá celý design proces?

![](https://cdn.prod.website-files.com/61f03d5bae823d7f26ecc10f/61f03d5bae823db5bcecc13f_arrow-down-s-line%201.svg)

Ať už se jedná o design nového produktu (webu, e-shopu, mobilní aplikace) nebo redesign, vždy postupuji takto:

- Kick-off meeting

- Proposal

- Úvodní briefing

- Analýza dat

- Výzkum

- Návrh řešení

- Validace řešení

- Dohled na implementaci


Jaká je vaše hodinová sazba?

![](https://cdn.prod.website-files.com/61f03d5bae823d7f26ecc10f/61f03d5bae823db5bcecc13f_arrow-down-s-line%201.svg)

To se odvíjí podle toho, jestli se jedná o jednorázovou konzultaci nebo dlouhodobý projekt.

- Za konzultaci se má sazba pohybuje od 3 500 Kč / h.

- Školení přesně pro vaše potřeby připravené na míru (nezáleží na poštu účastníků) se pohybuje kolem 50 000 Kč. Zahrnuje kick-off meeting, přípravu školení na míru a celý den školení.

- Hodina mé práce na projektu se pohybuje od 2 500 Kč / h.


Vše je ale o detailech a domluvě. Každý projekt naceňuji individuálně a předem. Vždy tedy víte, do čeho jdete.

Kdy můžeme začít spolupracovat?

![](https://cdn.prod.website-files.com/61f03d5bae823d7f26ecc10f/61f03d5bae823db5bcecc13f_arrow-down-s-line%201.svg)

Vše záleží na mém aktuálním vytížení a náročnosti projektu. Vždy se snažím do pár dní od doby kontaktu naplánovat kick-off meeting, kde vše probereme dopodrobna.

Je možné si objednat školení na míru?

![](https://cdn.prod.website-files.com/61f03d5bae823d7f26ecc10f/61f03d5bae823db5bcecc13f_arrow-down-s-line%201.svg)

Ano. Momentálně nabízím 2 školení – Figmu a zákaznický výzkum.

‍

Zjistil jsem, že obecná školení nejsou zdaleka tak efektivní jako ta na míru. Proto si nejdříve sednu s celým týmem a dívám se detailně na to, co je trápí a jak zlepšit jejich workflow.

‍

Poté potřebuji čas na přípravu školení, aby odpovídalo potřebám vaší firmy a týmu. To mi zabere kolem 2 až 3 týdnů.

Po školení nabízím i další support nebo pravidelné check cally, kde společně sledujeme implementaci nově nabytých vědomostí.

## Připravujete projekt?

[Pojďme si o něm popovídat](/kontakt)

[Všeobecné obchodní podmínky](/vseobecne-obchodni-podminky) a [Podmínky ochrany osobních údajů](/podminky-ochrany-osobnich-udaju)

Copyright © 2024 I don't know OÜ