20 Rastúce trendy webového dizajnu na sledovanie v roku 2017

Ďalší rok uplynul a dizajnéri hľadajú do budúcnosti. veľa sľubných návrhových trendov sú povinné vybuchnúť v roku 2017. Minulý rok som sa dostal do popredia dizajnových trendov v roku 2016 a my sme to videli veľa zmien odvtedy.

Takže pre tento post som si vybral top 20 trendov že som si všimol získať trakciu v roku 2017. Tieto trendy dizajnu môžu sa vzťahovať na akúkoľvek webovú stránku, tak držte svoje oči pre tieto techniky, ako sa pohybujeme v roku 2017 a ďalej.

1. “Vybrané v” odznaky

Startup, blogy, projekty SaaS a dokonca aj malé podniky teraz používajú “ako je uvedené v” odznaky na svojich internetových stránkach. Tieto odznaky často odkaz na články o bežných blogoch ako napríklad HuffPo, Forbes, CNN, Fox a ďalšie spravodajské oddelenia.

Cieľom je overiť webové stránky a vybudovať dôveru s novými návštevníkmi. Je ľahšie, aby niekto videl webovú stránku, keď vidí, že to bolo uvedené v autoritatívnych publikáciách.

Veľa top blogov oceniť expozíciu, tak to skutočne pomáha všetkým zainteresovaným. Tieto veľké stránky často uvoľniť svoje logá online ale môžete nájsť aj priehľadné PNG alebo SVG práve tak, že sa budete pohybovať.

Tiež odporúčame, aby ste vy prepojte späť na pôvodný článok uvedenie vašej stránky. To dokazuje to naozaj ste sa zmienili na stránkach, a nevytvárate len nároky.

2. Tučné naväzujúce odkazy

Videl som desiatky elegantných navigačných ponúk všetci spoliehajú na tento istý dizajn. Tieto odkazy nav meniť písmo a veľkosť ale zvyčajne majú podobné funkcie, ako napríklad:

• Všetky čiapky
• tučne
• Rovnomerne rozmiestnené
• Zarovnaný v pravom rohu

Domovská stránka Zazzle je skvelým príkladom. Ale môžete to nájsť na mnohých štartovacích stránkach pretože je to a čistý spôsob zdieľania odkazov ktoré sú ľahko čitateľné a ľahko prehľadávateľné.

Túto tendenciu väčšinou asociujem s podnikmi a začínajúcimi technikami ale môže to byť aj na blogoch.

Všimnite si, že nabudúce uvidíte tento trend, pretože je všade. A očakávam, že to bude pokračovať do roku 2017.

3. Blogy v štýle časopisu

Blogovanie predstavovalo takú koncepciu už v začiatkoch roka 2000. Ak ste v roku 2003 spravovali blog, bol to považovaný za roztomilý malý koníček. Za takmer desaťročie sa tento trend radikálne zmenil. Teraz blogy môžu zabezpečiť príjem na plný úväzok, a začínajú vyzerať skôr ako digitálne časopisy.

Pozrite sa na pôvodný dizajn TechCrunch, keď bol prvýkrát uvedený v roku 2006. Vyzerá to ako všeobecný blog WordPress?

Teraz sa pozrite na aktuálnu domovskú stránku Techcrunch v roku 2017:

Nielen to vyzerá ako časopis, to tiež funguje ako jeden. TechCrunch publikuje desiatky (ak nie stovky) nových príspevkov každý deň. Sú to # 1 zdroj pre spúšťacie správy.

Tvorba trendov v štýle časopisu má veľký rozdiel. Domovská stránka používa a veľká ukážka príbehu, každý príspevok má vlastnú miniatúru, a stránky článku uprostred nad nadpisom.

Keď o tom premýšľate, TechCrunch sa veľmi nezmenil. Je to stále “len blog”. ale je navrhnutý a spravovaný ako časopis, a to robí všetok rozdiel.

4. Video pozadia

Autoplaying zvuk je možno najviac nepríjemný trend na webe. Ale prekvapivo, automatické prehrávanie videa (bez zvuku) je rýchlo rastúci trend. Môžete to vidieť na desiatkach obchodných stránok, kde je video pozadie preberá celú obrazovku.

Moc sa mi páči táto technika, keď je správne aplikovaná. Ako dlho video sa týka stránky a nebráni obsahu, Myslím, že je to skvelý efekt, ktorý môžete použiť vo svojej hlavičke.

5. Ghost tlačidlá

ako minimalizmus sa ďalej živí do návrhu webových stránok sa objavujú mnohé nové trendy. Jedným z takýchto trendov je vzostup duchovných tlačidiel ktoré nemajú vnútornú výplň, ale majú vonkajšiu hranicu.

