BLOG

Wireframe - Bản phác thảo cần có khi thiết kế website

Web Design 2020.10.02

Wireframe là một hình thức thể hiện trực quan ý tưởng của bạn hay của nhà thiết kế bằng cách bày trí bố cục đen trắng trên bề mặt phẳng, dùng khi muốn trình bày kế hoạch cho một yêu cầu thiết kế nào đó, cho khách hàng hoặc cho Developer, Project manager có thể hiểu được nội dung cần làm. Bản phác thảo ý tưởng tốt sẽ đem đến cho bạn rất nhiều thuận lợi trước đối tác. Hãy xem việc phác thảo wireframe như là một khâu trong thiết kế website.

Công việc thiết kế website không chỉ đơn thuần là tạo ra các ô rồi cho nội dung vào, hình ảnh và nội dung, điều hướng như thế nào cũng được, mà một thiết kế tốt sẽ là có bố cục tinh tế, dễ nắm bắt và thu hút người dùng muốn lướt cho hết chiều dài trang web và cả các trang con. Để có được bố cục tốt, trước tiên bên thiết kế cần thể hiện sơ lược được ý đồ của mình qua các bản wireframe – phác thảo để cho khách hàng dễ hình dung bộ khung của trang web để cùng bàn luận, xây dựng nội dung chi tiết hơn, tránh việc “đập đi xây lại” nếu không có sự thống nhất từ những ngày đầu đi vào thiết kế.

1) Những thông tin cần thể hiện trên bản wireframe – phác thảo

Bạn có thể sẽ muốn biết liệu bố cục của thiết kếnày có ý nghĩa như thế nào, hay việc điều hướng có là một cơn ác mộng về trải nghiệm người dùng hay không, Vì vậy, bạn cần tạo wireframe trang web nếu muốn sớm phát hiện ra những sai lầm trong sáng tạo, nếu không muốn trở nên mất thời gian và tốn kém để thực hiện khâu điều chỉnh và thay đổi nào. Chúng ta sẽ thể hiện những gì trên wireframe để có thể nhìn thấy được những điều đó?

  • Bố cục tổng thể: nêu ra mọi nội dung cần có và các thành phần hình ảnh để đảm bảo trải nghiệm người dùng hợp lý và thú vị dựa trên thông tin mà khách hàng cung cấp.
  • Navigation – cấu trúc của trang web: thể hiện các yếu tố điều hướng, đường dẫn chính và phụ để đảm bảo hướng người dùng có thể di chuyển tự do xung quanh mọi thông tin trên website một cách dễ dàng, hứng thú.
  • Bố cục thiết kế: bao gồm một vài yếu tố trực quan của giao diện trước khi bắt đầu nâng thành thiết kế trực quan

Wireframe về cơ bản như là một bản đồ cho từng trang trong website của bạn. Chúng là các bản phác thảo đơn giản, làm cho wireframe trở thành một công cụ giao tiếp giữa nhà thiết kế với khách hàng và đội ngũ lập trình viên, các bộ phận có liên quan trước khi đi vào thiết kế chi tiết. Nhưng có một khái niệm khác ở đây, liên quan đến mức độ chi tiết mà bạn áp dụng cho wireframe trang web của mình, mức độ phản ánh trung thực gần sát với thành phẩm hay chỉ là phản ánh sơ lược ý tưởng mà thôi.

2) Wireframe thể hiện gần chính xác với thành phẩm và wireframe thể hiện sơ lược

Mức độ gần đúng của bản phác thảo so với thành phẩm giống như hầu hết mọi thứ trong thiết kế UX, không có câu trả lời xác thực đúng hay sai. Tất cả là nhằm tìm ra sự cân bằng phù hợp giữa thời gian cần thiết để thêm các chi tiết đó và nhu cầu của bạn phải có những chi tiết này như thế nào.

Wireframe có độ trung thực thấp có xu hướng chỉ là sơ đồ bố cục thô để hiển thị của từng phần tử trên màn hình, không thể hiện chúng ta biết chi tiết về những phần tử đó sẽ trông như thế nào. Thay vào đó, màn hình có thể được chia thành các phần hoặc khối, mà không cần lưu ý đến tỷ lệ hoặc độ chính xác. Tốt hơn là sử dụng wireframe trang web có độ trung thực thấp khi bạn có một vài ý tưởng concept và muốn so sánh chúng trong khoảng thời gian ngắn.

Mặt khác, phác thảo có độ trung thực cao có xu hướng thay đổi rất nhiều tùy thuộc vào công ty khách hàng và đội ngũ thiết kế. Một số còn sử dụng hình ảnh thực và nội dung thực, thậm chí bao gồm những nội dung tương tác mà thiết kế sẽ có. Nhưng điều này đi kèm với việc phải đầu tư nhiều thời gian vào việc tạo và thêm tất cả các chi tiết này, làm cho chúng phù hợp hơn cho các giai đoạn sau của quá trình sáng tạo.

3) Kết luận

Điều quan trọng cần lưu ý là đừng bao giờ bắt đầu với wireframe trang web có độ trung thực cao.

Lý tưởng nhất là bạn bắt đầu với một phiên bản phác thảo sơ lược, trong đó bạn có thể xác định những yếu tố cơ bản và xây dựng dựa trên đó, nhờ vậy, bạn có thể cho thấy được sự chú ý đúng mức đến khía cạnh cấu trúc của dự án của mình. Điều này đặc biệt quan trọng khi nói đến cơ cấu thông tin trong trang web của bạn.