Giới thiệu Wireframe & sắp xếp Folder cho Project

Dẫn nhập

Ở các bài trước chúng ta đã cùng nhau làm quen với HTML và CSS căn bản.

Trong bài học này các bạn sẽ được giới thiệu về Wireframe, và cùng nhau tạo các folder cho project của chúng ta.

---

Nội dung

Để đọc hiểu bài này một cách tốt nhất, bạn nên có kiến thức về:

• TỔNG QUAN HTML CƠ BẢN
• TỔNG QUAN CSS CƠ BẢN
• CẤU TRÚC MODEL BOX TRONG CSS

Trong bài này, Kteam sẽ giới thiệu đến bạn:

• Khái niệm Wireframe
• Wireframe của dự án thực hành
• Tạo các folder, các file cho project.

Lưu ý: Bài viết nhằm tóm tắt nội dung thực hiện project & giúp bạn nắm bắt các phần được hướng dẫn một cách đơn giản nhất. Tuy nhiên, hãy theo dõi video để học hỏi các kiến thức và kỹ thuật chi tiết nhất từ tác giả.

---

Khái niệm Wireframe

Wireframe là gì ?

Wireframe là một công cụ trực quan để trình bày cấu trúc và chức năng của website được đề xuất. Nó là bản phác thảo trang web của bạn (không chứa hiệu ứng, hình ảnh hay phối màu, … ), giúp bạn cũng như đối tác hoặc khách hàng có thể hiểu & trao đổi được về sản phẩm.

Dựa vào nó mà chúng ta có thể tạo ra trang web cũng như chỉnh sửa 1 cách hợp lí và dễ dàng. Tuy nhiên, nếu chưa từng coi wireframe là một phần dự án thì việc sử dụng nó làm bạn có cảm giác hơi tù túng do mọi hình ảnh,hiệu ứng, màu sắc của bạn đều như được bọc bởi các khối hộp, có vẻ hơi nhạt nhẽo so với một người làm Front End.

Nhưng bù lại, nó sẽ cho bạn cái nhìn tổng quan và dễ dàng định hướng phác thảo về trang web mà bạn muốn xây dựng; bạn sẽ ít bị rối loạn bởi các chi tiết phụ mà thực sự tập trung vào các cấu trúc, nội dụng, hệ thống phân cấp, chức năng & tương tác chính.

---

Tạo Wireframe như thế nào?

Để tạo ra wireframe bạn có thể:

• Vẽ tay ra giấy
• Sử dụng các công của hỗ trợ như Photoshop, Mockflow ….

 

---

Wireframe của dự án thực hành

Do website nhỏ nên wireframe làm khá đơn giản và 1 số chỗ không theo chuẩn thiết kế wireframe để cho các bạn dễ hiểu.

Các bạn có thể tham khảo các nguyên tắc chung khi thiết kế wireframe tại :

https://uxmastery.com/wireframing-for-beginners/

Wireframe của dự án:

---

Tạo các folders và files cho dự án

Nếu như bạn làm cho khách hàng, thường họ sẽ có cho bạn bản text mô tả nội dung từng phần, và cả kho ảnh cho từng phần đó.

Cấu trúc folders:

• Trong quá trình thiết kế trang HTML, thì việc sử dụng các file .css, .js bên ngoài để hỗ trợ là vô cùng hữu ích, đó là lí do tồn tại folder vendors.
• Các file ảnh các bạn vào phần download Project bên dưới để download về nhé.

---

Project tham khảo 

Nếu việc thực hành theo hướng dẫn không diễn ra suôn sẻ như mong muốn. Bạn cũng có thể tải xuống PROJECT THAM KHẢO ở link bên dưới! 

---

Kết luận

Ờ bài này chúng ta đã cùng nhau tìm hiểu về wireframe và tạo các folders.

Ở bài sau chúng ta sẽ kết thúc quá trình chuẩn bị bằng việc SET UP CẤU TRÚC & CÁC CÚ PHÁP BAN ĐẦU CHO FILE HTML, CSS. 

Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận và góp ý của mình để giúp phát triển bài viết tốt hơn. Đừng quên: “Luyện tập – Thử thách – Không ngại khó”.

 

---

Tài liệu 

Nhằm phục vụ mục đích học tập Offline của cộng đồng, Kteam hỗ trợ tính năng lưu trữ nội dung bài học Giới thiệu Wireframe & sắp xếp Folder cho Project dưới dạng file PDF trong link bên dưới.

Ngoài ra, bạn cũng có thể tìm thấy các tài liệu được đóng góp từ cộng đồng ở mục TÀI LIỆU trên thư viện Howkteam.com

Đừng quên like hoặc +1 Google để ủng hộ Kteam và tác giả nhé! 

---

Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần BÌNH LUẬN bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng. 

 

---

Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần BÌNH LUẬN bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.