19 tikrai naudingų interaktyvių interneto dizaino pamokų

Reaguojantis interneto dizainas nebėra pasirenkamas; svetainės tiesiog turi būti atsakingos šiais laikais. Laimei, RWD yra lengviau nei bet kada įdiegti, nes yra tiek daug puikių įrankių, kurie padės jums sukurti ir išbandyti savo dizainą bei užtikrinti, kad sukursite geriausią vartotojo patirtis .

Čia pateikiame keletą geriausių šaltinių, kurie padės jums gerai veikti ir atrodyti bet kuriame įrenginyje. Norite daugiau naudingų išteklių? Mūsų vadovai geriausiems svetainių kūrėjas ir interneto priegloba pagalbos tarnyba. Ir jei jums rūpi saugiai saugoti failus, jums jų reikia debesies saugykla galimybės.

01. Kaip pradėti reaguoti mąstyti

Interaktyvios interneto dizaino pamokos: kaip pradėti reaguoti mąstyti



geriausios figūrų piešimo knygos pradedantiesiems pdf
Patek į reaguojančią proto būseną(Vaizdo kreditas: FreeCodeCamp)

Į šį įrašą „FreeCodeCamp“ , Kevinas Powellas pabrėžia svarbų dalyką, kad reaguojantis interneto dizainas nebėra tendencija; tikimasi, kad bus kuriamos svetainės, ir tai reiškia, kad nuo pat pradžių reikia galvoti atsakingai. Čia jis parodo, kaip patekti į jautrų požiūrį, kurdamas visiškai reaguojančią 3 puslapių svetainę.

02. 9 atsakingi tipografijos patarimai

Interaktyvios interneto dizaino pamokos: 9 interaktyvūs tipografijos patarimai

Gaukite ekspertų atsakymų į tipą(Vaizdo kreditas: Adamas Banksas)

Reaguojančiam interneto dizainui, be abejo, reikia reaguoti į tipografiją. Bet ką tai net reiškia ir kaip tai įgyvendinti? Mes paklausėme septynių pagrindinių interneto dizainerių už jų patarimus, kaip sukurti elegantišką, įskaitomą tekstą kiekvienoje peržiūros srityje.

03. Reaguojančios žiniatinklio tipografijos taisyklės

Reaguojančios žiniatinklio tipografijos taisyklės

Vadovaukitės šiais patarimais, kad jūsų interaktyvi žiniatinklio tipografija būtų teisinga

Reaguojanti žiniatinklio tipografija yra sunki - reikia turėti tiek dizaino, tiek techninės patirties. Tačiau kad ir kaip tai būtų keblu, neteisinga klaida nėra išeitis, nes tipografija yra kertinis interneto dizaino akmuo. Sekite šiuos projektavimo principus ir praktinius sprendimus kad tai būtų teisinga.

04. Suprojektuokite reaguojančią svetainę, naudodami dydį, pagrįstą em

Sukurkite reaguojančią svetainę, naudodami dydį, pagrįstą em

Sukurkite savo puslapius, kad dizainas nenutrūktų, jei pasikeistų šrifto dydis

Naudodami em vienetus šrifto dydžiui galite sukurti puslapio komponentus, kurie reaguoja automatiškai, jei šrifto dydis pasikeistų. Tada naudodamiesi protingu triuku, skirtu reaguojančiam šrifto dydžiui, galite sukurti visą puslapį, kuris dinamiškai koreguojamas atsižvelgiant į naršyklės peržiūros srities plotį. Vykdykite šią pamoką sužinoti, kaip panaudoti „santykinį“ elgseną kuriant keičiamo dydžio ir reaguojančius dizainus.

05. Prioritetiniai vadovai: pirmiausia turinio alternatyva vieliniams rėmeliams

Sužinokite, kodėl turėtumėte naudoti prioritetinius vadovus, o ne laidinius rėmus

