20 Tõusvad veebidisaini suundumused 2017. aastal

Veel üks aasta on möödas ja disainerid ootavad tulevikku. Palju lootustandvad disainisuunad möödunud aastal käsitlesin 2016. aasta tippsuundumusi ja oleme näinud palju muudatusi sellest ajast.

Niisiis, selle postituse jaoks, mille ma olen valinud top 20 suundumust et ma olen märganud veojõu saavutamine 2017. aastal. Need disainisuunad võivad kehtida mis tahes veebisaidile, nii et hoidke oma silmad nende tehnikate eest, kui me liigume läbi 2017. aasta ja pärast seda.

1. “Esiletoodud” märgid

Käivitamised, blogid, SaaS projektid ja isegi väikeettevõtted kasutavad nüüd “nagu sisestatud” märgid nende veebilehtedel. Need märgid sageli link peamiste blogide artiklitele nagu HuffPo, Forbes, CNN, Fox ja muud uudised.

Eesmärk on kinnitage veebisait ja luua usaldust uute külastajatega. On lihtsam, et keegi usaldaks veebilehte, kui nad näevad, et see on olnud mainitud autoriteetsetes väljaannetes.

Tegelikult on paljud top blogid hindavad kokkupuudet, nii et see aitab tõesti kõiki kaasatud inimesi. Need suured saidid sageli avaldama oma logod võrgus aga saate ka läbipaistvaid PNG-sid või SVG-sid leida lihtsalt googlingi ümber.

Samuti on soovitatav sulle linki algsele artiklile mainides oma saiti. See tõestab seda sa olid tõesti mainitud saite, ja sa ei ole lihtsalt nõuete esitamine.

2. Lühikesed navigeerimiskontaktid on paksud

Olen näinud kümneid elegantseid navigatsioonimenüüid kõik toetuvad sellele samale disainile. Need nav-lingid erineda kirjas ja suuruses kuid tavaliselt omavad sarnaseid omadusi, nagu näiteks:

• Kõik mütsid
• Paksus kirjas
• Ühtlaselt paigutatud
• Joondatud parempoolsesse nurka

Zazzle'i kodulehekülg on suurepärane näide. Aga te võite selle leida paljudel käivitamiskülastustel sest see on a puhas viis linkide jagamiseks mida on kerge lugeda ja hõlpsasti sirvida.

Ma seostan seda suundumust enamasti ettevõtete ja tehnoloogiliste alustega kuid see võib olla ka blogides levinud.

Märkige järgmine kord, kui näete seda suundumust, sest see on kõikjal. Ja ma loodan, et see kasvab 2017. aastal hästi.

3. Ajakirja stiilis blogid

Blogimine oli 2000-ndate aastate alguses niisugune niši. Kui teil oli 2003. aastal blogi, peeti seda armas väike hobi. Veidi üle kümne aasta on see suundumus radikaalselt muutunud. Nüüd saavad blogid pakkuda täistööajaga sissetulekut, ja nad hakkavad vaata palju rohkem digitaalsetest ajakirjadest.

Vaadake tagasi originaalset TechCrunchi disaini, kui see esmakordselt 2006. aastal käivitati?

Vaadake nüüd Techcrunchi praegust kodulehekülge 2017. aastal:

See mitte ainult näeb välja nagu ajakiri, see samuti toimib nagu üks. TechCrunch avaldab kümneid (kui mitte sadu) uusi postitusi iga päev. Nad on käivitusallikaks käivitusallikaks.

Ajakirjade stiilis kujunduse suundumused on väga erinevad. Koduleht kasutab a suur esituslugu, iga postituse kohta on oma pisipilt, ja artikli leheküljed keskele ümber pealkirja.

Kui sa seda arvad, ei ole TechCrunch palju muutunud. See on ikka veel “lihtsalt blogi”. Aga see on kujundatud ja juhitud ajakirjana, ja see muudab kogu vahe.

4. Video taust

Heli automaatne esitamine on veebis võib-olla kõige häirivam trend. Aga üllatav, video automaatne esitamine (ilma helita) on kiiresti kasvav trend. Saate seda märkida kümnetel ettevõtte saitidel, kus on video taust võtab üle kogu ekraani.

Mulle meeldib see tehnika õigesti. Niikaua kui video on seotud saidiga ja ei takista sisu, Ma arvan, et see on jahedaks efektiks teie päises.

5. Ghost nupud

Nagu minimalism toidab veelgi veebidisaini kujunemisele tekib palju uusi suundumusi. Üks selline suundumus on kummitusnuppude tõus millel ei ole sisemist täitmist, kuid millel on välimine piir.

