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

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:

Front-end Process

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.

Front-end

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?

Front-end
Những buổi họp “căng não” dù ở bất cứ đâu!

Để đạ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. 

2. G4 – Estimation (Ước tính)

Trong một dự án, nhóm phát triển sẽ được giao cho thời hạn nhất định để thực hiện công việc của mình. Với đa số các dự án của chúng tôi, 02 tuần là khoảng thời gian để đi hết tất cả bước từ G3b tới G7. 

Để các thành viên trong team có thể cho ra sản phẩm hoàn chỉnh, việc đầu tiên là đưa ra dự tính thời gian để hoàn thành công việc. Việc này rất quan trọng vì nó giúp team phân chia nhân sự hợp lý để đảm bảo sản phẩm được phát triển theo đúng thời gian dự kiến.

Front-end

Có vài lần các thành viên trẻ trong team lại có những pha dự tính ngoài sức tưởng tượng. Khi gặp tình trạng này, anh trưởng nhóm lại trầm ngâm một lúc rồi tự động làm tròn thêm một ngày cho những dự đoán “thắng lợi tinh thần” để đảm bảo mỗi thành viên không bị quá tải và hoàn thành tốt các công việc được giao.

3. G5 – Execution (Triển khai)

3.1  Thiết kế cấu trúc lập trình

Giữa G4 và G5, đội Front-end sẽ phải làm thêm một bước đệm là thiết kế Front-end. Với mỗi dự án đòi hỏi sự hợp tác của nhiều Front-end Engineers một lúc, bước thiết kế cấu trúc lập trình là rất quan trọng. Nó giúp đảm bảo phần code chung mà tất cả chúng tôi cần sẽ được tái sử dụng tối đa. Làm tốt việc này, chúng tôi có thể rút ngắn được thời gian triển khai và tránh trường hợp các thành phần không thể hoạt động với nhau. Các tiêu chí cần cho một thiết kế của chúng tôi là:

  • Các component được dùng ở nhiều nơi sẽ được đưa vào tệp thông tin chung bên ngoài để dễ được truy cập hơn.
  • Các component nào chỉ được dùng bên trong component lớn hơn sẽ nằm bên trong folder của component lớn hơn.

Với Jira ticket ở mục 1.1, thiết kế sẽ được đưa ra như sau:

Front-end

3.2 G5 – Coding (Lập trình)

Đây là lúc Engineers chính thức bắt tay vào việc viết ra logic cho các thành phần của ứng dụng.

Ngôn ngữ lập trình mà chúng tôi sử dụng là Javascript. Để xây dựng ứng dụng một cách đơn giản, nhanh chóng, và có thể phát triển hơn qua thời gian, Got It đã chọn sử dụng Reactjs làm thư viện chính cho phía client. Công việc của những coder là tạo nên những thành phần nhỏ trên ứng dụng, truyền cho các thành phần đó dữ liệu cần thiết để hiển thị và hoạt động. Công đoạn cuối cùng là tạo logic hợp lý để ứng dụng có thể phản ứng lại những tương tác từ người dùng cũng như các event được truyền đến từ những server hoặc API khác.

Front-end Tech

Sự chuẩn bị của các Engineers trong những giai đoạn trước càng kỹ lưỡng, việc triển khai bước này sẽ càng có nhiều thuận lợi. Khi có công tác chuẩn bị tốt, chúng tôi có thể ghép code với nhau một cách trôi chảy dù đó là những ứng dụng có những tính năng phức tạp. Ngược lại, nếu gặp khó khăn và phải sửa chữa nhiều, đó là bởi chúng tôi đã làm không chuẩn bị kỹ càng trong các giai đoạn trước.

3.3 G5 – Ghép HTML/CSS

Sau khi nhận được bản thiết kế của Design Team, chúng tôi chuyển sang công đoạn kiểm tra các thành phần của bản thiết kế. Tiếp theo, chúng tôi phân chia chúng thành các thành phần nhỏ hơn để tạo ra những dòng code hiển thị lên giao diện mà mắt thường nhìn thấy.  Công đoạn này mất khá nhiều thời gian vì phải chuyển đổi chúng giữa nhiều tỉ lệ màn hình hay còn có một cái tên khác là “responsive”. Công việc này gọi là thiết kế bản thô HTML.

Do thời gian để hoàn thành dự án thường khá dồn dập nên việc thực hiện HTML/CSS của team HTML/CSS và coding của team Front-end hay được thực hiện song song. Cứ mỗi khi team HTML/CSS hoàn thành giao diện cho các trang khác nhau, chúng sẽ được dựng trên một bản chạy thử hoàn chỉnh sử dụng Storybook, rồi được chuyển sang team Front-end. Đến lúc này, đội ngũ Front-end chỉ việc lồng ghép hai phần sẵn có vào nhau, đặt mọi thứ vào đúng vị trí và xử lý các lỗi UI nhỏ. Vậy là công việc ở phần giao diện sẽ được hoàn thành.

3.4 G5 – Code Review and Integration (Rà soát và tích hợp code)

Sau khi giai đoạn lập trình đã hoàn tất, các kỹ sư Front-end sẽ ghép các thành phần vào một môi trường chung để sẵn sàng ghép với phần logic đặt trên server. Một thành viên nhiều kinh nghiệm làm người giữ cổng có nhiệm vụ đọc và duyệt toàn bộ các thay đổi của các thành viên khác. Nếu có vấn đề, người giữ cổng sẽ gửi lại các lời nhận xét để mỗi thành viên chỉnh sửa lại phần việc của họ.

