15 Web Design trendy sledovat v roce 2012

Rok 2011 přinesl některé úžasné změny v designu a internetové technologii. Webový vývoj se stal mnohem hladším předmětem skok do učení, nemluvě o nespočetných knihovnách open source užitečných pro zefektivnění procesu. A přesto se zdá, že globální designová komunita není daleko od házení do ručníku.

Chci představit 15 nápadů, které v uplynulém roce rostly velmi rychle. Tyto trendy zahrnují techniky webového a grafického designu, které budou pravděpodobně hrát velkou roli v roce 2012. Pravděpodobně jste viděli několik z těchto zastoupení v mnoha z vašich oblíbených stránek online.

Naštěstí metody k implementaci těchto funkcí jsou stále srozumitelnější a mnohem štíhlejší v kódu.

1. Konstrukce citlivého rozhraní

Průměrná zkušenost uživatele je možná nejdůležitějším aspektem, který je třeba při navrhování webových stránek zvážit. Chcete, aby prvky stránky rychle reagovaly na vstup klávesnice / myši a chovaly se podle očekávání. Některé příklady mohou zahrnovat boční výsuvné nabídky, rozevírací seznamy a vyskakovací okna.

Včetně slavných JavaScript knihoven, jako jsou MooTools a jQuery, je mnohem snazší animovat tyto funkce a ještě více. Většina moderních prohlížečů podporuje tento kód a dokonce i ladí, když skripty nejsou k dispozici. Nakonec chcete, aby se uživatel cítil pohodlně při interakci s kdekoli v designu.

Stejně tak byste měli vzít v úvahu formy a kontrolu dat. Na mnoha registračních stránkách obdržíte malé odpovědi, když pracujete v každé vstupní oblasti. Můžete automatizovat kontrolu platných e-mailových adres, duplicitních uživatelských jmen a dokonce i dvojitých kontrol hesel. Tím ušetříte čas na konci uživatele a poskytnete praktický průvodce během procesu registrace.

2. Mobilní zařízení s dotykovým displejem

V uplynulých několika letech se ukázalo, že smartphony získávají podporu i mezi nadšenci, kteří nejsou technici. Ale až od roku 2011 jsme zaznamenali explozi mobilních stránek a šablon specifických pro mobilní zařízení.

Popularita zařízení iPhone a iPad spolu s telefony s operačním systémem Android znamená, že budete mít návštěvníky plné interakce s vašimi stránkami prostřednictvím dotykových příkazů. To se musí stát realistickou úvahou s každým designem makety. Trendy v oblasti mobilního webového designu ukázaly, že nejlepší výsledky přináší často zcela samostatné mobilní téma. Tímto způsobem můžete zachovat veškerý dynamický obsah ve svém hlavním rozvržení a zároveň zobrazovat štíhlou verzi webu mobilním uživatelům..

3. Tuny freebies!

Kdo může říci, že upřímně nemají k dispozici ke stažení zdarma? Weboví designéři sdílejí svůj obsah online celé roky, ale teprve nedávno se tento trend stal velmi populárním trendem mezi digitálními umělci. Tam bylo nemnoho společenství stavěných specificky kolem nabízení ke stažení zdarma pro web a grafické designéry.

Dva z mých nejoblíbenějších favoritů jsou Download PSD a Designmoo, z nichž oba často aktualizují členové špičkové kvality. Kromě toho má Hongkiat Freebies archiv spoustu sladkých dobroty, aby se mohl podívat. V jakékoli době před tím, než doslova nikdy nebylo tak snadné stáhnout bezplatná webová rozhraní, rozvržení, loga, bannery a prakticky jakýkoli jiný typ souboru PSD / AI!

Některé Neat Ke stažení

Níže je jen pár cool freebies odhlásit se z dřívějšího roku 2011. A pokud si myslíte, že tento seznam obsahuje nějaké skvělé soubory, počkejte až do roku 2012!

Mini Web UI Set

Dark Mini hudební přehrávač

