Az Adobe Illustrator visszatérőben van a webdesign világában. Nemcsak az SVG válik általánossá az interneten, hanem egyre több tervező használja a vektorokat drótvázlatok készítéséhez. A következő tippek segítenek abban, hogy a lehető legtöbbet hozza ki az Illustratorból mint drótvázlatkészítő eszközből.

A drótvázlatkészítés a gyors munkavégzésről és a gyors iterálásról szól. Nem az a cél, hogy vonzó felületeket hozzon létre; az első számú prioritás az információ és az élmény megtervezése.

1. Go Monochrome

A drótvázak egyértelművé teszik a hierarchiát egy weboldalon; vizuálisan bemutatják, hogy a felhasználóknak milyen sorrendben kell feldolgozniuk a rendelkezésre álló információkat. Ha azt szeretnénk, hogy a felhasználók előbb dolgozzák fel a főcímet, mint a “vásárlás most” gombot, akkor a főcímnek nagyobb figyelmet követelve kell “túlszárnyalnia” a gombot.

Ez a vizuális hierarchia többféleképpen is meghatározható. Használhatjuk a méretet, hogy a főcím hatásosabb legyen, használhatjuk a pozicionálást (a gomb elé helyezve). Használhatnánk színt, kontrasztot és egy sor más dolgot, de ha ezt egy drótvázban tesszük, az csak még zavarosabbá teszi a dolgokat.

A színt kivonva az egyenletből, a pozíció, a méret és (ha extra lépést akarunk tenni) a kontraszt által meghatározott vizuális kapcsolat sokkal tisztább.

Mi itt nem szép, pixel-tökéletes UI-készleteket építünk. Maradjunk a szürkék korlátozott skálájánál, és csak a címkékhez és a jegyzetekhez használjunk színt.

2. Tartsa meg a rétegeket speciális célokra

A címkékről, jegyzetekről és megjegyzésekről szólva, jó ötlet, ha mindegyiket külön rétegre helyezi. Ugyanez vonatkozik minden másra is, aminek konkrét célja van; például viselkedés, interakció, gesztusok és így tovább.

Tegye a vizuális elemeket az egyik rétegre, a viselkedést egy másikra, a címkéket pedig egy másikra, hogy szükség esetén könnyen átkapcsolhassa a láthatóságukat.

3. Használja ki a szimbólumokat

A D.R.Y.-t általában programozási kifejezésként használják, de ugyanúgy alkalmazható a tervezési munkafolyamatokra is. Bármelyik drótvázban bizonyos objektumokat fogunk használni és újrafelhasználni. Ezeket az objektumokat alakítsuk át szimbólumokká, és minden változtatás, amit az egyikben végrehajtunk, azonnal megjelenik a többiben is.

Itt van például egy egyszerű űrlapmező:

Húzzuk át a Szimbólumok ablaktáblába (Shift + Command + F11)

Ezt a szimbólumot most a Szimbólumok ablaktáblából annyiszor húzhatjuk át a rajzlapra, ahányszor csak akarjuk. Bármelyikre duplán kattintva elszigeteljük (kicsit úgy, mint a csoportosított objektumokat), hogy szerkeszteni tudjuk. Bármilyen változtatást végzünk, ebben az esetben a téglalap sarkainak lekerekítését, az összes általunk használt űrlapmező szimbólumra alkalmazni fogjuk.

Ha már megvan a szimbólumok gyűjteménye, el is menthetjük őket készletként:

Ez lehetővé teszi, hogy a jövőben más fájlokba töltsük őket.

Ha többet szeretne megtudni a szimbólumpalettáról, nézze meg a Gyors tippet: Munka szimbólumokkal az Adobe Illustratorban.

4. A szimbólumokkal való munka az Adobe Illustratorban. A nyílhegyek tökéletesek a mutogatáshoz

Egy nagyszerű tipp a vonalkázó nyílhegyek kihasználása, ami az Illustratorban a CS5 óta azonnal rendelkezésre áll. A drótvázak ideális lehetőséget nyújtanak az interakciók, az alkalmazás áramlásának, a navigációnak és a mozgásnak a vizuális leírására.

Egyszerűen adhatunk nyílhegyeket a stroke-okhoz, közvetlenül a Stroke ablaktáblából.

Még az Illustrator “Arrowheads.ai” forrásfájlját is szerkeszthetjük, ahogy azt Ryan Cornwell elmagyarázta, és hozzáadhatjuk a saját nyílhegyeinket.

Megjegyzés: Bosszantó módon a cseppentő eszköz nem alkalmazza a nyílhegyeket más vonásstílusokkal együtt, így nem olyan egyszerű a választott hatás megduplázása, mint lehetne. De ettől függetlenül tökéletesek drótvázlatkészítéshez.

5. Snap to Grid for Unified Spacing and Sizing

Ez sok szempontból a színek használatának mellőzéséből következik. A méretek és a távolságok egységesítése eltávolítja a drótvázakról a figyelemelterelő elemet, és segít vizuálisan a fontos dolgokra koncentrálni.

Nem számít, ha a pontos méretek nem tükrözik azt, hogy milyen lesz a felhasználói felület a későbbiekben; amíg a hierarchia és a kapcsolatok hűek maradnak, addig minden rendben van.

Alkalmazzon rácsot az Artboardon a View > Show Grid menüponttal. A View > Snap to Grid (Nézet > Rácshoz illesztés) kiválasztása segít az objektumok pontos pozícionálásában.

Az Illustrator > Preferences > Guides & Grid (Rács) menüpontba lépve pontosan megadhatjuk, hogy milyen legyen a rácsunk (és ne feledjük, itt nem az apró részletességre törekszünk). Ha ott vagy, meghatározhatod a rácsvonalak közötti távolságot, majd megadhatod, hány alosztást szeretnél ezeken a vonalakon belül.

Megjegyzés: Nyugodtan színezd ki a rácsodat a szürkétől eltérő színűre; ez nem lesz része a végterméknek.

6. Légy óvatos! Grafikai stílusok használata rugalmas gombokhoz

A hűség szintjétől függően (mennyire hű a végleges weboldalhoz, amire törekszik) lehet tényleges szöveg például a gombokon belül. Ahhoz, hogy ezek a gombok a bennük lévő tartalomtól függően nőjenek és zsugorodjanak, ne objektumokat, hanem grafikus stílusokat használjunk.

Kezdjük egy álszövegsorral.

Most nyissuk meg a Megjelenés ablaktáblát az Ablak > Megjelenés menüpontra kattintva.

A Megjelenés ablaktábla segítségével több kitöltést adhatunk egy objektumhoz. Ezeket a kitöltéseket a kívánt sorrendben rétegezhetjük; ezen a képen több is látható, egymásra halmozva.

Előre csak két kitöltésre van szükségünk, ezért adjunk hozzá egy sötét kitöltést a szöveghez, majd egy világosabb színt a háttérhez.

A halványszürke hátteret jelenleg nem látjuk, mert pontosan ugyanolyan alakú, mint a legfelső kitöltés. Elkülöníthetjük és manipulálhatjuk azonban az egyes kitöltéseket külön-külön. Jelöljük ki az alsó kitöltést a Megjelenés ablaktáblán, majd lépjünk a Hatás > Alakká alakítás > Kerekített téglalap…

Adjunk meg néhány beállítást, amit csak jónak látunk, csak arra ügyeljünk, hogy a méret az objektumhoz viszonyítva legyen, amelyre ezt alkalmazzuk.

A halványszürke alsó kitöltés most már a szöveg méretéhez viszonyítva egy kerekített téglalap formáját vette fel. Egy gomb! Ha ezt a megjelenést más objektumokra is alkalmazni szeretné, nyissa meg a Grafikai stílusok ablaktáblát, és húzza bele az egész gombot. Megjelenése stílusként lesz elmentve, amelyet újra felhasználhat.

Itt van például egy hosszabb szövegsor. A szöveg kijelölésével kattintson az újonnan létrehozott grafikus stílusra (amelyre duplán kattintottam és átneveztem), hogy azonnal alkalmazza azt.

7. Néhány gyakran használt művészeti tábla beállítása

A drótvázlatkészítésnél a gyorsaság a játék neve! Firkálj le egy elrendezést, lépj tovább, firkálj le egy másikat, lépj tovább. Ezért van értelme, ha van egy kész kiindulópont, amelyhez könnyen hozzáférhet. Lehet, hogy először egy hatalmas artboardon dolgozik a legjobban, és a véglegesített objektumokat egy külön fájlba húzza, de az is lehet, hogy inkább közvetlenül a megfelelő méretű artboardokkal dolgozik.