Khi mọi thứ được thông qua, các thành phần riêng sẽ được nhập vào trong thư mục chung của toàn bộ Front-end Team, sẵn sàng cho quá trình ghép với Back-end. Việc ghép Front-end và Back-end có thể được hiểu là xây dựng code base của cả hai trên các server và đảm bảo cho hai bên nhận được đủ các thông tin cần thiết đúng lúc đúng chỗ. Từ đó, hai thành phần mới có thể hoạt động trơn tru.

Ví dụ, nếu bên Front-end gửi một câu hỏi cho Back-end, bên Back-end sẽ tạo ra record cho câu hỏi, gán cho nó một ID cố định và gửi lại câu trả lời cho Front-end. Khi câu trả lời được gửi lại cho Front-end thì màn hình sẽ hiển thị kết quả Back-end đã trả về. Bất cứ một chi tiết nào sai sót trong các khâu trên đều có thể dẫn đến việc người dùng không nhận được kết quả chính xác hoặc là kết quả không bao giờ được hiện ra.

Các kỹ sư Got It sẽ ngồi với nhau, có lúc tới 2-3 ngày chỉ để kiểm tra và rà soát tất cả các phần tương tác giữa Back-end, Front-end diễn ra đúng ý muốn. Kết quả của quá trình này là người dùng sẽ có một ứng dụng hoạt động trơn tru từ đầu tới cuối. Đến đây thì công việc của Engineers cho bước G5 đã tương đối xong. Một UI có đẹp và thân thiện hay không sẽ phụ thuộc rất nhiều vào sự kết hợp giữa Fron-end, HTML/CSS và Design trong những bước đầu tiên này.

Bước tiếp theo là đưa ứng dụng này lên một môi trường website thực tế để thử nghiệm, bạn có thể tìm hiểu thêm về các bước tiếp theo từ G5 trở đi qua bài viết này.

Nếu bạn quan tâm, hãy xem các vị trí đang tuyển dụng của Got It tại: bit.ly/gotit-hanoi và đọc thêm về quy trình tuyển dụng tại đây.

Uyen Tran
Uyen Tran
October 01, 2020
0
Share this post to:
0 Comments
Inline Feedbacks
View all comments
Các bài viết liên quan
Python nâng cao: 4 cuốn sách ấn tượng nhất

Python nâng cao: 4 cuốn sách ấn tượng nhất

Python là ngôn ngữ lập trình đa dụng và rất phù hợp cho người mới bắt đầu học lập trình. Tuy nhiên, để có học được Python nâng cao, bạn chắc chắn sẽ cần sự hỗ trợ của các cuốn sách. Nhưng cuốn sách nào sẽ là cuốn sách bạn cần? Hôm nay, hãy cùng […]
Ngôn ngữ Python và 15 sự thật bạn có thể chưa biết

Ngôn ngữ Python và 15 sự thật bạn có thể chưa biết

Dùng ngôn ngữ Python hàng ngày, nhưng bạn có biết rằng Python vốn là một dự án sở thích dịp Giáng Sinh? Không chỉ có một nguồn gốc thú vị, còn có rất nhiều sự thật khác về ngôn ngữ này làm cho bạn hứng thú đấy. Hãy khám phá 15 sự thật đó ngay […]
Top các thư viện Python sử dụng cho lập trình trí tuệ nhân tạo

Top các thư viện Python sử dụng cho lập trình trí tuệ nhân tạo

Các thư viện phổ biến được dùng cho lập trình trí tuệ nhân tạo là gì? Một trong những lý do Python trở thành ngôn ngữ lý tưởng nhất cho việc lập trình AI là hệ sinh thái thư viện mà nó cung cấp. Các thuật toán và công cụ AI có thể được thực […]
Lý do nên chọn lập trình trình trí tuệ nhân tạo (AI) bằng Python

Lý do nên chọn lập trình trình trí tuệ nhân tạo (AI) bằng Python

Hiện nay, trong thế giới lập trình, Python đang dẫn đầu trong cuộc đua tìm ra ngôn ngữ tốt nhất cho AI và mạng nơ-ron. Trong bài viết này, hãy cùng tìm hiểu tại sao lập trình trí tuệ nhân tạo bằng Python lại là một lựa chọn lý tưởng đến vậy. Mục lụcNhững thế […]
Bắt đầu học ngôn ngữ lập trình Python qua các dự án

Bắt đầu học ngôn ngữ lập trình Python qua các dự án

Học ngôn ngữ lập trình Python là luôn nằm trong top những điều mọi người nên làm trong những năm gần đây. Python được sử dụng rộng rãi trong nhiều lĩnh vực hot như Khoa học Dữ liệu, phát triển web, kỹ thuật phần mềm, phát triển trò chơi, tự động hóa… Sẽ rất khó […]
Python dùng để làm gì? Top 5 ngành cần Python

Python dùng để làm gì? Top 5 ngành cần Python

Python không còn là cái tên xa lạ với các bạn yêu công nghệ. Với Python, bạn có thể thử ứng dụng lập trình vào cuộc sống. Hay đơn giản là có thiên hướng trở thành lập trình viên. Nhưng Python dùng để làm gì? Và Python đóng vai trò gì trong cuộc sống chúng […]