Vieliniai rėmai gali būti plačiausiai naudojamas įrankis kuriant svetaines, programas ir kitas skaitmenines sąsajas, tačiau jie nėra be trūkumų, ypač kalbant apie reaguojantį dizainą. Čia Heleenas van Nuesas ir Lennartas Overkampas pateikia savo pageidaujamą alternatyvą vieliniams rėmams: prioritetiniai vadovai , kuriame yra mobiliojo ekrano turinys ir elementai, surūšiuoti pagal hierarchiją iš viršaus į apačią ir be išdėstymo specifikacijų.

06. Profesionalaus žiniatinklio dizaino vadovas

Pro

Pagal šį vadovą sukurkite geresnes bet kokio įrenginio svetaines

Parašyta Justinas Avery , „Responsive Design Weekly“ informacinio biuletenio kuratorė, šį internetinio žurnalo vadovą peržiūri žiniatinklio profesionalus iki pažangesnių reaguojančių interneto dizaino būdų.

07. Kaip suprojektuoti reaguojančias ir prietaiso-agnostines formas

Reaguojančios formos, pritaikomos skirtingiems įrenginiams

Įsitikinkite, kad jūsų formos veikia, kad ir koks būtų įrenginys

Formos yra vienas iš svarbiausių bet kokio skaitmeninio produkto dizaino elementų. Nesvarbu, ar jums reikia registracijos srauto, ar kelių rodinių žingsnio, turite juos sukurti taip, kad jie efektyviai veiktų tiek mobiliuosiuose įrenginiuose, tiek darbalaukyje. Štai kaip tai padaryti , kartu su naudingais patarimais, kaip naudotis „Flexbox“.

08. Sukurkite reaguojantį išdėstymą naudodami CSS tinklelį

Dizaineris kuria CSS tinklelio svetainę

Sukurkite puikiai atrodančią portfelio svetainę, tinkamą visiems peržiūros langams

„CSS Grid Layout“ kasdien palaiko naršyklių palaikymą, ir nors tai nėra „Flexbox“ ar net plūdurų pakaitalas, tačiau kartu su jais tai puikus būdas sukurti naujus ir įdomius reaguojančius maketus. Vykdykite šį nuoseklų vadovą sukurti reaguojančią portfelio svetainę naudojant „Grid“.

09. „Flexbox“ žiniatinklio dizainerio vadovas

Pradėkite naudotis „Flexbox“

Ar jau pradėjote naudotis „Flexbox“? Šioje pamokoje Wes Bos pateikia: išsamus vadovas iki pagrindinių sąvokų, kurios suteiks jums tvirtą supratimą apie viską, ko jums reikia norint sužinoti apie šį galingą įrankį.

10. „Codrops Flexbox“ nuoroda

Išsamus Sara Soueidan vadovas

Tai išsamus „Flexbox“ vadovas yra parašiusi Sara Soueidan, autorė, garsėjanti savo sugebėjimu paaiškinti sąvokas taip, kad jas būtų lengva sekti negailint detalių. „Codrops“ vadovas yra reguliariai atnaujinamas, todėl tai puikus šaltinis, prie kurio galima grįžti, kai jums to reikia.

11. „Stacks“: „Flexbox“ eskizui

Vidutinio straipsnio ekrano kopijoje sakoma

Gaukite „Flexbox“ galimybes „Sketch“

„Stacks“, kuri yra „Auto Layout“ papildinio dalis, suteikia galimybę „Sketch“ naudoti „Flexbox“ technologiją nenaudojant CSS. Šis straipsnis paaiškinama, kaip galite naudoti šią galingą techniką, kad būtų lengviau reaguoti.

12. Avarijos kursai techninėje RWD

Techninio reagavimo žiniatinklio dizaino ekrano kopijavimo kursas

Susipažinkite su interaktyvaus interneto dizaino pagrindais

Rašydamas „Treehouse“ tinklaraštyje Jerry Cao sutraukė daug naudingos informacijos į gana trumpą, skaitomą straipsnį.