Väčšinu času tieto tlačidlá v kontraste s ostatnými upozorniť. Môžete to vidieť na domovskej stránke Instantmojo so zeleným registračným tlačidlom ktorý sa nachádza priamo vedľa budovy Tlačidlo duchov prepojenie so živým demo.

Ďalšie stránky prijali štýl čisto duchového dizajnu na svoje tlačidlá na celom svete. Skvelým príkladom je nové rozloženie Bootstrap.

Myslím, že duchové tlačidlá fungujú na stránkach, ktoré sklon k minimalizmu. Nemusia byť vhodné pre každú webovú stránku, ale vidím, že ich používanie sa zvyšuje s každým rokom.

6. Opčné inštalačné okná

Modálne okná sú veľmi nepríjemné a nedokážem si predstaviť, že by ich žiadny užívateľ rád. však je preukázané, že zvyšujú počet registrácií, a obchodníci nemôžu ignorovať techniky, ktoré fungujú.

Preto si myslím, že modálne opt-in okná budú pokračovať v lezení v roku 2017.

Nie sú to moja najobľúbenejšia vec a nikdy ich nepridávam na moje webové stránky. Ak je však cieľom zvýšiť počet registrácií, potom modálne okná sú bezpečným spôsobom, ako dostať veci do pohybu.

Nové pluginy môžu byť dokonca zacielenie cieľového východiska ktorý spúšťa modál kedykoľvek sa používateľ pokúsi opustiť web. Ostatné modály sa zobrazia po x sekundách alebo sú nastavené na otvorenie, keď sa používateľ posúva nadol dosť ďaleko.

Bez ohľadu na to, ako sa spustia modály, ako sú navrhnuté, alebo ako sa na nich cítite, myslím, že budú na dlhú trať.

7. Ilustrácie a vektorové umenie

Vďaka novým návrhom vektorových programov, ako je Sketch a Affinity Designer, sa objavuje nová vlna ilustrátorov, ktorá sa prelína na web. Grafický dizajn a dizajn rozhrania sa neustále spájajú s viacerými multidisciplinárnymi návrhármi, ako kedykoľvek predtým.

To znamená, že budeme vidieť oveľa viac vlastných ikon a celoobrazovkové ilustrácie v blízkej budúcnosti.

Mnohí ilustrátori sú umelci, takže si myslím, že uvidíme viac pozadia na celej stránke vyrobené s digitálnym maľovaním softvéru, podrobne vykreslené ako koncept umenia.

8. Pevné posuvné postranné lišty

Prvá vlna pevnej konštrukcie orientované na navigačné panely. To všetko je príliš časté, najmä v reakciách, kde je pevný navigačný panel replikuje pocit prirodzenej mobilnej aplikácie.

Ale v roku 2017 očakávam, že uvidím ešte jeden lepkavý prvok-lepivý postranný panel.

Takmer každý veľký blog používa tento druh lepkavej bočnice. to zachováva obsah a zvyšuje pravdepodobnosť, že používatelia budú interakciu s obsahom bočného panela.

Plus s desiatkami voľných jQuery pluginov, ktoré dokážu replikovať efekt bočného panela. Je to jednoduchšie než kedykoľvek predtým, ak to nastavíte na ľubovoľnej webovej stránke.

9. Obsah v obsahu stránky

Nedávna prípadová štúdia to zistila dlhý obsah prekonáva krátky tvar v oboch rebríčkoch a kvalite uchovania používateľov. Uvedomte si, že to nie je vždy pravda, pretože niektoré otázky môžu byť rýchlo odpovedané.

Ale s oveľa dlhším obsahom na webe je prirodzené vidieť viac tabuliek obsahu pridané do článkov. Uvidíte to na zdĺhavých stránkach na preskúmanie alebo v článkoch, ktoré sa rozdeľujú na uvedené položky.

Pridávanie obsahu môže byť zlepšiť skúsenosti používateľov a pomôcť rozdeliť čítanie do menších kúskov. Obsah môže tiež obsahovať pomôžte vašim stránkam lepšie! Ak spoločnosť Google nájde vašu stránku cennú dostať odkazy skok vo výsledkoch vyhľadávania.

Pravdepodobne je pravda, že v súčasnosti sú ToC pomerne zriedkavé. Očakávam však, že tento trend vybuchne viac ako 2017 a mnoho rokov potom.

10. Jasné farebné vzory

Nie som si istý, či sa tento trend vynoril z minimalizmu alebo ako reakcia na materiálový dizajn spoločnosti Google. Ale narazil som na desiatky webových stránok, ktoré používajú svetlé pastelové farby zmiešané s ďalšími žiarivými odtieňmi vytvoriť veľmi fantazijný vzhľad.

Stránka Rentberry je skvelým príkladom, ktorý tiež používa ton sklonov. A dokonca to už bolo uvedené “Vybrané v” odznaky umiestnené pod ním! Dva trendy na jednom mieste.