Enamik neist nuppudest vastupidine teistega juhtida tähelepanu. Seda saab näha Instantmojo kodulehel rohelise registreerimisnupuga asub otse kõrval kummitusnupp, mis ühendab live-demo.

Teised saidid on vastu võtnud puhtalt kummitav disain nende nuppude külge. Suurepärane näide siin on uus Bootstrap paigutus.

Ma arvan, et kummitusnupud töötavad saitidel nõrgeneb minimalismi poole. Nad ei pruugi olla iga veebilehe jaoks sobivad, kuid ma näen, et nende kasutamine kasvab iga aastaga.

6. Modal-akna opt-ins

Modaalsed aknad on väga tüütu ja ma ei suuda ette kujutada, et iga kasutaja soovib neid. Kuid on tõestatud, et nad suurendavad registreerumist, turundajad ei saa ignoreerida töötavaid tehnikaid.

Sellepärast arvan, et modaalsed opt-in aknad hakkavad ronida 2017. aastal.

Nad ei ole minu lemmik asi ja ma ei lisa neid kunagi oma veebilehtedele. Aga kui eesmärgiks on registreerumiste suurendamine, siis modaalsed aknad on kindel viis asjade veeremiseks.

Uued pluginad võivad isegi olla eesmärgi väljumise eesmärk mis käivitab modaali kui kasutaja üritab saidilt lahkuda. Muud moodulid ilmuvad pärast x sekundit või on määratud avama, kui kasutaja kerib piisavalt kaugele.

Olenemata sellest, kuidas moodulid käivitatakse, kuidas nad on kujundatud või kuidas tunned neid, ma arvan, et nad lähevad kaugele.

7. Illustratsioon ja vektorite kunst

Uute vektori disainiprogrammidega, nagu Sketch ja Affinity Designer, on uus illustraatorite laine, mis murdub veebi. Graafiline disain ja liidese disain ühenduvad pidevalt rohkem multidistsiplinaarsete disaineritega kui kunagi varem.

See tähendab, et näeme palju rohkem kohandatud ikoone ja täislehe illustratsioonid Lähitulevikus.

Paljud illustraatorid harjutavad kunstnikke, nii et ma arvan, et näeme rohkem täislehe taustaga valmistatud digitaalsest värvimistarkvarast, mis on esitatud üksikasjalikult nagu ideekunst.

8. Fikseeritud kerimisriba

Fikseeritud disaini esimene laine keskendunud navigeerimisribadele. Need on liiga levinud, eriti reageerivates disainilahendustes, kus fikseeritud navar kordab natiivse mobiilirakenduse tunnet.

Aga 2017. aastal ootan ma veel ühte kleepuvat elementi-kleepuv külgriba.

Peaaegu iga suur blogi kasutab sellist kleepuvat külgriba. See säilitab sisu alati ja suurendab tõenäosust, et kasutajad saavad seda teha suhtlema külgriba sisuga.

Plus kümneid tasuta jQuery pluginaid, mida saab kopeeri kleepuva külgriba efekt. See on lihtsam kui kunagi varem selle veebisaidil üles seada.

9. Lehekülje sisukord

Hiljutine juhtumiuuring näitas seda pikkvormi sisu ületab lühivormi nii pingeread kui ka kasutajate säilitamise kvaliteet. See ei ole alati tõsi, sest mõnele päringule saab vastata kiiresti.

Kuid veebis on palju pikem sisu, see on loomulik näha rohkem artiklite sisule. Seda näete pikka ülevaatuse saitidel või artiklites, mis jagunevad loetletud üksusteks.

Sisukorda saab lisada parandada kasutajate kogemusi ja aidata lõhkuda väiksemateks tükkideks. Sisukord võib samuti olla aidata saidil paremusjärjestus! Kui Google leiab teie lehe väärtuslikuks saada hüpata lingid otsingutulemustes.

Võib-olla on tõsi, et ToC-d on praegu üsna vähe. Kuid ma loodan, et see suundumus 2017. aastal ja paljude aastate pärast õhkub.

10. eredad värvilised kujundused

Ma pole kindel, kas see suundumus ilmnes minimaalsusest või reaktsioonist Google'i materjali kujundusele. Aga ma olen komistanud kümneid veebisaite, mis kasutavad heledad pastellvärvid, mis on segatud teiste elavate toonidega luua väga väljamõeldud välimus.

Rentberry koduleht on suurepärane näide, mida kasutatakse ka tonni gradiente. Ja see on isegi ülalnimetatud “Esiletoodud” allpool asuvad märgid! Kaks suundumust ühes kohas.

