Webdesign trend 2009

Az online design az egyik legrugalmasabb, legizgalmasabb és a legtöbbet változó terület a tervezői oldalon. Ezért van szükség arra, hogy a designerek megismerkedhessenek a legújabb trendekkel, technikákkal, technológiákkal, hogy aztán a lehető legjobban jeleníthessék meg azokat projektjeikben. Persze vannak, akik ágálnak mindezek létjogosultsága ellen, de lássuk be, ha mást nem, inspirációnak, és kiindulási pontnak tökéletesen megfelelnek. A 2009-es év stílusai igazán ellentmondásosak, sokszor egymással szembe mennek a különböző design elemek, ennek köszönhetően alkalmazásuk nagy teret enged a tervezők fantáziájának. A könnyebb áttekinthetőség érdekében csoportokra bontva mutatjuk be a trendeknek megfelelő design elemeket és alkalmazásokat.

Print megoldásokra alapozva!

PNG alkalmazás

A GIF fájlokat háttérbe szorító PNG megjelenése színek millióinak felhasználását biztosította a tervezők számára. Jelenlegi felhasználói stádiumában áttetszőségének alkalmazása örvend a legnagyobb népszerűségnek . Ez a design elem hatásosan egységesíti a tartalmat, a háttér elemeivel. Mindezt úgy, hogy az alapkoncepció a print médiában alkalmazott példákra alapoz. Segítségével kiemelhetünk egy-egy lényeges design elemet, információt, amely akár headline-ként is alkalmazható lenne nyomtatásban.

png01

png2

png3


Magazinosodás

“Szintén zenész…” Ez a fejlesztés is a tradicionális print médiából indul ki. Ezt alkalmazva látványos és hatásvadász felületeket érhetünk el. Jellemzője, hogy nem csak a tartalmak elrendezése követi az offline-t, de de hasonlóak a tipográfiai elemek, illusztrációk és néha még a tördelést is a kiindulási ponthoz igazítják. Népszerű alkalmazás, de nem komoly cégek weboldalához. Alkalmazható blogoknál, termékek oldalain, de a legtöbbször portfolióknál találkozhatunk vele. A felhasználási területek pedig még javában kiaknázatlanok!

magazin1

magazin2

magazin3


Dombornyomás

Ez az egyik legérdekesebb trend, amely a közelmúltban megjelent. Egy olyan megoldással állunk szemben , melyet ezidáig igen ritkán alkalmaztak. Lényege, hogy a weboldal főbb szöveges elemei a dombornyomás jellemzőit hordozzák magukon. Előnye, hogy használatával eredményesen ki lehet emelni például a logót, vagy a főbb eligazodási pontokat, gyakran jelennek meg termék-designoknál is.

embossing1

embossing2

embossing3



Játék a betűkkel

Óriás tipográfia

A tipográfiai elemek óriás méretűvé növelése (melyek gyakran a 36 pixelt is meghaladják), és annak következetes használata biztosítja a totális beépülést a látogató emlékezetébe. A nagy méretek nem csak a figyelem megragadását szolgálják, de ugyanakkor egyensúlyt és jól értelmezhető egységet teremt a különböző tartalmak között. Az üzenet ilyen formában való eljuttatását legeredményesebben a design ügynökségek, online szolgáltatások alkalmazhatják, de attraktív megjelenést biztosít a portfoliók számára is.

bigtipo1

bigtipo2

bigtipo3



Betűtípus csere

A fontok szerelmesei mostantól dőzsölhetnek! Ennek a stílusnak az alkalmazásával ugyanis a klasszikus betűtípusokat (Helvetica, Arial, Georgia, Verdana) lecserélhetik egyéni fontokra. Külön élmény, hogy mindezt úgy lehet megoldani, hogy egy az egyben beleolvadjon az általánosan használt fontok és a design elemei közé. Alkalmazásának előnye (amellett, hogy a tervezői paletta szélesedik), hogy növeli a felhasználói élményt, és ezáltal emlékezetükhöz is jobban kapcsolódhatunk.

fontreplacement1

fontreplacement2

fontreplacement3


Merjünk kitörni az állóvízből!

“Rendszer ellenesség”

Kreativitás, kreativitás! Ennél az alkalmazásnál ez hatványozottan igaz. Egy olyan trend, mely egyensúlyt teremt az alapvetően már megszokott és az innovatív megoldások között, s hasznosításának csak a képzelőerő szab határokat. Használata során ki lehet (és ki is kell!!!) ugrani a megszokott dobozos elrendezésből, megszűnhet a „kockafejűség”! Olyan kreatív szemléletmódról, elrendezésről van itt szó, melyek nem részleteznek, csupán impulzív hatásokkal emlékeztetnek a megszokott navigációs pontokra, de talán pont ezért lett ez az alkalmazás különösen fontos, és nem mellékesen népszerű például ügynökségeknél, vagy promóciós weboldalaknál, illetve szívesen használják portfolióknál is, és még sorolhatnám.

outofbox1

outofbox2

outofbox3


Egyoldalas megjelenés

Ez a forma ugyan egy oldalra rendezi a tartalmát, de közel sem a minimál sémára építve. Sőt! Meglehetősen komplex designról van szó, hiszen egy lapra tesz fel mindent: képekkel, különleges effektekkel, csúsztató, görgető navigációval tarkítja a megjelenést. Előnye, hogy a felhasználó gyorsabban megtalálja a keresett információt, nem kell annyit kattintania sem.

onepage1

onepage2

onepage3





Több oszlopos elrendezés

Rend a lelke mindennek. Ezzel jellemezném leginkább ezt a design elemet, hiszen garantálja a strukturális egyensúlyt, hierarchizál és rendet teremt. Átlátható megjelenést, könnyű használhatóságot biztosít az oldalnak, így inkább a tartalom lesz a hangsúlyos.

column1

column2

column3






Mediatizálva

Médiablokkok

Az egyre nagyobb méretű internetpenetráció és azon belül is a szélessáv elterjedése biztosítja, hogy megfelelő minőségben juttassuk el mediatizált üzeneteinket. A médiablokkok ezáltal válhattak széles körben elterjedté. Mindamellett, hogy látványos elemek, egyszerűsítik is a felhasználó számára az információ feldolgozását, így gyorsan és hatékonyan tudunk kommunikálni. A nagy szabadságban azonban nem szabad megfeledkeznünk arról, hogy ez a blokk csak egy kis része a weboldalnak, a további tartalmaknak is fontos szerepet kell szánni. Szinte bármely területen alkalmazható, hiszen a filmek ugyanúgy lehetnek prezentáció jellegűek, komoly hangvételűek, mint szórakoztatóak.


media1

media2



Körtár (diavetítés)

Ez az alkalmazás a felhasználó számára biztosított interaktivitás netovábbja. Lényegében egy bemutató jellegű nacigációs megoldás, melynek tartalma elmozdulhat vertikálisan és horizontálisan egyaránt. Előnye, hogy a látogató számára időt spórol meg, hiszen egy blokk alatt rengeteg információ áll a rendelkezésére. A tervezők számára is igen hasznos, hiszen rengeteg helyet tudnak felszabadítani ezzel, további tartalmak elhelyezésére, mindamellett, hogy szemléletes és elegáns megjelenést biztosít.

carousel1

carousel2



Felugró ablakok

Ezek az ablakok a pop-up-ok második generációjaként jelentek meg. Általában a weboldal frekventált területén jelennek meg, és annak legfontosabb információit tartalmazzák. Felhasználóbarát alkalmazás tehát, hiszen az üzenet gyorsabban eljuttatható, illetve a látogató generálja azt, mivel az ablak kattintásra emelkedik ki a háttérből.

modalbox1

modalbox2


Segítsük a felhasználót!

Változatos felhasználói felületek

A web 2.0 korszakában szükség van arra, hogy a weboldalak design elemei még nagyobb interakciós teret biztosítsanak a felhasználók számára. Ennek érdekében rohamosan fejlődtek a megoldások, hihetetlenül látványosakká és könnyen használhatóvá váltak ezek az alkalmazások. A szolgáltatások személyesebbé válását szolgálják a látogatóhoz alkalmazkodó felületek, melyek megjelenése könnyen megváltoztatható, vagy akár bizonyos szintig a felhasználó által is irányítható. Széles körben elterjedt ez a megoldás.

userinterfaces1

userinterfaces2

userinterfaces3





„Beszélő” navigáció

Az elnevezés abból az egyszerű tényből ered, hogy a tervezők hatékonyabb kommunikációs struktúrát próbálnak kialakítani a felhasználó felé. Ennek egyik mérföldköve a navigációs gombok megújítása. A tartalmak kulcsszavakkal való közvetítése igen nehéz feladat, de hála a leleményességnek, ezt ma már egy mindenki számára érthető formában tálalják. Mindezt lehetőleg úgy kell kialakítani, hogy figyelemfelkeltőek legyenek, a felhasználónak ne kelljen keresgélnie. Ennek érdekében élénk színeket, nagy ikonokat érdemes használni (a többi címkétől lehetőleg nagyobb legyen). Úgy, hogy kitűnjön a háttérből, valamint oly módon elhelyezni az oldalon, hogy könnyen ráleljen a látogató (fejlécben, termék mellett, stb.). A szöveges tartalom is lényeges elem, így nagy gonddal kell kialakítani. Fontos, az érthető és világos megfogalmazás, a rövid és tömör leírás, amely utal a tevékenységre.

speakingnav1

speaking1

speaking2



Bemutatkozó oldal

“Akinek nem inge… ”
A bemutatkozó oldalak fontosságáról soha nem lehet eleget beszélni. Sajnos sokan megfeledkeznek az első benyomás jelentőségéről, s bár igen figyelemre méltó, csak a legritkább esetekben találkozhatunk vele blogokon vagy online shopokban. Pedig nagy előnye, hogy eljuttatja a legfontosabb üzeneteket a felhasználóhoz, igen gyorsan, hiszen frekventált elhelyezkedése biztosítja ezt. Tartalmazhat szolgent, bemutatkozó sorokat, melyek egyaránt lehetnek hosszúak és igen rövidek. Általában erős és impresszív tipográfiával rendelkeznek.

introduction1

introd

introd2

Forrás: Smashingmagazine

< ! /* Style Definitions */ table.MsoNormalTable {mso-style-name:”Normál táblázat”; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-parent:”"; mso-padding-alt:0cm 5.4pt 0cm 5.4pt; mso-para-margin:0cm; mso-para-margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:10.0pt; font-family:”Times New Roman”; mso-ansi-language:#0400; mso-fareast-language:#0400; mso-bidi-language:#0400;} > < ! [endif] >

Magazinosodás

“Szintén zenész…” Ez a fejlesztés is a tradicionális print médiából indul ki. Ezt a trendet alkalmazva látványos és hatásvadász felületeket érhetünk el. Jellemzője, hogy nem csak a tartalmak elrendezése követi az offline tördelést, de hasonlóak a tipográfiai elemek, illusztrációk és néha még a tördelést is a kiindulási ponthoz igazítják. Népszerű alkalmazás, de nem komoly cégek weboldalához. Alkalmazható blogoknál, termékek oldalain, de a legtöbbször portfolióknál találkozhatunk vele. A felhasználási területek pedig még javában kiaknázatlanok!