20 najhorúcejších trendov, ktoré budú tvorené Web Design, prídu 2016

Ako časový posun dopredu s každým ďalším rokom sa na obzore objavuje mnoho nových trendov v oblasti dizajnu. Oblasť dizajnu webových stránok sa stále mení s novými nástrojmi, pracovnými postupmi a osvedčenými postupmi pri vytváraní použiteľných rozvrhnutí.

Je ťažké predpovedať, ktoré presné trendy získajú najväčšiu pozornosť. Napriek tomu nedávna história ukazuje trend trendov, ktoré rastú ako požiar. Zorganizoval som 20 unikátnych trendov, ktoré získali trakciu v roku 2015 a pravdepodobne aj do roku 2016.

1. Náčrt aplikácie pre dizajn používateľského rozhrania

Skica rýchlo nahradí Photoshop pre všetky úlohy návrhu používateľského rozhrania od nízkofrekvenčné drôtové rámy na vysoko verných modelov a dizajnu ikon.

Aplikácia Sketch je aplikácia určená iba pre Mac, ktorá je určená pre webových a mobilných návrhárov. Ponúka plynulejšie pracovné prostredie na vytváranie vektorových prvkov pre ľubovoľné rozhranie, avšak zachováva mnoho funkcií, ktoré by ste od Photoshopu očakávali ako textové efekty a štýly vrstiev.

Aj keď nie je žiadny dôkaz o tom, že aplikácia Sketch bude kedykoľvek uvoľnená pre systém Windows, stále sa stáva hodnotnou voľbou používateľov systému OS X. Zjednodušený pracovný tok a lacnejšia cena prináša spoločnosti Adobe svoje peniaze. Ak Sketch naďalej poskytuje najlepšie skúsenosti s dizajnom používateľského rozhrania, potom bude určite pokračovať v raste do roku 2016 a neskôr.

2. IDE založené na prehliadači

IDE pre stolné počítače boli už desiatky rokov s možnosťami od Notepad ++ až po Xcode a Visual Studio. IDE uľahčuje zápis kódu pomocou návrhov a zvýrazňovania syntaxe (okrem iných funkcií).

Ale tradične IDE boli vydané ako desktopové aplikácie. Počas posledných niekoľkých rokov sme zaznamenali dramatický nárast IDE cloudových prehliadačov založených na prehliadači. Tie nevyžadujú iný softvér ako webový prehliadač, ktorý umožňuje programom napísať kód z ľubovoľného počítača s prístupom na Internet.

Cloud IDE fungujú skôr ako webové aplikácie, kde môžete ukladať útržky kódu do svojho účtu na zdieľanie alebo osobné ukladanie. CodePen je jedným z najpopulárnejších IDE s podporou HTML / CSS / JS spolu s vlastnou preprocessing ako Jade / Haml a LESS / SCSS.

Mozilla Thimble je ďalší IDE pre začínajúcich vývojárov, ktorí sa chcú učiť, pretože kódujú. Tiež Codeply je skvelé pre testovanie špecifických responzívnych rámcov ako Bootstrap alebo Zurb's Foundation bez toho, aby ste museli sťahovať akékoľvek súbory.

3. Voľné mixy Sass / SCSS

Preprocesory sú už roky trendy, ale len nedávno sa dostali do hlavného prúdu, aby sa cítili všadeprítomné v celej oblasti dizajnu / vývoja webu. V dnešnej dobe sa zdá divné písať vanilkovú CSS, keď Sass / SCSS môže poskytnúť oveľa viac.

Jednou výhodou je rastúca ponuka knižníc Sass mixin. Jednoduché mixiny sú ako útržky kódu alebo základné funkcie na generovanie opakovateľného kódu v CSS. Aj keď môžete vždy písať svoje vlastné, veľa vývojárov bolo dosť láskavo na to, aby uvoľnili zadarmo mixins on-line.