Te märkate, et värvid ärge läbige kogu lehekülge, ja need on vaigistatud teiste valge ja halli toonidega.

Ma olen neist piisavalt näinud eredad värvilahendused uskuda, et nad tõusevad.

11. Kerige animatsioone

Veebidisainerid teavad, milline on nihutamine ja kui kohutav see on. Kuid see ei ole see, mida ma pealkirjaga mõtlesin “kerige animatsioone”. Ma olen nüüd palju saite näinud animeerida sisu lehekülje teatud osa kerimisel.

See suundumus on enamasti piirdub käivitamise kodulehtedega ja SaaS-i ettevõtetega mis tahavad oma disainis pizzazzit.

Ma ei saa öelda, kas see on eriti kasulik trend. Kindlasti ei haara silma kuid ma ei usu, et see pakub palju enamat kui esteetika. Siiski on see suundumus, mis tundub levivat kiiresti ja millal kasutatakse säästlikult see võib olla tõesti puhas.

12. Ühe lehekülje rakendused (erikaitsealad)

Ühe lehekülje rakendused on veebisaidid ehitatud ainult Ajaxi kõnedega. JavaScript tõmbab sisu serverist välja ja laadib selle dünaamiliselt, nii et leht mitte kunagi värskendab.

Üldised näited on saidid nagu Gmail ja Facebook. Aga koos rohkem JS-tehnoloogiat, Ma märkan, et rohkem ja rohkem erikaitsealasid on kogu aeg välja kujunenud. Hecki, isegi CodePeni võib pidada SPA-ks.

Võimas frontendiraamatukogud, nagu React & Aurelia, on 2017. aastal veelgi lihtsam SPA loomine..

13. Kohandatavad otsinguribad

See oli varem otsinguväljad olid alati näha kusagil veebilehel, kas külgriba või navigeerimise abil. Kuid viimasel ajal olen märganud palju rohkem otsinguvälju vaikimisi peidetud, ja peab olema vaadatakse.

Kindlasti on mugav trend säästa leheküljel ruumi samal ajal otsingufunktsiooni säilitamine. Kui te ei ole kindel, millises vormis otsinguvorm uude kujundisse paigutada, võiksite kaaluda navigeerimisnumbriga ühendatud lülitusvälja kasutamist.

14. Adblock-sõnumid

Seda ei saa eitada reklaamide blokeerimine on tõusuteel. Ainus küsimus on selles, kuidas avaldajad seda suundumust hakkama saavad. Mõned saidid viisakalt sõnumite lisamine reklaamiruumidesse nagu Time.com. Hongkiatis märkate sisemised reklaamid tühiku täitmiseks mis seostuvad veebisaidiga.

Üks tõsine suundumus, mida näen, on kasvav adblock-sisu plokid. See on tehnika “blokeerige reklaamide blokeerijad”. See funktsioon on juba olemas paljudes suurtes saitides, nagu Business Insider ja Forbes. Kahjuks teeb see nii kasutajale kui ka kirjastajale kahju ning see kõik tuleneb halva kvaliteediga reklaamitehnikast.

Lõppkokkuvõttes ei ole oluline, kes te süüdistate või kus te seisate reklaami blokeerimise arutelus. Rohkem inimesi paigaldab adblock-pluginaid ja ma loodan rohkem kirjastajaid tagasi lükata.

15. Pure SVG ikoonid

SVG-graafika on juba võrku sisenenud, kuid nad kasvavad iga päevaga suuremaks. Ja mul on tunne, et 2017. aasta on tohutu aasta SVG-dele veebis.

Leiad tuhandeid tasuta SVG ikoonikomplektid sellistel saitidel nagu Flaticon, kui tead, kuidas otsida. Aga sa võid ka kood SVG-sid HTML-i, näiteks kasutades seda näidet CodePenis.

Nii on disaineritel võimalus SVG-sid kasutada ja arendajad saavad kasutada ka SVG-sid. Kaasaegne brauseri tugi näeb hea välja kõikjal, seega ei ole ühilduvusega probleeme. Kõik, mida vaja, on piisavalt disainerid ära tunda SVG-de võimsust ja alustage nende kasutamist!

16. Adobe XD

Adobe välja Adobe XD täielik beeta 2016. aastal ning see on sellest ajast alates kiiresti kasvanud. Praegu toetab nii Maci kui Windowsi, ja selle testimise faasis enne täielikku väljavõtmist.

Te võite ebaõnnestuda idee üle, mis puudutab programmi „Sketch” möödumist, kuid Adobe on põhjuseks loovtööde peamine tarkvarafirma. Pluss Sketch on ikka veel ainult Maci ajal, kui Adobe on soovivad kõiki toetada.

