Návrh webu či aplikácie (Sketch, Figma a Adobe Xd)

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ť.

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.