Niektoré mixiny prichádzajú v knižniciach ako Bourbon, zatiaľ čo iné môžu byť samostatné položky. Skúste vykonať vyhľadávanie v GitHub pre Sass / SCSS mixins, aby ste zistili, čo nájdete.

4. Usporiadanie kariet

Usporiadanie webových kariet bolo prvýkrát popularizované spoločnosťou Pinterest už niekoľko rokov a odvtedy sa stalo trendom pre webové stránky s obsahom. Bezplatné doplnky ako jQuery Masonry môžu byť použité na napodobnenie tohto štýlu rozloženia s animovanými kartami pre rôzne výšky a šírky.

Rozloženie karty sa najlepšie používa na stránkach s množstvom údajov, ktoré by mali byť skenovateľné. Vstupná stránka služby Asistent Google používa rozloženie karty na inzerovanie voliteľných kariet pre aplikáciu Asistent Google.

Môžete rozmýšľať o rozloženiach kariet ako o dynamickejších mriežkach so zameraním na minimalizáciu obsahu na holé základy, aby ste mohli spoločne zobraziť viac položiek. Online časopisy ako UGSMAG a The Next Web sú dokonalými príkladmi rozloženia kariet používaných na prezentáciu nedávneho príspevku.

5. Vlastné vysvetľujúce videá

Veľké a malé spoločnosti taktiež prešli trendom zvyčajných vysvetľujúcich videí. Tieto sú často vytvorené pomocou animácie, napríklad príklad Crazy Egg. Ale iné videá sa spoliehajú na reálne zábery ako Instagram Direct.

Účelom vysvetľujúceho videa je preukázať, ako funguje produkt alebo služba. Návštevníci si môžu prezrieť zoznam funkcií a nemajú ani tušenie, ako funguje produkt. Videá objasňujú všetko vizuálne a pokrývajú dôležité veci za pár minút.

Ak chcete skúsiť svoju ruku pri vytváraní vlastného vysvetľujúceho videa, pozrite si tento kurz Udemy. Je to hĺbková štúdia so zameraním na videá pre návrh pristávacej stránky.

6. Ukážky živého produktu

Návrh vstupnej stránky zaznamenal neuveriteľný rast vyplývajúci z vyšších rýchlostí internetu a možností prehliadača. Jeden hlavný trend, ktorý som si všimol, je pridanie živých náhľadov produktov na domovské stránky alebo na vlastné vstupné stránky.

Vezmite napríklad stránku produktu Slack. Obsahuje video prehliadku a vektorovú grafiku pokrývajúcu rozhranie Slack. Tieto náhľady produktu umožňujú potenciálnym užívateľom pozrieť sa, ako funguje produkt.

Webydo je ďalší skvelý príklad s živou animáciou, ktorá sa hrá na domovskej stránke. To umožňuje návštevníkom vidieť Webydo v akcii bez toho, aby museli manuálne demo produktu. Ale nemusíte sa vždy spoliehať na animácie pre ukážky produktu. Iconjar používa jednoduchý obrázok PNG, ktorý ukáže, aký je produkt a ako funguje.

7. Automatizované úlohy

Svet vývoja frontend sa tak veľmi zmenil s niekoľkými novými osvedčenými postupmi pre tvorbu webových stránok. Pracovníci / stavebné systémy ako Gulp a Grunt sa používajú oveľa častejšie na zničenie úloh, ktoré predtým vyžadovali manuálne úsilie.

Automatizácia je životná vrstva rýchleho obratu a vytrhávania kódu kvality. Stroje nerobia chyby, takže čím viac môžete automatizovať s dôverou, tým menej problémov budete mať (teoreticky).

Ak sa chcete dozvedieť viac, pozrite si tento príspevok Reddit, ktorý vysvetľuje, ako používajú bežiace úlohy. Tieto nástroje v podstate spúšťajú kód JS, ktorý bude automatizovať časti vášho pracovného postupu, a to buď vlastné JS, alebo skripty napísané inými používateľmi.

8. Native JS Mobile Apps

