30 padomi, kā apgūt Web dizainu 30 dienu laikā
Vai tīmekļa dizaina pamatnoteikumu apgūšana joprojām ir jūsu “kādreiz” sarakstā? Kāpēc jūs vēl neesat sācis? Mēs esam apkopojuši 30 padomus un resursus, kas palīdzēs jums šajā mēnesī sākt apgūt tīmekļa dizainu (un varbūt pat atrast sev jaunu karjeras ceļu!)
Grafiskajiem dizaineriem, drukas dizaineriem un radošajiem, kas vēlas uzzināt kaut ko jaunu vai ieiet vietnēs, ir jāatsakās no aizkavēšanās. Katru dienu, kad neveicat šo pirmo soli, jūs atstājat vienu dienu tālāk par visiem pārējiem!
Veiciet šīs darbības, lai sāktu mācīties, kā izveidot savu pirmo vietni, nozares labāko praksi un daudz ko citu - tas viss notiek 30 dienu laikā!
1. Atveriet vietni
Labākais veids, kā sākt apgūt tīmekļa dizainu, ir sākt to darīt. Tas ir Dizaina Hakeru autora Deivida Kadavija padoms.
Es iesaku jums sākt blogu. Es sāku veidot emuāru tikai tāpēc, lai būtu tīmekļa dizaina laukums, un 7 gadus vēlāk es izdevu vislabāk pārdoto grāmatu par šo tēmu. Personīga projekta, piemēram, emuāra, izveidošana dod jums vietu, kur varat izmēģināt jaunas lietas, un jūsu priekšnieks jūs neatbrīvos, ja jūs sajauksities.
Jums nav jāsāk ar masīvu vietni vai traku dizainu; sākt mazs. Spēlējiet ar vietni, izrēķiniet, kas liek lietām darboties. (Un noteikti pārbaudiet kodu, lai jūs varētu sākt iepazīties ar to, kas jūsu vietni padara darbu.)
Vai vēlaties ātri sākt darbu? Vietņu veidotājs, piemēram, Wix, var palīdzēt jums sākt ar stilīgu vietnes dizainu, kad sākat apgūt vietnes jēdzienus un veidojošos elementus.
2. Izlasiet visu, ko varat
Sāc lasīt. Tā kā jūs atrodaties šajā emuārā, jūs, iespējams, esat pieradis sekot līdzi tam, kas notiek dizaina pasaulē. Turpiniet lasīt.
Izlasiet visu iespējamo par vietnes dizainu, tendencēm, paņēmieniem un labāko praksi. Sekojiet dizaineriem, kurus apbrīnojat sociālajos medijos.
Lieciet plašu tīklu arī savas vietnes dizaina lasīšanai. Lasiet par pamatiem, lai iemācītos kādu kodu, izlasiet par dizaina teoriju, kā arī izlasiet konsultācijas un aktuālos rakstus.
3. Esi efektīvs komunikators
Ja jūs neesat pats izteiktākais cilvēks, papildiniet šīs prasmes. Liela mājas lapas dizaina daļa ir komunikācija.
Vietņu dizaineriem regulāri jāsazinās ar klientiem, lai izdomātu, kāda problēma dizainam jāatrisina; viņiem ir jāpaziņo par šiem risinājumiem un arī tie jāīsteno.
4. Abonējiet Tuts + un Envato elementus
Apsveriet Envato Elements abonēšanu, kas arī ļauj piekļūt lieliskajam mācību materiālam Tuts +.
Tuts + publicē regulārus grafiskā un web dizaina kursus, sākot no pamata tehnikām līdz jaunākajām progresīvajām pieejām un izstrādēm. Tas ir pilnīgi patstāvīgs, to māca eksperti instruktori. Jūs arī iegūsit piekļuvi Envato Elements, kas ir lielisks resurss grafiku, veidņu un cita veida atrašanai, lai pievienotu savu tīmekļa dizaina darbu.
5. Padomājiet HTML
HTML jeb hiperteksta iezīmēšanas valoda ir vietnes dizaina stūrakmens. HTML ir skelets, kas palīdz izveidot vietnes struktūru, un, tiklīdz jūs varēsit lasīt valodu, vietnes dizaina pasaulei būs daudz lielāka jēga.
W3Schools ir lieliska HTML sākšanas apmācība ar simtiem HTML piemēru, ar kuriem jūs varat spēlēt ekrānā, lai redzētu, kas notiek un kā tieši tas darbojas. (Jūs, iespējams, uzskatīsit to intuitīvāku, nekā iedomājāties.)
6. Spēlējiet ar Code Codeade
Lai gan HTML ir labs sākums, no Codeacademy varat iemācīties gandrīz jebkuru programmēšanas valodu. Bezmaksas rīku komplekts iemāca kodēt, izmantojot interaktīvas aktivitātes un spēles.
Jūs varat izvēlēties Codeacademy kursu, kur un kad jums tas nepieciešams, un sākt un apstāties pēc nepieciešamības. Izvēlieties mācību priekšmetu - tīmekļa attīstību, programmēšanu, datu zinātni - vai valodu, kurai pievērst uzmanību - HTML un CSS (lieliska vieta, kur sākt), Python, Java, SQL, Ruby un daudz ko citu.
7. Iemācieties saprast CSS
CSS vai kaskādes stila lapas nosaka HTML, XML un SVG rakstīta dokumenta noformējumu.
Kā noteikusi Mozilla
CSS apraksta, kā elementi jāattēlo ekrānā, uz papīra, runā vai citos datu nesējos.
Mozilla ir arī lieliska CSS resursu kolekcija, lai sāktu, ar precīzu ievadi par CSS darbību, ieskaitot atlasītājus un rekvizītus, CSS noteikumu rakstīšanu, CSS piemērošanu HTML, kā norādīt garumu, krāsu un citas vienības CSS, kaskādi un mantojums, lodziņa modeļa pamati un CSS atkļūdošana. Pēc tam moduļi turpina izskaidrot stila tekstu un rūtiņas.
8. Izmantojiet savas dizaina prasmes tīmeklī
Ja jūs jau strādājat radošā vai grafiskā dizaina jomā, padomājiet par lietām, kuras jūs jau zināt, kuras varat izmantot arī tīmekļa vietnes dizainā. Principi, kas padara kaut ko vizuāli pievilcīgu, nemainās, pamatojoties uz vidi, un visa šī dizaina teorija noderēs arī digitālajā telpā.
Kaut arī tādi elementi kā mācību kods var nejusties dabiski, dizaina fona iegūšana ir milzīgs bonuss. Cik laba ir skaisti kodēta vietne, ja neviens nevēlas ar to mijiedarboties?
9. Pievērsiet uzmanību vietnēm, kuras jums patīk
Ņemiet vērā vietnes, kuras jums patīk. Kas par viņiem jums patīk? (Un kā jūs varat iemācīties atkārtot šos elementus?) Pievērsiet uzmanību:
- Tipogrāfija
- Navigācija
- Attēlu un telpas izmantošana
- Veidlapu dizains
- Animācijas un ritināšanas efekti
- Krāsa
10. Uzzīmējiet stiepļu rāmi
Stiepļu ietvars ir tīmekļa dizainera ideju vētra.
Tīrākajā formā stiepļu rāmis ir skice vietnei. Tas nav estētisko elementu izklāsts, bet drīzāk vietnes projekts. Stiepļu rāmja zīmēšana patiesībā nav par šī dizaina izskatu, bet gan par tajā esošo informācijas struktūru.
Vai nezināt, kā izveidot karkasu? Digitālajā telepātijā ir labākās prakses rokasgrāmata, kas palīdzēs jums mācīties.
11. Paņemiet kādu laiku, lai iemācītos skici
Skice ir vektoru zīmēšanas rīks Mac, kas ļauj ērti izveidot dizaina elementus. Daudzi dizaineri vēršas pie Sketch, lai izveidotu UI elementus un atkārtotu dizaina blokus.
Tas ir iesaiņots ar spraudņiem un ļauj eksportēt kodu ērtai lietošanai un piekļuvei. Tas ir viens no visspēcīgākajiem un populārākajiem rīkiem, kas pastāv kopš Adobe Creative Suite, un ir sava laika vērts.
12. Sekojiet līdzi tehnoloģijām
AI, VR, AR, 360 grādu video, robotprogrammatūra.
Var būt grūti sekot tik daudzām jaunajām tehnoloģijām un tendencēm. Bet jums jāpieliek punkts, lai paliktu virs šīm izmaiņām.
Risiniet tos pa vienam un sāciet ar tehnoloģijām, kas ir vistiešāk saistītas ar jūsu paveikto darbu. Ja jums ir vietne ar tiešsaistes tērzēšanu, sāciet ar robotiem. Vai arī, ja izmantojat daudz video satura, spēlējiet video ar 360 grādu leņķi.
Tādi elementi kā mākslīgais intelekts un virtuālā vai papildinātā realitāte ir vēl sarežģītāki, taču, visticamāk, kļūs par vietņu dizaina ainavas integrētām sastāvdaļām. Vismaz jums vajadzētu zināt, kas tie ir un kāds varētu būt potenciālais pielietojums.
13. Esiet ērti SEO
Kaut arī daudzi tīmekļa dizaineri domā, ka SEO speciālists var tikt galā ar vietnes sagatavošanu meklētājprogrammām lasīšanai, ar SEO saistītais dizains ir daudz.
Sākot no attēlu augšupielādes līdz tīra koda izveidošanai, kas ir ātrs, līdz meta aprakstu iekļaušanai lapās un elementos, dizainerim viņu darbplūsmā jāiekļauj meklēšanas domāšana.
Ārštata darbinieki, tas ir vitāli svarīgi arī jums. Lielākā daļa klientu ir pietiekami lietpratīgi, lai lūgtu izveidot SEO optimizētu vietni. Ja strādājat vienatnē, jums ir jāzina pietiekami, lai izveidotu stabilu ietvaru, kuru Google var lasīt (un, ja nepieciešams vairāk darba, klientam vajadzētu būt pieejamam pie SEO speciālista).
14. Spēlējiet ar vietņu veidotāju
Vietņu veidotājs var būt lielisks veids, kā izbaudīt labāko praksi un to, kā sākt veidot un veidot tīmekļa vietnes.
Lielākajai daļai šo rīku ir daudz veidņu, un tie ļauj jums pielāgot elementus un pat pievienot koda fragmentus. Vienkāršām vietnēm daudziem vietņu veidotājiem ir arī bezmaksas plāns, kurā varat izveidot personiskā portfeļa lapu vai pamata vietni, kas jums kalpo kā rotaļu laukums.
Pēc tam atdaliet gabalus vietnes veidotājā. Apskatiet, kā tie ir izstrādāti un kodēti, lai sajustu, kā tas viss sanāk. Jūs pārsteigs tas, ko varat izdomāt, vienkārši izvēloties citu dizainu.
15. Atrodi mentoru
Vai ir kāds, ar kuru jūs strādājat, kuru jūs apbrīnojat kā tīmekļa dizaineru? Aizvediet viņus pusdienās un izvēlieties smadzenes par nozari.
Nenovērtējams ir tāda mentora atrašana, kurš vēlas sadarboties ar jums un palīdz domāt par jomu un to, kā pašiem iemācīties web dizainu. Un, lai gan jūs, iespējams, varat atrast mentoru tiešsaistes kopienā, nekas nav labāks par dzīvu cilvēku, ar kuru jūs varat periodiski tikties klātienē. (Varbūt ir vērts konsultēties tiešsaistē un klātienē.)
16. Pievienojieties CodePen kopienai
Kad esat sācis ērti izmantot kādu kodu un programmēšanu, vēlaties pievienoties CodePen kopienai. Atklātā pirmkoda kopiena ļauj koplietot un rediģēt koda fragmentus visu veidu sociālajā tīklā.
Šeit ir nedaudz vairāk no vietnes dibinātājiem: “CodePen ir sociālās attīstības vide. Pēc būtības tas ļauj rakstīt kodu pārlūkā un redzēt tā rezultātus, veidojot. Noderīgs un atbrīvojošs rīks jebkuras prasmes izstrādātājiem, īpaši dodot iespēju cilvēkiem mācīties kodēt. Mēs galvenokārt koncentrējamies uz priekšējo valodu, piemēram, HTML, CSS, JavaScript, un sintakses priekšapstrādi, kas pārvēršas šajās lietās. ”
17. Nodarboties
Dažiem izglītojamajiem vislabāk ir formāls klases iestatījums.
Ir daudz nodarbības - klātienē un tiešsaistē -, lai jūs varētu apgūt tīmekļa dizaina pamatus. Sāciet ar vietējo koledžu vai tiešsaistes mācību centriem, piemēram, Udemy vai Coursera. Izvēlieties klasi pašreizējā spēju līmenī un turpiniet virzīties uz priekšu.
18. Vai vēlaties kaut ko darīt? Google It
Ne tik tradicionālajam apmācāmajam atrodiet atbildi uz tīmekļa dizaina problēmu Google. Ir pieejams tik daudz mācību materiālu un videoklipu, kas var palīdzēt atrast gandrīz visas problēmas un risinājumus.
Galvenais ir meklēt tieši to, kas jums jāzina, un meklēt atbildi uz cienījamu avotu. Šeit ir vēl viens padoms attiecībā uz mācību materiāliem un videoklipiem - iespējams, ka jaunāks saturs sniegs jums labāku, pilnīgāku un atbilstošāku atbildi. (Atcerieties, ka daži no šiem sīkumiem ātri mainās.)
19. Pievērsiet uzmanību lietotāja pieredzei
Nekas nevar izveidot vai sagraut tādu vietni kā lietotāja pieredzes dizains. Jums tas ir jāplāno un jāsaprot.
Lūk, kā Interaction Design Foundation apraksta UX dizainu:
Lietotāju pieredzes (UX) dizains ir tādu produktu izveides process, kas nodrošina jēgpilnu un personiski nozīmīgu pieredzi. Tas ietver rūpīgu izstrādājuma izstrādāšanu gan tā, lai patērētāji gūtu labumu no tā lietošanas. Tas attiecas arī uz visu produkta iegūšanas un integrēšanas procesu, ieskaitot zīmola, dizaina, lietojamības un funkcijas aspektus.
UX dizaineri jeb dizaineri, kuri apzinās pieredzes veidošanās procesu, cenšas apzināti radīt un veidot faktorus, kas ietekmē procesu. Lai to izdarītu, UX dizaineris apsver produkta lietošanas iemeslu, kāpēc un kā.
20. Pievērsiet uzmanību dizaina tendencēm
Kā izskatās mūsdienīgs vietnes dizains? Tas nav triks jautājums. Lai izstrādātu mūsdienīgas vietnes un lietotāju pieredzi, jums jāzina, ko lietotāji vēlas un kā viņi mijiedarbojas ar to. Ja pēdējā reize, kad lejupielādējāt lietotni vai apskatījāt vietni savā tālrunī, bija 2016. gads, jums ir jāpaveic daudz vietas.
Vietņu noformējuma izveide, kurā ir mūsdienīgi pieskārieni un dizainā integrētas tendences, palīdzēs projektiem izcelties. Kā jūs zināt, kas veido tendenci? Lasiet tādas vietnes kā šis un pievērsiet uzmanību tam, ko dara citi dizaineri. Ņemiet vērā krāsas un stilus, kā arī funkcijas, kas ir iekļautas vietnēs, kuras bieži apmeklējat.
21. Izveidot bez krāsas
Sāciet katru dizainu bez krāsām. Lielisks dizainers reiz man teica, ka, ja jūsu dizains darbojas melnbaltā krāsā, tas būs nevainojami krāsots.
Tas ne vienmēr varētu būt taisnība, bet tas ir lielisks sākumpunkts.
Izveidojot melnbaltu dizainu, jūs varat redzēt, kur elementi kontrastē un kā tie spēlē kopā. Jūs esat izsvītrojis jebkādas emocionālas asociācijas ar krāsu vai acu kustībām, kas notiek tā dēļ. Šī vienkāršākā dizaina forma dos jums priekšstatu, ja kaut kas darbojas kā koncepcija, pirms pārejat pie tā pabeigšanas.
22. Iemācieties mīlēt Google fontus
Google Fonts ir jūsu draugs.
Neatkarīgi no tā, kā jūtaties pret Google, svarīga ir spēja pārlūkot, kārtot un atlasīt burtveidus, kuri, kā jūs zināt, darbosies vietņu dizainā. Jums nav jādomā par licencēšanu vai to, vai burtveidoli ir saderīgi ar noteiktiem pārlūkiem.
Ierobežojums ir tāds, ka jums ir tikai tas, kas pieejams Google Fonts bibliotēkā. Bet, ja jūs mēģināt, jūs varat atrast kaut ko, kas derēs gandrīz katram projektam. Tas ilgtermiņā ietaupīs daudz laika.
23. Izņemiet UI komplektu
Lejupielādējiet lietotāja saskarni vai ikonu komplektu un atdaliet to.
Tāpat kā jūs varat pārbaudīt vietnes kodu, apskatiet, kā dizaina elementi tiek veidoti tīmeklim. Ņemiet vērā mērogu un režģi, apskatiet krāsu sajaukumus un to, kā faili tiek sakārtoti Photoshop vai Illustrator.
Atrodiet lejupielādējamo komplektu, kas satur elementus dažādos formātos augstas izšķirtspējas displejiem. (Ja lejupielādējat daudz JPEG failu, tas jums nederēs.)
Pēc tam mēģiniet izveidot vai pielāgot savu vai divus elementus.
24. Kļūsti par tipogrāfu
Mūsdienu mājas lapas dizainā liela uzmanība tiek pievērsta tipogrāfijai ... labai tipogrāfijai. Sākot ar varoņu virsrakstiem ar milzu vārdiem un beidzot ar teksta slāņiem, kas piesaista lietotāju dizainā, ir svarīgi izprast principus, kā veidot tipa elementus pārī un veidot saistošus teksta blokus.
Sāciet ar Ellena Luptona domāšanu ar tipu. (Šeit ir arī tāda paša nosaukuma grāmata.) Lupton ir tipogrāfijas autoritāte, un viņas sniegtā informācija liks jums domāt kā tipogrāfam.
25. Pārlēkt uz JavaScript
Kad sākat justies diezgan labi, izmantojot Web dizainu, atkal izaiciniet sevi, lai uzzinātu JavaScript. Pēc HTML un CSS tā ir vissvarīgākā tīmekļa valoda.
JavaScript ir rīks, kas ļauj dizaineriem tīmekļa vietnēs ieviest sarežģītas lietas un mijiedarbību. Tas ir tas, kas padara slīdni ar slīdni vai animāciju parallaksa animācijā.
Uzziniet JS ir interaktīva apmācība, kas palīdzēs jums sākt.
26. Atjauniniet savu portfeli
Kad sākat veidot Web, noteikti atjauniniet savu portfeli ar tīmekļa dizaina projektiem. Šī vienkāršā darbība palīdzēs jums parādīt sev… un citiem…, ka tīmekļa dizains ir daļa no jūsu repertuāra.
Atjaunināts portfelis var palīdzēt potenciālajiem klientiem redzēt, kā izskatās jūsu “stils”. Pārliecinieties, lai parādītu izkārtojumus, krāsas, tipogrāfiju un dažādas tehnikas, kas parāda, ko jūs varat darīt.
27. Izaicini sevi
Ar tik daudziem saīsnēm un koda fragmentiem, kas palīdzēs jums novērst gandrīz visas vietņu problēmas, neļaujieties slinkam. Atcerieties pastāvīgi izaicināt sevi, lai apgūtu jaunas prasmes, jaunas tehnoloģijas un turpinātu uzlabot savu tīmekļa dizaina spēli.
Viena lieta šajā jomā ir tā, ka tā pastāvīgi mainās; vienmēr ir kaut kas jauns, ko iemācīties vai izmēģināt.
28. Palieliniet savu pieredzi
Izejiet tur un noformējiet. Jums jāsāk veidot vietnes, lai būtu tīmekļa dizainers.
Sāciet mazu, bet uzņemieties projektus kopā ar citiem. Lūdziet pievienoties projektam kopā ar komandu darbā. Risiniet nelielu drauga vietni. Jo lielāka būs vietņu veidošanas pieredze, jo labāk un ātrāk to iegūsit.
Ko tu gaidi? Pārtrauciet atlikšanu.
29. Lūdziet atsauksmes
Izmantojiet savu tīklu, lai savāktu atsauksmes par vietņu dizaina projektiem neatkarīgi no tā, cik mazie, jūsuprāt, ir. Klausieties šīs atsauksmes - pat ja jums tas nepatīk, un redziet, ko varat iemācīties.
Vai persona, kas sniedz atgriezenisko saiti, piedāvā ne tikai vizuālo izvēli, bet arī ieteikumus, lai vietne darbotos labāk? Vai viņi varētu viegli saprast dizaina mērķi? Vai viņi bija saistīti ar ziņojumapmaiņu?
30. Turpiniet mācīties jaunas lietas
Lai būtu lielisks vietņu dizainers, jums vienkārši jāturpina spēlēties, izmēģināt un apgūt jaunas lietas. Piesakieties tīklam un sazinieties ar citiem lauka darbiniekiem, lai jūs varētu sekot līdzi tehnikas un vizuālo izmaiņu nepieciešamībai.
Ja jūs vēlaties iemācīties vietnes dizainu, iespējams, tas jau ir kaut kas, ko jūs regulāri darāt. Bet šī ir joma, kas mainās, un tā mainās gandrīz katru dienu. Vienkārši pajautājiet ikvienam, kurš to dara.
