Design trend: matt üveghatás a webdesignban

 Design trend: matt üveghatás a webdesignban

John Morrison

Design trend: matt üveghatás a webdesignban

Az elmosódás és az átlátszóság megfelelő kombinációjával a weboldal- és alkalmazástervezés egyik legmenőbb trendjét, a matt üveghatást érheted el.

Ez egy olyan tervezési technika, amely gaussos elmosódást, árnyékokat és átlátszóságot használ, hogy olyan elemet hozzon létre, amely a valóságos matt üvegen keresztül történő nézést utánozza.

Nézzünk meg hét különböző módot ennek a dizájn trendnek a felhasználására.

És ha még több inspirációra van szükséged, nem meglepő, hogy a Dribbble tele van matt üveg designötletekkel!

Envato Elements felfedezése

Rétegelt tervezési elemek

A hatások kombinációja - elmosódás, árnyékok és átlátszóság - miatt a matt üveg technika jól működik egy többrétegű dizájnban.

Ez a példa azért szép, mert láthatod a háttér sötét és világos elemeit, és láthatod, hogyan működik az átlátszóság.

Akár egyetlen elemnél, akár egymásra helyezve, mint a fenti példában, finom mélységet hoz létre oly módon, hogy a háttérelemek át tudjanak nyomulni. Ez a példa azért szép, mert láthatjuk a háttér sötét és világos elemeit, és azt, hogyan működik az átláthatóság. Figyeljük meg a lágy árnyékot a nagyobb "üveg" terület fehér széle körül, hogy egyértelműen megkülönböztethető legyen a két elem.azt és a hátteret.

Ez az effekt is része a ragacsos navigációnak. Ha nem vagy biztos benne, hogyan kell használni az üveghatást, az ilyen típusú navigációs elemhez gyönyörűen használható, és jó kiindulópont lehet.

Ikon tervezés

A matt üveg ikonok egy újfajta változata annak az ikonstílusnak, amelyet a legtöbb tervező már régóta használ. Ez azonban egy trükkösebb felhasználási módja lehet a trendnek.

Mivel az ikonok olyan kicsik, a matt effektek vizuálisan bonyolultabbá tehetnek bizonyos terveket. Ez valószínűleg leginkább olyan ikonok esetében működőképes, amelyeket túlméretezett módon használnak majd.

Egy másik járható út az olyan tervek esetében, amelyek nem tartalmaznak sok ikont, és az összes forma és felhasználás eléggé szabványos és érthető.

Színes háttér

A matt üveghatás lehet egy weboldal hátterének alapja.

A trükk, hogy ez működjön, az, hogy a háttérképet vagy a színeket olyan mértékben elmosodjon, hogy a felhasználó ne próbálja kitalálni, hogy miből áll a háttér. Csak egy lágyabb, szinte pacákból álló színnek kell lennie.

A legtöbb tervező, aki matt üveg hátteret használ, hűvös színekkel dolgozik (ez hangsúlyozza a téli hangulatot).

A fenti példa kettős mázas réteget használ a háttérrel és a háttéren átívelő közép-föld elemmel. A fehér terület és a színes háttérbe ívelő ív erős kombináció, amely érdekességet biztosít egy olyan dizájn számára, amely nem tartalmaz sok erősen vizuális elemet.

Kártya-stílusú blokkok

A matt üveghatás ideális a kártyaszerű blokkokhoz az elemek közötti elválasztás megteremtéséhez.

A fenti üvegkártya-példában a design egy hitelkártya stílusú elemet használ, de ez szinte bármilyen hasonló átfedéshez újraértelmezhető. Fontolja meg egy ilyen stílusú kártya stílusú blokk használatát blogbejegyzések tárolójaként egy magazin formátumban, vagy vaskos blokkszerű gombokként egy alkalmazás designjában.

Rengeteg különböző lehetőség van ennek a megjelenítési lehetőségnek a használatára.