Som veľkým zástancom použitia správnych nástrojov pre túto prácu. V prípade vývoja mobilných aplikácií to znamená Java for Android, Objective-C / Swift pre iOS.

Ale nie každý sa chce naučiť nový jazyk len preto, aby vytvoril mobilnú aplikáciu. Našťastie sa stáva jednoduchšie vytvárať a kompilovať natívne aplikácie s alternatívnymi knižnicami, ako sú NativeScript alebo React Native.

Priestor na to, aby ste sa stal programátorom mobilných aplikácií, skracuje schopnosť vytvárať mobilné aplikácie prostredníctvom jazyka JavaScript. PhoneGap je ďalšou možnosťou založenou na kóde HTML / CSS / JS.

Zatiaľ čo sa proces tvorby značne líši, JS sa rýchlo stáva riešením pre programátorov, ktorí chcú vytvárať mobilné aplikácie bez toho, aby sa učili nový jazyk.

9. Nástroje spolupráce pre dizajn

Okamžité zasielanie správ a skupinový rozhovor je už viac ako desať rokov. Tieto zdroje sa však tradične spoliehajú na textový text s určitou schopnosťou pripojiť súbory.

Novým vznikajúcim trendom je možnosť zdieľania dokumentov so živým dizajnom v rámci chatových aplikácií. Pozoruhodný je jeden príklad, kde anotácie a komentáre môžu byť navrstvené priamo nad dokumentom. To dáva návrhárom čistý spôsob, ako zdieľať prácu priamo s každým v tíme.

Slack je najobľúbenejšia aplikácia pre chat, ktorá podporuje mnohé podobné funkcie. Rastúca užívateľská základňa Slack bola presvedčivá pri vytváraní rozšírení, ktoré výrazne zlepšujú možnosti Slack a viažu sa do iných produktov, ako sú Hangouts, MailChimp a dokonca aj WordPress.

10. Referenčné rámce Frontend

Frontendové rámce ako Bootstrap sú už roky a naďalej preukazujú užitočnosť na projektoch osobných i profesionálnych. Odpovedajúci dizajn nútil svoju cestu do rámcov a vytvoril dopyt po kóde frontend namiesto len backend (Django, Laravel atď.)..

Sťahovanie do roku 2016 Myslím, že budeme čítať oveľa viac o prispôsobivých rámcoch frontend a ich hodnote v webových projektoch. Mnohí devs netrpezlivo očakávajú vydanie nadácie 6 a verejné vydanie verzie Bootstrap 4.

Ďalšie menej známe rámce, ktoré by ste si mohli pozrieť, zahŕňajú Gumby a Pure CSS.

11. Väčší dôraz na návrh UX

Oblasť dizajnu používateľských skúseností bude naďalej rýchlo rásť s viac návrhármi a vývojármi, ktorí si všimnú. UI dizajn je súčasťou dizajnu UX, ale nie je to konečný cieľ. UI je prostriedok na koniec, ktorého koniec je fantastický užívateľský zážitok.

Len pred 5 rokmi som sa s UX sotva oboznámil alebo ako sa to vzťahovalo na dizajn rozhrania. Teraz máme zdroje ako UX Stack Exchange a bezplatné UX ebooks. Ak neviete veľa o skúsenostiach s používateľmi, teraz je najlepší čas na štúdium a naučiť sa, ako môžu byť zásady UX aplikované na všetky formy digitálnych rozhraní.

12. Manažéri balíčkov

Manažéri digitálnych balíkov sa zdvihli tak rýchlo, že sú prakticky podmienkou pre moderný vývoj webových aplikácií. Riešenia ako Bower a NPM môžu ušetriť veľa času pri začatí nových projektov.

Zvládnutie akejkoľvek novej technológie bude trvať určitý čas a bude zahŕňať krivku učenia. Ale ak existuje jedna vec, ktorú by mal každý vývojár frontend (alebo backend) vedieť, je to správca balíkov. Vyžadujú určité znalosti terminálnych príkazov, ale akonáhle si zvyknete na proces, nikdy sa nebudete chcieť vrátiť.