13. Sukurkite lanksčius maketus su Susy ir Breakpoint

Įrenginių ekranai, rodantys reaguojantį svetainės išdėstymą, pritaikytą kiekvienam santykiui

„Sass“ plėtiniai, skirti pasirūpinti reaguojančia matematika

Jei nenorite naudoti sistemos, kad sukurtumėte interaktyvią svetainę, šie „Sass“ plėtiniai yra puiki alternatyva, kiekviena iš jų turi savo stipriąsias puses. Jie pasirūpins reaguojančia matematika už jus, kad galėtumėte sutelkti dėmesį į dizainą.

14. Kaip sukurti interaktyvius vadovus „Adobe XD“

„Adobe Experience Design“ (XD) yra „UX“ ir prototipų kūrimo įrankis

Jei norite išbandyti „Adobe Experience Design“ (XD) , štai gera pamoka norėdamas pradėti. Jame yra vaizdo demonstracija, kuri peržiūri jus kiekvieną proceso paspaudimą.

15. CSS „BBC Sport“

Lengvas CSS didelei interaktyviai svetainei

Tai nėra pamoka per se, tačiau čia daug mokomasi. Šiame įraše , pirmasis iš dviejų dalių serijos, frontendo kūrėjas Shaunas Bentas mus nuneša į išsamią apžvalgą, kaip vyksta CSS „BBC Sport“. Jie sugebėjo išlaikyti šios didžiulės svetainės CSS pagrindą mažesnį nei 9 KB, ir yra žavu, kaip tai buvo padaryta.

Klampūs Chriso Coyiero poraštės būdai

Lipni poraštė ... tai turėtų būti pakankamai paprasta, tiesa? Deja, ne. Tai gali būti sudėtingiau, nei galite tikėtis, kad poraštę rasite reikiamoje vietoje kiekviename įrenginyje. Laimei, Chrisas Coyieras susibūrė penki triukai tai padės jums tai įgyvendinti naudojant apskaičiuoti () , „Flexbox“, neigiamos paraštės ir tinklelis.

17. Prisitaikymas prie įvesties

Lentelė, kurioje pateikiami patogūs, jaukūs ir kompaktiški teksto dizainai įvairiais ekrano dydžiais

Įsitikinkite, kad interaktyvi svetainė gali priimti įvestį iš bet kokio tipo įrenginio

Reaguojantis dizainas reiškia ne tik tai, kad jūsų puslapis tinkamai rodomas bet kuriame įrenginyje, bet ir tai, kad jis gerai veiktų - ir tai reiškia, kad jis turi gerai priimti įvestį pasaulyje, kuriame darbalaukiuose yra jutikliniai ekranai, o telefonuose - klaviatūros. Šis straipsnis pateikė Jasonas Grigsby iš „Cloud Four“, turi keletą patikimų patarimų.

18. Mūsų geriausia praktika yra žudyti žiniatinklio mobiliuosius įrenginius

Straipsnio skaitymo ekrano kopija

Našumo sumetimai turi būti tinkami ir mobiliesiems

Taikant neatsižvelgiant, tam tikra geriausia praktika, kuri buvo sukurta darbalaukio epochoje, gali turėti neigiamą poveikį interneto mobiliojo ryšio našumui. Šis straipsnis privers jus giliau pagalvoti, kaip priversti savo svetainę gerai veikti mobiliajame telefone.

19. Kaip sukurti interaktyvias žiniatinklio programas su konteinerio užklausomis

Skirtingų matmenų ekranai, rodantys žiniatinklio programos maketo mastelį

Sužinokite, kaip pritaikyti medijos mastelį, naudojant sudėtinių rodinių užklausas

Sužinokite, kaip transformuoti gražią, sudėtingą žiniatinklio programą su komponentais, būsenomis ir sąveika įvairiais matmenimis ir skiriamosiomis gebomis, naudojant konteinerių užklausą .

Susiję straipsniai: