5 dôvodov, prečo sme pri návrhu web stránok prešli na Adobe Experience Design

Publikoval Igor Fedorko 23. marec 2018

Prečo používať Adobe XD | SMASH BLOG

Pre návrh wireframov a hotových vizuálov web stránok sme tak ako aj iní dlhé roky vo firme Smash používali program Adobe Photoshop. Tento už legendárny program má mnoho funkcií a jeho možnosti pri dizajnovaní aj web stránok doslova nemajú hranice. Každopádne faktom ostáva to, že primárne bol tento program určený pre fotografov a pri vytváraní zložitej webovej aplikácie, ktorá pozostáva napr. zo stoviek obrazoviek, bolo navrhovanie pre dizajnéra vo Photoshope doslova nočnou morou. Prirodzene sa na trh dostali rôzne alternatívy určené pre UX/UI dizajnérov a jedným z nich bola aj appka Sketch (len pre Mac užívateľov), ktorý sa stal veľmi obľúbeným (tiež sme ho istú dobu u nás testovali) a Adobe tak na túto situáciu zareagoval vývojom svojej vlastnej aplikácie pre UX dizajnérov pod taktovkou šikovného českého odborníka Toma Krchu.

Začiatkom tohto roka sme sa vo firme rozhodli pre zásadnú zmenu a pri návrhoch web stránok, webových a mobilných aplikácií sme sa rozhodli prejsť na nový, moderný program Adobe XD. Medzi hlavné výhody programu Adobe XD patrí to, že je primárne určený pre vytváranie návrhov web stránok, webových a mobilných aplikácií. Neobsahuje zbytočne veľa prvkov, funguje tak omnoho svižnejšie a práca pri návrhu web stránok je viac intuitívna. Pozrime sa teda na 5 základných výhod tejto aplikácie a prečo sme sa ju u nás v Smashi rozhodli používať:

1. Užívateľske prostredie

Prostredie alebo interface programu je veľmi čisté, prehľadné a intuitívne, čo je veľkou výhodou. Centrom pozornosti dizajnéra ostávajú artboardy a jednotlivé ovládacie prvky aplikácie tak neodpútavajú pozornosť. Keď si to porovnáte s Photoshopom, je to iný svet, množstvo ovládacích prvkov nahralili základné tooly, ktoré dizajnér reálne používa. Zároveň Adobe Xd obsahuje množstvo nových nástrojov, ktoré sú určené vyslovene pre UX dizajnérov a tým je aj napr. Repeat Grid tool, ktorý Vám umožní vytvárať opakujúci sa obsah ako napr. články v blogu, položky v katalógiu a pod. extrémne rýchlo a efektívne.

Prototyping web stránko v Adobe XD | SMASH BLOG

2. Prototype mode

Akonáhle chcete dodať Vášmu dizajnu a jednotlivým jeho súčastiam interaktivitu, prejdete do tohto módu. Jednoduchým spôsobom prepojíte jednotlivé súčasti dizajnu ako napr. buttony alebo odkazy v hlavnom slideri na podstránky. Okrem toho môžete k jednotlivým prechodom pridať aj vlastnú animáciu a nastaviť pre ňu ďalšie parametre.

Prototyping web stránko v Adobe XD | SMASH BLOG

3. Možnosti exportu

Vývojari web stránok si pri práci s XD môžu pochvaľovať výborné možnosti exportu jednotlivých prvkov návrhu ako sú napr. textúry na pozadí, obrázky, či farby a fonty použité v dizajne. Aplikácia podporuje exportovanie podkladov aj pre Retina displeje a uľahčuje tak prácu pre developerov.

Možnosti exportu podkaldov pre developerov v Adobe XD | SMASH BLOG

4. Práca so symbolmi

Ak webdizajnér pracuje na veľkom projekte, ktorý pozostáva z desiatok či stoviek podstránok, tak zmena farby tlačidla môže byť niekedy zložitou a zdĺhavou úlohou. XD túto prácu minimalizuje a poskytuje priestor pre ukladanie jednotlivých UI prvkov dizajnu ako sú tlačidlá, či formuláre. Zmena ich vizuálu je tak otázkou pár klikov.

Práca so symbolmi v Adobe XD | SMASH BLOG

5. Možnosti prezentácie

Akonáhle máte dizajn hotový, viete ho publikovať a Váš nový návrh webstránky či mobilnej aplikácie nájdete na vygenerovanom odkaze. Ten zvyčajne okrem ďalších podkladov posielame klientovi, ktorý si návrh web stránky môže pozrieť "live" vo svojom prehliadači v reálnom rozlíšení. Jeho skúsenosť je navyše obohatená o možnosti klikania na aktívne prvky dizajnu, čo je v porovnaní so statickými obrázkami vyexportovanými z Photoshopu veľmi veľký posun vpred. Klient okrem iného môže priamo do návrhu vkladať svoje komentáre a jednoduchšie tak posunúť svoju spätnú väzbu.

Prezentácia výsledného grafického návrhu webstránky či mobilnej aplikácie v Adobe XD | SMASH BLOG

Záver a čo si z tohto blogu zapamätať

Adobe XD je jednoznačne veľmi užitočná aplikácia, ktorú odporúčam každému dizajnérovi, ktorý sa venuje tvorbe a návrhu webových stránok či mobilných aplikácií a rôznych iných užívateľských rozhraní. Zjednodušuje prácu, výstupy sú kvalitnejšie a jeho komplexnosť určite ocenia aj developeri. Medzi jeho nevýhody patrí to, že nie všetko na čo ste zvyknutý z Photoshopu je možné z vizuálneho hľadiska urobiť. Avšak aj tento nedostatok je možné vyplniť jednoducho tým, že si pri návrhu vizuálne náročnejších grafických podkladov pre návrh dopomôžete Photoshopom.



Igor FedorkoAutorom blogu je Igor Fedorko
UX/UI dizajnér v internetovej spoločnosti Smash a odborný asistent na Fakulte manažmentu na Prešovskej Univerzite



Naspäť na zoznam článkovChcem bezplatnú konzultáciu