A másik dolog, amit ez a példa eszünkbe juttat, az az, hogy hogyan lehet matt üvegelemeket rétegezni egy sötét felületen. Figyelje meg, hogy a matt üveg hogyan lágyítja az egész tervezési körvonalat.

Domináns művészet

A mázas üveghatás legkevésbé gyakori felhasználási módja a weboldalak tervezésénél valószínűleg a domináns művészeti elem, de erre a célra is alkalmas lehet.

A fenti példában a fagyos előtér animáció szolgál fókuszpontként, miközben animált háttérszöveg gördül.

Ha domináns művészeti elemként használjuk, a kihívás ezzel a hatással kapcsolatban az, hogy ne legyen "túl puha". Azt szeretnénk, ha a felhasználók megértenék, mit látnak, és tudnák, hogyan lépjenek vele kapcsolatba. A kulcs az, hogy ne áldozzuk fel a használhatóságot a design-effektusért.

Form és gomb ékezetek

A mattüveg-technika alkalmazható a felhasználói felület egyes elemeire a terven belül.

Lásd még: Sketch vs. Figma vs. Adobe XD: Melyik tervezőeszköz a legjobb kezdőknek?

A fenti landing page koncepció egy remek példa arra, hogyan használhatja ezt egy űrlapmezőre.

Ebben a sötét dizájnkoncepcióban a hatás segít a szemet a képernyőn lévő akcióelemre irányítani. Először oda nézel, és pontosan tudod, hogy mi a gal elkötelezettség.

Lásd még: Mi az Omnichannel Experience Design? (És hogyan csinálhatod)

Tervezési szempontból a világosabb űrlapmező a sötét háttéren segít úgy odavonzani, ahogy egy tisztán "szellem" vagy körvonalazott űrlapmező esetében nem tenné, ez a stílus azért népszerű, mert elegáns tervezési elemet hoz létre (még akkor is, ha ez némi használhatóságot áldoz fel).

Lágy háttér réteg

Néha a háttér szuper lágy és egyszerű a matt üveghatásnak köszönhetően. A teljesen fehér háttérrel szemben a kis színes terület némi vizuális fókuszt adhat, hogy biztosítson némi mozgást a képernyőn.

Próbáld meg azonban nem kiterjeszteni a háttérben lévő matt elemet az egész képernyőre.

Ez valószínűleg a legegyszerűbb első megvalósítása egy matt üvegelemnek, mivel tisztán a háttérben van, és nem kell más rétegekre gondolni.

Bár ez a példa egy kis területhez ragaszkodik, ennek nem kell mindig így lennie. Próbáld meg azonban nem kiterjeszteni a háttérben lévő matt elemet az egész képernyőre. A fehér térrel szembeni ellenpontozás segít hangsúlyozni a technikát. Ellenkező esetben csak egy gradiensnek tűnhet.

Következtetés

A mázas üveghatásban az a mókás, hogy kis terekben finom elemként, vagy egy projekt átfogó tervezési koncepciójaként is működhet. A design néhány nagy neve már alkalmazza... nézz csak meg néhány panelt az iPhone-odon, amikor teljesen balra vagy jobbra húzod.

Mivel ennyien játszanak a matt üvegelemekkel, biztos, hogy a jövőben is sokkal többet fogunk látni belőlük.

John Morrison

John Morrison tapasztalt tervező és termékeny író, aki több éves tapasztalattal rendelkezik a tervezési iparban. A tudás megosztása és a másoktól való tanulás iránti szenvedélyével John a szakma egyik legjobb dizájnbloggerjeként szerzett hírnevet. Napjait kutatással, kísérletezéssel és a legújabb tervezési trendekről, technikákról és eszközökről írva tölti, azzal a céllal, hogy inspirálja és oktassa a tervezőtársakat. Amikor nem veszett el a dizájn világában, John szívesen túrázik, olvas, és a családjával tölti az idejét.