Học thiết kế website: 6 Điều quan trọng dành cho người mới
Bạn đang cố gắng học thiết kế web, nhưng không biết nên bắt đầu từ đâu?
Thực sự, có một tấn tài nguyên phong cách thiết kế web chuẩn SEO ngoài kia chờ bạn khám phá. Nhưng lúc này, tổng thể những gì bạn cần là điều cơ bản về tăng trưởng website – một nền tảng vững chãi, một lý giải tổng quan về một số ít hướng tiếp theo .Hãy cùng tôi tìm hiểu và khám phá đơn cử hơn về những thông tin cơ bản khi học phong cách thiết kế web .
Thiết kế web bắt đầu học từ đâu?
Đây là các bước đầu tiên bạn cần làm để trở thành nhà phát triển web.
Các bước để tìm hiểu nền tảng phát triển web
- Nền tảng: Cách trang web hoạt động, front-end so và back-end, sử dụng trình chỉnh sửa mã.
- Nền tảng: HTML, CSS và JavaScript.
- Công cụ: Trình quản lý gói, công cụ xây dựng, kiểm soát phiên bản.
- Front-end bổ sung: Sass, thiết kế đáp ứng, framework JavaScript.
- Nền tảng về back-end: Máy chủ và cơ sở dữ liệu, ngôn ngữ lập trình.
Tôi khuyên bạn nên thực thi những bước 1, 2 và 3 theo thứ tự. Sau đó, tùy thuộc vào việc bạn muốn tập trung chuyên sâu vào front-end hay back-end hơn, bạn hoàn toàn có thể thực thi những bước 4 a hoặc 4 b theo bất kể thứ tự nào .Cá nhân tôi nghĩ rằng, đó là sáng tạo độc đáo tốt cho những nhà tăng trưởng website front-end để biết tối thiểu một chút ít về back-end và ngược lại. Ít nhất, việc học những điều cơ bản của cả hai sẽ giúp bạn tìm ra liệu bạn thích tăng trưởng web front-end hay back-end hơn .
Lộ trình học phát triển web (infographic)
Dưới đây, một Infographic hữu dụng cho bạn thấy tổng thể những bước trong lộ trình học tăng trưởng web khi mới mở màn .
Quy trình tự học thiết kế web onlineBây giờ, hãy để liên tục với bước tiên phong !
Phát triển web là gì?
Trước khi tất cả chúng ta mở màn viết mã trong thực tiễn, thứ nhất, hãy xem một số ít thông tin chung về tăng trưởng web là gì : phương pháp những website hoạt động giải trí, sự độc lạ giữa Parcel và back-end và sử dụng trình chỉnh sửa và biên tập mã .
Làm thế nào để các trang web hoạt động?
Tất cả những website, ở mức cơ bản nhất, chỉ là một loạt những tệp được tàng trữ trên máy tính được gọi là sever. Máy chủ này được liên kết với internet. Sau đó, bạn hoàn toàn có thể tải website đó trải qua trình duyệt ( như Chrome, Firefox hoặc Safari ) trên máy tính hoặc điện thoại cảm ứng của bạn. Trình duyệt của bạn được gọi là máy khách trong trường hợp này .Vì vậy, mỗi khi bạn truy vấn internet, bạn ( người mua ) sẽ nhận và tải tài liệu ( như ảnh mèo ) từ sever, cũng như gửi tài liệu trở lại sever ( tải ảnh mèo moar ! ) giữa máy khách và sever là cơ sở của internet .Bất cứ điều gì bạn hoàn toàn có thể truy vấn trong trình duyệt của mình là thứ mà nhà tăng trưởng web đã kiến thiết xây dựng. Một số ví dụ là những website và blog kinh doanh thương mại nhỏ thuộc loại đơn thuần hơn, còn toàn bộ những ứng dụng web như AirBnb, Facebook và Twitter rất phức tạp .
Điều gì khác biệt giữa sự khác biệt giữa front-end và back-end?
Các thuật ngữ tăng trưởng web front-end, back-end và full-stack diễn đạt về phần nào của mối quan hệ máy khách / sever mà bạn thao tác cùng .
Front-end có nghĩa là bạn có thể giao dịch chủ yếu với phía khách hàng. Nó được gọi là front-end của người dùng vì nó là những gì bạn có thể thấy trong trình duyệt. Ngược lại, front-end trở lại một phần của trang web mà bạn không thể thật sự thấy, nhưng nó xử lý rất nhiều logic và chức năng cần thiết cho mọi thứ hoạt động.
Một cách bạn hoàn toàn có thể nghĩ về điều này là việc tăng trưởng web front end giống như phần trước của ngôi nhà của một nhà hàng quán ăn. Đó là khu vực mà người mua đến để xem và thưởng thức nhà hàng quán ăn. Trang trí nội thất bên trong, chỗ ngồi, và tất yếu, ăn thức ăn .
Mặt khác, việc phát triển web back-end giống như phần sau của nhà hàng. Đó là nơi mà việc giao hàng và hàng tồn kho được quản lý và quá trình tạo ra thực phẩm diễn ra. Có rất nhiều điều đằng sau hậu trường mà khách hàng sẽ không nhìn thấy, nhưng họ sẽ được trải nghiệm (và hy vọng sẽ được thưởng thức) sản phẩm cuối cùng một bữa ăn ngon!
Gạt sang một bên những minh hoa vui tươi trên, tăng trưởng web cả front-end và back-end ship hàng những công dụng khác nhau nhưng rất quan trọng .
Sử dụng trình biên tập mã
Khi bạn kiến thiết xây dựng một website, công cụ thiết yếu nhất mà bạn sẽ sử dụng là trình soạn thảo mã hoặc IDE ( Môi trường tăng trưởng tích hợp ). Công cụ này được cho phép bạn viết và mã sẽ tạo nên website .Có khá nhiều tùy chọn tốt khác, nhưng hiện tại trình soạn thảo mã phổ cập nhất là VS Code. Mã VS là phiên bản nhẹ hơn của Visual Studio, IDE của Microsoft. Nó nhanh, không lấy phí, dễ sử dụng và bạn hoàn toàn có thể tùy chỉnh với những chủ đề và tiện ích lan rộng ra .Các trình soạn thảo mã khác là Sublime Text, Atom và Vim .Tuy nhiên, nếu bạn chỉ mới mở màn, tôi khuyên bạn nên sử dụng Mã VS mà bạn hoàn toàn có thể tải xuống từ website của họ .
Bây giờ, chúng tôi đã đưa ra một số khái niệm rộng lớn hơn, hãy cùng tìm hiểu thêm về các chi tiết mà chúng ta sẽ bắt đầu với front end.
Front-end cơ bản
Front end của trang web được tạo thành từ ba loại tệp: HTML, CSS và JavaScript. Các tệp này là những gì được chạy trong trình duyệt, ở phía máy khách.
Hãy cùng xem xét kỹ hơn từng loại :
- HTML
HTML – HyperText Markup Language, là nền tảng của tổng thể những website. Nó có loại tệp chính được chạy trong trình duyệt của bạn khi bạn xem một website. Tệp HTML chứa tổng thể nội dung trên trang và nó sử dụng những thẻ để biểu lộ những loại nội dung khác nhau .
HyperText Markup LanguageVí dụ : bạn hoàn toàn có thể sử dụng thẻ để tạo tiêu đề, đoạn văn, list gạch đầu dòng, hình ảnh, v.v. Bản thân những thẻ HTML có 1 số ít kiểu được đính kèm, nhưng chúng khá cơ bản, giống như những gì bạn sẽ thấy trong tài liệu Word .
- CSS
CSS, hoặc Cascading Style Sheets, được cho phép bạn tạo kiểu cho nội dung HTML để nó trông đẹp và lạ mắt. Bạn hoàn toàn có thể thêm sắc tố, phông chữ tùy chỉnh và bố cục tổng quan những yếu tố của website của bạn theo cách bạn muốn .Bạn thậm chí còn hoàn toàn có thể tạo hình ảnh động và hình khối với CSS !
CSS có rất nhiều chiều sâu và đôi khi mọi người có xu hướng che đậy nó để họ có thể chuyển sang những thứ như JavaScript. Tuy nhiên, tôi có thể đánh giá quá cao tầm quan trọng của việc hiểu cách chuyển đổi thiết kế thành bố cục trang web bằng CSS. Nếu bạn muốn chuyên về front-end, điều cần thiết là phải có các kỹ năng CSS thực sự vững chắc.
- JavaScript
JavaScript là ngôn từ lập trình được phong cách thiết kế để chạy trong trình duyệt. Sử dụng JavaScript, bạn hoàn toàn có thể làm cho website của mình động, có nghĩa là nó sẽ phản hồi những nguồn vào khác nhau từ người dùng hoặc những nguồn khác .Ví dụ : bạn hoàn toàn có thể kiến thiết xây dựng nút Quay lại đầu trang của người dùng mà khi người dùng nhấp vào nó, họ sẽ cuộn ngược lên trên cùng của trang. Hoặc bạn hoàn toàn có thể thiết kế xây dựng một tiện ích thời tiết để hiển thị thời tiết ngày ngày hôm nay dựa trên vị trí người dùng trên quốc tế .Đặc biệt, nếu bạn muốn tăng trưởng những kỹ năng và kiến thức của mình sau này với framework JavaScript như React, bạn sẽ hiểu nhiều hơn nếu bạn dành thời hạn để học JavaScript vanilla thường thì tiên phong .Nó có một ngôn từ rất mê hoặc để học, và có rất nhiều thứ bạn hoàn toàn có thể làm với nó !
Học thiết kế web ở đâu?
Học từ các khóa học thiết kế web trực tuyến
Internet có đầy đủ thông tin chi tiết về thiết kế web và rất nhiều thông tin có sẵn miễn phí. Bạn có thể bắt đầu bằng cách tham gia một số khóa học trực tuyến miễn phí.
Khóa học thiết kế website trên GoogleNếu bạn là người mới mở màn không có kinh nghiệm tay nghề phong cách thiết kế web, hãy mở màn bằng cách khám phá về những điều cơ bản của mã hóa trong HTML và CSS .
Học từ các khóa học tại một trường Cao đẳng hay Đại học
Hãy kiểm tra những khóa học phong cách thiết kế của trường học bạn hoặc tìm hiểu thêm hạng mục khóa học tại 1 số ít trường huấn luyện và đào tạo khác để khám phá xem có khóa học phong cách thiết kế web nào tương thích với bạn không .
Học từ các sách hướng dẫn thiết kế
Bạn hoàn toàn có thể tìm và học hỏi cách phong cách thiết kế web qua những sách hướng dẫn học phong cách thiết kế. Có rất nhiều quyển sách hay về phong cách thiết kế website, bạn hoàn toàn có thể tìm nó ở thư viện hay một nhà sách nào đó. Đọc và vận dụng một cách thật khôn ngoan nhá !Ngoài ra, những nguồn hướng dẫn phong cách thiết kế theo xu thế bạn hoàn toàn có thể khám phá qua những tạp chí, bài viết trên blog về phong cách thiết kế web. Đó cũng là một cách tốt để bạn năng cao kỹ thuật, lấy cảm hứng và theo kịp khuynh hướng .
Tải về hoặc mua một số phần mềm thiết kế web
Phần mềm phong cách thiết kế web tốt hoàn toàn có thể giúp bạn thiết kế xây dựng website hiệu suất cao và hiệu suất cao hơn, và cũng rất tốt để giúp bạn tìm hiểu và khám phá về việc vận dụng mã hóa, ngữ cảnh và những yếu tố phong cách thiết kế chính khác .Nhìn chung có rất nhiều cách để bạn hoàn toàn có thể mở màn học phong cách thiết kế web, điều quan trọng là, bạn tìm ra được phương pháp học tương thích cho bản thân mình .
Công cụ cần có để tự học thiết kế web
Bây giờ, hãy để vào một số công cụ front end khác. Như chúng tôi đã đề cập, HTML, CSS và JavaScript là các mảng xây dựng cơ bản của phát triển web front end. Ngoài chúng ra, còn có một vài công cụ khác mà bạn muốn học.
Package Managers – Bộ công cụ quản lý, tự động hoá
Package Manager ( PM ) là một tập hợp những công cụ, ứng dụng trực tuyến. Nhóm công cụ này được dùng để quản trị và tự động hóa quy trình setup, tăng cấp, thông số kỹ thuật, và gỡ bỏ những ứng dụng / thư viện ( package ) .Các Package Manager phần đông là những ứng dụng mã nguồn mở. Mỗi ứng dụng, được gọi là một gói ( package ). Chúng được người khác viết sẵn để bạn thiết lập và sử dụng trong những dự án Bất Động Sản của riêng bạn .Package Manager phổ cập nhất là npm ( Node Package Manager ). Nhưng bạn cũng hoàn toàn có thể sử dụng trình quản trị khác có tên là Yarn. Cả hai đều là những lựa chọn tốt, nhưng nếu bạn là người mới thì hãy nên khởi đầu với npm .
Giao diện của npm
Build Tools – Bộ công cụ xây dựng
Các gói mô-đun và các công cụ xây dựng như Webpack, Gulp hoặc Parcel, là một phần thiết yếu khác của quy trình làm việc front end.
Ở mức độ cơ bản, những công cụ này chạy những tác vụ và giải quyết và xử lý tệp. Bạn hoàn toàn có thể sử dụng chúng để biên dịch những tệp Sass của mình thành CSS, dịch mã những tệp JavaScript ES6 của bạn xuống ES5 để tương hỗ trình duyệt tốt hơn, chạy máy chủ web cục bộ và nhiều tác vụ hữu dụng khác .
- Gulp, về mặt kỹ thuật là một trình chạy tác vụ, có một bộ các gói npm mà bạn có thể sử dụng để biên dịch và xử lý các tệp của mình.
- Webpack là một gói siêu mạnh có thể làm mọi thứ. Nó được sử dụng rất nhiều trong môi trường JavaScript, đặc biệt là với các framework JavaScript. Một nhược điểm của Webpack là nó yêu cầu máy của bạn phải có cấu hình đủ mạnh. Điều này có thể gây khó chịu cho người mới bắt đầu.
- Parcel là một gói mới hơn so với Webpack, nhưng nó được cấu hình sẵn, do đó bạn có thể khiến nó hoạt động chỉ trong vài phút. Và bạn không cần phải lo lắng nhiều về việc phải tự cấu hình mọi thứ.
Cá nhân tôi thích sử dụng Gulp cho quy trình công việc front end của riêng mình. Gulp có thể giúp tôi biên dịch các tệp Sass và JavaScript nhanh chóng mà không cần phải làm quá nhiều thứ rối rắm khác.
Những tài liệu hữu ích:
Version Control – Bộ công cụ theo dõi phiên bản
Version Control là tập hợp những công cụ giúp theo dõi sự đổi khác của hàng loạt cấu trúc chương trình ( gồm có từ những file code cho đến những file hình ảnh, video, … ) Với Version Control, bạn hoàn toàn có thể tạo ra nhiều phiên bản khác nhau và backup đổi khác trước đó nếu bạn mắc lỗi .Đây gần như có nơi hoàn toàn có thể tàng trữ vô hạn cho dự án Bất Động Sản của bạn và hoàn toàn có thể gọi là nơi “ cứu rỗi ” cho những ai hay mắc phải sai lầm đáng tiếc .Version Control thông dụng nhất là một mạng lưới hệ thống mã nguồn mở có tên là Git. Sử dụng Git, bạn hoàn toàn có thể tàng trữ tổng thể những tệp của mình và lịch sử vẻ vang đổi khác của chúng trong những bộ sưu tập được gọi là kho tàng trữ .Bạn cũng hoàn toàn có thể đã nghe nói về GitHub, một công ty tàng trữ trực tuyến thuộc chiếm hữu của Microsoft, nơi bạn hoàn toàn có thể tàng trữ toàn bộ những kho Git của mình .Để tìm hiểu và khám phá Git và GitHub, GitHub. com có một số ít hướng dẫn trực tuyến lý giải khởi đầu và quy trình chạy. Traversy Media cũng có một video YouTube lý giải cách Git hoạt động giải trí .
Kỹ năng cần có để học thiết kế web online
Visual Design
Có vẻ như rõ ràng rằng bạn cần kiến thức phong cách thiết kế để trở thành một nhà phong cách thiết kế web. Nhưng phong cách thiết kế trực quan tập trung chuyên sâu vào những loại sản phẩm kỹ thuật số. Vì vậy nó hoàn toàn có thể khác với những gì bạn mong đợi .Trong trường hợp này, những nguyên tắc phong cách thiết kế là những gì quyết định hành động giao diện của một website. Chúng hoàn toàn có thể gồm có từ tỷ suất đến kiểu chữ, mạng lưới hệ thống lưới, đến kim chỉ nan sắc tố .
UX – Trải nghiệm người dùng
Đây là những chữ viết tắt vui nhộn ! UX là viết tắt của thưởng thức người dùng ( user experience ) hoặc cách mọi người cảm thấy ( bình tĩnh, tuyệt vọng, v.v. ) khi họ sử dụng website. Trên hết, UX là về cách tiếp cận những phong cách thiết kế của bạn từ góc nhìn người dùng tiên phong ; làm thế nào bạn hoàn toàn có thể phong cách thiết kế một website giúp họ có được đúng chuẩn những gì họ cần ?
UX – Trải nghiệm người dùngĐể làm điều đó, bạn sẽ điều tra và nghiên cứu người dùng của mình và tạo ra personas ( hồ sơ của người dùng lý tưởng tưởng tượng ). Bạn hoàn toàn có thể sắp xếp những trang và nội dung với map website. Bạn sẽ tìm ra con đường người dùng đi trên website của bạn trong những luồng người dùng .Ví dụ : họ có luôn nhấp thẳng vào phương tiện đi lại tiếp thị quảng cáo xã hội không ? Hoặc họ chỉ đang tìm kiếm thông tin liên hệ ? Và bạn sẽ kiến thiết xây dựng những khung lưới để phác thảo những phần chính của mỗi website. Tất cả những thành phần này là thiết yếu để thực hành thực tế phong cách thiết kế thưởng thức người dùng .
Design Software
Giống như bất kể thợ thủ công nào, để thực thi việc làm của bạn, bạn cần những công cụ tương thích. Biết cách của bạn xung quanh những tiêu chuẩn ngành sẽ có ích trong mọi trường hợp và quan trọng trong nhiều trường hợp .Mặc dù phong cách thiết kế website hoàn toàn có thể được thực thi ngay trên trình duyệt web, những công cụ như Adobe Photoshop, Illustrator và Sketch là những công cụ mà hầu hết tổng thể những nhà phong cách thiết kế sử dụng cho những phần quan trọng của việc làm như tạo mockup, phong cách thiết kế ( logo và hình ảnh ) và tất yếu sửa đổi và nâng cao hình ảnh .Bạn nên học cách sử dụng chúng ( mặc dầu, nếu bạn chỉ mới mở màn, hãy xem xét thử một vài lựa chọn thay thế sửa chữa photoshop không lấy phí )
Communication
Giữ liên lạc là kiến thức và kỹ năng cần có cho một nhà phong cách thiết kế. Bạn không hề kiếm sống từ việc kiến thiết xây dựng website mà không cần tiếp xúc tốt. Và bạn cũng sẽ cần update cho người mua về quá trình của những dự án Bất Động Sản của họ cộng với lý giải những phát minh sáng tạo của bạn .Bạn thậm chí còn hoàn toàn có thể được nhu yếu triển khai một số ít bản sao hoặc chỉnh sửa cho những website, đặc biệt quan trọng là nếu bạn đang điều hành quản lý một shop của riêng bạn. Vì vậy, hãy khóa chặt bài viết và kiến thức và kỹ năng thuyết trình của bạn, và bạn sẽ chắc như đinh nhận được điểm của mình trong mọi trường hợp .
SEO / Digital Marketing / Social Media
Bộ kiến thức và kỹ năng SEO ( tối ưu hóa công cụ tìm kiếm ), digital marketing và phương tiện đi lại tiếp thị quảng cáo xã hội có vẻ như như nó có ý nghĩa so với một nhân viên cấp dưới bán hàng hơn là một nhà phong cách thiết kế web .Dù vậy, vì Internet là cách mà nhiều công ty bán hàng thời nay và vì bạn cũng sẽ cần bán kĩ năng phong cách thiết kế web của mình ( khi bạn đang tìm việc hoặc cho người mua tự do ), bạn cũng nên biết về chúng. Ngay cả khi biết những điều cơ bản của từng người và ghi nhớ chúng cho cả người mua và website của riêng bạn sẽ giúp bạn đi một chặng đường dài trong hành trình dài phong cách thiết kế web của bạn .
Business / Client Management
Và, là một nhân viên cấp dưới hoặc là một người thao tác tự do, hiểu được điểm mấu chốt sẽ giúp bạn bảo vệ rằng bạn hoặc công ty của bạn có doanh thu và bền vững và kiên cố. Bạn không cần phải quay lại lấy bằng MBA, nhưng bạn nên có ý tưởng sáng tạo về tiềm năng và kinh tế tài chính của chủ lao động hoặc doanh nghiệp của bạn để bạn hoàn toàn có thể sử dụng chúng để hướng dẫn việc làm của mình .Và, nếu bạn phong cách thiết kế trực tiếp cho người mua, bạn nên có một kế hoạch để bảo vệ rằng dòng tiền và hồ sơ dự án Bất Động Sản của bạn đều khỏe mạnh và hoàn toàn có thể thực thi được trong thời gian ngắn và dài hạn .
Mẹo học thiết kế website hiệu quả
- Đừng cố gắng học mọi thứ cùng một lúc. Bạn nên chọn một kỹ năng để học tại một thời điểm nhất định.
- Đừng “nhảy lò cò” từ hướng dẫn này đến hướng dẫn khác. Khi bạn học, bạn có thể xem lướt qua các tài nguyên khác nhau để xem tài nguyên nào bạn thích nhất. Nhưng một lần nữa, hãy cố gắng chọn một.
- Học thiết kế web là một hành trình dài. Có lẽ bạn đã từng “nghe đồn” về những người đi từ số 0 đến một công việc thiết kế web chuyên nghiệp chỉ trong 3 tháng. Nhưng đó chỉ là thiểu số. Bạn nên đặt mục tiêu từ 1 đến 2 năm để sẵn sàng bắt đầu mọi thứ một cách thoải mái nhất.
- Chỉ xem một khóa học video hoặc đọc một cuốn sách sẽ không đủ để biến bạn thành một chuyên gia. Học lý thuyết chỉ là bước đầu tiên. Xây dựng các trang web và dự án thực tế (thậm chí chỉ là bản demo cho chính bạn) sẽ giúp việc học của bạn thực sự hiệu quả.
Kết luận
Mong rằng với những chia sẻ của tôi về học thiết kế web, bạn có thể đưa ra được những quyết định cho bản thân nên bắt đầu học bằng cách nào. Hơn nữa, với những gợi ý công cụ học, các kỹ năng và một lộ trình học chi tiết giúp bạn sẽ có một kế hoạch và mục tiêu hoàn hảo nhất cho quá trình học thiết kế Web trong tương lai.
Hoặc nếu bạn muốn học phong cách thiết kế website WordPress, hãy nộp đơn làm thực tập vào GTV qua link sau .Chúc bạn thành công xuất sắc !Đọc tiếp :
Source: https://mekoong.vn
Category: Cẩm Nang Thiết Kế
Nhận xét
Đăng nhận xét