Itt van például egy elrendezés egy iPad képernyővel (1536x2048px) és négy iPhone 4S képernyővel (640x960px), bár tetszőleges számú készülék képernyőpéldájával is elkészíthet egy fájlt. Vagy kézzel állítsa be a kívánt méreteket, vagy válasszon az Artboard Options (Művészeti táblák beállításai) elérhető előbeállítások közül:

Vegye fel a közös útmutatókat, rétegneveket, szimbólumkészleteket stb. amelyeket használhat, majd mentse el az egészet sablonként a későbbi használatra (Fájl > Mentés sablonként..) Ez a kiindulási pont ezután a Fájl > Új sablonból.. menüpontra kattintva elérhető lesz az összes otthagyott aprósággal együtt.

8. A következő lépésekkel a sablonból… (Fájl > Új sablonból..). TextExpander használata álszöveghez

Az Illustrator nem rendelkezik álszöveg-eszközökkel. Van néhány szkript, amelyekkel érdemes játszani, de a legegyszerűbb módja annak, hogy dummy szöveget juttasson az Illustrator Wireframe-jeibe, a TextExpander használata.

Figyelem: ha Windows-felhasználó vagy, a PhraseExpress a TextExpanderhez hasonló funkciókat kínál

Adj hozzá egy sor olyan szövegrészletet, amelyet gyakran használsz a drótvázakhoz (például egy nagy cím, egy rövid cím, különböző hosszúságú törzsszöveg, tipikus gombszöveg, menüelemek és így tovább), hogy könnyen elérhetőek legyenek az Illustratorból.

Azáltal, hogy minden egyes snippethez meghatároz egy kulcskifejezést, a TextExpander ezt a kifejezést az Ön tartalmával helyettesíti, amikor csak beírja, így rengeteg időt takarít meg. A mappabeállítások segítségével azt is elérheti, hogy ezek a snippetek csak az Illustratorban érvényesüljenek, ha úgy kívánja.

Ha többet szeretne megtudni a TextExpander munkafolyamatának optimalizálásáról, nézze meg a Master TextExpander With These Helpful Tips & Tricks

9. Gyakorolja a logikus fájlelnevezést

A változtatások és ötletek gyors vizualizálása a drótvázlatkészítés középpontjában áll, de ez egy hatalmas halom rendezetlen fájlhoz vezethet, ha nem vigyáz. A kulcs az, hogy jelentős szakaszokban és logikus fájlelnevezési konvenciókkal mentsünk.

Elképzelhető például, hogy minden fájlnevet annak az oldalnak a nevével kezdünk, amelyen éppen dolgozunk. Ezután célszerű lehet valamilyen változónevet használni, utána pedig a verziószámot: page-variant-version.ai

Előfordulhat például, hogy egy landing page-en dolgozunk; olyanon, amely vagy egy e-mail kampány, vagy egy ebook népszerűsítésére koncentrál. Ilyen fájlneveink lehetnek:

Ez nemcsak a projektmappákat tartja rendben, hanem egyfajta kézi verziókezelésként is működik. Matt Smith bővebben tárgyalja az ötletet a Wireframing With Illustrator and InDesign című cikkében.

10. Mentés a Dropboxba az egyszerű verziókezelésért

A verziókezelés gondolatát még tovább víve, a fájlok közvetlen Dropboxba mentése teljesen eltávolítja ezt a feladatot a todo listáról. Még a Dropbox ingyenes csomagja is harminc napig tárolja a fájlok egy-egy másolatát minden egyes mentéskor.

A Layervault is hasonló félelmetes lehetőségeket kínál az ingyenes csomagjában.

Ez mindkét esetben különösen hasznos, ha egy csapattal dolgozik együtt. Az, hogy minden tag egy központi helyről dolgozhat, és bármelyik verzió visszaállítható, ha valaki valami furcsát csinál, ideális a csapatmunkához.

Következtetés

Ezek közül a tippek közül sok teljesen az én saját munkafolyamatomra vonatkozik, és nem biztos, hogy tökéletesen átültethető az Ön munkamódszerére. Remélem azonban, hogy legalább némi kíváncsiságot váltanak ki, és elgondolkodtatnak a webes elrendezések huzalozásának módjáról. Ha neked is vannak saját tippjeid, oszd meg őket a hozzászólásokban!

További olvasnivalók

• Drótvázolás InDesign és Illustrator segítségével
• Drótvázolás Illustrator és InDesign segítségével (finom különbség!)
• A kezdők útmutatója a drótvázoláshoz
• Illusztrátor és nyílhegyek