15 Webes tervezési trendek 2012-ben

Eddig a 2011-es év hihetetlen változásokat hozott a tervezés és az internetes technológia terén. A webfejlesztés sokkal simább téma lett a tanuláshoz, nem is beszélve a számtalan nyílt forráskódú könyvtárról, amelyek hasznosak a folyamat racionalizálásában. És mégis úgy tűnik, a globális tervező közösség messze nem dobja a törülközőt.

15 ötletet szeretnék bemutatni, amelyek az elmúlt évben nagyon gyorsan növekedtek. Ezek a trendek magukban foglalják a webes és grafikai tervezési technikákat, amelyek valószínűleg nagy szerepet fognak játszani 2012-ben. Valószínűleg ezek közül néhányat láthattok a kedvenc webhelyeinken keresztül online.

Szerencsére ezeknek a funkcióknak a megvalósítására szolgáló módszerek könnyebben megérthetők és sokkal vékonyabbak a kódban.

1. Érzékeny interfész tervezése

Az átlagos felhasználó tapasztalata talán a legfontosabb szempont, amelyet figyelembe kell venni a weboldal tervezésénél. Azt szeretné, hogy az oldalelemek gyorsan reagáljanak a billentyűzet / egér bemenetre, és a várt módon viselkedjenek. Néhány példa tartalmazhat oldalsó repülési menüket, legördülő listákat és felugró ablakokat.

Beleértve a híres JavaScript könyvtárakat, mint például a MooTools és a jQuery, sokkal könnyebbé vált ezeknek a funkcióknak az animálása. A legtöbb modern böngésző támogatja ezt a kódot, és még kecsesen lebomlik, amikor a szkriptek nem állnak rendelkezésre. Végül azt szeretné, hogy a felhasználó kényelmesen érezze magát, ha bárhol kapcsolatba lép a designban.

Hasonlóképpen figyelembe kell venni az űrlap bevitelét és az adatok ellenőrzését is. Számos regisztrációs oldalon kis válaszokat fog kapni, amikor az egyes beviteli területeken dolgozik. Automatikusan ellenőrizheti az érvényes e-mail címek, ismétlődő felhasználói nevek és még egyszer ellenőrizheti a jelszavakat. Ez időt takarít meg a felhasználó végén, és hasznos útmutatót biztosít a regisztráció során.

2. Érintőképernyős mobileszközök

Az elmúlt években nyilvánvalóvá vált, hogy az okostelefonok még a nem technológiai rajongók körében is támogatják. De csak 2011 óta láttuk a mobil webhelyek és a mobil-specifikus sablonok robbanását.

Az iPhone és az iPad készülékek népszerűsége az Android által támogatott telefonokkal együtt azt jelenti, hogy a látogatók teljes érintkezésbe lépnek az oldalakkal az érintőparancsokkal. Ez minden tervezési makettnél valósághű megfontolássá válhat. A mobil webdesign trendjei azt mutatják, hogy egy teljesen különálló mobil téma kialakítása gyakran biztosítja a legjobb eredményt. Ily módon megtarthatja a dinamikus tartalmat a fő elrendezésen, miközben a mobil felhasználók számára a webhely egy vékonyabb változatát szolgáltatja.

3. Tonnák Freebies!

Ki mondhatja, hogy őszintén nem élvezik az ingyenes letöltéseket? A webes tervezők évek óta megosztják online tartalmukat, de csak a közelmúltban vált ez a népszerű trend a digitális művészek körében. Néhány közösség épült kifejezetten az ingyenes letöltések webes és grafikai tervezők számára.

Két személyes kedvencem a PSD és a Designmoo letöltés, amelyek mindegyikét gyakran frissítik a kiváló minőségű tagok. Emellett a Hongkiat Freebies archívum rengeteg édes finomsággal rendelkezik. Bármely korszakban, amikor szó szerint soha nem volt ilyen könnyen letölthető ingyenes webes felületek, elrendezések, logók, bannerek és gyakorlatilag bármilyen más típusú PSD / AI fájl!

Néhány apró letöltés

Az alábbiakban mindössze néhány hűvös freebies található, melyeket 2011-től kezdtek megnézni. És ha úgy gondolja, hogy ez a lista jó fájlokat tartalmaz, csak várjon 2012-ig.!

Mini webes felhasználói felület beállítása

