20 хоногт вэб дизайн сурах 20 зөвлөмж

Вэб дизайны үндсийг сурах нь таны “хэзээ нэгэн цагт” жагсаалтад хэвээр байна уу? Та яагаад хараахан эхлээгүй байна вэ? Бид хамтдаа хийж байна 20зөвлөгөө, нөөц та энэ сард вэб дизайн сурах эхлэх нь туслах (, магадгүй тэр ч байтугай өөртөө шинэ ажил замыг олох!)

График дизайнерууд, хэвлэмэл дизайнерууд, шинэ зүйл сурах эсвэл вэбсайт руу орохыг хүсч буй бүтээлүүд нь хойшлуулахаас татгалзах хэрэгтэй. Анхны алхамаа хийхгүй өдөр бүр чамайг нэг л өдөр бусдын араас улам бүр холдуулдаг!

Бүх 20 хоногийн дотор—таны анхны вэб сайт, салбарын шилдэг туршлага, болон бусад олон хэрхэн бий болгох сурах эхлэх нь эдгээр алхмуудыг дагана уу!

1. Вэбсайт эхлүүлэх
вэб дизайн сурах
Вэб дизайныг сурч эхлэх хамгийн сайн арга бол үүнийг хийж эхлэх явдал юм. Энэ бол дизайны зохиогч Дэвид Кадавигийн зөвлөгөө юм <for> хакерууд.

Би та блог эхлэх зөвлөж байна. Би зүгээр л вэб дизайн тоглоомын талбай байх нь блог эхэлсэн, болон 7 жилийн дараа, би сэдвээр хамгийн сайн борлуулалттай ном эхэллээ. Блог гэх мэт хувийн төсөлтэй байх нь танд шинэ зүйлийг туршиж үзэх боломжтой газрыг өгдөг бөгөөд хэрэв та замбараагүй байвал дарга тань таныг гал гаргахгүй.

Та асар их вэбсайт эсвэл галзуу дизайнаар эхлэх шаардлагагүй; жижиг эхлэх хэрэгтэй. Вэб хуудас нь Play, зүйл ажил болгодог юу олохын. (Мөн кодыг шалгах эсэхийг шалгаарай, Тиймээс та өөрийн вэб сайт ажил хийж байгаа юу мэддэг болж эхэлж болно.)

Хурдан эхлэхийг хүсч байна уу? Wix шиг вэб сайт барилгачин танд загварлаг вэб дизайн нь дарга эхлэл өгөх туслах болно, Хэрэв та вэб хуудас руу явдаг ямар үзэл баримтлал, барилгын тоосго нь сурч эхлэх гэх мэт.

2. Чадах Бүхнээ Унш
вэб дизайн сурах
Уншиж эхэл. Та энэ блог дээр байгаа учраас дизайны ертөнцөд юу болж байгааг хянаж үзэхэд ашигладаг байх. Уншиж бай.

Вэбсайтын дизайн, чиг хандлага, техник, шилдэг туршлагын талаар чадах бүхнээ уншаарай. Олон нийтийн сүлжээнд биширдэг дизайнеруудыг дагаарай.

Түүнчлэн таны вэб дизайн унших нь өргөн тор хаягдах. Зарим кодыг сурах үндсийг тухай уншина уу, дизайн онолын талаар уншиж, хичээл болон одоогийн нийтлэл уншсан.

3. Үр Дүнтэй Харилцагч Байх
Хэрэв та хамгийн өгүүлэх хүн биш бол, эдгээр ур чадвар дээр хүртэл сойз. Вэбсайтын дизайны томоохон хэсэг бол харилцаа холбоо юм.

Вэб сайт дизайнерууд дизайн ямар асуудлыг шийдвэрлэх хэрэгтэй олохын тулд тогтмол үйлчлүүлэгч харилцах хэрэгтэй; тэд эдгээр шийдлийг харилцах, түүнчлэн тэдгээрийг хэрэгжүүлэх хэрэгтэй.

