Sự kết hợp giữa Front-end, HTML/CSS và Design: Bí kíp cho một UI đẹp, thân thiện

Quy trình thiết kế một ứng dụng thực tế tại Got It

Bài viết được viết bởi Robert (Front-end Engineer tại Engineering Team) và Kyle (Front-end Engineer tại Design Team) ở Got It Vietnam.

UI (User Interface) — Giao diện người dùng là một yếu tố vô cùng quan trọng giúp người dùng đánh giá thẩm mỹ và mức độ hiệu quả của một thiết kế website/ứng dụng. Để có được một UI vừa đẹp vừa thân thiện là nhờ sự “tam kiếm hợp bích” của cả team Front-end, HTML/CSS và Design. Ở bài viết lần này, chúng tôi sẽ mô tả chi tiết các bước làm việc của 03 bên trong việc thiết kế một ứng dụng thực tế tại Got It.

Để dễ dàng nắm bắt bài viết hơn, trước hết, hãy đọc qua về G Process — quy trình làm việc đặc biệt tại Got It được chúng tôi áp dụng qua bức ảnh dưới đây:

Nếu muốn tìm hiểu chi tiết hơn về G Process, bạn có thể khám phá tại đây. Giờ thì, hãy bắt đầu quá trình làm nên một UI thật đẹp và thân thiện ngay thôi!

1. G3b — Product specs and design

1.1 Research requirements (Tìm hiểu yêu cầu)

Công việc của các thành viên thường sẽ bắt đầu sau khi văn bản về Product Specs được PM của project chia sẻ cho các thành viên liên quan. Tất cả các công việc sẽ được chia thành từng đầu việc nhỏ hơn để thuận tiện cho việc quản lý và theo dõi. Mỗi đầu việc như vậy sẽ tương ứng với một ticket ở trên Jira, ứng dụng được Got It sử dụng để quản lý việc phát triển phần mềm.

Phía bên dưới là ví dụ của một ticket trên Jira. Với yêu cầu “Ask a Question Page”, Project Managers (PM), Engineers, Designers và QA (Testers) sẽ nghiên cứu, ước lượng tính khả thi của những tính năng cần đạt được.

Vẫn với ví dụ trên, sau khi tìm hiểu, các thành viên sẽ đưa ra những vấn đề kỹ thuật như sau:

– Đường dẫn URL sẽ trông như thế nào khi người dùng điều hướng đến trang “Your question”? Các câu hỏi khác nhau có nên có những đường dẫn riêng biệt?

– Điều kiện chính xác cần có để chuyển từ tuỳ chọn 5 câu hỏi mặc định sang 5 câu hỏi thực tế hàng đầu từ người dùng là gì?

1.2 G3b — Design Team: Design mockups (Thiết kế bản mô phỏng)

Đây là khi Design Team bắt đầu tham gia vào công việc để biến những dòng chữ khô khan kia thành các bản thiết kế mockup bắt mắt và thân thiện đối với người dùng. Ở giai đoạn này, Design Team sẽ làm việc trực tiếp với PM để tạo nên layout cho lo-fi mockup. Đây là phần khung xương cho một bản thiết kế nhằm định vị bố cục và giúp designers tính toán để thiết kế trải nghiệm tốt cho người dùng. Đôi lúc, các Engineers cũng tham gia ngay từ bước này để đưa ra những góp ý, đóng góp về thiết kế từ góc độ chuyên môn của mình.

Sau khi bản lo-fi mockup được thông qua, các UI Designers sẽ tiếp tục bước tạo ra hi-fi mockup. Kết quả của bước này gần như chính là thiết kế cuối cùng mà người dùng có thể nhìn thấy. Bên cạnh đó, bản thiết kế này về sau cũng được team QA (Tester) dùng để làm tài liệu cho việc test giao diện.

Vì vậy, bước này cần được đầu tư nhiều về tính thẩm mỹ, sự thống nhất chung về mặt giao diện trong toàn bộ sản phẩm, cũng như sự chính xác đến từng pixel. Một hệ thống thiết kế có tên Got It Design System được đưa vào áp dụng ngay từ bước này nhằm hỗ trợ tối đa các nhà thiết kế hoàn thành được các mục tiêu trên nhanh và chính xác nhất có thể.

1.3 G3b — Engineering Team: Engineering Design (Thiết kế kỹ thuật)

Sau bước trên, team Engineers đã có trong tay những thiết kế của màn hình và tính năng được yêu cầu. Kể từ đó, team sẽ phải thống nhất với nhau được phương án tiếp cận chung. Tới đây, các thành viên trong đội kỹ thuật sẽ họp để trả lời những câu hỏi sau:

– Những tính năng nào sẽ được triển khai?

– Điều gì sẽ xảy ra khi người dùng tương tác với tính năng mới?

– Cách các dòng thông tin di chuyển giữa trình duyệt và giao diện lập trình ứng dụng?

– Những khó khăn kỹ thuật có thể gặp phải?

Để đạt được sự thống nhất của cả team, nhiều khi các thành viên sẽ phải ngồi với nhau hàng tiếng đồng hồ liên tục. Có nhiều lúc, anh Tech Lead phải cho cả đội ra ngoài “nghỉ lấy sức” trước khi quay trở lại chiến đấu tiếp.

Sau khi hoàn thành G3b, các bước tiếp theo để một ứng dụng sẽ được “trình làng” là gì? Hãy tiếp tục tìm hiểu chi tiết tại bài viết này nhé: bit.ly/gotit-bi-kip-UI.

Got It cảm ơn tất cả các bạn đọc Medium đã quan tâm tới những bài viết của chúng mình suốt thời gian qua. Hiện tại, trang blog của Got It đã được chuyển tới địa chỉ: vn.got-it.ai/blog. Hãy cập nhật các bài blog đầy đủ nhất của Got It trên nền tảng mới và tiếp tục ủng hộ chúng mình nha ❤️