Sötét Mini Zenelejátszó

Csúszó címkék

Sötét fénykép csúszka

Keresési dobozok

Bejelentkezés / aláírás űrlap

Bejelentkezés Modal Box

Tiszta bejelentkezési űrlap

Árképzési táblázatok

Minimális betöltési oszlopok

Melléklet felugró ablak

4. HTML5 és CSS3 szabványok

Mindkét új design-archetípus 2011-ben folyamatosan növekvő következményekkel jár. A szemantikus webes tervezők évekig várják a CSS-alapú tervezést, amely lekerekített sarkokat és árnyékokat eredményez. Emellett a W3C sok előrelépést tett a legnépszerűbb böngészők támogatásának megszerzésében.

Csak jó dolgokat látok a HTML5 / CSS3 webfejlesztés jövőjére. A fronttervezőket gyakran figyelmen kívül hagyják a mai terepen, ám mégis nagy jelentőséget tulajdonítanak a teljes összetétel folyamatának. Próbálj meg ne préselj magadat semmilyen „címkére” a naponta ismert technikák alapján. A HTML5 / CSS3 kódoláshoz kezdőknek szóló útmutatót kínálunk, ha úgy érzi, szükség van a felzárkózásra.

Ezekkel az új szabványokkal való ragaszkodás a JavaScript és a jQuery fejlesztését is megkönnyíti. A fejlesztők már közzétették és megosztották HTML5 / CSS3 projektkódját online, és ha a dolgok folytatódnak, akkor biztosan észreveszünk egy sokkal többet a következő évben..

5. Szalagok és bannerek

Bár ez a tervezési technika nem pontosan “új” a közelmúltban soha nem szakadt át a mainstream-en. Valószínűleg láttak példákat a sarokszalagok, a banner navigációs sávok és a kis szalag jelvények. Ezek a tendenciák valószínűleg felrobbantak, mivel a Google-on keresztül megtalálható részletes oktatóanyagok nagy mennyiségben gyűltek össze.

A webes tervezők napjainkban kompetensebbek a saját blogjaik elindításában az információk megosztására. Most már egyszerű technikák könnyedén átjuthatnak a tervezők között, hogy megismételjék a legnépszerűbb hatásokat. Még ingyenes PSD-k is letölthetők, hogy megmentse magát.

6. Prémium WordPress témák

A WordPress 3.0 végleges kiadása számos régóta várt funkciót tartalmazott, mint például az egyéni üzenettípusok és egyedi cikkképek. Mégis a legmélyebb változások, amelyeket láttam, a WordPress fejlesztői üzletekből származnak, amelyek a prémium WP témákra specializálódtak.

Miután megvásárolta egy ilyen témát, a telepítési folyamat hasonló a többihez. Mégis most már lehetőség van arra, hogy egyéni plug-in funkciókat, gyermek témákat, új adminisztrátori menüket és egy egész sor egyéb funkciót is tartalmazzon a témán belül! A WooThemes, az ElegantThemes és a Rocket Themes néhány olyan márka, amelyek a többi felett kiemelkednek. Minőségük kifogástalan, és úgy érzem, hogy a fejlesztők túlmutatnak a legjobb sablonok és a leginkább intuitív adminisztrációs menük létrehozásához..

2012-ben csak elképzelni tudom, hogy a WordPress még könnyebb lesz használni. Ez azt jelenti, hogy több kiváló minőségű témát szabadít fel, és elképesztő blogokat indítanak el.

7. Online magazinok

A WordPress témákról beszélve meg kell emelnünk az online magazinok gyorsan elfogadott sikereit is. Ezek az oldalak nem különböznek olyan általános WordPress blogoktól, mint az általános struktúra és az oldalelrendezés. Ezeket a nagyobb mágusokat a honlapjuk puszta bemutatása és a webhelyre író szerzők gyűjteménye alapján láthatja.

Ahogy a magazinok online mozognak, sok író számára jövedelemforrássá válnak. Olyan témát adott meg, mint például a „web design”, egy kisebb rést céloz meg, mint például a játék vagy a gazdaság. De az a tény, hogy több nyomtatási magazint látunk online, mint a nyomtatás, megmutatja, hogy a világ holnapra fog menni az elkövetkező években.

8. Egyszerű csepp árnyék