Posuvné značky

Dark Photo Slider

Vyhledávací pole

Přihlášení / Formulář přihlášení

Přihlásit Modální box

Čistý přihlašovací formulář

Cenové tabulky

Minimální nosné tyče

Vyskakovací okno přílohy

4. Standardy HTML5 a CSS3

Oba tyto nové archetypy designu v průběhu roku 2011 nashromáždily stále rostoucí množství návrhářů. Kromě toho W3C udělal hodně pokroků v získávání podpory z nejpopulárnějších prohlížečů.

Vidím jen dobré věci pro budoucnost webového vývoje HTML5 / CSS3. Návrháři front-endů jsou v dnešním oboru často přehlíženi, přesto mají velký význam pro celý proces skládání. Snažte se nestlačovat sami do žádné sady 'label' založené na technikách, které znáte a trénujete denně. Nabízíme vám průvodce pro začátečníky pro kódování HTML5 / CSS3, pokud cítíte potřebu dohnat.

Lepení těchto nových standardů také usnadní vývoj v JavaScriptu a jQuery. Vývojáři již publikují a sdílejí svůj kód projektu HTML5 / CSS3 online, a pokud věci budou pokračovat, určitě si toho všimneme mnohem více..

5. Stuhy a bannery

Ačkoli tato technika návrhu není přesně “Nový” to nikdy opravdu prorazil mainstream až do nedávné doby. Pravděpodobně jste viděli příklady rohových stuh, bannerových navigačních lišt a malých odznaků na stuze. Tyto trendy pravděpodobně explodovaly kvůli masivnímu nahromadění podrobných tutoriálů, které lze nalézt ve společnosti Google.

Weboví designéři jsou v těchto dnech kompetentnější při spouštění vlastních blogů pro sdílení informací. Nyní mohou být jednoduché techniky snadno předávány mezi designéry a duplikovány nejoblíbenější efekty. Existují i ​​bezplatné PSD, které si můžete stáhnout a ušetřit tak úsilí.

6. Premium WordPress Témata

Konečné vydání WordPress 3.0 zahrnoval řadu dlouho očekávaných funkcí, jako jsou vlastní typy příspěvků a jedinečné obrázky článků. Přesto nejvýraznější změny, které jsem viděl, pocházejí z vývojových obchodů WordPress, které se specializují na prémiová témata WP.

Po zakoupení takového motivu je instalační proces podobný jakémukoli jinému. Nyní je však možné zahrnout vlastní plug-in funkce, dětské motivy, nové admin menu, a spoustu dalších funkcí přímo v rámci tématu! WooThemes, ElegantThemes a Rocket Themes jsou jen málo značek, které se na mě vymykají především ostatním. Jejich kvalita je bezvadná a cítím, že jejich vývojáři jdou nad rámec toho, aby vytvořili nejlepší šablony a nejintuitivnější administrátorské nabídky.

Do roku 2012 si můžu představit, že WordPress bude ještě snazší. To znamená, že bude vydáno více kvalitních témat a budou spuštěny další úžasné blogy.

7. Online časopisy

Když už mluvíme o tématech WordPressu, měli bychom také vyvolat rychlý úspěch online časopisů. Tyto webové stránky nejsou tak odlišné od všech obecných WordPress blog stranou od obecné struktury a rozložení stránky. Tyto větší magazíny si můžete všimnout pouhou prezentací své domovské stránky a sbírkou autorů, kteří psali pro web.

Jak se časopisy začínají pohybovat online, stanou se zdrojem příjmů pro mnoho spisovatelů. Udělené téma jako „web design“ se zaměřuje na menší výklenek než, řekněme, hry nebo ekonomiku. Ale skutečnost, že vidíme více designových časopisů online než tisk, ukazuje, kam může svět v nadcházejících letech směřovat.

8. Easy Drop Shadows