4. Tuts+ & Envato элементүүдийг бүртгүүлэх

Envato Elements-ийн захиалгыг авч үзье, энэ нь танд маш сайн Tuts+ сургалтын нөөцөд нэвтрэх боломжийг олгодог.

Tuts+ үндсэн техникээс эхлээд хамгийн сүүлийн үеийн дэвшилтэт арга барил, хөгжүүлэлтээр дамжуулан график, вэб дизайны талаар тогтмол сургалт явуулдаг. Энэ нь бүрэн өөрөө хурдацтай байна, шинжээч багш заадаг. Та мөн Envato элементүүдэд хандах боломжтой бөгөөд энэ нь таны вэб дизайны ажилд залгах график, загвар, бусад зүйлийг олоход маш сайн нөөц юм.

5. HTML-д бод
HTML буюу гипертекст тэмдэглэгээний хэл нь вэбсайтын дизайны тулгын чулуу юм. HTML нь вэбсайтын бүтцийг бий болгоход тусалдаг араг яс бөгөөд хэлийг уншиж дууссаны дараа вэбсайтын дизайны ертөнц илүү их утга учиртай болно.

W3Schools та юу харж, яг яаж ажилладаг талаар дэлгэцэн дээр тоглож чадна HTML жишээ нь хэдэн зуун агуу HTML гарааны заавар байна. (Та төсөөлж байснаас илүү зөн совинтой байж болох юм.)

6. Codeacademy дээр кодоор тоглох
вэб дизайн сурах
HTML нь сайн эхлэл боловч та Codeacademy-аас бараг ямар ч програмчлалын хэлийг сурч болно. Үнэгүй хэрэгслийн багц нь интерактив үйл ажиллагаа, тоглоом ашиглан код бичихийг заадаг.

Та Codeacademy-ийн сургалтыг хаана, хэзээ авах боломжтой бөгөөд шаардлагатай бол эхэлж, зогсоож болно. Сурах сэдвийг сонгоно уу – Вэб хөгжүүлэлт, програмчлал, өгөгдлийн шинжлэх ухаан – эсвэл анхаарлаа төвлөрүүлэх хэл – HTML & CSS (эхлэхэд тохиромжтой газар), Python, Java, SQL, Ruby болон бусад.

7. CSS-ийг ойлгож сурах
CSS буюу cascading style sheets нь HTML буюу XML болон SVG-д бичигдсэн баримтын танилцуулгыг тодорхойлдог.

Mozilla-ийн тодорхойлсноор

CSS нь элементүүдийг дэлгэцэн дээр, цаасан дээр, үг хэллэгээр эсвэл бусад хэвлэл мэдээллийн хэрэгслээр хэрхэн үзүүлэх естойг тайлбарладаг.

Mozilla нь CSS-ийн нөөцийг эхлэхэд маш сайн цуглуулгатай бөгөөд CSS хэрхэн ажилладаг, Түүний дотор сонгон шалгаруулагч, шинж чанар, CSS дүрмийг бичих, CSS-ийг HTML-д хэрэглэх, CSS, cascade болон өв залгамжлал дахь урт, өнгө, бусад нэгжийг хэрхэн зааж өгөх, хайрцагны загварын үндэс, CSS-ийг дибаг хийх гэх мэт. Дараа нь модулиуд сарлагийн саваг текст болон хайрцаг тайлбарлах дээр шилжих.

8. Дизайны ур чадвараа Вэбэд хэрэглэх
Хэрэв та аль хэдийн бүтээлч эсвэл график дизайны чиглэлээр ажиллаж байгаа бол вэбсайт дизайн хийх боломжтой гэдгээ аль хэдийн мэддэг зүйлсийн талаар бодоорой. Ямар нэг зүйлийг сэтгэл татам болгодог зарчим нь дунд зэргийн болон бүх дизайны онол дээр үндэслэн өөрчлөгддөггүй бөгөөд дижитал орон зайд ч мөн адил хэрэг болно.

Код сурах гэх мэт элементүүд нь байгалийн мэт санагдахгүй байж болох ч дизайны суурьтай байх нь маш том урамшуулал юм. Хэрэв хэн ч үүнтэй харьцахыг хүсэхгүй бол сайхан кодчилсон вэбсайт ямар сайн бэ?

9. Та хайртай вэб сайт анхаарлаа хандуул
Та хайртай вэб сайт тэмдэглэж авах. Тэдний талаар танд хандаж юу хэлэх вэ? (Мөн та эдгээр элементүүдийг хэрхэн хуулбарлаж сурах вэ?) Анхаарлаа хандуулаарай:

Хэв шинж
Навигаци
Зураг, орон зайг ашиглах
Маягтын загвар
Хөдөлгөөнт болон гүйлгэх нөлөө
Өнгө
10. Wireframe зурах
вэб дизайн сурах
Wireframing бол вэб дизайнерын brainstorming юм.

Хамгийн цэвэр хэлбэрээр wireframe нь вэбсайт ямар байх талаархи ноорог юм. Энэ нь гоо зүйн элементүүдийн тойм биш, харин вэбсайтын зураг төсөл юм. Wireframe зурах нь энэ дизайны харагдах байдлын тухай биш, энэ нь мэдээллийн бүтцийн тухай юм.

Wireframe хэрхэн үүсгэхээ мэдэхгүй байна уу? Дижитал телепати нь сурахад туслах шилдэг туршлагын гарын авлагатай.

11. Ноорог сурахад хэсэг хугацаа зарцуул
вэб дизайн сурах
Sketch бол Mac-д зориулсан вектор зурах хэрэгсэл бөгөөд дизайны элементүүдийг бий болгоход хялбар болгодог. Маш олон дизайнерууд UI элементүүдийг бий болгохын тулд ноорог руу хандаж, дизайны блокуудыг давтаж байна.

Энэ нь залгаасуудаар савлаж, хялбар ашиглах, нэвтрэх кодыг экспортлох боломжийг олгодог. Энэ нь хамгийн хүчирхэг нэг юм, болон алдартай, хэрэгсэл Adobe-ийн Бүтээлч цуглуулга оноос хойш эргэн ирж, таны цаг хугацаа үнэ цэнэтэй.

12. Технологи нь өнөөг хүртэл бай
AI, VR, AR, 360 градусын видео, bots.

Энэ нь маш олон шинэ технологи, чиг хандлага нь хүртэл байлгах хэцүү байж болно. Гэхдээ та эдгээр өөрчлөлтийн орой дээр үлдэх цэг хийх хэрэгтэй.

Тэдгээрийг нэг нэгээр нь шийдэж, таны хийж буй ажилтай хамгийн шууд холбоотой технологиос эхлээрэй. Хэрэв та онлайн чат бүхий вэбсайттай бол bots-ийн талаар сурч эхэлнэ үү. Эсвэл та видео агуулга нь маш их ашигладаг бол, 360 градусын видео эргэн тойронд тоглох.

Хиймэл оюун ухаан, виртуал эсвэл augmented reality зэрэг элементүүд нь бүр ч илүү төвөгтэй боловч вэбсайтын дизайны ландшафтын нэгдсэн хэсэг болох магадлалтай. Наад зах нь, та тэд юу мэдэх естой, ямар боломжит хэрэглээ байж болох юм.

13. SEO нь тав тухтай авах
вэб дизайн сурах
Олон вэб дизайнерууд SEO мэргэжилтэн хайлтын системийг уншихад бэлэн вэбсайт авах ажлыг зохицуулж чадна гэж бодож байгаа ч SEO-тэй холбоотой маш олон дизайны ажил байдаг.

