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

Lập trình Front End cơ bản với website Landing Page

5.0 (10 đánh giá)
Tạo bởi Kteam Cập nhật lần cuối 6 năm trước 29.500 lượt xem 3 bình luận
Tác giả/Dịch giả: Kteam
Học nhanh

Danh sách bài học

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ề:

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. 

 


Tải xuống

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 likeshare để ủ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ê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.

Tác giả/Dịch giả

Khóa học

Lập trình Front End cơ bản với website Landing Page

Nếu bạn yêu thích lập trình web nhưng còn lơ ngơ không biết bắt đầu từ đâu hay đã biết cơ bản mà chưa làm được một sản phẩm nhất định nào, thì đây chính là khóa học dành cho bạn – LẬP TRÌNH FRONT END CƠ BẢN VỚI WEBSITE LANDING PAGE.

Trong phần này, Kteam sẽ giới thiệu cho các bạn về nội dung chúng ta sẽ được hướng dẫn cho khóa học này, cũng như là project mà chúng ta sẽ cùng nhau thực hiện.

Nào! Bắt đầu thôi! 

Đánh giá

Midir reynard đã đánh giá 7 tháng trước

Spidartist đã đánh giá 4 năm trước

Joyces đã đánh giá 4 năm trước

Hamoon240198 đã đánh giá 4 năm trước

ok

zietkon đã đánh giá 4 năm trước

nội dung rất hay, người mới bắt đầu như mình học rất dễ hiểu, cảm ơn Team

Bình luận

Để bình luận, bạn cần đăng nhập bằng tài khoản Howkteam.

Đăng nhập
vt123455 đã bình luận 6 tháng trước

cho mình xin các file hình ảnh bạn

zietkon đã bình luận 4 năm trước

Ad ơi cho mình hỏi, các file tài liệu trong GG Driver mình xem được mà sao không tải về được nhỉ, trong khi link file tài liệu pdf thì mình tải đc bình thường.

Không có video.