A CSS3 oldalaként most már könnyebb, mint valaha, hogy a tervezők az árnyékot bárhol elhelyezzék az oldalon. A szövegdoboz és a doboz-stílus elemei megfelelő tulajdonságokkal rendelkeznek ahhoz, hogy világos árnyékhatásokat hozzanak létre.

A szöveg-árnyék-szintaxis nagyon könnyen megjegyezhető és a doboz-árnyékként követi. Ha a képek már nem szükségesek ezeknek a hatásoknak a megjelenítéséhez, a webfejlesztők összpontosíthatnak ezen alapötletek továbbfejlesztésére.

9. Dinamikus tipográfia

A betűtípusok nagy részét képezik a webtervezési hagyományokat magában foglaló szférának. A legjelentősebb betűtípusok, köztük Arial, Helvetica, Grúzia és Trebuchet MS, már évek óta vannak. Bár a webes szabványokban továbbra is mély célt szolgálnak, a fejlett weblap-tipográfia számára rengeteg alternatív lehetőség van.

A Typekit például csak pár sor kódot igényel a dokumentum fejében. Ezután megadhatja, hogy mely betűtípusokat kell beilleszteni és hozzáadni a CSS-hez. A legjobb megoldás ennek a technikának az, hogy főleg a JavaScript-en alapul, így a végfelhasználónak nem kell telepítenie a betűtípusokat.

Egy másik lehetőség a Google Web betűtípusok, amelyek hasonló módon viselkednek, mint a Typekit. Ajánlom az érdeklődő tervezőknek, hogy nézzék meg a CSS3 @ font-face média lekérdezését, mivel sokkal több kreativitást kapsz. Ez a kód a .tTF vagy .OTF betűkészletfájl a webkiszolgálóról és használható stíluslap betűtípusként! Olyan sok alternatív rendszerrel, amelyet dinamikus betűtípusok építésére használnak, azt várom, hogy 2012-ben az innováció és a tehetséggazdagodás ezen a területen lesz..

10. Képgaléria Diavetítések

A jQuery későbbi népszerűségével egyre több kép diavetítést láttam a webes elrendezésekbe. A galériák tökéletesek a belső oldalak gyors megjelenítéséhez. Ez lehet egy sor portfólió bejegyzések, fényképek, blogbejegyzések, amelyekhez képeket, demo képernyőképeket stb.

Ha figyelembe vesszük a sok egyedülálló csúszó- és elhalványult animációt, soha nem volt könnyebb egy gyors diavetítést építeni a kezdőlapjára. Biztos vagyok benne, hogy 2012-ben a trendek nemcsak a tervezők között fognak fellépni. Az online webalkalmazások és a szoftvergyártók vezetett oktatóként használják a diavetítéseket a képernyőképek és az egyedi funkciók megjelenítésére.

11. Modális felugró ablakok

Úgy érzem, hogy a modális dobozok még mindig meglehetősen újak az interneten, mivel évek óta megjelentek az asztali szoftverekben és a mobilalkalmazásokban. A modális ablak célja, hogy doboz tartalmát (például a felhasználó regisztrációját vagy bejelentkezését) az aktuális oldal tetejére ajánlja fel anélkül, hogy újba töltené.

A nyílt forráskódú képgaléria-szkriptek közül sok olyan fénydoboz effektust használ, ahol a háttér sötétebb lesz, mint a felugró ablak. Nagyon élvezem ezt a funkciót, amikor látom, bár sokan még nem fogadják el. És bár a modális dobozok szexiek és karcsúak, nagyon nehezen kódolhatók és megfelelően működnek.

Ha ötleteket szeretne kapni a saját webhelyein, nézze meg a népszerűbb közösségi hírmegosztó közösségeket. A Reddit és a Digg az első kettő, ami eszébe jut, mivel mindkettő a regiszter / bejelentkezési modális dobozokat tipikus elrendezéssel jellemzi. Továbbá a Google+ felhasználói felületének hatásai jelentős mennyiségű modális funkcióval rendelkeznek.

12. Inspiráló listák

A listaelemek gyűjteményei megjelentek a web design kezdete óta. Ahogy költöztünk az új évszázadban, a tervezők elkezdték a HTML rendezett és rendezetlen listák használatát a navigációs menükhöz. De manapság a listák sokkal többet használnak és használnak.

