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

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 .

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

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

SketchFigmaAdobe Xd
Základná cena pre jednotlivca$99 1.rok obnovenia je za $79zadarmozadarmo pre osobnú potrebu
Cena pre tím$9/mesiac/člen$12/mesiac/editor12,09 €/mesiac/člen
Základné porovnanie ceny Sketch, Figma a Adobe Xd.

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ú.
Návrh webu či aplikácie (Sketch, Figma a Adobe Xd)

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

Mobilná aplikácia, Nezaradené, Webové aplikácie, Webové stránky, Zaujímavosti
Adobe Xd, Figma, Návrh aplikácie, Návrh webu, Sketch, Sketch Cloud
Ako tvoríme webové stránky v Brne?
Aký frontend framework zvoliť?