V dnešním článku si shrneme jaké jsou v dnešní době možnosti v rámci navrhování webový stránek, webových aplikací a nebo mobilních aplikací. Kde je doba, kdy se tyto návrhy dělali v Adobe Photoshop, protože prostě moc jiných možnosti nebylo. Dnes jsme už v daleko lepší situaci a to díky nástrojům jako je Sketch, Figma a Adobe Xd. Převážně o těchto aplikacích to dnes bude. I když samozřejmě by šlo zahrnout více aplikací/nástrojů – např. pro speciálně pro wireframe nebo pro prototypování.
Proč zrovna Sketch, Figma a Adobe Xd?
Tahle otázka musela příjít mysl snad každému, kdo uvažoval o navrhování jakkékoliv aplikace od webových stránek, webových aplikací až po mobilní aplikace. Pojďme si nejdříve popsat jednolivé nástroje.
Sketch
Jedná se pravděpodobně o první nástroj, který byl specializovaný pro tvůrce UI (user interface – uživatelského prostředí) případně UX (user experience – „uživatelská zkušenost“). Sketch vznikl již v roce 2010 a letos dosáhl verze 70. Takže se jedná o nástroj, který už má nějakou historii, ale sučasně je stále velmi aktuální. Dalo by se také řící, že se jedná o takového prvního pionýra, který otevřel cestu dalším nástrojům. Důležitou vlastností je, že je určen pouze pro operační systém MacOS – takže v podstatě pouze na počítačích/noteboocích od společnosti Apple. Autoři na tom rozhodně nehodlají nic měnit. – tzn. abyste mohli vytvářet návrhy, tak musíte použít Apple produkt.
Figma
Dalším velmi populárním nástrojem je Figma, která byla vydána v roce 2016, ale trochu jinak než Sketch. Jak jsme si popsali výše, tak Sketch si vybral, že bude nativní aplikací pro operační systém MacOS, naopak Figma šla cestou webových technologií, takže není vázána na konkrétní operační systém. Takže původní myšlenka byla „kolaborativní spolupráce“ – neboli, že nad jedným návrhem může realtime spolupracovat více designerů. Tím, že je Figma funguje jako webová aplikace, tak to byla v podstatě první alternativa pro ty, kteří neměli zařízení od Apple s MacOs, aby mohli používat Sketch, takže velmi brzy si tento nástroj získal oblibu mezi uživateli. Nejen samozřejmě tím, že je webový, ale především tím, že je dostupnější, tak k němu i někteří uživatelé měli blíže.
Adobe Xd
Společnost Adobe musela nějak zareagovat na to, že se již nebral Adobe Photoshop jako „hlavní“ nástroj pro návrh webů. A tak v roce 2017 vydala svoji aplikaci Adobe Xd. která je multiplatformní (což znamená, že je možné je spustit jak na Windows tak na MacOS). A rozhodně ji ocenili „fanoušci“ produktu od společnosti Adobe, protože vždy jde cítit v aplikacíh od Adobe, že se jedná o jejich produkt. Takový jejich“podpis“. A navíc pro Adobe nezvyklou cenovou politikou (což znamená, že Adobe Xd je zdarma pro osobní potřebu) si získali nemalý počet uživatelů a fanoušku. Především ti, kteří byli zvyklí na Adobe Photoshop, mohli plynule přejít na Adobe Xd a pokračovat.
Kolik to stojí?
Tohle je asi hned druhá otázka, která vás napadne, když se rozhodujete, jakému nástroji se budete věnovat.
| Sketch | Figma | Adobe Xd | |
| Základní cena pro jednotlivce | $99 1. rok obnovení je za $79 | zdarma | zdarma pro osobní potřebu |
| Cena pro tým | $9/měsíc/člen | $12/měsíc/editor | 12,09 €/měsíc/člen |
Takže pokud někdo chce začít, pak jednoduší cesta je přes Figmu a Adobe Xd, kdy máte na neomezenou cestu možnost se učit, zkoušet a tvořit dle podmínek, které má každá platforma. U Sketch je možnost 30-denní trial.
Jak na návrh?
Na tuto otázku rozhodně není jednoduchá odpověď, protože se jedná jedná o kreativní činnost, která se hodnotí velmi subjektivně. A za další je to velmi široké téma, které by se nevešlo ani na několik článků. Spíše si můžeme popsat principy, které jsou většinou stejné.
- Jedná se o vektorové nástroje – tzn. většinou vše je křivka, ale můžeme zde pracovat i s rastrovými obrázky.
- Rozložení (demonstrované na Sketch v70) je vlevo panel, kde máme objekty, skupiny nebo komponenty (něco jako vrstvy v Adobe Photoshop), uprostřed je canvas, neboli prostor pro samotný návrh a vpravo je panel s vlastnostmi (velikost, barva a atd).
- Základní stavební prvky:
- Rectangle (klávesová zkratka R) – neboli obdélník, může být jako tlačítko nebo prostor pro obrázek nebo celé menu
- Text (T) – možnost vkládat texty
- Oval (O) – možnost vkládát oválné elementy jako elipsu a kruh
- další prvky už jsou speficické pro jedntlivé nástroje (například Line (L), Rounded (U) pro Sketch, Polygon (Y) pro Adobe Xd)
- Další společným rysem jsou komponenty, takže ze základních stavebních prvků můžeme poskládat složitější objekty a z těch pak vytvářet komponenty. Komponenty jsou typicky takové, které se opakují.
Jaká je možnost sdílení?
Když už vytvoříme nějaký návrh (webu, mobilní aplikace), tak většinou chceme druhé straně nějak ukázat naši práci a většinou nechceme všechno posílat do e-mailu. Na tuto možnost již tyto nástroje myslí, takže Sketch má Skecth cloud, Figma je už sama od sebe webová, takže zde se to očekává a Adobe Xd umisťuje své návrhy na Adobe Assets. Takže výsledek je takový, že vždy máte možnost nasdílet svoji práci dál a pak už záleží, co od toho čekáte. Jestli z pohledu developera, který vyvíjí (tak je zde většinou inspector – Sketch a Figma) nebo naopak chcete komentovat návrh například z pohledu zákazníka nebo product ownera. Jednoduchá ukázka v rámci Sketch resp. Sketch Cloud je na tomto odkazu – návrh webu JH9.
Co dál ?
Pravděpodobně to z článku šlo poznat, ale našim primárním nástrojem je Sketch – i když se snažíme zjištovat si informace i o dalších nástrojích Figma a Adobe Xd, tak nemůžeme z praktického hlediska přidat více . Takže zde nakonec dáme několik videí, které jsou podle nás dobré pro pokračování v daném nástroji.
){kind=link}