20 A 2017-ben megfigyelhető internetes tervezési trendek
Egy másik év telt el, és a tervezők a jövő felé néznek. Sok ígéretes tervezési trendek Az elmúlt évben a legjobb 2016-os tervezési trendeket fedeztem fel és láttuk sok változás azóta.
Szóval, a hozzászólás, amit felvettem 20 legjobb trend hogy észrevettem a vontatás megszerzése 2017-ben. Ezek a tervezési trendek bármely webhelyre vonatkozhat, ezért tartsd szemünket ezekre a technikákra, amikor 2017-ben és azon túl megyünk.
1. “Kiemelt” jelvények
Az indítások, a blogok, a SaaS projektek és még a kisvállalkozások is használják a “mint a” jelvények weboldalakon. Ezek a jelvények gyakran link a főbb blogok cikkeihez mint például a HuffPo, a Forbes, a CNN, a Fox és más hírcsatornák.
A cél az, hogy érvényesítse a webhelyet és bizalom kiépítése új látogatókkal. Könnyebb, ha valaki megbízhat egy weboldalon, amikor látják, hogy ez már megtörtént a hivatalos kiadványokban.
Valójában sok top blog értékelje az expozíciót, így valóban segít mindenkinek. Ezek a nagy helyek gyakran engedje el a logóikat online de átlátható PNG-k vagy SVG-k is megtalálhatók a googling körül.
Azt is ajánlott, hogy Ön vissza az eredeti cikkhez megemlítve webhelyét. Ez bizonyítja tényleg említettél a webhelyen, és nem csak az állítások.
2. Félkövér all-caps navigációs kapcsolatok
Láttam több tucat elegáns navigációs menük mindez ugyanarra a tervre támaszkodik. Ezek a navigációs kapcsolatok változó betűtípust és méretet de általában hasonló tulajdonságokkal rendelkeznek, mint például:
- Minden sapka
- vastagon szedett
- Egyenletesen elosztott
- A jobb sarokhoz igazítva
A Zazzle honlapja remek példa. De ezt megtalálja számos indító webhelyen mert ez egy tiszta módja a linkek megosztásának könnyen olvasható és könnyen böngészhető.
Leginkább ezt a tendenciát társítottam a vállalkozásokkal és a technológiai induló vállalkozásokkal de a blogokon is elterjedt lehet.
Jegyezze fel a következő alkalommal, amikor ezt a trendet látja, mert mindenhol van. És azt várom, hogy 2017-ben tovább fog növekedni.
3. Magazin stílusú blogok
A blogok a 2000-es évek elején egy ilyen szűkös koncepció. Ha 2003-ban futtattál egy blogot, egy aranyos kis hobbi volt. Alig több mint egy évtizede ez a tendencia radikálisan megváltozott. Most már a blogok is teljes munkaidős jövedelmet biztosítanak, és kezdik sokkal inkább úgy néz ki, mint a digitális magazinok.
Nézd vissza a TechCrunch eredeti tervét, amikor először 2006-ban indult. Úgy néz ki, mint egy általános WordPress blogjog?
Most nézd meg a Techcrunch jelenlegi honlapját 2017-ben:
Ez nem csak úgy néz ki, mint egy magazin, Az is úgy működik, mint egy. A TechCrunch minden nap tucatnyi (ha nem több száz) új bejegyzést tesz közzé. Az indítási hírek # 1-es forrása.
A magazin stílusú design trendek nagy különbséget tesznek. A honlap a nagyszerű történetszakasz, minden bejegyzés saját bélyegképe van, és a cikk oldalai a fejléc körül.
Amikor meggondolod, a TechCrunch nem változott sokat. Ez még mindíg “csak egy blog”. De úgy tervezték és kezelik, mint egy magazin, és ez minden különbséget tesz.
4. Videó háttér
A hang automatikus lejátszása talán a legbosszantóbb trend az interneten. De meglepő, automatikus lejátszás (hang nélkül) gyorsan növekvő tendencia. Ezt több tucat üzleti webhelyen is megnézheti, ahol videofelvétel van átveszi a teljes képernyőt.
Nagyon szeretem ezt a technikát, ha megfelelően alkalmazzák. Mindaddig, amíg a A videó a webhelyre vonatkozik és nem akadályozza a tartalmat, Azt hiszem, ez egy jó hatás a fejlécben.
5. Ghost gombok
Mint a minimalizmus tovább bővül web design-ba, sok új trend alakul ki. Az egyik ilyen trend a kísértet gombok emelkedése amelyeknek nincs belső kitöltése, de van külső határuk.
Legtöbbször ezek a gombok ellentétben másokkal felhívni a figyelmet. Ezt az Instantmojo honlapján láthatja a zöld regisztrációs gombbal közvetlenül a mellette található a szellem gomb egy élő demóhoz kapcsolódik.
Más webhelyek elfogadták tisztán szellemtervező stílus a gombokhoz. Nagyszerű példa erre az új Bootstrap elrendezés.
Azt hiszem, a szellem gombok helyeken dolgoznak a minimalizmus felé. Előfordulhat, hogy nem minden oldalhoz igazán illik, de az általuk használt használat minden évre növekszik.
6. Modális ablak-opt-inek
A modális ablakok rendkívül bosszantóak, és nem tudom elképzelni, hogy bármelyik felhasználó szeretné őket. azonban bizonyítottan növelik a feliratkozásokat, és a marketingesek nem tudják figyelmen kívül hagyni a működő technikákat.
Ezért gondolom, hogy a modális opt-in ablakok lesznek továbbra is mászni 2017-ben.
Ők nem az én kedvencem, és soha nem adom őket a webhelyeimhez. De ha a cél az, hogy növeljék a feliratkozásokat, akkor a modális ablakok egy biztos módja annak, hogy a dolgokat gördítsék.
Az új bővítmények akár cél kilépési szándék melyik egy modalit vált ki amikor a felhasználó megpróbálja elhagyni a webhelyet. Más modulok x másodperc múlva jelennek meg, vagy nyitva vannak, amikor a felhasználó eléggé lefelé görget.
Függetlenül attól, hogy a modálisok hogyan indultak el, hogyan tervezték őket, vagy hogyan érzi őket velük, azt hiszem, a hosszú távúak lesznek.
7. Illusztráció és vektor művészet
Az új vektortervező programokkal, mint például a Sketch és az Affinity Designer, egy új hullám van az interneten. A grafikai tervezés és az interfészek kialakítása folyamatosan összekapcsolódik több multidiszciplináris tervezővel, mint valaha.
Ez azt jelenti, hogy látni fogjuk sokkal több egyéni ikonok és teljes oldal illusztrációk a közeljövőben.
Sok illusztrátor gyakorolja a művészeket, így azt hiszem, látni fogjuk több teljes oldal hátterek digitális festészeti szoftverrel készült, részletesen, mint a művészeti koncepció.
8. Rögzített görgető oldalsávok
A rögzített tervezés első hulláma a navigációs sávokra koncentrál. Ezek túl gyakoriak, különösen az érzékeny tervekben, ahol a rögzített navigációs sáv a natív mobilalkalmazás érzését replikálja.
2017-ben azonban még egy ragadós elemet várok-a ragadós oldalsáv.
Szinte minden fontos blog használja ezt a ragadós oldalsávot. Azt megtartja a tartalmat mindig növeli a felhasználók valószínűségét interakció az oldalsáv tartalmával.
Ráadásul több tucat szabad jQuery pluginnal lehet replikálja a ragadós oldalsávhatást. Könnyebb, mint valaha, hogy ezt bármely webhelyen beállítsa.
9. Tartalomjegyzék az oldalon
Egy nemrégiben készült esettanulmány azt állapította meg a hosszú formájú tartalom felülmúlja a rövid formátumot mind a rangsorban, mind a felhasználói megtartás minőségében. Ez nem mindig igaz, mert néhány kérdés gyorsan válaszolható.
De az interneten sokkal hosszabb tartalmú, természetesen látni több tartalomjegyzéket adnak a cikkekhez. Ezt hosszabb áttekintő webhelyeken vagy a felsorolt tételekre bontott cikkekben láthatja.
Tartalomjegyzék hozzáadása a felhasználói élmény javítása és segít szakítsa meg az olvasást kisebb darabokra. Tartalomjegyzék is segít a webhely rangsorolásában! Ha a Google az Ön oldalát értékesnek találja, akkor azt valószínűleg megteheti ugorj linkeket a keresési eredmények között.
Igaz lehet, hogy a ToC-k jelenleg eléggé szűkösek. De azt várom, hogy ez a tendencia 2017-ben és sok év múlva felrobbant.
10. Fényes színes minták
Nem vagyok biztos benne, hogy ez a tendencia a minimalizmusból, vagy a Google anyagi tervezésére adott válaszból származik. De megbotlottam több tucat weboldalra, amelyek használják világos pasztell színek keverednek más élénk színekkel nagyon fantasztikus megjelenést hoz létre.
A Rentberry honlapja kiváló példa erre, amely szintén használható tonna színátmenetek. És még a fent említett is “Kiemelt” az alatta lévő jelvények! Két trend egy helyen.
Észreveszed, hogy a színek ne engedje át az egész oldalt, más fehér és szürke árnyalatokkal is elnémulnak.
Láttam elég ilyeneket élénk színsémák hinni, hogy növekszik.
11. Mozgassa az animációkat
A webes tervezők tudják, hogy milyen görgetésről van szó, és milyen szörnyű ez. Azonban ez nem az, amit a címben értettem “mozgassa az animációkat”. Sok webhelyet láttam most a tartalom megjelenítését ha az oldal egy bizonyos szakaszát görgeti.
Ez a tendencia többnyire csak a kezdőlapokra és a SaaS-vállalatokra korlátozódik hogy a pizzacírozást akarják tervezni.
Nem mondhatom, hogy ez különösen hasznos trend. Ez biztosan megragadja a szemet de nem hiszem, hogy sokkal többet kínál az esztétikán. Mégis, ez egy olyan trend, amely gyorsan elterjed, és mikor takarékosan használják igazán ügyes lehet.
12. Egyoldalas alkalmazások (SPA-k)
Az egyoldalas alkalmazások webhelyek kizárólag Ajax hívásokkal épült. JavaScript húzza a tartalmat a szerverről és dinamikusan betölti, így az oldal soha nem frissít.
A gyakori példák a Gmail és a Facebook. De több JS technológia, Észrevettem, hogy egyre több SPA fejlesztett ki folyamatosan. Heck, még a CodePen is tekinthető SPA-nak.
A hatékony frontend könyvtárakkal, mint például a React & Aurelia, még könnyebb lesz egy SPA létrehozása a semmiből 2017-ben.
13. Szerkeszthető keresősávok
Ez volt a keresési mezők mindig megtekintették valahol egy weboldalon, akár az oldalsávban, akár a navigációban. De mostanában sokkal több keresőmezőt vettem észre alapértelmezés szerint rejtve van, és kell lennie átkapcsolva.
Természetesen egy praktikus trend helyet takaríthat meg az oldalon miközben még mindig a keresési funkció hozzáférhetővé tétele. Ha nem biztos abban, hogy hol kell elhelyezni egy keresési űrlapot egy új designban, érdemes lehet használni a navigációs mezőben egy nagyító ikonhoz kapcsolt váltómezőt..
14. Adblock üzenetek
Nem tagadható, hogy a hirdetések blokkolása növekszik. Az egyetlen kérdés az, hogy a kiadók hogyan kezelik ezt a tendenciát. Néhány oldal udvariasan üzeneteket adhat hozzá a hirdetési helyekhez mint a Time.com. A Hongkiaton észre fogod venni belső űrlapok kitöltéséhez az a link, amely tovább kapcsolódik a webhelyhez.
Az egyik komoly trend, amit látok, egyre nagyobb adblock tartalom blokkok. Ez egy technika “blokkolja a hirdetési blokkolókat”. Ez a funkció már számos nagy webhelyen, például az üzleti bennfentes és a Forbes-on található. Sajnos ez mind a felhasználó, mind a kiadó számára fáj, és mindez a rossz minőségű hirdetési technikákból ered.
Végső soron nem számít, hogy ki vagy hibáztatva, vagy hol állsz a hirdetés blokkoló vitában. Több ember telepíti az adblock bővítményeket, és várom több kiadó visszafelé.
15. Tiszta SVG ikonok
SVG grafika már bejöttek a webbe, de egyre növekszik a nap. És van egy érzésem, hogy 2017 lesz egy hatalmas év az SVG-k számára az interneten.
Több ezer megtalálható ingyenes SVG ikonkészletek olyan helyeken, mint a Flaticon, ha tudod, hogyan kell keresni. De te is kódolja az SVG-ket HTML-be, például a CodePen-nél ezt a példát használva.
Tehát a tervezőknek lehetőségük van SVG-k használatára, és a fejlesztőknek lehetőségük van SVG-k használatára is. A modern böngésző támogatása jól néz ki az egész fórumon, így nincs probléma a kompatibilitással. Minden, amire szüksége van, elég a tervezők felismeri az SVG-k erejét és kezdje el használni őket!
16. Adobe XD
Az Adobe kijelentette az Adobe XD teljes béta 2016-ban, és azóta gyorsan nőtt. Jelenleg támogatja mind a Mac & Windows rendszert, és ez a vizsgálati szakaszban mielőtt teljesen kihajtott volna.
Lehet, hogy elgondolkodik a vázlat bármelyikének elgondolásával, de az Adobe a kreatív munka fő szoftvercége. A Plus vázlat még mindig csak Mac, míg az Adobe mindenkit támogat.
Meggyőződésem, hogy az elkövetkező évben sokkal többet fogunk olvasni az Adobe XD-ről. Lehet, hogy a programhoz megy UI modellek tervezése-így végül a Photoshop-ot fotó manipulációs eszközként használhatjuk (ahogyan azt szándékoltuk).
Az új szoftverek megjelenésével több tucat van oktatóanyagok és freebie GUI készletek is. Sok Adobe XD freebies található a Dribbble-ben két új XD-alapú freebie webhely Designmine és XD Guru.
17. Több hamburger menü
Szeressétek vagy gyűlöljétek, a hamburger itt marad. Rengeteg használhatósági tanulmány van vitatkoznak a nézetre elrejtett menükkel szemben. De egy kis képernyővel és csak annyi alternatívával, most nincs jobb alternatíva.
Hamburger ikonok lassan válik felismerhető szimbólumokká a Nav menükhez. Csakúgy, mint egy nagyító ikon “keresés”, a 3 bar hamburger ikon hamarosan szinonimája lesz “menü”.
Ez már igaz a legtöbb tech-hozzáértő személyre. De minden évben évente több ember kap okostelefonokat és elkezdi böngészni a mobil webet. És megtanulják társítsa a hamburgert egy navigációs menübe vége nincs.
18. Termékjellemzők
A Treehouse-ról írtam erről a trendről, de nem utaltam rá. És 2017-ben megy ez a tendencia hatalmas lesz. Valószínűleg ez a leggyakoribb út megoszthatja a termék tulajdonságait a honlapon.
Kezdjük a funkciók listájának készítése a termékhez. A termék bármi lehet a SaaS programtól a WordPress témához vagy akár egy fizikai elemhez.
Akkor is egyedi ikonok kialakítása vagy talál egy ikonkészletet ábrázolja ezeket a funkciókat. A legjobb, ha az általános jellemzők elkerülése mint például “megbízható” vagy “gyors” mert a legtöbb ember ezt reméli.
Ehelyett listázza a funkciókat ami valójában számít. Ha ez egy prémium WP-téma, talán felsorolja, hogy válaszol, hány widgetet tartalmaz, vagy hogyan működik a menü.
Ezek a funkciók ikonok olyan, mint a látvány segíteni minden funkciót eladni. Csak a szöveg nehéz fogyasztani de a látvány sokkal könnyebb egy pillantásra megérteni.
19. A CTA-k felett
Call-to-cselekvések hagyományosan elhelyezték az egész weboldalon. De a látogatókkal kevesebb időt tölt a weboldalakon, döntő fontosságú, hogy erős CTA legyen jobbra a hajtás felett.
Ezek a híváshívások lehetnek gombok, választható formák vagy más bemenetek az embereket, hogy tegyen valamilyen lépést például a blogbejegyzés vagy a blogbejegyzés olvasása.
Nem tudom megmondani, hogyan kell megtervezni a CTA-t, vagy hogyan lehet optimalizálni a konverziókat. De azt mondhatom, hogy a tendencia úgy tűnik, hogy ezeket a CTA-kat helyezi el a hajtás felett és tiszta nézetben minden látogató számára.
20. Kisebb tartalomterületek
A monitorok olyan nagyra nőttek, hogy a legtöbb honlapnak meg kell állítsa be a maximális szélességet. Sokkal nehezebb elolvasni a mondatokat, ha 2000px széles, és csak 700px széles.
A kisebb tartalom könnyebb fogyasztani, és végül létrehoz egy jobb tapasztalat a tartalom-nehéz weboldalakon.
Azt hiszem, több tervező észleli ezt, és lassan csökkenteni kell a tartalmi területek méretét. A maximális szélessége 750px, de akár 600px vagy annál kisebb is lehet.
Rövidebb bekezdések val vel kevesebb mondat és kisebb tartalmi területeket mindig növeli az olvashatóságot. Az olyan nagy kiadványok, mint a NY Times, eltérhetnek a saját strukturális iránymutatásuktól. Egy egyszerű blog vagy üzleti oldal esetében azonban a trend halad hosszabb tartalom kisebb bekezdésekkel és tartalmi területekkel.
Csomagolás
Sok más trend nem tudta fedezni ezt a hozzászólást, de azt hiszem, ezek a 20 a legérdekesebbek. Ahogy előre haladunk 2017-re, nyilvánvaló, hogy milyen trendek vannak, és melyek nem.
És ha van más ötlete vagy javaslata a közelgő tervezési trendekre, nyugodtan hagyjon egy megjegyzést alább.