13. Pokročilé používateľské rozhrania

Prechody CSS3 boli len začiatkom dlhodobého trendu animácie na webe. Teraz máme desiatky knižníc CSS a JavaScript venovaných animácii. Veci, ktoré som nikdy nesníval, sú teraz postavené a k dispozícii zadarmo, ak viete, kam sa pozrieť.

Animácia nie je požiadavkou dobrého dizajnu. Ale môže to urobiť dobrý dizajn do skvelého dizajnu, keď sa používa správne.

Dávajte pozor na animované trendy pre rozhrania a zistite, čo môžete odobrať z rôznych webových stránok. Pamätajte si, že webová animácia nie je Disney film a malo by sa s ňou zaobchádzať s rešpektom. Animáciu používajte jemne, aby sa zlepšilo rozhranie bez toho, aby sa stalo nepríjemným alebo rušivým prvkom dizajnu.

14. Návrhári sa učia kódovať

Téma horúceho tlačidla v tomto roku je prípad dizajnérov, ktorí sa učia kódovať. Niektorí dizajnéri cítia, že nie je ich úlohou písať kód, zatiaľ čo iní cítia, že sa stávajú normou a mali by byť prijatí.

Čítal som rozptýlené diskusie a fascinujúce príspevky o tejto téme, ktoré len vyvolajú emocionálne reakcie. Dobrý dizajn je len pekný obrázok bez kódu. Napriek tomu, že sa zameriame na oboch, vyžaduje, aby dizajnér strávil menej času cvičením.

Takže je tu definitívna odpoveď? Niektorí tvrdia, že životaschopnosť pracovných miest sa zvyšuje pre návrhárov, ktorí vedia kódovanie frontend. Čo ak niekto nechce písať kód? Stojí za to, aby ste sa učili len preto, aby ste súťažili?

Cítim, že najjasnejšou odpoveďou je robiť čokoľvek, čo chcete. Zdá sa, že táto téma je stále na stole pre mnohých návrhárov, ktorí pravdepodobne budú pokračovať v diskusii do roku 2016.

15. Bezplatne online nástroje a webové aplikácie

Kedysi to bolo, že všetky programy boli spustené z pracovnej plochy bez ohľadu na to, čo potrebujete. V dnešnej dobe som však neustále prekvapený, koľko webových adries je k dispozícii zadarmo online.

Všetko nájdete od kódovania / dekódovania URL až po úplne bezplatný editor Markdown. Dokonca aj Disk Google prevzal do prehliadača produkty balíka Microsoft Office (opäť úplne zadarmo).

Súčasná úroveň výpočtovej výkonnosti a homogénnych štandardov z webových prehliadačov ponúka zdanlivo neobmedzené množstvo príležitostí. Komplexné úlohy ako obnovenie vytvárania a kompresie obrázkov je možné spravovať priamo z okna prehliadača.

16. Rast webových komponentov

Webové komponenty sa snažia riešiť problémy zložitosti pre vývojárov. Webová stránka WebComponents má veľa zdrojov a materiálov, ktoré dávajú vývojárom skok do tejto témy.

Ak si nie ste istí, ako rozumieť modulárnym webovým komponentom, pozrite sa na tento príspevok a dozviete sa viac.

Zatiaľ čo komponenty nie sú zvlášť rozvinuté do hlavného prúdu, sú o nich diskutované profesionálnymi vývojármi po celom svete. Spoločnosť Google uvoľnila Polymer, ktorý je rámec používaný na pridávanie webových komponentov prostredníctvom JS a HTML.

Toto nemusí byť praktické na použitie vo veľkých klientskych projektoch. Avšak technológia je k dispozícii a s malou praxou môžete zvládnuť koncepty s ľahkosťou. Ak sa chcete dozvedieť viac a uvidíte niekoľko vzoriek kódu, môžete si prečítať príspevok CSS-Triky na modulárnych webových komponentoch.

