Labas tipogrāfijas priekšrocības. Vienkārša lapas ielāde

• Tulkošana

Web dizaina pasaule ir dinamiska un daudzveidīga. Lielas izmaiņas šeit nenotiek katru gadu. To apliecina straujā tehnoloģiju izaugsme, kas pēdējos pāris gados ir parādījusi, ka tuvākajā nākotnē svarīgas tendences web dizainā būs vērstas uz esošo dizainu uzlabošanu.

Plakans dizains kļūs teksturētāks, kino pieredze kļūs izplatītāka, un JavaScript bibliotēku izmantošana ļaus vairāk eksperimentēt. Esam pārliecināti, ka pieaugošā WebGL popularitāte un virtuālā realitāteļaus mums mainīt mums zināmās vietnes par kaut ko jaunu ar interesantām interaktīvām funkcijām.

Šajā rakstā mēs apskatīsim 11 lielākās tīmekļa dizaina tendences, kas gaidāmas šogad. Tāpēc iekārtojies ērti un sāc lasīt!

1. WebGL (tīmekļa grafikas bibliotēka)

Viens no jaunākajiem sasniegumiem ir ievērojamā WebGL (Web Graphics Library) tehnoloģija. To izmanto daudzas pārsteidzošas vietnes, kas nesen parādījās.

Vienkārši sakot, WebGL ir veids, kā bez spraudņiem atveidot interaktīvu 3D un 2D grafiku pārlūkprogrammās ar aparatūras paātrinājumu.

1.1 Interaktīva 3D WebGL lietojumprogramma

Izbaudiet zinātkāri (saskaņā ar NASA)

WebGL bija viena no SIGGRAPH 2015 konferences centrālajām tēmām. Prezentācija ieslēgta 3D grafika un WebGL varat apskatīt šajā kanālā YouTube.

No pusotras stundas ilgā video uzzināsiet par NASA tīmekļa aplikāciju “Experience Curiosity”, ar kuras izveidi tika atzīmēta trešā gadadiena kopš kursotāja Curiosity nolaišanās uz Marsa. Lietotne ļauj lietotājiem "ripināt" NASA 3D roveru uz Marsa virsmas un "vadīt" manipulatora roku.

Šī resursa izveidei tika izmantots Blend4Web (ietvars pārlūkprogrammu 3D lietojumprogrammu izveidei) un Blender (3D modelēšanas un animācijas pakotne).

Beloola vietne izmanto three.js (JavaScript bibliotēka)

SBS TV projekts “The Boat” (Austrālija)

Austrālijas televīzija SSB TV ir pārveidojusi rakstnieka Nama Le stāstu "The Boat" par bēgšanu no Vjetnamas un pārvērtusi to interaktīvajā video stāstā, izmantojot WebGL. Lietojumprogramma sastāv no vairākām daļām ar labi izpildītu animāciju un ar roku krāsotām ilustrācijām. Tas izmanto arī three.js, tāpat kā iepriekšējā piemērā.

Tāpēc, ka Atmiņa

No tehniskā viedokļa šī ir nepārtraukta divdimensiju animācija, kas tiek veikta pseido 3D telpā. Izskatās ļoti iespaidīgi!

2. VR (virtuālā realitāte)

Virtuālā realitāte (VR) ir māsas tehnoloģija, kas var satricināt sīkrīku pasauli 2016. gadā. Varbūt ļoti drīz lietas kļūs daudz interesantākas.

timeshift165 vietne

Birkas: pievienojiet atzīmes

Alīna Filatova

16.07.2015. | | 2 komentāri

Vai zināt, kādu jautājumu klienti kādu iemeslu dēļ reti uzdod? “Kura vietne tagad ir modē?”!
Jā, jā, internetā, tāpat kā jebkurā citā jomā, protams, ir sava mode, savi "baubļi", "čipsi" un tendences.

Ja runājam par mūsdienu tīmekļa modi, tad 2014.-2015.gadā ir bijušas vairākas modes dizaina tendences, kas pārliecinoši virzās nākotnē. Ja jums patīk sērfot tīmeklī, iespējams, pēdējā laikā esat saskāries ar arvien vairāk vietnēm, kurās tiek izmantots plakans un daļēji plakans dizains (tā sauktais "Metro stils"), lieli attēli un sarežģīta tipogrāfija. Turklāt video vai kinematogrāfijas izmantošana tīmekļa vietnēs kļūst par nepārprotamu galveno virzienu.
Kas tad īsti ir modē šajā tīmekļa sezonā?

Tātad 2015.–2016. gadā tas joprojām ir tendence:

1. Lieli un skaisti attēli

Kopš 2014. gada modē ir nākuši lieli, augstas kvalitātes fona attēli.
Turklāt ir vēlams, lai šīs ilustrācijas būtu unikālas un īpašas, īpaši atlasītas vietnei. Tā kā gandrīz ikvienam patīk skaistas bildes, šī tendence saglabājas, un 2015. gadā attēli joprojām tiek aktīvi izmantoti, turklāt tie ir palielinājušies un kļuvuši vēl kvalitatīvāki.

2. plakans dizains

   2013. gada beigās - 2014. gada sākumā sākās plakanā dizaina laikmets, tā sauktais "Metro stils".
   Jaunas modes tendences tirgū noteica tādi monstri kā Microsoft un Apple, un visi pārējie dalībnieki ar prieku uzņēma jaunākās tendences. Plakanā dizaina tendence joprojām ir spēcīga 2015. gadā. Šis tīrais, vieglais dizains ļauj vietnēm izskatīties ļoti modernām.

   Galvenās tendences pazīmes: milzīgas baltas atstarpes, lielas pogas, skaidrs fonts. Plakans dizains izslēdz ēnas, gradientus un citus grafiskos līdzekļus, kas padara elementus trīsdimensiju. Šīs dizaina funkcijas ļauj ātri ielādēt vietnes jebkurā ierīcē, tostarp mobilajā.

3. emocionālais saturs

   Iespējams, tas nav vieglākais risinājums, taču lielākie mediju atskaņotāji ir sākuši izmantot unikālās interneta priekšrocības, lai radītu emocionālu saturu. Tās galvenais mērķis ir emocionāli piesaistīt apmeklētāju, izraisīt garīgu reakciju.

   Lai to panāktu, tiek izmantoti prasmīgi uzrakstīti raksti, emocionālas fotogrāfijas un video. Šī tendence sākās 2012. gadā un turpinās līdz pat šai dienai. Un stāstītie stāsti kļūst arvien personiskāki, vizuāli valdzinošāki un saistošāki.