A legtöbb blog témában megtalálom az egész oldalsávot listákkal! Nem is beszélve azokról a tervezőkről, akik fantasztikus CSS-stílusokat készítettek a cikkek bejegyzéseiben. Az idei év elején egy másik posztot inspiráló listatípust fedeztünk fel, amelyek még jobban megismerhetik az ügyet. 2012-re tekintve igazán kreatív példákat várok, esetleg a Flowapp egyedi feladatokkal és feladatokkal egyeztetve.

13. Létrehozott képminőségek

A webes univerzumban egyetértünk abban, hogy a tartalom király. De a legtöbb tervező egyetért azzal is, hogy az üres szöveg egy oldalára unalmas lesz. A képek hozzáadhatják az extra fűszereket, ha tudják, hogyan finoman szórjuk őket. Az egyik ilyen módszer a dinamikus bélyegképek használata az oldalak vagy cikkek előnézeteinek megjelenítéséhez.

A mai blogok továbbra is elfogadják a megjelenített kép trendjét, ezért miért ne alkalmazza a generált bélyegképeket a témára is? Ezek gyakran felhívják a figyelmet a cikkcímre, és segítenek a szöveges hivatkozásokkal teli oldalak felbomlásában.

Egy másik példaként a Dribbble egy teljes galéria listáját tartalmazza az egyes tervezési felvételek miniatűrjeiről. Ilyen asztali sorrendű elrendezésben rendkívül könnyű megragadni az egyes miniatűrek pillantását, és görgetni, hogy megtalálja, amit keres. Ez a taktika bebizonyította, hogy megragadja az egész tervező közösség figyelmét! Er, legalább a Dribbble tagjai a legjobbak. Csak arra számíthatok, hogy 2012-ben ezek az ötletek tovább fognak érvényesülni a múltból származó ilyen példákra alapozva.

14. Túlméretes ikonok

Ez az egyedülálló trend a Mac OS X ikonjainak népszerűségéből ered. Ahogy a programozók elkezdték a webes alkalmazások elindítását a Mac-alkalmazásokhoz, túl gyakran láthattuk a márkaépítésben megjelenő hatalmas méreteket. Ennek megfelelően ez a trend az iOS-fejlesztőkön keresztül is felveszi, és most kényelmesen a modern design-kultúrán nyugszik.

Nehéz előre megjósolni, hogy ezek a trendek hogyan fognak tisztességesnek lenni, amikor 2012-ben elmozdulunk. Egyrészt ezek az ikonok zavarosak és több helyet foglalhatnak el, mint amire szükség van. Mégis nem vagyunk közel közel az iOS / OSX alkalmazások hiányához, és a tervezők még mindig kitörnek a pixel-tökéletes ikonra. Nem is beszélve arról, hogy a webes tervezők most már magukban foglalják a túlméretezett ikonok mindegyik oldalaitól! Ez egy jó módja annak, hogy a látogató közvetlen figyelmét felhívja, és nevet építsen a vállalat számára.

15. Túlzott hiperlinkek

A horgony linkek minden webhely öt legfontosabb eleme közé tartoznak. Ezek nyilvánvalóan hosszú utat tettek az 1990-es évek óta, és a népszerű tervezési trendek csak exponenciálisan növekedtek. Úgy tűnik, egy olyan korszakba lépünk, ahol a túlzott tervezés elsőbbséget élvez.

Nézze meg a linkek néhány példáját a Patterntap-ból, hogy lássa, hogy kiugrik-e és elkapná a szemét. Olyan sok hihetetlen ötlet van a hiperhivatkozás tervezéséhez, mind a standard, mind a hover hatások tekintetében. A CSS3 lekerekített sarkok, szöveges árnyékok és egyéni betűtípuscsaládok még több nagyszerű ötletet adnak a keverékbe! Az egyik kedvenc példám a SimpleBits, amely rövid dinamikus animációt használ minden blogbejegyzésén.

Következtetés

Ezek az ötletek csak néhány a népszerűbb trendek közül, amelyeket 2011-ben észrevettem. Nagyszerű webdesign mindig a fókuszról szól, és a felhasználói szándékok kiemelt fontosságának tartása. Valószínűtlen, hogy ezek a filozófiák 2012-re változnak, de az elrendezések és a jelenlegi adatok építése mindig változik. Tájékoztassa a gondolatait vagy kérdéseit a megjegyzések vita területén.