Usun kindlalt, et lugeme Adobe XD-st lähemalt lähemalt. See võib muutuda tarkvaraks UI mudelite kujundamine-et saaksime lõpuks kasutada Photoshopit fototöötlusvahendina (nagu ette nähtud).

Uue tarkvara tõusuga kaasneb kümneid õpetused ja freebie GUI komplektid samuti. Leiad palju Adobe XD freebies koos Dribbble koos kaks uut XD-põhist freebie-saiti Designmine ja XD Guru.

17. Rohkem hamburgeri menüüsid

Armasta seda või vihkake seda hamburger jääb siia jääma. Seal on palju kasutatavusuuringuid väidavad vastu peidetud menüüde vastu. Kuid väikese ekraani ja ainult nii paljude alternatiivide korral pole praegu paremat alternatiivi.

Hamburgeri ikoonid on aeglaselt muutuvad äratuntavateks sümboliteks nav menüüdes. Nii nagu suurendusklaasi ikoon tähendab “otsing”, 3-baarine hamburgeri ikoon on peagi sünonüüm “menüüst”.

See kehtib juba enamiku tech-savvy üksikisikute kohta. Kuid iga aastaga saavad inimesed nutitelefonid ja hakkavad mobiilse veebi sirvimist alustama. Ja nad õpivad seostage see hamburger nav-menüüga ilma otsata.

18. Toote omaduste ikoonid

Kirjutasin selle suundumuse kohta Treehouse'is, kuid pole seda hiljuti maininud. 2017. aastal on see suundumus saab olema tohutu. See on ilmselt kõige levinum viis jagada toote omadusi avalehel.

Te alustate funktsioonide nimekirja koostamine teie toote jaoks. Toode võib olla midagi SaaS-programmist WordPressi teema või isegi füüsilise elemendina.

Siis saate ka kujundada kohandatud ikoone või leidke ikoonikomplekt neid funktsioone esindama. See on parim vältida üldisi omadusi nagu näiteks “usaldusväärne” või “kiiresti” sest enamik inimesi ootab seda kraami.

Selle asemel loetlege funktsioone see tegelikult on oluline. Kui see on premium WP teema, võib-olla loetleda, et see on tundlik, kui palju vidinaid kaasas on või kuidas menüü toimib.

Need funktsioonide ikoonid töötage nagu visuaalsed aitama müüa iga funktsiooni. Ainult tekst on raske tarbida kuid visuaalid on palju lihtsamad mõista lühidalt.

19. CTA-d

Tegevuste kutsumine on traditsiooniliselt paigutatud kogu veebilehel. Aga külastajatega vähem aega veebilehtedel, see on oluline, et meil oleks tugev CTA otse klapi kohal.

Need toimingud võivad olla nupud, valikuvormid või muud sisendid juhtida inimesi tegutsema näiteks blogipostituse registreerimine või lugemine.

Ma ei saa teile öelda, kuidas kujundada CTA või kuidas seda konversioonide jaoks optimeerida. Aga võin öelda, et see trend näib olevat paigutanud need CTAd klapi kohal ja selge vaatega kõigi külastajate jaoks.

20. Väiksemad sisupiirkonnad

Monitorid on kasvanud nii suureks, et enamik veebisaite peab olema määrake maksimaalne laius. Palju on raskem lugeda lauseid, kui nad on 2000tk laiused, võrreldes ainult 700px laiusega.

Väiksem sisu on lihtsam tarbida, ja lõpuks loob a parem kogemus sisu-rasketes veebilehtedel.

Ma arvan, et rohkem disainereid sellest aru saab ja aeglaselt vähendada nende sisupiirkondade suurust. Ma eelistan maksimaalset 750px laiust, kuid võite minna nii väikeseks kui 600 pikslit või vähem.

Lühemad lõiked koos vähem lauseid ja väiksematele sisupiirkondadele alati suurendada loetavust. Peamised väljaanded, nagu NY Times, võivad erineda oma struktuurilistest suunistest. Kuid lihtsa blogi või ettevõtte veebisaidi suunas liigub trend pikem sisu väiksemate punktide ja sisupiirkondadega.

Pakendamine

Seal on palju muid suundumusi, mida ma ei saanud selles postituses katta, kuid arvan, et need 20 on kõige huvitavamad. 2017. aastasse liikudes peaks olema selge, millised suundumused on plahvatav ja millised mitte.

Ja kui teil on muid ideid või ettepanekuid tulevaste disainisuundumuste kohta, võtke palun allpool kommentaar.