4. Labākā tipogrāfija

   Arvien vairāk tīmekļa projektu izmanto lielisku tipogrāfiju. Vizuālā hierarhija kļūst labāka, fonti ir skaistāki un unikālāki, un tīmekļa dizaineri izsaka diezgan spēcīgus apgalvojumus. Šis virziens galveno stimulu saņēma 2015. gadā.

5. Pielāgotas ilustrācijas un fotogrāfijas; ar roku zīmētas ilustrācijas

   Šķiet, ka beidzot ir beidzies bezdvēseles bilžu laikmets no fotobankām. Iepriekš tikai slinkie savā vietnē neievietoja pie sarunu galda rokasspiedienu, kas nosita zobus vai smaidīja identiskas sejas. Tā kā daudzi tīmekļa dizaineri izmantoja diezgan standartizētus fontus un krāsas, daudzas vietnes sāka izskatīties kā dvīņi. Pietiekami!

   Visbeidzot, plastiskās sejas un nedabiskās pozas ir aizstātas ar individualitāti. Ikonas un ilustrācijas tiek veidotas speciāli katram klientam, un galvenā tendence ir ar roku zīmētas ilustrācijas. Tas viss ļauj gan vietnei, gan pašam uzņēmumam iegūt spilgtu individualitāti. Atvadieties no fonda fotogrāfijām un sveiciniet lietotāja identitāti!

6. Video

   Kopš 2014. gada lieli augstas izšķirtspējas videoklipi vietnēs ir bijuši ļoti iespaidīgi.

   2015. gadā jauda palielinājās vēl vairāk. Palielināts ātrums tagad ļauj vēl aktīvāk izmantot video. Neviens nešaubās, ka labi uzņemts īss trīs minūšu video spēj pilnībā atspoguļot uzņēmuma dvēseli un “noķert” klientu.

7. Kinematogrāfisks vai cilpas video

   Ja, lai skatītu videoklipu vietnē, jums jānoklikšķina uz pogas “Atskaņot”, tad cilpu video fragmentu gadījumā tas nav nepieciešams. Videoklips ar cilpu pārvietojas pa apli pats, un to var viegli izmantot kā iespaidīgu fonu.

   Šie mini videoklipi, kas mitināti mājas lapa vietni, ievērojiet visus apmeklētājus. Kustīgie kadri uzreiz piesaista uzmanību, emocionāli piesaista skatītāju un stāsta īsu, spēcīgu stāstu. Bieži vien turpat, tieši uz videoklipa, ir poga “Atskaņot”, lai ieinteresētais apmeklētājs varētu noskatīties garo versiju vai apmeklēt galveno lapu. Šādas vietnes izskatās ļoti dizainiski, un 2015. gadā šie interaktīvie stāsti ir ļoti spēcīga tendence.

8. Tīkls

   Vēl viena modes tendence ir lielu bloku dizains, kas ieklāts režģī kā kolāža. Tas ļauj ātri un vizuāli prezentēt vietnē pieejamās preces vai demonstrēt savu darbu paraugus. Labi izplānots režģis var padarīt tīmekļa vietnes navigāciju ļoti ērtu.

9. Fiksēta galvene

   Vēl viens sezonas “triks” ir vietnes galvene, kas fiksēta augšpusē. Neatkarīgi no tā, kā apmeklētājs ritina vietni, galvene vienmēr paliek “pielīmēta” lapas augšdaļā. No estētiskā viedokļa šī kustība ir ļoti izdevīga - galvene nosaka vietnes struktūru un saista visus tās elementus.

   Bet papildus skaistumam šim jauninājumam ir arī praktiska izmantošana: Apmeklētāju priekšrocība ir tāda, ka viņiem nav ilgi jāmeklē saites, lai pārvietotos vietnē – tagad tās vienmēr atrodas vienā un tajā pašā vietā. Un turklāt tas ir ārkārtīgi ērti tirgotājiem: vissvarīgākās lapas un atgādinājumi vienmēr paliek lietotāju priekšā.

10. Adaptīvs dizains

    Varbūt visvairāk galvenā tendence sezona ir atsaucīgs dizains. Saskaņā ar Google datiem, lietotāju skaits, kuri piekļūst internetam ar mobilās ierīces, līdz 2014. gada beigām pieauga līdz 50%!

    Tāpēc mobilās vietnes kļūst arvien aktuālākas, vienlīdz labi pielāgojoties viedtālruņiem, tālruņiem, planšetdatoriem un citiem sīkrīkiem. Lielas pogas, pieejama izvēlne, ērti izvietota informācija - tas viss piesaista lietotājus un notur viņus šādā vietnē pēc iespējas ilgāk.

Dažas tīmekļa dizaina tendences gadu no gada mainās, bet citas paliek aktuālas ilgu laiku. Šeit ir pilns kārtējā gada dizaina tendenču saraksts ar aprakstiem un lietošanas ieteikumiem.

Ja neesat priekšā laikam, jūs neizbēgami atpaliksiet.

Laipni lūdzam 2016. gada tīmekļa dizaina tendenču ceļvedī!

Aprakstot katru no tendencēm, mēs paskaidrosim, kāpēc tas darbojas un kā jūs varat to apgūt personīgi. Mēs arī sniegsim vairāk nekā 40 vietņu piemērus no tādiem uzņēmumiem kā Intercom, Google, Beoplay, Sennheiser un citiem.

Mūsu pārskatīšanas plāns ir šāds:

1. Ievads

2. Mikromijiedarbības

4. Minimālistisks dizains

5. Plakanā un materiāla dizaina hibrīds

6. Sulīgas animācijas

7. Tipogrāfija

8. Spilgtas krāsas

9. Ilga ritināšana

10. HD grafika

11. Ilustrācijas

12. Secinājumi

Sāksim ātri, izpētot, kā neliela mijiedarbība var radīt apmeklētājiem neaizmirstamu pieredzi.

Mikromijiedarbības