Jako aspekt CSS3 je nyní jednodušší než kdy jindy pro designéry implementovat vržený stín kdekoli na stránce. Text boxu a prvky ve stylu boxu dostaly příslušné vlastnosti, aby se dosáhlo jasných stínových efektů.

Syntaxe text-shadow je velmi snadno zapamatovatelná a následuje ji jako box-shadow. S obrázky nyní zbytečné při vykreslování těchto efektů, mohou weboví vývojáři zaměřit se na rozšiřování těchto základních myšlenek dále.

9. Dynamická typografie

Fonty jsou velkou částí sféry zahrnující tradici webového designu. Nejpozoruhodnější fonty včetně Arial, Helvetica, Gruzie a MS Trebuchet jsou už léta. I když i nadále slouží hlubokému účelu ve webových standardech, existuje mnoho alternativních možností pro pokročilé typografie webových stránek.

Typekit například vyžaduje pouze pár řádků kódu, které mají být zahrnuty do hlavy dokumentu. Poté můžete určit, která jména písem zahrnout, a přidat je do vašeho CSS. Nejlepší na této technice je, že se spoléhá většinou na JavaScript, takže koncový uživatel nemusí mít nainstalovaná písma.

Další alternativou je Google Web Fonts, který se chová podobně jako Typekit. Doporučuji zájemcům návrháře, aby se podívali na CSS3 @ font-face mediální dotaz, protože jste dostali mnohem více kreativity. Tento kód lze použít k importu a .ttf nebo .otf soubor fontu z vašeho webového serveru a zahrnout jej jako použitelné písmo stylů! S tolika alternativními systémy používanými pro tvorbu dynamických písem očekávám, že v roce 2012 bude v této oblasti vzrůstat inovace a designový talent.

10. Galerie obrázků Prezentace

S následnou popularitou jQuery jsem si všiml, že se stále více a více obrazových prezentací upouští do webového rozložení. Galerie jsou ideální pro rychlé zobrazení obsahu vnitřní stránky. Mohlo by to být soubor položek portfolia, fotografií, příspěvků na blogu se zobrazenými obrázky, ukázkami ukázek, atd.

Když zvážíte mnoho jedinečných posuvných a vybledlých animací, nikdy nebylo snazší vytvořit rychlou prezentaci pro domovskou stránku. Jsem si jistý, že rok 2012 uvidí vzestup v těchto trendech, a to nejen mezi designéry. Online webové aplikace a softwarové společnosti využívají prezentace jako řízené tutoriály k zobrazení screenshotů a jedinečných funkcí.

11. Modální vyskakovací okna

Domnívám se, že modální boxy jsou stále poměrně nové na internetu, protože se objevují v desktopovém softwaru a mobilních aplikacích po celá léta. Účelem modálního okna je nabídnout obsah krabice (například registrace uživatele nebo přihlášení) v horní části aktuální stránky bez načtení na novou stránku.

Mnoho skriptů open-source obrazové galerie používá typ efektu lightbox, kde pozadí vybledne tmavěji než vyskakovací okno. Tuto funkci si užívám vždy, když ji vidím, i když ji ještě mnoho přijalo. A přestože modální boxy jsou sexy a elegantní, mohou být také velmi obtížně kódovatelné a fungují správně.

Chcete-li získat nápady pro své vlastní webové stránky, podívejte se na některé z nejpopulárnějších komunit pro sdílení sociálních zpráv. Reddit a Digg jsou první dva, které přicházejí na mysl, protože oba mají registrační / přihlašovací modální boxy s typickým uspořádáním. UI efekty pro Google+ se navíc mohou pochlubit značným množstvím modálních funkcí.

12. Inspirativní seznamy

Sbírky položek seznamu se objevily od samého počátku webových stránek. Když jsme se přestěhovali do nového století, začali designéři používat uspořádané a neuspořádané seznamy HTML k navigaci v menu navigace. V dnešní době se však seznamy používají a využívají mnohem více.

