15 Trendy webového dizajnu, ktoré si treba v roku 2012 dávať pozor
Zatiaľ rok 2011 priniesol niekoľko úžasných zmien v dizajne a internetových technológiách. Vývoj webu sa stal omnoho hladším predmetom skočiť do učenia, nehovoriac o nespočetných otvorených knižniciach, ktoré sú užitočné pri zjednodušení procesu. A napriek tomu sa zdá, že globálna dizajnérska komunita ďaleko od toho nehádne do uteráka.
Chcem predstaviť 15 myšlienok, ktoré sa za posledný rok veľmi rýchlo rozrástli. Tieto trendy zahŕňajú technológie webovej a grafickej tvorby, ktoré pravdepodobne zohrávajú veľkú úlohu v pohybe do roku 2012. Pravdepodobne ste videli niekoľko z nich zastúpených na mnohých vašich obľúbených stránkach online.
Našťastie metódy na implementáciu týchto funkcií sú čoraz ľahšie pochopiteľné a veľmi štíhlejší v kódovaní.
1. Design Responsive Interface
Skúsenosť priemerného používateľa je možno najdôležitejším aspektom, ktorý je potrebné zvážiť pri navrhovaní webových stránok. Chcete, aby prvky stránky reagovali rýchlo na vstup klávesnice / myši a správajte sa podľa očakávania. Niektoré príklady môžu zahŕňať bočné lišty, rozbaľovacie okná a vyskakovacie okná.
Vrátane slávnych knižníc jazyka JavaScript, ako napríklad MooTools a jQuery, je oveľa jednoduchšie animovať tieto funkcie a ešte viac. Väčšina dnešných prehliadačov tento kód podporuje a dokonca elegantne zhoršuje, keď skripty nie sú k dispozícii. Nakoniec chcete, aby sa používateľ cítil pohodlne pri interakcii s kdekoľvek v dizajne.
Podobne by ste mali brať do úvahy vstupné údaje a kontrolu dát. Na mnohých stránkach s registráciou dostanete malé odpovede pri práci v každej vstupnej oblasti. Môžete automatizovať kontrolu platných e-mailových adries, duplicitné používateľské mená a dokonca aj dvojité kontroly vstupných hesiel. To ušetrí čas na konci používateľa a poskytuje praktický sprievodca počas celého procesu registrácie.
2. Mobilné zariadenia s dotykovou obrazovkou
V posledných niekoľkých rokoch sa ukázalo, že inteligentné telefóny získavajú podporu aj medzi nadšencami bez technológie. Ale až od roku 2011 sme zaznamenali výbuch mobilných stránok a šablón špecifických pre mobilné zariadenia.
Obľúbenosť zariadení iPhone a iPad spolu s telefónmi so systémom Android znamená, že návštevníci budú mať plnú interakciu so svojimi stránkami prostredníctvom dotykových príkazov. To sa musí stať realistickou úvahou pri každom dizajne dizajnu. Trendy v dizajne webových stránok pre mobilné zariadenia ukázali, že vytváranie úplne samostatnej mobilnej témy často prináša najlepšie výsledky. Týmto spôsobom môžete zachovať všetok dynamický obsah na svojom hlavnom rozložení, zatiaľ čo slúži na zníženú verziu stránky mobilným používateľom.
3. Tony Freebies!
Kto môže povedať, že úprimne nemajú voľné sťahovanie? Web dizajnéri zdieľajú svoj obsah online už niekoľko rokov, no len nedávno sa to stalo veľmi populárnym trendom medzi digitálnymi umelcami. Existuje niekoľko spoločenstiev postavených konkrétne okolo bezplatného sťahovania pre webových a grafikov.
Dva z mojich osobných favoritov sú Download PSD a Designmoo, ktoré sa obaja často aktualizujú v najvyššej kvalite. Okrem toho archív Hongkiat Freebies má veľa sladkých nápadov, aby ste sa mohli pozrieť. V akejkoľvek dobe pred tým, ako doslova nikdy nebolo také ľahké sťahovať bezplatné webové rozhrania, rozloženia, logá, bannery a prakticky akýkoľvek iný typ súboru PSD / AI!
Niektoré štíhle preberania
Nižšie sú len niektoré cool freebies, ktoré si môžete odísť od začiatku roka 2011. A ak si myslíte, že tento zoznam obsahuje niektoré skvelé súbory, stačí počkať až do roku 2012!
Mini Web UI Set
Dark Mini hudobný prehrávač
Posuvné značky
Dark Photo Slider
Vyhľadávacie polia
Prihláste sa / prihláste sa
Prihlásiť Modal Box
Formulár na prihlásenie
Cenové tabuľky
Minimálne zaťažovacie pruhy
Príloha vyskakovacie okno
4. Normy HTML5 a CSS3
Obe tieto nové dizajnérske archetypy nahromadili neustále rastúce po celom roku 2011. Sémantické webové dizajnérky čakali roky, aby vyvrcholili len návrhy CSS, ktoré vykresľujú zaoblené rohy a stíny. Okrem toho W3C dosiahla veľa pokroku v získavaní podpory z najobľúbenejších prehliadačov.
Vidím len dobré veci pre budúcnosť vývoja webových stránok HTML5 / CSS3. Front-designeri sú často prehliadaní v dnešnej oblasti, ale napriek tomu majú taký veľký význam pre celý proces kompozície. Snažte sa nestláčať na žiadnu sadu štítkov na základe techník, ktoré poznáte a praktizujete denne. Ponúkame príručku pre začiatočníkov pre kódovanie HTML5 / CSS3, ak cítite potrebu dobehnúť.
Dodržiavanie týchto nových noriem tiež prinesie vývoj v jazykoch JavaScript a jQuery oveľa jednoduchšie. Vývojári už publikovali a zdieľali svoj kód HTML5 / CSS3 online a ak to bude pokračovať, určite si všimneme ešte oveľa viac toho, čo sa stane v budúcom roku.
5. Stuhy a bannery
Hoci táto technika návrhu nie je presne “Nový” nikdy sa to nedávno prelomilo hlavným prúdom. Pravdepodobne ste videli príklady rohových pások, bannerových navigačných panelov a malých pások. Tieto trendy pravdepodobne explodovali kvôli masívnej akumulácii podrobných tutoriálov, ktoré možno nájsť v celej spoločnosti Google.
Web dizajnéri sú kompetentní v týchto dňoch pri spustení svojich vlastných blogov na zdieľanie informácií. Teraz jednoduché techniky môžu ľahko prechádzať medzi návrhármi duplikovať najpopulárnejšie efekty. K dispozícii sú dokonca aj bezplatné voľby PSD, ktoré si môžete stiahnuť, aby ste ušetrili úsilie.
6. Témy Premium WordPress
Konečné vydanie WordPress 3.0 obsahovalo množstvo dlho očakávaných funkcií, ako sú napríklad vlastné typy príspevkov a jedinečné obrázky článkov. Napriek tomu najdôležitejšie zmeny, ktoré som videl, pochádza z vývojových obchodov WordPress, ktoré sa špecializujú na prvotriedne WP témy.
Po zakúpení takejto témy je inštalačný proces podobný inému. Napriek tomu je teraz možné zahrnúť vlastné plug-in funkcie, detské témy, nové admin menu a celý rad ďalších funkcií priamo z témy! WooThemes, ElegantThemes a Rocket Themes sú len málo značiek, ktoré sa mi predovšetkým zdajú. Ich kvalita je bezchybná a cítim, že ich vývojári idú nad rámec toho, aby vytvorili najlepšie šablóny a najintuálnejšie admin menu.
Do roku 2012 môžem len predstaviť, že WordPress sa ešte ľahšie používa. To znamená, že je potrebné uvoľniť viac kvalitných tém a vytvoriť úžasnejšie blogy.
7. Online časopisy
Keď už hovoríme o témach WordPress, mali by sme tiež priniesť rýchlo prijatý úspech on-line časopisov. Tieto webové stránky sa nijako nelíšia od všeobecných blogov WordPress okrem všeobecnej štruktúry a rozloženia stránky. Tieto väčšie magy si môžete všimnúť iba vtedy, keď ich prezentujete na domovskej stránke a zbierate autorov, ktorí píšu pre túto stránku.
Keď sa časopisy začnú pohybovať on-line, stanú sa zdrojom príjmu mnohých spisovateľov. Udelená téma, ako napríklad "dizajn webových stránok", sa zameriava na menšie miesto, ako napríklad hry alebo ekonomika. Ale skutočnosť, že vidíme viac dizajnových časopisov online ako tlač, ukazuje, kam môže svet v nasledujúcich rokoch smerovať.
8. Jednoduché stínovanie kvapiek
Ako aspekt CSS3 je už teraz jednoduchšie než kedykoľvek predtým, aby návrhári realizovali tieň na kvapky kdekoľvek na stránke. Štruktúru textov a prvkov v štýle boxu boli poskytnuté príslušné vlastnosti, aby sa dosiahli zreteľné tieňové efekty.
Textová tieňová syntax je veľmi ľahko zapamätateľná a sleduje ju ako stín. S vyčerpávajúcimi obrazmi týchto efektov sa weboví vývojári môžu zamerať na ďalšie rozširovanie týchto základných myšlienok.
9. Dynamická typografia
Fonty sú veľkou časťou sféry zahŕňajúcej tradície webového dizajnu. Najvýznamnejšie písma, vrátane Arial, Helvetica, Georgia a Trebuchet MS, sa už niekoľko rokov nachádzajú. Hoci naďalej slúžia hlbšiemu účelu v webových štandardoch, existuje veľa alternatívnych možností pre pokročilú typografiu webových stránok.
Typový typ napríklad vyžaduje iba pár riadkov kódu, ktoré sa majú zahrnúť do hlavičky dokumentu. Potom môžete určiť, ktoré názvy písiem je potrebné zahrnúť a pridať do CSS. Najlepšia časť tejto techniky spočíva v tom, že sa väčšinou spolieha na JavaScript, takže koncový používateľ nemusí mať nainštalované písma.
Ďalšou alternatívou je služba Webové písma spoločnosti Google, ktorá sa správa podobným spôsobom ako typový typ. Odporúčam zainteresovaným dizajnérom, aby zistili, či ide o multimediálny dotaz @ font-face CSS3, pretože ste dostali oveľa viac kreativity. Tento kód možno použiť na import a .ttf alebo .OTF súbor písma z vášho webového servera a zahrňte ho ako použiteľný typ šablóny štýlov! S toľkými alternatívnymi systémami, ktoré sa používajú na budovanie dynamických fontov, očakávam, že 2012 bude v tejto oblasti viesť k nárastu inovácií a dizajnu talentov.
10. Obrázková galéria Prezentácie
S následnou popularitou jQuery som zaznamenal viac a viac obrázkových prezentácií, ktoré sa dostali do rozloženia webu. Galérie sú ideálne pre preukázanie rýchleho pohľadu na obsah vnútornej stránky. Môže to byť súbor portfóliových záznamov, fotografií, blogových príspevkov s vybranými obrázkami, demo screenshoty atď.
Keď uvažujete o mnohých unikátnych posuvných a bledlivých animáciách, nikdy nebolo jednoduchšie vytvoriť rýchlu prezentáciu pre vašu domovskú stránku. Som presvedčený, že v roku 2012 sa tieto trendy prejavia, a to nielen medzi návrhármi. Online webové aplikácie a softvérové spoločnosti používajú prezentácie ako sprievodcovské návody na zobrazenie snímok obrazoviek a jedinečných funkcií.
11. Modálne rozbaľovacie okienka
Myslím, že modálne boxy sú stále dosť nové na internete, pretože sa už roky objavujú v stolnom softvéri a mobilných aplikáciách. Účelom modálneho okna je ponúknuť obsah škatule (napríklad registráciu používateľa alebo prihlásenie) na začiatku aktuálnej stránky bez načítania na novú.
Mnoho skriptov s galériou obrázkov s otvoreným zdrojovým kódom používa typ efektu lightbox, pri ktorom sa pozadie tmavšie ako rozbalovacie pole. Naozaj sa mi páči táto funkcia, kedykoľvek ju vidím, hoci ju mnohí ešte neprijali. A hoci modálne boxy sú sexy a elegantné, môžu byť tiež veľmi ťažké kódovať a fungovať správne.
Ak chcete získať nápady na svoje vlastné webové stránky, pozrite sa na niektoré z najpopulárnejších komunít zdieľania spoločenských správ. Reddit a Digg sú prvé dve, ktoré vám prídu na myseľ, pretože obe obsahujú registračné / prihlasovacie modálne schránky s typickým rozložením. Okrem toho sa efekty používateľského rozhrania pre Google+ môžu pochváliť značné množstvo modálnych funkcií.
12. Inšpiratívne zoznamy
Zbierky zoznamu položiek sa objavili už v prvých dňoch webdesignu. Ako sme sa presťahovali do nového storočia, dizajnéri začali používať HTML usporiadané a neusporiadané zoznamy pre navigačné menu domov. Ale dnešný zoznam môže a je používaný oveľa viac.
Vo väčšine blogových tém sa mi zdá, že celý bočný panel je načítaný zoznamom! Nehovoriac o dizajnéroch, ktorí vytvorili úžasné štýly CSS pre zoznamy v článkoch. Pokryli sme inšpiratívne zoznamy štýlov v ďalšom príspevku začiatkom tohto roka, čo vám môže dať viac pohľadu na túto záležitosť. Pri pohľade do roku 2012 očakávam niekoľko naozaj kreatívnych príkladov, možno na rovnakej úrovni s vlastným rozložením aplikácie Flowapp pre úlohy & DOS.
13. Vytvorené miniatúry obrázkov
Vo vesmírnom webe sa môžeme zhodnúť, že obsah je kráľom. Ale väčšina návrhárov sa tiež dohodne, že stránka prázdneho textu bude nudná skutočne rýchlo. Obrázky môžu pridávať extra korenie, ak viete, ako ich jemne posypeme. Jedna takáto metóda používa dynamické náhľady na zobrazenie ukážok pre každú stránku alebo článok.
Dnešné blogy naďalej využívajú zvýraznené trendy v oblasti obrázkov, takže prečo nepoužívať generované náhľady na vašu tému? Tieto často upozorňujú na nadpis článku a pomáhajú rozložiť stránku plnú textových odkazov.
Ako ďalší príklad Dribbble poskytuje celú galériu zoznam miniatúr pre každý návrhový záber. V takomto usporiadaní v štýle riadkov v tabuľke je veľmi jednoduché zachytiť každý pohľad a prelistovať a nájsť to, čo hľadáte. Táto taktika preukázala, že upúta pozornosť celej dizajnovej komunity! Er, aspoň členovia Dribbble v najlepšom prípade. Môžem len očakávať, že v roku 2012 dôjde k ďalšiemu nátlaku týchto myšlienok na základe takýchto príkladov z minulosti.
14. Veľké ikony
Tento jedinečný trend pochádza z popularity dizajnu ikon Mac OS X. Keďže programátori začali spustiť webové stránky pre svoje aplikácie pre Mac, príliš často sme videli obrovské rozmery v brandingu. Tento trend sa takisto vyzdvihol prostredníctvom vývojárov iOS a teraz sa pohodlne dotýka modernej kultúry dizajnu.
Je ťažké predpovedať, ako budú tieto trendy spravodlivé, keď sa presunieme do roku 2012. Na jednej strane tieto ikony môžu byť neohrabané a zaberajú viac priestoru, než je potrebné. Napriek tomu nie sme ani tak blízko k tomu, že narazíme na nedostatok aplikácií pre iOS / OSX a dizajnéri stále vybíjajú pixelové perfektné ikony. Nehovoriac o tom, že web dizajnéri sú teraz obsahovať nadrozmerné ikony v rámci takmer všetkých stránok značky! Je to dobrý spôsob, ako získať priamu pozornosť návštevníka a vytvoriť si meno pre vašu spoločnosť.
15. Prehnané hypertextové odkazy
Kotviace linky sú určite v rámci piatich najdôležitejších prvkov každej webovej stránky. Zrejme už od deväťdesiatych rokov prešla dlhá cesta a populárne trendy v oblasti dizajnu sa exponenciálne rozrástli. Zdá sa, že sa dostávame do obdobia, v ktorom má nadradený dizajn.
Pozrite sa na niekoľko príkladov odkazov z modelu Patterntap, aby ste zistili, či nejaký vyskočí von a chytiť vaše oko. Existuje toľko neuveriteľných nápadov na dizajn hypertextových odkazov, a to ako v štandardných, tak aj v hoverových efektoch. CSS3 zaoblené rohy, textové tiene a vlastné fonty pridávajú do mixu ešte skvelé nápady! Jeden z mojich obľúbených príkladov je z SimpleBits, ktorý používa krátku dynamickú animáciu na každom zo svojich blogov.
záver
Tieto myšlienky sú len niektoré z najpopulárnejších trendov, ktoré som si všimol, že získal prednosť v priebehu roka 2011. Skvelý dizajn webových stránok sa vždy zameriava a udržuje používateľské zámery ako najvyššiu prioritu. Je nepravdepodobné, že by sa tieto filozofie líšili do roku 2012, ale ako budeme zostavovať rozloženia a súčasné dáta, sa stále mení. Dajte nám vedieť svoje myšlienky alebo otázky v diskusnej oblasti komentárov.