Izšķirošs iekšā mobilais dizains lietojumprogrammas spēlē mikro-mijiedarbības dizainu nopietnāku darbību plūsmā. Parasti tie izskatās tik nenozīmīgi, ka lietotāji nolemj tos izpildīt bez jebkādas vilcināšanās.

Paziņojumu iespējošana/izslēgšana, pogas krāsas maiņa nospiežot, skaņas paziņojumi, kas norāda uz jauna komentāra ierašanos pie tavas bildes vai ko citu – visas šīs mazās lietas lietotāja acīs summējas par kopainu, veido iespaidu par aplikācijas lietošanu.

Labi izstrādātas mikromijiedarbības priekšrocības

• Varat ātri apmācīt lietotājus mijiedarboties ar jūsu produktu;
• Komunikācija par statusu, izmaiņām un iespēju pievērst uzmanību noteiktām jomām;
• Drošība atsauksmes pabeigto darbību rezultātā;
• Jauku elementu pievienošana, kas netraucēs iegūt galveno pieredzi mijiedarbībā ar produktu;
• Zīmola pozīciju nostiprināšana ar saskarnes ekskluzivitāti;
• Lietotāju cerību apmierināšana (mikromijiedarbība ir norma daudzām vietnēm un lietojumprogrammām). Protams, tie tiks gaidīti arī jūsu produktā.

1. Mēs lietotāju vidū veidojam ieradumu.

Mikromijiedarbība ir galvenā sastāvdaļa apmeklētāju paradumu veidošanā. Šim procesam ir trīs elementi:

• Signāls (mikromijiedarbība) - trigeris, kas ierosina darbību;
• Atkārtotas darbības - lietotājam zināma darbību secība;
• Atlīdzība ir darbību pabeigšanas rezultāts.

Piemēram, sarkans taisnstūris un balta ikona (sprūda) Facebook norāda jaunu ziņojumu. Lietotājs veic parasto darbību, noklikšķinot uz ikonas, lai tērzētu ar savu draugu (atlīdzība). Pēc kāda laika lietotājs, redzot šādas lietas, automātiski veic no tā prasītās darbības. Jo augstāks atalgojums (motivācija), jo stiprāks kļūst ieradums.

2. Dizains biežai lietošanai.

Tā kā mēs vēlamies izveidot ieradumu lietot savu produktu, mums ir jāizstrādā elementi, kas tiks izmantoti bieži. Tas, kas sākumā var izskatīties interesants un jauks, laika gaitā var kļūt kaitinošs, novecojis pēc simtiem darbības atkārtošanas ciklu. Mēģiniet novērst šāda efekta iespējamību.

3. Izveidojiet kopēju vizualu aktivizētājiem, izmantojot produkta saskarni.

Mēģiniet izveidot mikro-mijiedarbības elementus, kas pēc dizaina ir līdzīgi ar kopīgu saskarni. Piemēram, viena un tā pati krāsa, izmantojot tās pašas animācijas, formas utt. Dizaina konsekvence palielina zīmola atpazīstamību un nostiprina zīmola identitāti. Piemēram, laikraksts New York Times izmanto savu logotipu kā sāknēšanas animāciju. Korporatīvi atpazīstams stils, kuru ne ar ko citu nesajauksi.

4. Izmantojiet animācijas.

Mikromijiedarbība ir ideāli elementi, lai jūsu dizainā sniegtu nelielu lietotāja prieku. Animācijas padara tos dzīvākus, aizraujošākus, un pati kustība piesaista uzmanību. Pēdējais bieži vien ir mūsu galvenais mērķis – ieinteresēt. Vienkārši izmēģiniet to un salīdziniet rezultātus pirms un pēc animāciju ieviešanas.

5. Izvairieties no nevēlamas mijiedarbības.

Izplatīta kļūda ir interfeisa pārslodze ar pārāk daudzām mikromijiedarbības darbībām. Sākumā izveidojiet to komplektu tikai pamatfunkcijām un apskatiet lietotāju reakciju. Visizplatītākie saskares punkti dizainā ir:

• Iekraušanas ekrāni;
• Animētas ilustrācijas, kas aktivizējas, novietojot kursoru virs peles.

Pozitīva lietotāja reakcija uz pamata elementu animāciju ir signāls to pievienošanai.

6. Izmantojiet humoru savos tekstos.

Mikromijiedarbības, piemēram, pogas ar aicinājumu uz darbību vai citas noklikšķināmas reklāmas (piemēram, 404. kļūdu lapas), būs efektīvākas, ja tās ir pārkaisītas ar humoru. Dažās vietās pat varat izmantot cilvēka balss ierakstu.

Kartes

Mēs visi zinām kāršu spēku jau ilgi pirms digitālā dizaina (vizītkartes, spēļu kārtis utt.). Ideja ir tāda, ka jaunākā informācija par vienu tēmu tiek saspiesta vienā mazā traukā.

4. Sāknēšanas animācijas padarīt gaišāku gaidīšanu.

Ja nevarat noņemt lapas ielādes joslu vai samazināt gaidīšanas laiku, interesanta animācija palīdzēs lietotājam atvieglot šo procesu.

Tā vietā, lai izmantotu tradicionālās ielādes joslas ar procentuālo ielādes progresu, mēģiniet piedāvāt auditorijai kaut ko nedaudz garšīgāku un radošāku. Protams, labākā izeja no situācijas ir vietnes optimizēšana. Iekraušanas joslas izmantošana ir ekstrēma iespēja. Ja jūs patiešām nevarat iztikt bez tā, labāk ir izrotāt rutīnas procesu ar animāciju.

Tipogrāfija

Augstāka ierīču izšķirtspēja, ātrāks internets un piekļuve jaunām tīmekļa fontu bibliotēkām ( Google fonti, Adobe Typekit u.c.) padara mūsu laiku par tipogrāfijas zelta laikmetu.

Kvalitatīvas tipogrāfijas priekšrocības

• Paaugstināta ekrāna izšķirtspēja sniedz plašākas iespējas interesantu tipogrāfijas ideju īstenošanai;
• Spēja uzsvērt zīmola unikalitāti, padarīt to atpazīstamu izmantotā fonta dēļ;
• Teksta satura ietekmes stiprināšana;
• Rīks elementu vizuālas hierarhijas veidošanai. Tas ir īpaši svarīgi, lai izceltu CTA (aicinājuma uz darbību) rīkus.

