20 legforróbb trend, amely 2016-ban alakítja ki a Web Designot

Ahogy az idő minden évre előre halad, sok új tervezési trend alakul ki a horizonton. A web design területe mindig változik az új eszközök, munkafolyamatok és a bevált elrendezések készítésének legjobb gyakorlataival.

Nehéz megjósolni, hogy a pontos trendek milyen figyelmet kapnak. A közelmúlt történelme azonban olyan tendenciákat mutat, mint a tűz. 20 egyedülálló trendet szerveztem, amelyek 2015-ben vontak, és valószínűleg 2016-ban is folytatódnak.

1. Vázolja az alkalmazást az UI-tervezéshez

A vázlat gyorsan helyettesíti a Photoshopot az összes felhasználói felület tervezési feladatára alacsony hűségű drótvázak nak nek magas színvonalú mockups & ikon tervezés.

A Sketch App egy olyan Mac-alkalmazás, amely kifejezetten webes és mobil tervezők számára készült. Sokkal simább munkakörnyezetet biztosít a kézműves vektorelemek számára bármely interfész számára, ugyanakkor számos olyan funkciót is megtart, amelyet a Photoshop-tól elvárhat, például szöveghatásokat és rétegstílusokat.

Bár nincs bizonyíték arra, hogy a Sketch soha nem fog megjelenni a Windows számára, az OS X felhasználók még mindig értékes választássá váltak. Az egyszerűsített munkafolyamat és az olcsóbb árcédula az Adobe számára pénzt ad. Ha a vázlat továbbra is a legjobb UI-tervezési élményt nyújtja, akkor biztosan tovább fog növekedni 2016-ban és azon túl is.

2. Böngésző alapú IDE-k

Az asztali IDE-k már évtizedek óta működnek, a Notepad ++ és az Xcode és a Visual Studio között. Az IDE megkönnyíti a kódok írását javaslatokkal és szintaxis kiemeléssel (többek között).

Hagyományosan az IDE-k asztali alkalmazásokként jelentek meg. Az elmúlt években drámai emelkedést tapasztaltunk a böngésző alapú felhő-IDE-kben. Ezek nem igényelnek más webes böngészőtől eltérő szoftvert, amely lehetővé teszi a devseknek, hogy bármilyen internetes hozzáférést biztosító számítógépről írjanak kódot.

A Cloud IDE-k jobban hasonlítanak a webes alkalmazásokhoz, ahol a kódrészleteket megoszthatja fiókjába megosztás vagy személyes tárolás céljából. A CodePen az egyik legnépszerűbb IDE a HTML / CSS / JS támogatásával, valamint az egyéni előfeldolgozással, mint a Jade / Haml és a LESS / SCSS.

A Mozilla Thimble egy másik IDE a kezdő fejlesztők számára, akik kódolni szeretnének. A Codeply kiválóan alkalmas olyan konkrét, érzékeny keretek tesztelésére, mint a Bootstrap vagy a Zurb Alapítvány, anélkül, hogy fájlokat kellene letöltenie.

3. Szabad Sass / SCSS Mixins

A preprocesszorok évek óta divatosak voltak, de csak a közelmúltban váltak eléggé elterjedtnek ahhoz, hogy a web design / fejlesztés egész területén érezzék magukat. Manapság furcsának tűnik, ha vanília CSS-t írunk, amikor Sass / SCSS sokkal többet tud nyújtani.

Az egyik előny a Sass mixin könyvtárak növekvő kínálata. Az egyszerű keverékek olyanok, mint a kódrészletek vagy az alapfunkciók, amelyek megismételhető kódot generálnak a CSS-ben. Bár mindig írhatod a sajátodat, sok fejlesztő eléggé kedves volt ahhoz, hogy az ingyenes mixeket online lehessen kiadni.

Néhány mixin a Bourbonban található könyvtárakban, míg mások önálló elemek lehetnek. Próbáljon meg keresni a GitHub-ban a Sass / SCSS mixins-re, hogy megtudja, mit talál.