Хуудсууд болон элементүүд дээр мета тайлбарыг оруулахад хурдан цэвэр код үүсгэхийн тулд зургийг байршуулсан арга барилаас эхлэн дизайнер нь хайлтын сэтгэлгээг ажлын урсгалд оруулах естой.

Freelancers, энэ нь бас та нарын хувьд маш чухал юм. Ихэнх үйлчлүүлэгчид SEO-оновчтой вэбсайтыг асуух хангалттай ухаантай байдаг. Хэрэв та ганцаараа ажилладаг бол Google-ийн уншиж болох хатуу хүрээг бий болгохын тулд хангалттай мэдэх хэрэгтэй (Хэрэв илүү их ажил хийх шаардлагатай бол үйлчлүүлэгчийг SEO мэргэжилтэн рүү явуулах боломжтой байх).

14. Вэбсайт Бүтээгчтэй тоглох
А вэб сайт барилгачин шилдэг туршлага, хэрхэн барьж, вэб сайт боловсруулах эхлэх нь тав тухтай авах шилдэг арга зам байж болно.

Эдгээр хэрэгслүүдийн ихэнх нь олон тооны загвартай бөгөөд элементүүдийг өөрчлөх, тэр ч байтугай кодын хэсгүүдийг нэмэх боломжийг олгодог. Энгийн сайтуудын хувьд олон вэбсайт барилгачид танд зориулсан тоглоомын талбай болж өгдөг хувийн багцын хуудас эсвэл үндсэн вэбсайт үүсгэх боломжтой үнэгүй төлөвлөгөөтэй байдаг.

Дараа нь вэб сайт барилгачин дотор ширхэг гадна авах. Тэд бүгд хамтдаа хэрхэн ирдэг нь мэдрэх авахын тулд хэрхэн боловсруулж, кодлогдсон байна хараач. Та зүгээр л тусдаа өөр загварыг сонгож олохын болох вэ гэхэд гайхаж байх болно.

15. Зөвлөгч хай
Хэрэв та вэб дизайнер гэж биширдэг гэж хамтран ажиллах хэн нэгэн бий юу? Тэднийг үдийн цайнд аваачиж, салбарын талаар тархийг нь сонгоорой.

Тантай хамтран ажиллах, тухайн салбарын талаар бодож, вэб дизайныг хэрхэн өөрөө сурах талаар туслахад бэлэн байгаа зөвлөгч олох нь үнэлж баршгүй зүйл болно. Мөн та магадгүй Онлайн Орон нутагт зөвлөгч олж болно, Харин, юу ч та үе үе нүүр тулсан уулзаж болно амьд хүнээс илүү сайн байдаг. (Магадгүй онлайн болон биечлэн зөвлөгчтэй байх нь зүйтэй байх.)

16. CodePen нийгэмлэгт нэгдээрэй
вэб дизайн сурах
Зарим код, програмчлалаар тав тухтай болж эхэлмэгц та CodePen нийгэмлэгт элсэхийг хүсч байна. Нээлттэй эхийн нийгэмлэг нь олон нийтийн сүлжээнд кодын хайчилбарыг хуваалцах, засах боломжийг олгодог.

Энд сайтын үүсгэн байгуулагчдаас арай илүү зүйл байна: “CodePen бол нийгмийн хөгжлийн орчин юм. Үүний гол цөм нь хөтөч дээр код бичиж, үр дүнг нь бүтээх байдлаар харах боломжийг олгодог. Аливаа ур чадварыг хөгжүүлэгчдэд ашигтай, Чөлөөлөх хэрэгсэл, ялангуяа код бичиж сурч буй хүмүүст эрх мэдэл олгох. Бид эдгээр зүйл болж хувирах HTML, CSS, JavaScript, preprocessing syntaxes гэх мэт урдаа байгаа хэл дээр голчлон анхаардаг.”

17. Анги авна
Зарим суралцагчдын хувьд илүү албан есны хичээлийн орчин хамгийн сайн байдаг.

