6 bước để tạo ra một bản thiết kế UI/UX hoàn chỉnh

Để tạo ra một bản thiết kế UI/UX thì đòi hỏi các UI/UX Designer dành nhiều thời gian nghiên cứu và tuân thủ các quy trình, tiêu chuẩn nhất định. Sau đây là 6 bước cơ bản giúp bạn có thể tạo ra sản phẩm UI/UX hoàn chỉnh:

1. Phân tích và lên ý tưởng

Mình tin rằng bất kỳ lĩnh vực hay ngành nghề hay công việc nào thì quá trình phân tích là không thể thiếu. Đặc biệt với hệ thống thông tin thì việc phân tích kỹ lưỡng số liệu, insight, thói quen, tập quán… của người dùng và tạo ra một bản kế hoạch chi tiết cho dự án là vô cùng quan trọng.

Điều này giúp Designer lẫn Developers nắm chắc được mục đích, nghiệp vụ, tính năng của phần mềm hay tính năng cần phát triển, từ đó tránh các sai sót, hiểu lầm không đáng có dẫn đến phải sửa chữa rất thời gian và công sức. Tại bước này Designer cần làm việc với BA (Business Analyst) khá nhiều.

Lời khuyên cho các bạn là nên khảo sát các bên liên quan với doanh nghiệp, tìm hiểu và khảo sát những người dùng khác nhau thông qua User Personas, User Stories, Use cases và User flows… Các định nghĩa ngày dễ dàng tìm kiếm trên google nên mình sẽ không đi quá sâu.

Sau khi đã có bản kế hoạch chi tiết, nhiệm vụ của UI/UX designer là lên ý tưởng thông qua việc tham khảo sản phẩm của các đối thủ cạnh tranh hay các trang lưu trữ thiết kế như Behance, Dribble, Pinterest Freepik… Từ đó ấn định một cách nhất quán cho bản thiết kế các yếu tố như màu sắc, typography, hay phong cách thiết kế phù hợp nhất với người dùng sản phẩm.

2. Wireframe

Wireframe là sơ đồ cấu trúc trực quan của phần mềm. Thường được loại bỏ các yếu tố màu sắc, họa tiết thay vào đó là màu grayscale.

Điều này giúp designer tập chung bố cục tổng thể, kích thước, vị trí của các component trong bản thiết kế. Tại bước này gần như tập chung toàn bộ vào UX. Ngoài ra bản Wireframe cũng là nơi trung gian để đưa ra ý kiến giữa UX designer và UI designer trong trường hợp các công ty lớn phân tách riêng 2 vị trí này.

Cách tốt nhất để tiếp cận với Wireframe ban đầu nên là phác thảo bản nháp trên giấy bằng 1 cây bút chì. Sau đó đưa lên Figma để cân chỉnh lại bằng các hình khối sao cho hợp lý với hệ thống grid. Các bạn cũng nên lưu tâm là việc tạo ra một bản Wireframe tốt hay không sẽ có ảnh hưởng nhất định tới giao diện UI của phần mềm.

3. Design chi tiết

Khác với Wireframe thì tại bước này chúng ta cần chú trọng vào UI. Hẳn là bạn nào chuyển sang từ Graphic Design sẽ có lợi thế ở mảng này. Cụ thể là thông qua hệ thống Style (màu sắc, typography, stroke, shadow, blur…) và hệ thống Font icon Designer sẽ kết hợp chúng để tạo ra một giao diện hoàn chỉnh cho phần mềm, việc tạo ra giao diện người dùng tốt hay không cũng sẽ ảnh hưởng tới trải nghiệm của người dùng (UX). Vậy nên mới nói là UI/UX luôn song hành và không thể tách rời.

Tại bước này các component cũng sẽ được thiết kế đầy đủ các trạng thái. Ví dụ như button ở wireframe thì chỉ cần thể hiện dưới dạng 1 hình chữ nhật là được nhưng ở bản design chi tiết thì 1 button ngoài việc bao gồm các chỉ số như màu sắc, viền, độ bo góc, đổ bóng... thì nó còn được thể hiện dưới dạng button khi hover, button khi click, button sau khi click, button khi bị vô hiệu hóa…

