7 jó tanács a tiszta, modern design érdekében

Modern Design

A tiszta, elegáns és szép design többnyire csak ízlés kérdése. Hetente több száz weboldalt nézek meg, amik közül szép számmal akadnak számomra vonzóak, ám ez nem jelenti azt, hogy mindenki másnak elnyernék a tetszését. Azonban mindig vannak trendek a design világban, amiket érdemes szem előtt tartani.

Vannak a minimalisták akik csak szövegeket (remek tipográfiával) és gridet (rácsot) használnak. A minimalista design természetesen nem rossz, de sok ember esetében a képek és színek széles skálájának hiánya nem éri el a látogatók ingerküszöbét és pár másodperc után továbbállnak. Legyen bármilyen jó a tipográfia, legyen kiváló az elrendezés, egy átlagos látogató nem fogja magát hanyatt vágni. Ezek alapján okos dolog nem keverni a minimalista designt a modernnel, hiszen a kettő halmaz nem fedi egymást.

Ebben a cikkben kapsz 7 fegyvert, amivel leveheted látogatóid a lábukról és joggal ragaszthatod a dizájnodra: Modern. Mert ahogyan offline is a külső az első meghatározó pont, a weben is azzal kell elkapni a figyelő tekinteteket. A kinézet mellett azonban érdemes a tartalomra is figyelni.

1. Hely

Térközöket nyugodtan használhatsz a különböző tartalmak vizuális elkülönítésére, így nem kell különböző dobozokat, vonalakat vagy más hasonló grafikai elemeket használnod. A térközök fontos részei a modern dizájnoknak. A térközök adják a tartalom olvashatóságának esszenciáját (pl.: bekezdések). Helyes használata esetén az oldal elrendezésének tiszta és modern hatást ad.

A vonalzó és a rácsháló (grid) segítségével könnyedén megadhatod a dizájnhoz szükséges térközöket, margókat, paddingokat. A rácsháló (grid) réteg lefedi a teljes dokumentumod, amire szabadon elhelyezheted a számodra szükséges segédvonalakat. Már a design készítésének legelső pillanatában készítsd el ezt a bizonyos hálót, hogy a későbbiekben legyen mihez tartanod magad.

Photoshopban a CTRL+R (Win) és a CMD+R (Mac) billentyűkombinációkkal teheted elérhetővé a vonalzókat, erre is utal az R(uler) betű. Ezek után kattintsuk a vonalzóra és húzzuk el az egeret a megfelelő pontig, a Photoshop pedig elintézi hogy odakerüljön a segédvonal. Néhány további hasznos gyorsbillentyű:

  • Segédvonalak mozgatásához: CRTL (Win) vagy CMD (Mac) gomb lenyomása mellett kattintsunk rá, majd húzzuk a segédvonalat.
  • Segédvonal mutat/rejt: Ctrl+; (Win) vagy Cmd+; (Mac). Angol billentyűzet hiányában: View -> Show -> Guides
  • Rács mutat/rejt: Ctrl+’ (Win) vagy Cmd+’ (Mac). Angol billentyűzet hiányában: View -> Show -> Grid
  • Minden extra mutatás/rejtés: Ctrl+H (Win) vagy CMD+H (Mac)

Ps Grid

Másik hasznos lehetőség a Smart Guides (View > Show > Smart Guides). Alakzatot, szöveget vagy réteget mozgatásakor autómatikusan megjelenő segédvonalaknak köszönhetően nem kell fölösleges segédvonalakat használnunk. Rengeteg időt takaríthatunk meg ezzel az funkcióval. Smart Guides bemutató itt.

2. Térhatás

Megvilágítással és árnyékolással könnyedén izgalmassá és valósághűvé tehetjük a dizájnjaink. Árnyékot tehetünk bármely rétegre, legyen szó külsőről vagy belsőről. A trükk az egészben az, hogy olyan színt kell használni, ami egyezik a háttérszínnel, így sokszor kell mondanunk a fránya feketének.

Árnyék

Nem minden árnyéknak kell feketének lennie.Keverjük a belső árnyékot (inner shadow) egy fehér vagy világos színű külső árnyékkal (drop shadow) hogy elérjük a megfelelő térhatást.

Színátmenetes Űrlap

3. Részletek

A színátmenet eszköz (Gradient Tool) és a színátmenet réteg hatás (Gradient Layer Effect) hihetetlen fontos szerepet játszik a modern és tiszta dizájnban. A színátmenetek a modern dizájn minden szegletében felütik a fejüket, legyen szó hátterekről, árnyékokról, gombokról, fényhatásokról stb.

A színátmenet eszköz megtalálod a eszköztárban, de elérheted a Shift + G kombinációval is. Ezután a képen kattintsunk a kívánt helyre, majd húzzuk az egeret a színátmenet befejezésének pontjába és voilà. A hagyományos színátmenetet módosítás macerás, pontosan ezért találták ki a későbbiekben könnyen módosítható színátmenet réteg hatást (Gradient overlay). Utóbbit a kívánt rétegen dupla kattintással érhetjük el, az alábbi módon:

Színátmenet hatás

Ha gombokról és menüsorokról van szó, kiváló fegyver a lágy térhatás eléréséhez, ahogyan az alábbi illusztráció is jól mutatja:

Színátmenet példa

4. Elhatárolás

A határvonalak és keretek használatával garantálhatod hogy a dizájnod elérje a kívánt kontrasztot.

Ami a kereteket illeti, használjunk inkább körvonal réteg hatást (stroke) abban az esetben, ha egy elem minden oldalán ugyan olyan kiemelésre van szükségünk, ezzel felszabadíthatjuk a belső és külső árnyékot (inner & drop shadow), így bővítve a réteg formázási lehetőségeinket. (Spóroljunk, ha már lehet.)

Sor kijelölés

Ahelyett, hogy határvonalakat különböző alakzatok levagdosásából és átméretezéséből (ill. újabb segédvonalak beiktatásával) készítenéd, van egy jobb megoldás is a számodra. A sor kijelölő eszköz (single row marquee tool) segítségével könnyedén hozhatsz létre a már meglévő réteg alapján egy vízszintes vonalat (horizontal rule), amit aztán természeten kedvedre formálhatsz (például a 2. és 3. pont alapján).

5.) Anyagok

A tiszta és modern dizájnoknak nem kell fehérnek, egyszerűnek és unalmasnak lenniük. A textúrák és minták (pattern) és megfelelő használata hihetetlen löketet tud adni egy dizájn hangulatának, mindamellett stílust és profizmust kommunikál. Használj olyan kifinomult technikákat, mint a zaj hozzáadása (Filter -> Noise -> Add noise) vagy minta réteghatást (Pattern overlay). Minél több tiszta és valós “anyagot” használsz fel a dizájn alkotta világban, annál csábosabb lesz a látogatók szemében. (Tipp.: Ha már az olyan nagy weboldalak is bevállalják mint a Youtube, rossz nem lehet 😉

Zaj

Zee7

6.) Perspektíva

A perspektíva a legkevésbé kihasznált technika a modern webdizájn területén, mert a középpontban következetesen a szimmetria és a rácsháló áll (Grid). A különböző elemek és grafikák perspektívájának testreszabásával újabb adag térhatást, modernizmust és vonzerőt csempészhetsz a dizájnodba, amihez nem kell több egy lépésnél.

Bármilyen forma (Shape) vagy kép perspektíváját teste szabhatod a “Free transform path” segítségével, amit megtalálsz a felső eszköztáron, miután az adott rétegen beléptél a “Wrap” módba (Ctrl+T [Win] vagy Cmd+T [Mac]).

Wrap

A perspektíva illúzióját kihasználva létrehozhatsz továbbá aszimmetrikus alakzatokat is, amihez természetesen elengedhetetlen, hogy a megfelelő árnyékolások és színátmenetek ne hiányozzanak.

RenderWave

7.) Olvashatóság

A félkövér (vagy még annál is kövérebb) betűstílusok igen népszerűek a dizájnerek között és meglehetősen fontos részét képezik a modern dizájnoknak. A félkövér betűknek köszönhetően sokszor elhagyhatok a különböző grafikai elemek, amik többnyire csak bonyolítanák a dizájnt.

Ahhoz, hogy a szöveghez textúrát adjunk (vagy egyéb effekteket vigyünk fel rá), a szöveg réteget (text layer) át kell alakítanunk Smart Object-é, ehhez nem kell mást tennünk, mint jobb klikkelni az adott rétegen majd kiválasztani a “Convert to Smart Object” opciót. Alap esetben a szöveges réteg formázási lehetőségei korlátozottak, tehát ahhoz, hogy teljes értékű rétegként tudjuk használni, raszteres réteggé (rétegen jobb klikk -> Rasterize Type) kellene alakítanunk. A Smart Object-nek hála, a szöveget később is tudjuk majd szerkeszteni továbbá megmaradnak annak sajátosságai (betűtípus, betüméret, stb).

Ne feledd, a későbbi Sitebuild során a CSS megírásakor majd reprodukálni kell a betűközt, betűtípust, betűméretet, betűszínt és a betűk egyéb tulajdonságait is, így ésszerű a szöveges rétegek raszterizálása helyett Smart Object-é alakítani azokat. Továbbá a a betűk élsimításánál ajánlott a “Crisp” vagy “Sharp” opciót választani.

Karakter beállítások

Az, hogy hogyan tálalja egy dizájn a tartalmát, mindennél fontosabb a modern dizájnban. Ha fenti tippeket és tanácsokat megfogadod, jó eséllyel indulsz el a hatékony és szép modern dizájn készítés útján. A Webragacs sok szerencsét kíván neked 😉

Jeroen

Forrás: Webdesigner Depot

Koller József írása –

Közel tíz éve foglalkozom informatikával, azon belül főként a webfejlesztéssel. Nem vagyok designer, de ettől teljesen függetlenül rajongok a szépen megtervezett grafikákért. Munkám első sorban a háttérben zajlik, ugyanis "kódolással" foglalkozom.

  • Ha tetszett a cikk, osztd meg!