4. Kártya elrendezések

A webhelykártya-elrendezéseket először a Pinterest néhány évvel ezelőtt népszerűsítette, és azóta a tartalom-nehéz weboldalak trendjévé vált. Az ingyenes bővítmények, mint a jQuery Masonry, felhasználhatók arra, hogy utánozzák ezt az elrendezési stílust különböző méretű és szélességű animációs kártyákkal.

A kártya elrendezését legjobban olyan oldalakon lehet használni, amelyeknek sok adata szkennelhető. A Google Now céloldalán a Google Now alkalmazásra vonatkozó opcionális kártyák hirdetéséhez kártya elrendezést használ.

A kártyák elrendezését dinamikusabb rácsokként gondolhatja fel, amelynek középpontjában a tartalom minimálisra csökkentése áll, hogy több elemet is felsoroljon. Az online magazinok, mint például az UGSMAG és a The Next Web egyaránt tökéletes példa a legújabb elrendezés tartalmának bemutatására használt kártyarendszerekre.

5. Egyéni magyarázó videók

A nagyméretű és kis vállalatok egyaránt az egyedi magyarázó videók felé mutatnak. Ezeket gyakran olyan animációval hozzák létre, mint a Crazy Egg példa. De más videók valóságos felvételre támaszkodnak, mint például az Instagram Direct.

A magyarázó videó célja, hogy bemutassa, hogyan működik egy termék vagy szolgáltatás. A látogatók ki tudják vetni a funkciók listáját, és még mindig nem tudják, hogyan működik a termék. A videók mindent vizuálisan tisztítanak, és néhány perc alatt lefedik a fontos dolgokat.

Ha meg akarod próbálni a kezeddel egy egyéni magyarázó videót, nézd meg ezt az Udemy kurzust. Ez egy mélyreható tanulmány, amely a céloldal tervezésének videóira összpontosít.

6. Élő termék előnézetek

A céloldal kialakítása hihetetlen növekedést mutatott a nagyobb internetsebességek és a böngésző képességei miatt. Az egyik fontos trend, amit észrevettem, az élő termék előnézeteinek hozzáadása a weboldalakon vagy az egyéni céloldalakon.

Vegyük például a Slack termékoldalát. Tartalmaz egy video túrát és vektorgrafikát, amely lefedi a Slack felületet. Ezek a termékek előnézetei arra szolgálnak, hogy a potenciális felhasználók számára megismerjék a termék működését.

A Webydo egy másik pompás példa a élő honlapon élő élő animációval. Ez lehetővé teszi a látogatók számára, hogy a Webydo működését anélkül láthassa, hogy manuálisan kellene demóznia a terméket. De nem mindig kell a termék előnézeteinek animációira támaszkodnia. Az Iconjar egy egyszerű PNG-képernyőt használ, hogy megmutassa, mi a termék és hogyan működik.

7. Automatizált feladatok

A frontend fejlesztésének világa annyira megváltozott, hogy néhány új legjobb gyakorlatot hoztak létre a weboldal létrehozásához. A Gulp és a Grunt feladatok futóit / építési rendszereit sokkal gyakrabban használják fel olyan feladatoknál, amelyek előzőleg manuális erőfeszítést igényeltek.

Az automatizálás a gyors átfutás és a minőségi kód kódolása. A gépek nem tesznek hibákat, így minél jobban automatizálhatja a bizalommal a kevesebb problémát (elméletileg).

Ha többet szeretne megtudni, nézze meg ezt a Reddit postát, amelyben elmagyarázza, hogyan működnek a feladatok. Ezek az eszközök alapvetően a JS kódot futtatják, amely automatizálja a munkafolyamat részeit, akár az egyéni JS, akár a mások által írt szkripteket..

8. Natív JS mobilalkalmazások

Nagy támogatója vagyok a megfelelő eszközök alkalmazásának. A mobilalkalmazás fejlesztése esetén ez a Java for Android, Objective-C / Swift az iOS számára.

De nem mindenki szeretne új nyelvet tanulni, csak egy mobilalkalmazás létrehozásához. Szerencsére könnyebbé válik az őshonos alkalmazások létrehozása és fordítása alternatív könyvtárakkal, mint például a NativeScript vagy a React Native.

A mobilalkalmazás programjává válásának hiányossága a mobilalkalmazások JavaScripttel való létrehozásának lehetőségével csökken. A PhoneGap egy újabb lehetőség a HTML / CSS / JS kód alapján.

Bár a létrehozási folyamat nagymértékben változik, a JS gyorsan válik megoldásra azon kódolók számára, akik egy új nyelvet tanulni akarnak anélkül, hogy új nyelvet tanulnának.

9. Együttműködési eszközök a tervezéshez

Az azonnali üzenetküldés és a csevegés már jóval több mint egy évtizede szól. Azonban ezek az erőforrások hagyományosan egyszerű szövegre támaszkodtak, és bizonyos képességekkel fájlokat csatolhatnak.

Új kialakuló tendencia az, hogy élő chat-dokumentumokat oszthat meg a chat-alkalmazásokban. Figyelemre méltó az egyik példa, ahol a megjegyzéseket és megjegyzéseket egy dokumentum tetején lehet rétegezni. Ez a tervezők számára egy tiszta módot biztosít arra, hogy közvetlenül megosszák a munkát a csapat minden tagjaival.

A Slack jelenleg a legnépszerűbb csevegő alkalmazás, amely számos hasonló funkciót támogat. A növekvő Slack felhasználói bázis megőrzi a bővítmények létrehozását, amelyek nagymértékben javítják a Slack képességeit és nyakkendőit más termékekre, mint a Hangouts, a MailChimp és még a WordPress.

10. Érzékeny frontend keretek

A Frontend keretek, mint a Bootstrap már évek óta vannak, és továbbra is hasznosak a személyes és a szakmai projektekben. Az érzékeny design kényszerítette a kereteket, és csak a backend (Django, Laravel stb.) Helyett létrehozta a frontend kódot..

2016-ra költözve azt hiszem, sokkal többet fogunk olvasni az érzékeny frontend keretrendszerekről és azok értékéről a webes projektekben. Sok devs várja a Foundation 6 kiadását és a Bootstrap 4 nyilvános kiadását.

A kevésbé ismert keretek között megtalálhatja a Gumby és a Pure CSS.

11. Nagyobb hangsúly az UX-tervezésre

A felhasználói élménytervezés területén továbbra is gyorsan növekszik a több tervező és a fejlesztő. Az UI-tervezés része az UX-tervezésnek, de ez nem a végső cél. A felhasználói felület véget ér, a vége pedig fantasztikus felhasználói élmény.

Csak 5 évvel ezelőtt alig ismerhettem az UX-et vagy azt, hogy hogyan alkalmazta az interfész-tervezést. Jelenleg olyan erőforrások vannak, mint az UX Stack Exchange és az ingyenes UX ebooks. Ha nem tud sokat tudni a felhasználói élményről, akkor most a legjobb idő, hogy tanulmányozzuk és megtanuljuk, hogyan lehet az UX elveket alkalmazni a digitális interfészek minden formájára.

12. Csomagkezelők

A digitális csomagkezelők olyan gyorsan emelkedtek, hogy gyakorlatilag a modern webfejlesztés követelménye. Az olyan megoldások, mint a Bower és az NPM, sok időt takaríthatnak meg új projektek elindításában.

Az új technológiák elsajátítása időbe telik, és egy tanulási görbével rendelkezik. De ha van egy dolog, amit minden frontend fejlesztőnek tudnia kell, akkor ez egy csomagkezelő. Szükségük van a terminálparancsok ismeretére, de ha hozzászokik a folyamathoz, soha nem akarsz visszamenni.

13. Speciális felhasználói felület animációk

A CSS3 átmenetek csak az animáció hosszú távú trendjének kezdete voltak az interneten. Most több tucat CSS és JavaScript könyvtárat szenteltünk az animációnak. Azok a dolgok, amelyeket soha nem álmodtam meg, most már ingyen épülnek fel és állnak rendelkezésre, ha tudod, hová nézz.

Az animáció nem a jó tervezés követelménye. Ez azonban jó kialakításúvá válik, ha megfelelően használják.

Tartsa szem előtt az animált trendeket a felületeken, és nézze meg, hogy mit távolíthat el a különböző webhelyekről. Ne feledje, hogy a webes animáció nem Disney film, és tisztelettel kell kezelni. Óvatosan használja az animációt, hogy növelje az interfészt anélkül, hogy a tervezés zavaró vagy zavaró elemévé válna.

14. A tervezők tanulnak kódolni

Az idei forró gomb témaköre a tervezők számára, akik a kódot tanulják. Néhány tervező úgy érzi, hogy nem a feladatuk, hogy kódot írjanak, míg mások úgy érzik, hogy ez a norma, és fel kell venni őket.

A témáról olvastam fűtött megbeszéléseket és lenyűgöző hozzászólásokat, amelyek csak úgy tűnik, hogy érzelmi válaszokat hoznak. A jó design csak egy szép kép kód nélkül. Mindazonáltal mindkettőre összpontosítva a tervezőnek kevesebb időt kell töltenie a hajó gyakorlására.

Szóval van-e végleges válasz? Néhányan azzal érvelnek, hogy a frontend kódolását ismerő tervezők számára a munkahelyi életképesség nő. De mi van, ha valaki nem akar kódot írni? Érdemes megtanulni, hogy csak versenyezzen?

Úgy érzem, a legtisztább válasz az, hogy bármit is akarsz. De úgy tűnik, ez a téma még mindig az asztalon van, sok tervező számára, akik valószínűleg 2016-ra folytatják a vitát.

15. Ingyenes online eszközök és weblapok

Korábban minden program futott az asztalról, függetlenül attól, hogy mit kell tennie. De manapság következetesen meglepődöm, hogy hány weblapot lehet ingyenesen elérhetővé tenni az interneten.

Mindent az URL-kódolástól / dekódolástól teljesen ingyenes Markdown-szerkesztőig talál. Még a Google Drive is a Microsoft Office termékeket a böngészőbe vette (újra, teljesen ingyenes).

A webes böngészők számítási teljesítményének és homogén szabványainak jelenlegi szintje látszólag korlátlan számú lehetőséget kínál. A bonyolult feladatok, mint például a létrehozás folytatása a képtömörítéshez, böngészőablakból kezelhetők.

16. A webes összetevők növekedése

A webkomponensek a fejlesztők komplexitási problémáit próbálják megoldani. A WebComponents weboldal nagyszerű erőforrásokkal és anyagokkal rendelkezik ahhoz, hogy a fejlesztőknek ugyancsak ugorjon a témába.

Ha nem biztos benne, hogyan érti a moduláris webes összetevőket, akkor nézze meg ezt a bejegyzést, hogy többet megtudjon.

Míg a komponensek nem különösebben felrobbantották a mainstream státuszt, a szakmai fejlesztők a világ minden tájáról beszélnek. A Google kiadta a Polymer-et, amely a webkomponensek JS-en és HTML-en keresztül történő hozzáadására szolgáló keret.

Előfordulhat, hogy ez még nem célszerű a nagyobb ügyfélprojektekben használni. A technológia azonban rendelkezésre áll, és kis gyakorlattal könnyedén elsajátíthatja a fogalmakat. Ha többet szeretne megtudni és látni néhány kódmintát, akkor a moduláris webkomponensek CSS-Tricks-bejegyzésében olvashat.

17. Online tanulási források