17. Zdroje online učenia

Všetci vieme, že teraz je najjednoduchší čas naučiť sa akékoľvek zručnosti z pohodlia vášho počítača. Zdá sa, že on-line vzdelávací trh rastie exponenciálne s novými kurzami a webovými stránkami, ktoré sa objavujú každý rok.

Cítim sa viac ako kedykoľvek predtým, že uvidíme nárast online vzdelávania. Známe stránky ako Treehouse a CodeSchool ponúkajú neuveriteľné kurzy popri novších stránkach ako Bitfountain a Learn-Verified.

Ak existuje predmet, ktorý sa chcete naučiť, je pravdepodobný on-line kurz - najmä ak sa chcete naučiť digitálne techniky, ako je dizajn používateľského rozhrania alebo vývoj aplikácií.

18. JavaScript na strane servera

Zatiaľ čo v minulosti existovali možnosti pre JS na strane servera, nikto neprenikol tak rýchlo ako Node.js. Programy JavaScriptu sa zamilovali do tejto knižnice a pozerali sa na to, že sa dostali do priamej konkurencie s inými podpornými jazykmi, ako je napríklad Python alebo PHP.

Uzol umožňuje vývojárom vytvárať webové lokality pomocou jedného jazyka pre oba frontend + backend kód. Prostriedky ako Node Package Manager dávajú Node.js ešte väčšiu hodnotu.

Z toho, čo môžem povedať, uzol je stále na vzostupe a naďalej získava trakciu od nadšencov priemyslu. Či sa plánujete učiť uzol alebo nie, nie je pochýb o tom, že v roku 2016 bude naďalej rásť ako hlavný trend.

19. Funkcie webových stránok podporované dotykom

Prehliadače smartfónov vždy podporovali dotykové funkcie pre všetky webové stránky, aby zachovali spätnú kompatibilitu. Napriek tomu som si v poslednej dobe všimol viac pluginov a vlastných funkcií pripojených na webové stránky s konkrétnym cieľom riešenia dotykových udalostí.

Pluginy ako Photoswipe a Dragend.js sú postavené tak, aby zvládli rýchle prechádzanie a dotykové dotykové displeje. Zdá sa, že vývojári webu nielen vytvárajú citlivé webové stránky, ale aj webové stránky s povoleným dotykom.

Ak vyhľadávate okolo, nájdete niektoré naozaj pôsobivé funkcie vytvorené pre web, ktoré sa spoliehajú iba na dotykové udalosti.

20. Návrh materiálu na webe

Uvoľnenie materiálového dizajnu spoločnosťou Google bolo obrovským úspechom pre návrhárov systému Android. Materiálový dizajn je považovaný za dizajnový jazyk určený na zjednodušenie procesu vytvárania používateľských rozhraní pre smartphony Android.

Postupom času si web dizajnéri vzali na srdce a vybudovali celé webové stránky založené na novom dizajnovom jazyku Google. Zdá sa, že materiálový trend sa presťahoval za práve mobilné aplikácie do sveta webového dizajnu.

Ľudia, ktorí chcú vytvárať materiálne webové stránky, nemusia ani znova objavovať koleso. Voľné knižnice ako Material UI a Materialalize ponúkajú vlastné kódy pre štruktúrovanie nového usporiadania na nadstavbovom materiáli.

záverečný

Pri pohľade na tieto trendy by malo byť jasné, že vidíme skutočné zosúladené úsilie webovej komunity s cieľom uľahčiť proces budovania webových stránok. Všetci chceme ušetriť čas v každodennom pracovnom procese.

Od začiatku nášho webu sme videli, že mnohé technológie stúpajú, len aby boli nahradené lepšími alternatívami. Tieto trendy v roku 2016 presadzujú jednotnejší súbor dizajnových techník, ktoré uľahčia budovanie webových stránok a oveľa menej zložité.