Ve většině témat blogu jsem našel celý postranní panel se seznamy! Nemluvě o designérech, kteří mají vytvořené úžasné CSS styly pro seznamy v článku položky. Zahrnuli jsme inspirativní styly seznamů v jiném příspěvku na začátku tohoto roku, který vám může poskytnout více informací o této záležitosti. Těšíme se na rok 2012 Očekávám několik opravdu kreativních příkladů, možná na stejné úrovni s Flowappovým vlastním uspořádáním úkolů a úkolů.

13. Generované miniatury obrazu

Ve webovém vesmíru můžeme souhlasit, že obsah je král. Většina návrhářů se však také shodne na tom, že stránka prázdného textu bude rychle nudná. Obrázky mohou dodat, že extra koření, pokud víte, jak je posypeme v jemně. Jednou z těchto metod je použití dynamických miniatur pro zobrazení náhledů pro každou stránku nebo článek.

Dnešní blogy pokračují v přijímání trendů v zobrazovaných obrázcích, takže také nepoužívejte generované miniatury ani do motivu? Ty často přitahují mou pozornost k nadpisu článku a pomáhají rozdělit stránku plnou textových odkazů.

Jako další příklad Dribbble poskytuje celou galerii seznam miniatur pro každý design výstřel. V takovém rozložení řádků ve stylu tabulky je super snadné zahlédnout každou miniaturu a posouvat se, abyste našli to, co hledáte. Tato taktika dokázala upoutat pozornost celé designové komunity! Er, přinejmenším přinejmenším členové Dribbble. Můžu jen očekávat, že v roce 2012 budou tyto myšlenky dále vycházet z těchto příkladů z minulosti.

14. Nadměrné ikony

Tento jedinečný trend pochází z popularity návrhů ikon Mac OS X. Jak programátoři začali spouštět webové stránky pro své Mac aplikace jsme příliš často viděli obrovské velikosti představované v brandingu. V souladu s tímto trendem byl také zaznamenán prostřednictvím vývojářů iOS a nyní pohodlně spočívá v moderní designové kultuře.

Je těžké předvídat, jak budou tyto trendy spravedlivé, jak se posuneme do roku 2012. Na jedné straně tyto ikony mohou být neohrabané a zabírají více místa, než je nutné. Přesto nejsme ani tak blízko k tomu, abychom se dostali k nedostatkům aplikací iOS / OSX a designéři stále rozbíhají pixelové parametry. Nemluvě o tom, že web designéři jsou nyní včetně nadrozměrných ikon v téměř každé stránce značky! Je to dobrý způsob, jak nabádat návštěvníka k přímé pozornosti a vytvořit si jméno pro vaši společnost.

15. Přehnané hypertextové odkazy

Kotevní odkazy jsou jistě v rámci prvních pěti nejdůležitějších prvků jakékoli webové stránky. Od devadesátých let minulého století je to zřejmě dlouhá cesta a populární trendy v oblasti designu rostly pouze exponenciálně. Zdá se, že přecházíme do doby, kdy má přednost přehnaný design.

Podívejte se na několik příkladů odkazů z Patterntap, abyste zjistili, zda nějaký vyskočit a chytit oko. Existuje tolik neuvěřitelných nápadů pro návrh hypertextového odkazu, a to jak ve standardních, tak ve vznášejících se efektech. Zaoblené rohy CSS3, textové stíny a rodiny vlastních fontů přidávají do mixu ještě více skvělých nápadů! Jedním z mých nejoblíbenějších příkladů je SimpleBits, který používá krátkou dynamickou animaci na každém svém vstupu do blogu.

Závěr

Tyto nápady jsou jen některé z nejpopulárnějších trendů, které jsem si všiml, že získávám přednost v průběhu roku 2011. Velký web design je vždy o zaměření a udržení uživatelských záměrů jako nejvyšší priority. Je nepravděpodobné, že by se tyto filosofie do roku 2012 lišily, ale jak se budujeme rozvržení a současné údaje, se neustále mění. Dejte nám vědět své myšlenky nebo otázky v diskusní oblasti.