Lietošanas principi

1. Skaidrība ir viss.

Nekad neupurējiet salasāmību, lai iegūtu "labāku" fontu — tipogrāfiskie stili nedarbojas, ja nevarat izlasīt rakstīto.

2. Vienkāršs, bet iespaidīgs fonts.

Vienkāršu tipogrāfiju ir vieglāk lasīt un ātrāk ielādēt, nemaz nerunājot par būtisku minimālisma stiliem. Pievērsiet uzmanību sekojošajam:

Fonta lieluma palielināšana;

Kontrastējiet fonta krāsu un to aptverošo fonu;

Izmantot treknraksts galvenajās vietās.

Nevajadzētu jaukt jēdzienus "iespaidīgs" un "puķains". Vienkārši fonti palīdz pārliecinoši un skaidri nodot ziņojumu.

3. Sarežģīti un vienkārši fonti: Serif vs. Sans Serif.

Nav pārliecinošu pierādījumu, ka viens no tiem vienmēr ir salasāmāks par otru. Tas ir tikai stila jautājums, nekas vairāk. Sarežģīti fonti padara tekstu bagātāku, formālāku, savukārt vienkāršie fonti lieliski sader ar minimālisma dizainu.

Populāri sans serif fonti:

1. Proxima Nova
2. Futura
3. Avenir
4. Atvērt Sans
5. Helvetica Neue
6. Populāri serifu fonti:
7. Caslon
8. Garamonds
9. Kravas teksts
10. minions
11. FF Meta Serif

5. Pārklājiet ar roku rakstītus fontus.

Šādi fonti ir labs papildinājums tiem, kas vēlas izveidot "mājas" stilu. Tā kā šādas tipogrāfijas salasāmība ir ļoti apšaubāma, ierobežojiet tās izmantošanu ar lieliem nosaukumiem, kas uzklāti uz attēliem.

6. Teksts, kas pārsniedz norādīto vietu.

Viens no labāki veidi pievērsiet uzmanību tekstam, jo ​​tas pārklāj citus elementus, pārsniedzot to darbības jomu. Vārda daļa vai viss vārds var iziet, piemēram, ārpus attēla, uzklāts uz blakus esošās zonas. Tādējādi ekrāns tiek sapludināts vienotā veselumā un izskatās iespaidīgi un dažreiz pat nežēlīgi.

7. Noklusējuma fonti.

Vairumā gadījumu nevajadzētu izmantot vairāk kā divas fontu saimes. Ja vēlaties dažādot saturu, mainiet fontu izmērus un veidus vienā saimē.

Spilgtas krāsas

Visā 2015. gadā mēs atpazinām tendenci uz spilgtām krāsām. 2016. gadā šis virziens turpināja uzņemt apgriezienus. Turklāt spilgto krāsu popularitāte tikai pieaugs. Izmantojiet vairāk palešu un toņu, ja vēlaties sekot līdzi modei.

Spilgtas krāsas izmantošanas priekšrocības

• Dažādi krāsu toņi un gradienti palīdzēs labāk atšķirt to izcelto saturu;
• Vizuālās stimulācijas izmantošana ir īpaši noderīga mazākām vietnēm.

1. Duotons.

• Divu toņu shēmas izmantošana ir tendence pati par sevi un būs populāra vēl ilgi, ieviešot spilgtas krāsas.
• Ir skaidrs, ka divtonis ir divu krāsu kombinācija. Tas var būt vienas krāsas toņi vai pilnīgi pretēji toņi.
• Tīmekļa dizainā divtonis bieži tiek izmantots, lai labāk attēlotu attēlus un fotoattēlus. Izskatās aizraujoši un moderni.
• Paturiet prātā šādus punktus:
• Izmantojiet vienkāršus fotoattēlus ar vienu spēcīgu tēmu. Elementiem bagāti attēli (piemēram, ainavas) var būt grūti saskatāmi, it īpaši mobilo ierīču ekrānos;
• Kontrasts divtonis ļauj vieglāk atšķirt fotoattēla detaļas;
• Atdaliet fotoattēlu no pārējā skata apgabala ar krāsainām apmalēm vai pilnekrāna ritināšanu;
• Izmantojiet asus attēlus ar skaidri atšķiramām objektu robežām.

Līdzīgi, divtonis bieži tiek izmantots, lai pārklātu fotoattēlu, kā parādīts tālāk esošajā piemērā.

2. Pārklājums.

Vēl viena interesanta spilgto krāsu izmantošanas tendence ir to pārklājums fotogrāfijās.

Pārklāta krāsa palielina attēla nozīmi, vēlmi apsvērt tā detaļas. Krāsa palīdzēs mainīt fotoattēla interpretāciju. Piemēram, sarkans pārklājums padarīs attēlu dzīvāku un uzmācīgāku, savukārt zils pārklājums radīs mierīgu sajūtu no redzamās ainas.

3. Iespaidīgi gradienti.

Krāsu sajaukšana ar pakāpenisku izbalēšanu ir populāra izvēle daudziem mūsdienu dizaineriem. Lai sajauktu, nav nepieciešams ņemt vairāk par 2 vai 3 krāsām - tas ir lieki.

4. Izceliet atslēgvārdus un pogas.

Vienkrāsainos tekstos izmantojiet spilgtas krāsas, lai izceltu vārdus un frāzes, piemēram, “bezmaksas”, “šodien” utt. Tas piešķirs tiem papildu nozīmi, palielinot ieteikumu spēku.

Tādā pašā veidā dažas pogas varat padarīt lielākas par citām, izceļot tās ar krāsainu apmali vai fonu. Tas darbojas lieliski.

5. Elementa stāvokļa maiņa, virzot kursoru virs tā.

Kā jau minējām, runājot par kartēm, krāsas ir ideāls rīks elementu atšķiršanai. Krāsu maiņa, virzot kursoru, ir drošs un vienkāršs vizuālās komunikācijas veids, kas palielina vietnes vai lietojumprogrammas interaktivitātes pakāpi.

6. Izmantojiet pareizo krāsu, lai izraisītu vēlamās emocijas.

Dažādas krāsas izraisa dažādas emocijas. Šeit ir neliela krāpšanās lapa par dažām vietnēs bieži lietotām krāsām:

• Sarkans - vienlaikus rada kaislības un piesardzības sajūtu. Šī krāsa palielina asinsrites intensitāti;
• Zils - rada miera un stabilitātes sajūtu, tāpēc to bieži izmanto dažādu finanšu institūciju vietņu dizainā;
• Zaļš - nosaka labu līdzsvaru starp siltajām un aukstajām krāsām, rada dabiskuma, tīrības un labklājības sajūtu;
• Violeta - vēsturiski saistīta ar kaut ko karaliski, rada greznības un noslēpuma sajūtu;
• Baltā krāsa ir ideāla neitrāla krāsa, kas, apvienojot to ar citām krāsām, rada elegances sajūtu, pastiprinot pēdējo efektu;
• Melnā krāsa ir izsmalcināta un spēcīga krāsa, kas ir mūžīga lietošanai jebkura veida projektos.

ilga ritināšana

Tīmekļa vietnes ar gariem vai bezgalīgiem ritinājumiem ir ātri iekarojušas savu vietu tīmekļa dizainā.

Garās ritināšanas izmantošanas iespējas

• Lieliski piemērots mobilajām ierīcēm. Mazākiem ekrāniem ir nepieciešama bieža ritināšana, un formāts labi darbojas ar skārienvadībām;
• Ērta stāstījuma forma, kurā saturs tiek iegremdēts šādā veidā, spēj ieinteresēt apmeklētājus;
• Navigācijas vienkāršošana;
• Bezgalīga ritināšana lietotāja pieredzei piešķirs pārsteiguma elementu.

1. Izmantojiet vizuālas norādes.

Ikona, piemēram, bultiņa, kas norāda ritināšanas virzienā un ārpus satura apgabala, izskatīsies piemērota un informatīva. Tas jums paziņos, cik atlicis ritināt līdz lapas beigām, un paziņos par satura lineāro izkārtojumu.

2. Ekrāni kā lapas.

Ritināšana var būt ne tikai vienmērīga, bet arī pa lappusei. Ritināšana - un viss ekrāns ir mainījies. Tas ir moderns un skaists.

Pielāgojiet katru lapas izkārtojuma ekrānu tā, lai tas pilnībā aizpildītu visu redzamo laukumu. Izveidojiet individuālus stilus, kas atbilst kopējai tēmai katram no šiem ritināšanas lodziņiem. Dažreiz ir lietderīgi dublēt CTA elementus katrā ekrānā. Šī pieeja ļauj lietotājiem holistiski uztvert vietni un ātri saprast, uz ko vietnes veidotāji viņus ved.

Mazākām vietnēm ar vairākām lapām garas ritināšanas vietā var izmantot navigācijas ritināšanu. Tas nozīmē, ka lietotājs var pāriet uz citu lapu, ritinot peli, apejot nepieciešamību noklikšķināt uz izvēlnes vienumiem. Varat izveidot lapas pārejas animācijas, lai pastiprinātu vizuālo saziņu ar lietotāju, kā parādīts tālāk esošajā ekrānuzņēmumā.

3. Lipīga navigācijas izvēlne.

Viens no lielākajiem riskiem, ilgstoši ritinot, ir lietotāja dezorientācijas iespēja. Tas vienkārši pazūd pa ceļam. Vienkāršākais risinājums ir lipīga navigācijas izvēlne, kas paliks tajā pašā pozīcijā ekrānā, ritinot lapu.

Ja tas, jūsuprāt, aizņem daudz vietas, varat vismaz iespējot iespēju pārlēkt izvēlnē, lai cilvēks varētu ātri pāriet uz citu sadaļu. Vismaz izveidojiet to kā pogu Atgriezties uz augšu, it īpaši, ja jums ir bezgalīga ritināšanas vietne.

4. Ritinot aktivizētas animācijas.

Animācijas padara ritināšanu jautrāku un piesaista lietotāju saziņas procesā ar vietni. Padariet ritināšanu vienmērīgāku un vizuāli interesantāku, izmantojot animācijas efektus. Tas liks lietotājam koncentrēties un uzdot tādu jautājumu kā “Kas notiks tālāk?”. Jūs varat noteikt savus spēles noteikumus, veidojot animāciju secību rīvmaizes veidā slavenajā pasakā. Cilvēks vēlēsies redzēt tavu ideju līdz galam, ja tā būs labi īstenota.

Parallaksa ritināšana ir vienkārša izeja, taču ne vienīgā. Aiciniet uz radošumu, nav nepieciešams precīzi atkārtot iepriekš izdomātās efektu secības.

5. Samaziniet garas ritināšanas lapas SEO trūkumus.

Bezgalīgi ritināmām vietnēm ir savi SEO ierobežojumi. Bet tos var mīkstināt. Nīls Patels sniedz noderīgus padomus par šo tēmu.

HD grafika

Ierīces ar augstas izšķirtspējas ekrāni jau sen ir standarts, un 2016. gads ir HD dizaina gads. Valdzinoši videoklipi, spēcīgi fotoattēli un bagātīga grafika nosaka kustības vektoru uz vizuālā satura kvalitāti.

Augstas kvalitātes grafikas izmantošanas priekšrocības

• Ierīču ar HD ekrāniem lietotāji sagaida atbilstošas ​​kvalitātes saturu;
• Augstas kvalitātes video var ievērojami palielināt laiku, ko apmeklētāji pavada vietnē;
• Radošums dod dizaineriem lielāku kontroli pār apmeklētāju noskaņojumu.

1. Apvienojiet krājuma un pielāgotus fotoattēlus.

Protams, labākas ir unikālas fotogrāfijas, taču ne katrs uzņēmums var atļauties nolīgt fotogrāfu. Kā kompromisu varat apvienot krājumus un oriģinālos fotoattēlus tā, lai tie būtu unikāli. Atrodiet krājuma fotoattēlus par vēlamo tēmu, pievienojiet savu logotipu, mainiet krāsas, ja nepieciešams, un esat pabeidzis! Lai iegūtu zīmola attēla materiālu, varat apmeklēt vietni Unsplash, Pixabay vai Pexels.

2. Sagatavojiet augstas kvalitātes attēlus.

Pilnekrāna fona attēli un videoklipi uzreiz piesaista lietotāju uzmanību un kalpo kā perfekta prezentācija minimālistiskām vietnēm.

