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

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

  1. visionslabs
  2. Naše služby
  3. Mobilní aplikace
  4. Návrh webu či aplikace (Sketch, Figma a Adobe Xd)

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

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

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

SketchFigmaAdobe Xd
Základní cena pro jednotlivce$99 1. rok
obnovení je za $79
zdarmazdarma pro osobní potřebu
Cena pro tým$9/měsíc/člen$12/měsíc/editor12,09 €/měsíc/člen
Základní porovnání cen Sketch, Figma a Adobe Xd.

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

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

Mobilní aplikace, Obecné novinky, Webové aplikace, Webové stránky, Zajímavosti
, , , , ,
Jak tvoříme webové stránky v Brně?
Ohlédnutí za rokem 2020

Další podobné články

Menu