V dnešnom článku si zhrnieme aké sú v dnešnej dobe možnosti v rámci navrhovania webový stránok , webových aplikácií a alebo mobilních aplikácií . Kde je doba, kedy sa tieto návrhy robili v Adobe Photoshop , pretože jednoducho moc iných možnosti nebolo. Dnes sme už v ďaleko lepšej situácii a to vďaka nástrojom ako je Sketch , Figma a Adobe Xd . Prevažne o týchto aplikáciách to dnes bude. Aj keď samozrejme by šlo zahrnúť viacero aplikácií / nástrojov – napr. Pre špeciálne pre wireframe alebo pre prototypovania .
Prečo zrovna Sketch, Figma a Adobe Xd?
Táto otázka musela prísť myseľ snáď každému, kto uvažoval o navrhovaní jakkékoliv aplikácie od webových stránok, webových aplikácií až po mobilné aplikácie. Poďme si najskôr popísať jednolivé nástroja.
Sketch
Jedná sa pravdepodobne o prvý nástroj, ktorý bol špecializovaný pre tvorcov UI ( user interface – užívateľského prostredia ) prípadne UX ( user experience – „užívateľská skúsenosť“ ). Sketch vznikol už v roku 2010 a tento rok dosiahol verzia 70 . Takže sa jedná o nástroj, ktorý už má nejakú históriu, ale Súčasný je stále veľmi aktuálna. Dalo by sa tiež povedať, že sa jedná o takého prvého pioniera, ktorý otvoril cestu ďalším nástrojom. Dôležitou vlastnosťou je, že je určený len pre operačný systém MacOS – takže v podstate iba na počítačoch / notebookoch od spoločnosti Apple . Autori na tom rozhodne nehodlajú nič meniť. – tzn. aby ste mohli vytvárať návrhy, tak musíte použiť Apple produkt.
Figma
Ďalším veľmi populárnym nástrojom je Figma , ktorá bola vydaná v roku 2016 , ale trochu inak ako Sketch . Ako sme si popísali vyššie, tak Sketch si vybral, že bude natívne aplikácií pre operačný systém MacOS , naopak Figma išla cestou webových technológií , takže nie je viazaná na konkrétny operačný systém. Takže pôvodná myšlienka bola „kolaboratívne spolupráca“ – čiže, že nad jedným návrhom môže realtime spolupracovať viac dizajnérov. Tým, že je Figma funguje ako webová aplikácia, tak to bola v podstate prvá alternatíva pre tých, ktorí nemali zariadenie od Apple s MacOS , aby mohli používať Sketch , takže veľmi skoro si tento nástroj získal obľubu medzi užívateľmi. Nielen samozrejme tým, že je webový, ale predovšetkým tým, že je dostupnejšie, tak k nemu aj niektorí užívatelia mali bližšie.
Adobe Xd
Spoločnosť Adobe musela nejako zareagovať na to, že sa už nebral Adobe Photoshop ako „hlavný“ nástroj pre návrh webov. A tak v roku 2017 vydala svoju aplikáciu Adobe Xd . ktorá je multiplatformový ( čo znamená, že je možné ich spustiť tak na Windows tak na MacOS ). A rozhodne ju ocenili „fanúšikovia“ produktu od spoločnosti Adobe, pretože vždy ide cítiť v aplikacíh od Adobe , že sa jedná o ich produkt. Takýto ich „podpis“. A naviac pre Adobe nezvyklou cenovou politikou (čo znamená, že Adobe Xd je zadarmo pre osobnú potrebu) si získali nemalý počet užívateľov a fanúšikov. Predovšetkým tí, ktorí boli zvyknutí na Adobe Photoshop , mohli plynule prejsť na Adobe Xd a pokračovať.
Koľko to stojí?
Toto je asi hneď druhá otázka, ktorá vás napadne, keď sa rozhodujete, akému nástrojmi sa budete venovať.
Sketch | Figma | Adobe Xd | |
Základná cena pre jednotlivca | $99 1.rok obnovenia je za $79 | zadarmo | zadarmo pre osobnú potrebu |
Cena pre tím | $9/mesiac/člen | $12/mesiac/editor | 12,09 €/mesiac/člen |
Takže ak niekto chce začať, potom jednoduchšie cesta je cez Figmu a Adobe Xd , kedy máte na neobmedzenú cestu možnosť sa učiť, skúšať a tvoriť podľa podmienok, ktoré má každá platforma. U Sketch je možnosť 30-dňový trial.
Ako na návrh?
Na túto otázku rozhodne nie je jednoduchá odpoveď, pretože sa jedná jedná o kreatívnu činnosť, ktorá sa hodnotí veľmi subjektívne. A za ďalšie je to veľmi široké téma, ktorá by sa nezmestilo ani na niekoľko článkov. Skôr si môžeme popísať princípy, ktoré sú väčšinou rovnaké.
- Jedná sa o vektorové nástroje – tzn. väčšinou všetko je krivka, ale môžeme tu pracovať aj s rastrovými obrázkami.
- Rozloženie ( demonštrované na Sketch v70 ) je vľavo panel , kde máme objekty, skupiny alebo komponenty ( niečo ako vrstvy v Adobe Photoshop ), uprostred je canvas , čiže priestor pre samotný návrh a vpravo je panel s vlastnosťami ( veľkosť, farba a atď ).
- Základné stavebné prvky:
- Rectangle ( klávesová skratka R ) – čiže obdĺžnik, môže byť ako tlačidlo alebo priestor pre obrázok alebo celé menu
- Text ( T ) – možnosť vkladať texty
- Oval ( O ) – možnosť vkladať oválne elementy ako elipsu a kruh
- ďalšie prvky už sú speficické pre jedntlivé nástroje (napríklad Line (L), Rounded (U) pre Sketch, Polygon (Y) pre Adobe Xd)
- Ďalšie spoločným rysom sú komponenty , takže zo základných stavebných prvkov môžeme poskladať zložitejšie objekty a z tých potom vytvárať komponenty. Komponenty sú typicky také, ktoré sa opakujú.
Aká je možnosť zdieľania?
Keď už vytvoríme nejaký návrh ( webu, mobilné aplikácie ), tak väčšinou chceme druhej strane nejako ukázať našu prácu a väčšinou nechceme všetko posielať do e-mailu. Na túto možnosť už tieto nástroje myslí, takže Sketch má Skecth cloud , Figma je už sama od seba webová , takže tu sa to očakáva a Adobe Xd strong> umiestňuje svoje návrhy na Adobe Assets . Takže výsledok je taký, že vždy máte možnosť nasdílet svoju prácu ďalej a potom už záleží, čo od toho čakáte. Ak z pohľadu developera, ktorý vyvíja ( tak je tu väčšinou inspector – Sketch a Figma ) alebo naopak chcete komentovať návrh napríklad z pohľadu zákazníka alebo product OWNER. Jednoduchá ukážka v rámci Sketch resp. Sketch Cloud je na tomto odkaze – návrh webu JH9 .
Čo ďalej?
Pravdepodobne to z článku išlo poznať, ale našim primárnym nástrojom je Sketch – aj keď sa snažíme zisťovať si informácie aj o ďalších nástrojoch Figma a Adobe Xd , tak nemôžeme z praktického hľadiska pridať viac. Takže tu nakoniec dáme niekoľko videí, ktoré sú podľa nás dobré pre pokračovanie v danom nástroji.