4. Prototype

Nếu như nói Wireframe là tạo ra khung xương cho phần mềm, Design chi tiết là đắp lên phần da thịt thì Prototype giống như việc thổi hồn cho bản thiết kế vậy.

Bước này hiểu đơn giản là tạo ra kết nối các màn hình với nhau, các component ở các trạng thái khác nhau thông qua việc sử dụng các interactions và hiệu ứng animation của chúng. Từ đây giúp bản preview trở nên sống động hơn. Dễ dàng test và yêu cầu sửa đổi về sau.

5. Test và sửa đổi, bổ sung

Cho dù cẩn thận đến đâu thì trong quá trình làm việc với vô số component, interaction sẽ không thể tránh khỏi các sai sót. Việc test lại và sửa đổi bổ sung là rất cần thiết. Vì một khi đã đưa vào code rồi thì việc sửa code sẽ khó khăn và tốn thời gian hơn rất nhiều so với sửa ở bản thiết kế. Không khác gì xây 1 căn nhà, xây xong rồi mới thấy sai và phải đập đi xây lại vậy.

6. Bàn giao (Handoff)

Bước này là bàn giao bản thiết kế hoàn chỉnh sang cho đội Front-End Dev sao cho phải đảm bảo được Dev đã hiểu đúng, hiểu đủ về toàn bộ bản thiết kế. Bước này cực kỳ quan trọng vì nó sẽ quyết định xem sản phẩm thực tế có thực sự như mong muốn so với bản thiết kế hay không.

Tất nhiên khả năng của Front-end dev là điều cần được nhắc đến nhưng cũng nhiều trường hợp họ làm sai do chưa đọc hiểu đúng bản thiết kế.

Chắc chắn đến 99% các UI/UX designer gặp nhiều khó khăn tại bước cuối cùng này. Và luôn stress, căng thẳng vì bản thiết kế 1 đằng nhưng dev lại code ra sản phẩm 1 nẻo. Đôi khi không khéo léo có thể gây mất tình cảm giữa đôi bên.

Lời khuyên cho bạn là hãy bình tĩnh, chỉ ra những điểm sai và liệt kê chi tiết, rõ ràng thành 1 danh sách. Yêu cầu Dev chỉnh sửa lại sao cho đúng. Đặt tên rõ ràng cho các component, style, màn hình để dev dễ dàng tiếp cận. Và hơn hết là thay vì khó chịu với nhau. Thì bạn nên gần gũi với Front-end dev để các bạn có thể hiểu nhau hơn, Sau 1 thời gian làm việc nhất định các bạn sẽ nhận thấy sự ăn ý giữa đôi bên.

---

Bài viết được biên soạn & tổng hợp bởi GV Đinh Tiến Thành, phát hành độc quyền tại Keyframe. Thiết kế minh họa bởi Keyframe.

Mong bài viết ngắn ở trên sẽ giúp ích được phần nào cho các bạn. Hiện tại thì toàn bộ các bước để tạo ra 1 bản thiết kế Product được nêu ở trên, chúng ta đều có thể sử dụng công cụ Figma – Một công cụ thiết kế UI/UI chuyên nghiệp mà còn miễn phí nữa.

Nếu bạn đang tìm kiếm một khóa học thiết kế UI từ cơ bản đến nâng cao thì khóa học Figma UI Design tại Keyframe sẽ là phù hợp với bạn: https://keyframe.vn/khoa-hoc-offline/khoa-hoc-figma-ui-design-80.html

Ngoài ra, để hoàn thiện quy trình và tư duy thiết kế Product, bạn cũng nên tham gia một khóa học thiên hướng về UX như khóa Web/ Mobile App Product Design, xem chi tiết tại link sau: https://keyframe.vn/khoa-hoc-offline/khoa-hoc-thiet-ke-uxui-web-mobile-app-product-design-82.html