Та вэб дизайн үндсийг сурах нь – биечлэн, онлайн боломжтой анги нэг тонн байдаг. Udemy эсвэл Coursera гэх мэт орон нутгийн коллеж эсвэл онлайн сургалтын төвүүдээс эхэл. Таны одоогийн чадвар түвшинд анги аваад л урагш хөдөлж байх.

18. Ямар нэг юм хиймээр байна уу? Үүнийг Google
Уламжлалт биш суралцагчийн хувьд Google дээрх вэб дизайны асуудлын хариултыг олоорой. Маш олон хичээлүүд, видео бараг ямар ч асуудал таныг явж болно гэж байдаг – болон шийдэл.

Гол нь яг юу мэдэх хэрэгтэйг хайж, хариултыг нь нэр хүндтэй эх сурвалжаас хайх явдал юм. Энэ хичээл, видео ирэх үед энд өөр нэг зөвлөгөө юм-илүү сүүлийн үеийн агуулга нь магадгүй танд илүү сайн өгөх гэж байна, илүү бүрэн гүйцэд, илүү холбогдох хариулт. (Энэ зүйлсийн зарим нь хурдан өөрчлөгдөж байгааг санаарай.)

19. Хэрэглэгчийн туршлагад анхаарлаа хандуулаарай
Хэрэглэгчийн туршлагын дизайн гэх мэт вэбсайтыг юу ч хийж, эвдэж чадахгүй. Та үүнийг төлөвлөж, ойлгох хэрэгтэй.

Харилцан үйлчлэлийн дизайны сан UX загварыг хэрхэн дүрсэлснийг эндээс үзнэ үү:

Хэрэглэгчийн туршлага (UX) дизайн нь утга учиртай, биечлэн хамааралтай туршлагыг бий болгох бүтээгдэхүүнийг бий болгох үйл явц юм. Энэ нь бүтээгдэхүүний эдэлгээний аль аль нь болгоомжтой дизайн явдал, таашаал хэрэглэгчид үүнийг ашиглан олж болно. Энэ нь бүтээгдэхүүнийг олж авах, нэгтгэх бүх үйл явцад хамаатай бөгөөд үүнд Брендинг, дизайн, эдэлгээ, үйл ажиллагааны асуудлууд багтдаг.

UX дизайнерууд буюу туршлага үүсэх үйл явцыг мэддэг дизайнерууд нь үйл явцад нөлөөлөх хүчин зүйлсийг санаатайгаар бий болгож, төлөвшүүлэхийг эрмэлздэг. Үүнийг хийхийн тулд UX дизайнер яагаад, юу, хэрхэн бүтээгдэхүүний хэрэглээг авч үзэх болно.

20. Дизайны чиг хандлагад анхаарлаа хандуулаарай
Орчин үеийн вэбсайтын дизайн ямар харагдаж байна вэ? Энэ нь трик асуулт биш юм. Орчин үеийн вэбсайт, хэрэглэгчийн туршлагыг боловсруулахын тулд хэрэглэгчид юу хүсч байгаа, түүнтэй хэрхэн харьцаж байгааг мэдэх хэрэгтэй. Хэрэв та хамгийн сүүлд апп татаж авсан эсвэл утсан дээрээ вэбсайт руу харсан бол 2016 байсан бол та маш их газар авах болно.

Орчин үеийн мэдрэмж, чиг хандлагыг загварт нэгтгэсэн вэбсайтын загварыг бий болгох нь таны төслүүдийг зогсооход тусална. Тренд юу болохыг та яаж мэдэх вэ? Иймэрхүү сайтуудыг уншиж байгаарай, бусад дизайнерууд юу хийж байгааг анхаарч үзээрэй. Таны байнга зочилдог вэбсайтуудад багтсан өнгө, хэв маяг, онцлог шинж чанаруудыг анхаарч үзээрэй.