Kā parādīts tālāk esošajā ekrānuzņēmumā, augsta kontrasta attēls viegli pievērš uzmanību teksta saturam, kas ir pārklāts ar to. Tā kā lielākā daļa ierīču neatbalsta kameru standarta malu attiecību 1:15, jums būs iepriekš jāapgriež attēls, lai tas atbilstu dažādām ekrāna izšķirtspējām. Attēlam jābūt vienlīdz skaidram un salasāmam jebkurā ierīcē.

3. SVG vai rastra grafika?

Rastra grafikas formātiem (.jpg, .gif, .png) ir noteikta pikseļu izšķirtspēja, savukārt skalārā grafika var augt vai sarukt, lai ietilptu ekrānā, nezaudējot kvalitāti.

Izmantojiet SVG, lai iegūtu unikālu grafiku, un fotoattēliem vislabāk ir rastra formāti ar stingri ierobežotu pikseļu skaitu izšķirtspējā. Šādiem nolūkiem ir svarīgi iegādāties fototehniku ​​ar labu izšķirtspēju.

4. Video fons galvenēs.

Pieaugot vidējam interneta ātrumam, popularitāti iegūst video foni. To izmantošana var pagarināt laiku, ko cilvēki pavada jūsu vietnē. Pievērsiet uzmanību šādiem punktiem:

10–30 sekunžu video segmenti nodrošina labu līdzsvaru starp saistošu saturu un ātru lapas ielādes ātrumu;

Pēc noklusējuma skaņa videoklipā ir atspējota - visbiežāk lietotāji negaida uzreiz dzirdēt skaņu pēc došanās uz vietni, tas var būt kaitinoši daudziem. Labāk to izslēgt, atstājot barošanas pogu tiem, kas vēlas klausīties.

Video piesaista lietotājus jau no pirmās sekundes pēc ienākšanas vietnē, kas ir nopietns iemesls tā izmantošanai.

Ilustrācijas

Lai izveidotu attēlus, kas ir unikālāki par krājuma fotoattēliem, dizaineri arvien vairāk pievēršas ilustrācijām. Tie ir kļuvuši par populāru alternatīvu dažādu fotobanku risinājumiem.

Ilustrāciju izmantošanas priekšrocības

• Tieša piesaiste lietotāja iztēlei, kas ļauj stiprināt viņa personīgo saikni ar vietni;
• Lielāka kontrole pār attēla saturu un detaļām;
• Tas parasti ir lētāks nekā fotosesijas rezervēšana un piedāvā lielāku radošo brīvību;
• Ilustrācijas skaidri pauž sarežģītas koncepcijas, izmantojot pazīstamus vizuālos attēlus.

1. Saskaņojiet ilustrāciju ar vispārējo izkārtojuma tēmu.

Tīmekļa dizaina ilustrācijas radās ikonu un citu sekundāru elementu veidā. Ja vēlaties šo stilu izvirzīt priekšplānā, tas ir jāapvieno ar vietnes galveno tēmu dizaina un satura ziņā.

2. Pievienojiet radošus efektus.

Ilustrācijas dod dizaineriem lielāku brīvību izmantot radošus efektus, īpaši populāri ir šie divi:

Animācijas – tās vienmēr iet roku rokā ar ilustrācijām;

Slāņi — to daudzpusības dēļ ilustrācijas ļauj vienkāršot efektus, ieviešot slāņus, lai attēlam pievienotu dziļumu.

3. Izmantojiet ilustrācijas instrukcijās un rokasgrāmatās.

Pat vietnes, kurās netiek plaši izmantots ar roku zīmēts grafiskais stils, to joprojām var iekļaut savās instrukcijās un rokasgrāmatās. Attēli pateiks pat vairāk nekā vārdi, cilvēks pieradīs ātrāk. Turklāt bezrūpīga pozicionēšana, izmantojot multfilmu attēlus, palīdzēs lietotājam aizmirst, ka viņš mācās, padarot šo procesu vieglāku un jautrāku.

4. Ilustrācijās izmantojiet plakanu dizainu.

Protams, plakanais dizains laika gaitā ir ieguvis savus slāņus, taču to var izmantot arī ilustrāciju veidošanai. Tas nav zaudējis lielāko daļu no savām nozīmīgākajām priekšrocībām (radīšanas un uztveres vienkāršība, šādas grafikas ielādes ātrums) un joprojām tiek veiksmīgi izmantota ilustrāciju noformēšanā.

secinājumus

Jūs esat apguvis dažas populāras metodes mūsdienīga vide web dizains. Izmantojiet tos sava projekta kontekstā. Atcerieties, ka nekad nevajadzētu akli sekot kādai tendencei tikai tāpēc, ka tās īstenošana pati par sevi izskatās lieliski. Visas šīs lietas ir jāizmanto saprātīgi un lietderīgi, selektīvi un jēgpilni. Esam pārliecināti, ka starp iepriekšminētajiem būs idejas, kas palīdzēs realizēt komerciāli efektīvu un lietotājiem noderīgu projektu.

Tiešsaistes biznesa panākumi ir funkcionāla vietne un veicināšana. Šodien ikvienam ir skaidrs, ka tīmekļa vietnes ir visvairāk efektīva metode uzņēmējdarbības veicināšana internetā. Sociālo tīklu un SMM paplašināšanās tikai paplašināja mazo uzņēmumu iespējas, bet samazināja interesi par vietnēm. Tirgotājiem, kuriem nav sava tīkla resursa, parasti ir daudz jautājumu, kas saistīti ar uzticamību un reputāciju. grupā iekšā sociālajos tīklos to ir tikpat viegli noņemt, kā sākt. Turklāt plkst lielie projekti bieži vien ir vairākas klonētas grupas, tāpēc savas vietnes izveide ir sava veida uzticības zīme. Un daudz kas ir tieši atkarīgs no pašas vietnes līmeņa.

Viena no svarīgām lomām ir resursu attīstības līmenim. Var teikt, ka to var izmantot, lai novērtētu biznesa veiksmes pakāpi. Daudzi interneta lietotāji jau labi pārzina tehnisko pusi, tāpēc var novērtēt, cik liela uzmanība tiek pievērsta šim vai citam resursam. Piemēram, vietnes, kas izveidotas, izmantojot vienkāršu HTML, jau sen ir pagātnē. Protams, tīklā joprojām var atrast daudz šādu resursu, taču tie atgādina pagātnes mamutus. Mūsdienās vietnes iet kopsolī ar laiku un prasa savlaicīgus atjauninājumus. Tajā pašā laikā vietņu izveide tiek veikta saskaņā ar galvenajām tendencēm.