Zistíte, že farby nepreniknite celú stránku, a sú potlačené inými odtieňmi bielej a šedej.

Videl som to dosť žiarivé farebné schémy aby verili, že sú na vzostupe.

11. Prejdite animácie

Web dizajnéri vedia o scroll-jacking a ako hrozné to je. Avšak to nie je to, čo som myslel s titulom “posúvanie animácií”. Videl som mnoho webových stránok, ktoré teraz animovaný obsah keď prechádzate určitou časťou stránky.

Tento trend je väčšinou obmedzené na spúšťacie domovské stránky a spoločnosti SaaS ktoré chcú niektoré pizzazz vo svojom dizajne.

Nemôžem povedať, či je to obzvlášť užitočný trend. Určite chytiť oko ale nemyslím si, že ponúka toľko za estetiku. Napriek tomu je to trend, ktorý sa zdá, že sa rýchlo šíri a kedy používať šetrne môže to byť naozaj úhľadné.

12. Jednostránkové aplikácie (SPA)

Jednostránkové aplikácie sú webové stránky postavený čisto s Ajax hovory. JavaScript ťahá obsah zo servera a načíta dynamicky, tak stránku nikdy sa neosvieti.

Bežnými príkladmi sú stránky ako Gmail a Facebook. Ale s viac technológie JS, Všimol som si viac & viac SPA sa rozvíjajú po celú dobu. Heck, aj CodePen možno považovať za SPA.

S výkonnými knižnicami frontetu, ako je React & Aurelia, bude ešte jednoduchšie vytvoriť SPA od roku 2017.

13. Prepínateľné vyhľadávacie pruhy

Kedysi to boli polia vyhľadávania boli vždy na pohľad niekde na webovej stránke, buď v bočnom paneli, alebo v navigácii. Ale v poslednej dobe som si všimol oveľa viac vyhľadávacích polí, ktoré sa dostanú skryté v predvolenom nastavení, a musí byť prepínať do pohľadu.

Určite šikovný trend ušetrite miesto na stránke zatiaľ čo je stále zachovanie prístupu funkcie vyhľadávania. Ak si nie ste istí, kam umiestniť vyhľadávací formulár do nového dizajnu, môžete zvážiť použitie prepínacieho poľa prepojeného s ikonou lupy na navigácii.

14. Správy Adblock

Nemožno poprieť fakt, že blokovanie reklám je na vzostupe. Jedinou otázkou je, ako vydavatelia zvládnu tento trend. Niektoré stránky zdvorilo pridávanie správ do reklamných priestorov ako Time.com. Na Hongkiatu si všimnete interné reklamy na vyplnenie prázdneho miesta ktoré ďalej súvisia s webom.

Jeden vážny trend, ktorý vidím, sa zvyšuje adblok blokov obsahu. To je technika “zablokujte blokovacie reklamy”. Táto funkcia je už zavedená na mnohých veľkých stránkach, ako sú Business Insider a Forbes. Bohužiaľ to bolí aj používateľ a vydavateľ, a to všetko vyplýva z reklamných techník nekvalitnej kvality.

V konečnom dôsledku nezáleží na tom, kto ste viní, alebo kde stojíte v diskusii o zablokovaní reklám. Viac ľudí inštaluje doplnky adblock a čakám viac vydavateľov, aby sa tlačili späť.

15. Čisté ikony SVG

SVG grafiku už sa dostali do webu, ale denne sa zvyšujú. A mám pocit, že 2017 bude obrovský rok pre SVG na webe.

Nájdete tu tisíce free SVG sady ikon na stránkach, ako je Flaticon, ak viete, ako vyhľadávať. Ale môžete tiež kód SVG do HTML, napríklad použitím tohto príkladu na CodePen.

Takže návrhári majú spôsob, ako používať SVG, a vývojári majú spôsob, ako použiť aj SVG. Moderná podpora prehliadača vyzerá dobre v celom rade, takže neexistuje žiadny problém s kompatibilitou. Všetko, čo je potrebné, je dostatok dizajnérov rozpoznať výkon SVG a začnite ich používať!

16. Adobe XD

Adobe vypustil plná verzia Adobe XD v roku 2016 a odvtedy sa rýchlo rozrástla. V súčasnosti podporuje Mac a Windows, a jeho vo fáze testovania pred úplným rozbalením.

Môžete pospať na myšlienku akéhokoľvek programu, ktorý predbieha Sketch, ale spoločnosť Adobe je hlavnou softvérovou spoločnosťou tvorivej práce z nejakého dôvodu. Funkcia Plus Sketch je ešte stále v režime Mac, zatiaľ čo Adobe je snažiť sa podporiť všetkých.

Pevne verím, že v nadchádzajúcom roku čítame o Adobe XD oveľa viac. To sa môže stať programom go-to pre navrhovanie makier používateľského rozhrania-takže môžeme konečne použiť Photoshop ako nástroj na manipuláciu s fotografiami (podľa plánu).

So vzostupom nového softvéru, príde desiatky výukové programy a freeware GUI súpravy tiež. Môžete si nájsť veľa freebies Adobe XD v Dribbble spolu s dve nové XD-zamerané stránky freebie Designmine a XD Guru.

17. Viac hamburgerových ponúk

Milujte to alebo nenávidíte to Hamburger je tu, aby zostal. Existuje veľa štúdií použiteľnosti, ktoré proti ponukám, ktoré sú skryté z pohľadu. Ale s malou obrazovkou a len toľkými alternatívami teraz neexistuje žiadna lepšia alternatíva.

Hamburgerové ikony sú pomaly stávajú sa rozpoznateľnými symbolmi pre nav menu. Rovnako ako ikona lupy “Vyhľadávanie”, trojbarevná ikona hamburgeru bude čoskoro synonymom “Ponuka”.

Toto platí už pre väčšinu technicky zdatných jedincov. Ale s každým ďalším rokom získava viac ľudí inteligentné telefóny a začne prehliadať mobilný web. A oni sa učia spájať, že hamburger s menu nav bez konca v očiach.

18. Ikony funkcií produktu

Napísal som o tomto trende na Treehouse, ale nedávno som o tom nehovoril. A do roku 2017 ide o tento trend bude to obrovské. Je to asi najbežnejšia cesta zdieľanie funkcií produktu na domovskej stránke.

Začnete tým zoznam funkcií pre váš produkt. Produkt môže byť čokoľvek, od programu SaaS až po motív WordPress alebo dokonca fyzickú položku.

Potom môžete buď navrhovanie vlastných ikon alebo nájsť sadu ikon reprezentovať tieto funkcie. Je to najlepšie vyhnúť sa všeobecným funkciám ako napr “spoľahlivý” alebo “rýchly” pretože väčšina ľudí očakáva tieto veci.

Namiesto toho uveďte funkcie zoznamu to skutočne záleží. Ak je to prémiová téma WP, môže byť zoznam, že je citlivý, koľko widgetov prichádza s, alebo ako funguje ponuka.

Tieto ikony funkcií pracovať ako vizuálne pomôcť predávať každú funkciu. Samotný text je ťažké konzumovať ale vizuály sú oveľa jednoduchšie pochopiť na prvý pohľad.

19. CTA zhora nadol

Call-to-akcia sú tradične umiestnené na celom webe. Ale s návštevníkmi trávia menej času na webových stránkach, je veľmi dôležité mať silnú CTA priamo nad záhybom.

Tieto výzvy na akciu môžu byť tlačidlá, formuláre na prihlásenie alebo iné vstupy podnietiť ľudí, aby podnikli nejaké kroky ako je napríklad registrácia alebo čítanie blogového príspevku.

Nemôžem vám povedať, ako navrhnúť CTA alebo ako ju optimalizovať pre konverzie. Ale môžem povedať, že trend sa zdá byť umiestnením týchto CTA nad záhybom a pri jasnom pohľade pre všetkých návštevníkov.

20. Menšie oblasti obsahu

Monitory sa rozrástli tak, že väčšina webových stránok musí nastavte maximálnu šírku. Je oveľa ťažšie čítať vety, keď sú 2000px široké v porovnaní so šírkou len 700 pixelov.

Menší obsah je ľahšie konzumovať, a nakoniec vytvára a lepšie skúsenosti s obsahovými webovými stránkami.

Myslím, že viac dizajnérov si to uvedomuje a pomaly znížiť veľkosť ich oblasti obsahu. Uprednostňujem maximálnu šírku 750 pixlov, ale mohli by ste ísť takmer 600 pixelov alebo menej.

Kratšie odseky s menej viet a oblasti s menším obsahom bude vždy zvýšiť čitateľnosť. Veľké publikácie, ako napríklad NY Times, sa môžu odchýliť svojimi vlastnými štrukturálnymi pokynmi. Ale pre jednoduchý blog alebo obchodné miesto, trend smeruje k dlhší obsah s menšími odsekmi a obsahovými oblasťami.

Zahaliť

Existuje mnoho ďalších trendov, ktoré som nemohol v tomto príspevku pokryť, ale myslím, že týchto 20 sú najzaujímavejšie. Pri poklese vpred do roku 2017 by malo byť zrejmé, ktoré trendy vybuchujú a ktoré nie.

A ak máte ďalšie nápady alebo návrhy pre nadchádzajúce trendy v oblasti dizajnu, neváhajte a ukážte nižšie.