Mindannyian tudjuk, hogy most már a legegyszerűbb idő, hogy megtanuljunk bármilyen készséget a számítógép kényelméből. Úgy tűnik, hogy az online tanulási piac exponenciálisan növekszik az új kurzusokkal és az évente felbukkanó weboldalakkal.

Magabiztosabbnak érzem magam, mint valaha, hogy látni fogjuk az online tanulás növekedését. A jól ismert helyszínek, mint a Treehouse és a CodeSchool, hihetetlen tanfolyamokat kínálnak az újabb oldalak mellett, mint a Bitfountain és a Learn-Verified.

Ha van olyan téma, amelyet meg szeretne tanulni, valószínűleg egy online kurzus áll rendelkezésre, különösen akkor, ha digitális technikákat szeretne tanulni, mint például az UI-tervezés vagy az alkalmazásfejlesztés.

18. Szerveroldali JavaScript

Míg a JS szerveroldali múltbeli opciói voltak, egyik sem jutott el olyan gyorsan, mint a Node.js. A JavaScript devs beleszeretett ebbe a könyvtárba, és figyelte, hogy közvetlen versenytársakba kerüljenek más olyan backend nyelvekkel, mint a Python vagy a PHP.

A csomópont lehetővé teszi a fejlesztők számára, hogy egyetlen nyelvet használva weboldalt építsenek mind a frontend + backend kódhoz. Az olyan erőforrások, mint a Csomópont-csomagkezelő, még nagyobb értéket adnak a Node.js-nak.

Amit meg tudok mondani, a Node még mindig felemelkedik, és továbbra is nyereséget szerez az iparági rajongóktól. Akár azt tervezi, hogy megtanulja a csomópontot, akár nem, kétségtelen, hogy 2016-ban továbbra is jelentős trendként fog növekedni.

19. Érintéssel támogatott weboldal funkciók

Az okostelefonok böngészői mindig támogatták az érintőképességeket minden webhelyen, hogy fenntartsák a visszafelé kompatibilitást. A közelmúltban azonban még több plugint és egyéni funkciót vettem észre a weboldalakhoz, amelyek célja az érintéses események kezelése.

A Photoswipe és a Dragend.js bővítmények úgy vannak kialakítva, hogy az érintőképernyős kijelzőkön az ujjlenyomatot és a megérintést kezeljék. Úgy tűnik, a webfejlesztők nemcsak érzékeny webhelyeket építenek, hanem az érintőképernyős webhelyek is.

Ha körülnézed, találsz néhány igazán lenyűgöző funkciót, amelyek az internetre épülnek, és amelyek kizárólag az eseményekre támaszkodnak.

20. Anyagtervezés az interneten

A Google anyagi design kiadása hatalmas sikert aratott az Android tervezők számára. Az anyagtervezés olyan nyelvet jelent, amelynek célja az Android okostelefonok felhasználói felületének feldolgozásának egyszerűsítése.

Idővel a webes tervezők ezt a szívükre vitték, és a Google új design nyelvén alapuló teljes webhelyeket építettek. Úgy tűnik, az anyagtervezési trend a mobil alkalmazásokon túl a web design világába tért.

Azoknak az embereknek, akik anyagi weboldalakat akarnak építeni, nem kell újra feltalálni a kereket. A szabad könyvtárak, mint például az Anyag UI és a materializálás egyedi kódokat kínálnak az új elrendezés strukturálásához az anyagtervezési alapítvány tetején.

Záró

Ezekre a trendekre nézve egyértelműnek kell lennie, hogy a webes közösségből valódi összehangolt erőfeszítéseket látunk, hogy a weboldalak építésének folyamata könnyebb legyen. Mindannyian időt akarunk megtakarítani a mindennapi munkafolyamatunkban.

Az internet kezdete óta sok technológiát láttunk, ami csak jobb alternatívákkal helyettesíthető. Ezek a 2016-os trendek egy egységesebb tervezési technikákra törekednek, amelyek megkönnyítik és kevésbé bonyolultak lesznek az építési honlapok.