Katrs gads nes savas tendences. Aģentūras Marketing Guru galvenais izstrādātājs Artjoms Ponomarjovs dalījās ar galvenajām tīmekļa dizaina tendencēm.

Adaptīvs izkārtojums un lietotāja interfeisa veidnes

Diezgan sagaidāms, ka galvenās tendences 2016. gadā plūda raiti no pagājušās sezonas. Un tie saglabāsies līdz nākamajam lūzuma punktam. Tagad tīmeklī galvenās tendences nosaka mobilās ierīces, tāpēc adaptīvās veidnes var saukt par galveno tendenci. Tas ir gan labi, gan slikti vienlaikus. Adaptīvs dizains- lielisks variants tehniskās realizācijas ziņā, taču ir arī ievērojams blakusefekts. Vietnes, kuru pamatā ir lietotāja interfeisa veidnes, daudzējādā ziņā ir ļoti līdzīgas, kas ievērojami sarežģī dizaineriem uzdevumu.

mozaīkas dizains

Mājas lapas dizains ir kļuvis daudz vienkāršāks. Galvenās tendences nosaka mobilās platformas un ir grūti pārvērtēt Microsoft ieguldījumu Windows 8 interfeisa izstrādē, no kā sākās plakanā dizaina izplatība. Populāri ir vienkārši grafiskie risinājumi, bez liekiem dekoratīviem elementiem, jo ​​tas palielina satiksmi. Kvalitāte palielinās kvantitātes vietā. Tāpēc tiem attēliem, kas tiek izmantoti vietņu veidnēs, ir jābūt iekšā laba kvalitāte. Parasti šim nolūkam tiek izvēlēts viens augstas kvalitātes attēls, kas tiek izmantots kā galvenais fons.

Grafika teksta vietā

Tajā pašā laikā pieaugusi infografikas loma. Grafiskās ikonas vienkāršo informācijas uztveri, tāpēc, iesniedzot informāciju, tās paļaujas uz attēliem. Daļēji tas ir saistīts ar faktu, ka teksta lasīšana viedtālruņa ekrānā ir daudz grūtāka nekā ikonu skatīšana. Plāni sans-serif fonti ar lielu priekšgalu ir kļuvuši populāri. Šos fontus ir viegli lasīt gan lielos, gan mazos ekrānos. Ikonas lielākoties ir ieskicētas.

Bezgalīga ritināšana

Vienas lapas vietņu parādīšanās izraisīja skatītāju attīstību. Bezgalīgā ritināšana ir ieguvusi popularitāti. Visa informācija tiek apkopota pirmajā ekrānā, un papildu saturs tiek ielādēts pakāpeniski, ritinot. Izvēlnes vienumi ir paslēpti aiz atsevišķas ikonas.

Interaktīva mijiedarbība

multivides saturs

Līdz ar meklēšanas algoritmu izmaiņām vietnes saturs tika pilnībā pārskatīts. Pašreizējā posmā vietnes galvenokārt piedāvā multivides saturu, izmantojot augstas kvalitātes grafiku, audio un pat video failus. Bieži vietnēs kā fonu var atrast video failus.

Mārketinga Guru ir pilna cikla aģentūra, kas specializējas interneta projektu izstrādē un īstenošanā. Uzņēmuma komandā ir specializēti speciālisti. Uzņēmumam ir vairāk nekā 530 veiksmīgi realizēti projekti.

Kas maina tīmekļa dizainu?

Pirms sākat prognozēt tendences, ir svarīgi saprast, kāpēc tīmekļa dizains mainās.

Tehnoloģijas: Pieejamo tehnoloģiju un rīku uzlabojumi gan tīmekļa vietņu veidošanā, gan izmantošanā lielā mērā nosaka dizaineru un izstrādātāju iespējas.

Lietotāji: Tas, kā vietņu apmeklētāji, dizaineri un izstrādātāji izmanto pieejamās tehnoloģijas, maina arī web dizaina nozari, liekot tai pielāgoties perspektīvākajām tendencēm.

Citas radošās jomas: Populāri vienumi no citām radošajām jomām (piemēram, Grafiskais dizains un augstā mode) galu galā arī kļūst par daļu no tīmekļa dizaina nozares un otrādi. Radošums attīstās ideju kombinācijā un pretnostatījumā, kas ļauj labāk nodot emocijas un piedāvāt interesantus risinājumus.

Lielākā daļa no mums pašlaik izmanto vairākas ierīces, lai pārlūkotu tīmekli (piemēram, planšetdatoru un klēpjdatoru), un sagaida, ka konkrētā vietne darbosies labi un izskatīsies lieliski neatkarīgi no ierīces, kas tiek izmantota, lai piekļūtu šim resursam.

Adaptīvs tīmekļa dizains (RWD), kas ietver viena un tā paša HTML koda ielādi jebkurā ierīcē un CSS izmantošanu, lai mainītu izskats Ierīcei raksturīgās lapas ir izplatīta tehnoloģija, ko Google iesaka izmantot, optimizējot vietnes mobilajām ierīcēm. Tāpēc daudzas no tendencēm zemāk esošajā sarakstā atspoguļo tīmekļa dizaina pieejas, kas papildina RWD.

2016. gada tendenču saraksts ir šāds:

Minimālisms un plakans dizains 2.0

2015. gadā minimālisms bija ļoti pieprasīts. Un 2016. gadā pieprasījums pēc šīs koncepcijas turpināsies. Šis ideāls variants izmantošanai kopā ar RWD, jo tas novērš neskaidrības, koncentrējas uz svarīgākajiem elementiem un efektīvi izmanto telpu. Citiem vārdiem sakot: mazāk ir vairāk.

Populāra pieeja tīmekļa dizainam, kas ļoti labi saskan ar minimālisma filozofiju, ir tā sauktais dzīvoklis dizains (aka Flat Design). Tagad visatbilstošākais ir tā jaunākais iemiesojums, saskaroties ar Flat 2.0.

Sniedz lielisku priekšstatu par Flat 2.0 principiem Google materiālu dizains: materiālās pasaules atspulgs ar interesantām ēnu, gaismas un kustību spēlēm, ļaujot lietotājiem iegūt vizuālas norādes par to, kā mijiedarboties ar vietni.

Galvenie komponenti, piemēram, režģi, negatīvā telpa, dinamiskas krāsas un satriecošas formas, izsaka nozīmi un hierarhiju, veidojot pamatu dziļākai lietotāju iesaistei.

Līdz šim plakanajā dizainā ir izvairījies no noapaļotiem stūriem, ēnām vai krāsu gradientiem, taču Flat 2.0 izplatība var novest pie eksperimentiem ar minimālām tekstūrām un mīkstiem gradientiem.

Vintage stils tieši no 80. gadiem

Krāsains lielgabarīta datoru laikmets un milzīgs mobilos tālruņus, kas aptvēra 80. gadus un 90. gadu sākumu, ir galvenais iedvesmas avots tīmekļa dizaineriem, kuri dod priekšroku vintage stila tendencei, kas uzņem apgriezienus. Pikseļu ikonas un teksts, galaktikas foni, interaktīvas kustīgas zvaigznes un planētas veidos vienu no tīmekļa dizaina nozares lielākajām tendencēm 2016. gadā.

Interaktīva un aizraujoša pieredze

Cilvēkiem pēc dabas patīk runāt un klausīties. labi stāsti. Pateicoties HTML5 kanvas elementa burvībai, CSS3 animācijām un pārejām, modernām JavaScript API, piemēram, WebGL un Greensock, un aparatūras paātrinājuma jaudām, tīmeklī stāstītie stāsti kļūs vēl ieskaujošāki un interaktīvāki.

Sērfošanas internetā, izmantojot mobilās ierīces, prakses izplatība ir novedusi pie tā, ka lietotāji ir pieraduši pie ilgstošas ​​ritināšanas. Tīmekļa dizaineri, kuri spēj stāstīt lieliskus stāstus un iesaistīt lietotājus pieejamā satura iepazīšanas procesā, varēs likt lietotājiem ritināt līdz kājenei.

Spilgtas unikālas ilustrācijas un ikonogrāfija

Augsta pikseļu blīvuma monitoru parādīšanās ir parādījusi, ka standarta attēlu formāti ne vienmēr ir piemēroti lietošanai moderns internets. .jpg un .png failu izmantošana tīklenes displejos var izraisīt pikseļu veidošanos, kas pasliktina vietnes estētiku.

Šo problēmu var atrisināt, izmantojot mūsdienu pārlūkprogrammu atbalstīto SVG (Scalable Vector Graphics) formātu un viegli ieviešamus fontus ar ikonām. Pateicoties šiem elementiem, mēs varam sagaidīt tuvākajā nākotnē vairāk tīmekļa dizaina risinājumu, kuru pamatā ir krāsainas unikālas ilustrācijas, stilīgi ar roku zīmēti fonti ar ikonām un SVG ikonas, kas paliek izteiksmīgas un skaistas jebkurā ekrāna izšķirtspējā.

Fonti dara par sevi zināmus

Tipa darbi ir galvenā dizaina izstrādes un zīmola veidošanas sastāvdaļa. Tas attiecas arī uz internetu, kur informācijas patēriņš ir galvenais lietotāju mērķis, apmeklējot konkrētas vietnes lapas.

Tā kā tādi pakalpojumi kā Google Fonts un Typekit nodrošina apmeklētājiem unikālus un viegli lietojamus fontus, laiki, kad tīmekļa dizaineriem bija jāstrādā tikai ar dažiem sistēmas fontiem, ir pagājuši.

Plakans dizains un minimālisms jau izmanto lielu, drosmīgu burtveidolu priekšrocības. 2016. gadā varam sagaidīt vēl vairāk eksperimentu ar māksliniecisko fontu izmantošanu vietnēs.

Augstas izšķirtspējas vizuālie materiāli

Palielināt joslas platums tīmeklis, palielināts pārlūkprogrammas atbalsts HTML5 video elementam un jauni veidi, kā selektīvi ielādēt augstas izšķirtspējas grafiku tīklenei līdzīgās ierīcēs, 2016. gadā vēl vairāk palielinās satriecošu augstas izšķirtspējas fona attēlu un HD video izmantošanu vietnēs.

Pārlūkprogrammas atbalsta paplašināšana CSS3 fona sajaukšanas režīma rekvizītam var radīt ļoti interesantus mākslinieciskus efektus attēlos, kas tiek izveidoti tieši pārlūkprogrammā ar dažām CSS koda rindiņām.

Arvien vairāk tiek izmantoti arī kinofilmu kategorijas efekti. Tie ļauj izveidot statiskus attēlus ar animētiem elementiem, kas piesaista vietnes apmeklētāju uzmanību. Šie efekti nav revolucionāri, taču Live Photos panākumiem jaunākajos iPhone tālruņos un pieaugošajam pārlūkprogrammu skaitam, kas atbalsta HTML5 kanvas elementu, vajadzētu palīdzēt pārvietot efektus no kinogrāfu kategorijas uz vienu no galvenajām tīmekļa dizaina tendencēm 2016. gadā.

Elastīgāki uz režģi balstīti izkārtojumi

Pinterest stila režģa izkārtojumi joprojām ir ļoti populāri pat šodien. Minimālisms, plakans dizains un populāri priekšgala ietvari, piemēram, Bootstrap, kas atvieglo režģu lietošanu, veicina uz režģi balstītu strukturētu tīmekļa izkārtojumu pieaugumu.

2016. gadā varam sagaidīt elastīgu uz režģi balstītu izkārtojumu popularitātes pieaugumu. Tīmekļa dizaineru vēlme palielināt lietotāju iesaisti un satura interaktivitāti veicina pāreju uz elastīgākiem režģa izkārtojumiem un atteikšanos no klasiskajām opcijām.

Secinājuma vietā

Iepriekš uzskaitītās web dizaina tendences papildina viena otru, padarot mājas lapas dizainu vēl daudzveidīgāku, interesantāku un unikālāku. Bet šo sarakstu varētu arī paplašināt. Kādas tīmekļa dizaina tendences, jūsuprāt, noteiks 2016. gadā?