Báo cáo cuối kỳ học phần Thực hành chuyên sâu (khoa Đa phương tiện, PTIT)

Báo cáo cuối kỳ học phần Thực hành chuyên sâu (khoa Đa phương tiện, PTIT) Đề tài: NGHIÊN CỨU LÝ THUYẾT DESIGN SYSTEM VÀ ÁP DỤNG VÀO THIẾT KẾ ỨNG DỤNG THUÊ NHÀ TRỌ OHANA Thực hành chuyên sâu là một học phần thú vị, vô cùng bổ ích và có tính thực tế cao. Học phần này đảm bảo cung cấp một lượng lớn kiến thức cũng như kỹ năng gắn liền với nhu cầu thực tiễn của mỗi sinh viên theo học chuyên ngành Thiết kế Đa phương tiện thuộc khoa Đa phương tiện, Học viện Công nghệ Bưu chính Viễn thông.

KHOA ĐA PHƯƠNG TIỆN

THỰC HÀNH CHUYÊN SÂU

Đề tài:

NGHIÊN CỨU LÝ THUYẾT DESIGN SYSTEM VÀ ÁP DỤNG

VÀO THIẾT KẾ ỨNG DỤNG THUÊ NHÀ TRỌ OHANA

Hà Nội, tháng 6 năm 2022

LỜI CẢM ƠN

Thực hành chuyên sâu là một học phần thú vị, vô cùng bổ ích và có tính thực tếcao Học phần này đảm bảo cung cấp một lượng lớn kiến thức cũng như kỹ năng gắnliền với nhu cầu thực tiễn của mỗi sinh viên theo học chuyên ngành Thiết kế Đaphương tiện thuộc khoa Đa phương tiện, Học viện Công nghệ Bưu chính Viễn thông

Trong suốt quá trình nghiên cứu và thực hiện báo cáo này, bên cạnh những nỗlực của bản thân, em đã nhận được sự hỗ trợ, hướng dẫn nhiệt tình của quý thầy côtrong khoa Em xin gửi lời cảm ơn đến ban lãnh đạo cùng các cán bộ khoa Đa phươngtiện, Học viện Công nghệ Bưu chính Viễn thông đã tổ chức và quản lý hoạt động dạy

và học một cách hiệu quả, giúp em yên tâm trong suốt quá trình thực hiện đồ án này.Đặc biệt, em xin gửi lời cảm ơn sâu sắc đến ThS Nguyễn Thị Tuyết Mai đã trực tiếphướng dẫn, truyền đạt những kiến thức quý báu cho em trong suốt thời gian thực hiện

đồ án vừa qua

Do điều kiện về thời gian cũng như kinh nghiệm thực tế và vốn kiến thức cònnhiều hạn chế, báo cáo này của em không tránh khỏi những thiếu sót Em rất mong sẽđược các thầy cô góp ý, chỉ bảo để từ đó em hoàn thiện thêm các kỹ năng và kiến thứccủa mình, phục vụ cho học tập và công việc sau này

Em xin chân thành cảm ơn!

Sinh viên thực hiện

MỤC LỤC

LỜI CẢM ƠN i

DANH MỤC CÁC KÝ HIỆU VÀ CHỮ VIẾT TẮT iv

DANH MỤC BẢNG BIỂU VÀ HÌNH ẢNH v

MỞ ĐẦU 1

CHƯƠNG 1: TỔNG QUAN VỀ DESIGN SYSTEM TRONG THIẾT KẾ GIAO DIỆN 5

1.1 Tổng quan về thiết kế UX/UI 5

1.1.1 Thiết kế UX (User Experience) 5

1.1.2 Thiết kế UI (User Interface) 6

1.2 Tổng quan về ứng dụng di động và thiết kế UX/UI trong ứng dụng di động 7

1.2.1 Tổng quan về ứng dụng di động 7

1.2.2 Thiết kế UX/UI trong ứng dụng di động 8

1.3 Tổng quan về Design System trong thiết kế UX/UI 9

1.3.1 Khái niệm Design System 9

1.3.2 Lợi ích khi sử dụng Design System 10

1.3.3 Các thành phần của Design System 11

1.4 Phương pháp Atomic Design trong xây dựng Design System 16

1.4.1 Định nghĩa Atomic Design 16

1.4.2 Các thành phần của Atomic Design 16

1.4.3 Ưu điểm của phương pháp Atomic Design 17

1.5 Phương pháp xây dựng Design System 18

1.5.1 Quy trình xây dựng Design System 18

1.5.2 Các hướng tiếp cận đối với một Design System 22

1.6 Tiểu kết 23

CHƯƠNG 2: NGHIÊN CỨU VỀ ỨNG DỤNG THUÊ PHÒNG TRỌ OHANA 25

2.1 Tổng quan thị trường cho thuê phòng trọ tại Hà Nội 25

2.2 Nghiên cứu về ứng dụng thuê phòng trọ Ohana 25

2.2.1 Giới thiệu chung 25

2.2.2 Nhiệm vụ chính của ứng dụng 26

2.2.3 Các ứng dụng tương tự trên thị trường 26

2.2.4 Nghiên cứu người dùng 27

2.2.5 Các sản phẩm đầu ra từ kế quả nghiên cứu 30

CHƯƠNG 3: ÁP DỤNG LÝ THUYẾT DESIGN SYSTEM ĐỀ XUẤT GIẢI PHÁP THIẾT KẾ ỨNG DỤNG THUÊ PHÒNG TRỌ OHANA .34 3.1 Đề xuất giải pháp thiết kế ứng dụng thuê nhà Ohana 34

3.2 Thiết kế giao diện ứng dụng Ohana 34

3.2.1 Atoms 34

3.2.2 Molecules 38

3.2.3 Organisms 39

3.2.4 Templates 40

3.2.5 Pages 41

KẾT LUẬN, KIẾN NGHỊ 43

TÀI LIỆU THAM KHẢO 44

DANH MỤC CÁC KÝ HIỆU VÀ CHỮ VIẾT TẮT

dùng

2 UX User Experience Trải nghiệm người

dùng

DANH MỤC BẢNG BIỂU VÀ HÌNH ẢNH

Bảng biểu:

Bảng 2.1 Kết quả khảo sát người dùng

29 Hình ảnh: Hình 1.1 Biểu đồ thể hiện mối quan hệ giữa các thành phần trong một Design System của Nate Baldwin 11

Hình 1.2 Style Guide của Mailchimp

12 Hình 1.3 Component Library của hệ thống Material Design 13

Hình 1.4 Design System Carbon của IBM 14

Hình 1.5 Design System Atlassian 15

Hình 1.6 Phương pháp Atomic Design của Brad Frost 16

Hình 1.7 Mô hình đơn lẻ 20

Hình 1.8 Mô hình tập trung 20

Hình 1.9 Mô hình liên kết 21

Hình 1.10 Trang tích hợp “Có gì mới” trong Design System Lightning của Salesforce 22

Hình 1.11 3 hướng tiếp cận để sử dụng Design System 23

Hình 2.1 Những ghi chú quan trọng sau phỏng vấn #1

30 Hình 2.2 Những ghi chú quan trọng sau phỏng vấn #2

30 Hình 2.3 Empathy Map

31 Hình 2.4 User Persona #1

32 Hình 2.5 User Persona #2

32 Hình 2.6 Kiến trúc thông tin của ứng dụng 33

Hình 3.1 Logo của ứng dụng Ohana

35

Hình 3.2 Font chữ được sử dụng trong ứng dụng

35

Hình 3.3 Bảng màu của ứng dụng Ohana

36

Hình 3.4 Các biểu tượng được sử dụng trong ứng dụng

37

Hình 3.5 Hệ thống nút bấm

38

Hình 3.6 Một tab thông tin trong ứng dụng

38

Hình 3.7 Hệ thống trường nhập văn bản

39

Hình 3,8 Menu điều hướng của ứng dụng

40

Hình 3,9 Template màn hình đăng nhập

41

Hình 3,10 Màn hình đăng nhập của ứng dụng

42

MỞ ĐẦU

1 Lý do chọn đề tài

Design System (Hệ thống thiết kế) giúp các doanh nghiệp duy trì tínhnhất quán trên nhiều sản phẩm, dịch vụ Mặc dù thường được kếthợp với visual guidelines và thư viện components, các DesignSystem lại hoàn toàn khác nhau Khi ngày càng có nhiều công tynhận ra giá trị của tính đồng bộ trong thiết kế, các nhóm DesignSystem mới được tạo ra đang thiết lập các phương pháp tốt nhất

để đảm bảo sự phù hợp lâu dài cho công việc thiết kế của các công

ty, tổ chức

Design System có tầm quan trọng to lớn là thế nhưng đứng trước mộtthực trạng là hiện nay có rất nhiều sản phẩm kỹ thuật số (ứngdụng/website) lại chưa thực sự được đầu tư nghiêm túc cho việcthiết lập mô hình Design System Thậm chí nhiều công ty, tổ chứccòn chưa nhận ra lợi ích của Design System hay còn loay hoaytrong việc tạo dựng mô hình Design System cho chính công ty, tổchức mình Từ đó dẫn đến một hệ quả là rất nhiều ứng dụng vàwebsite chưa đảm bảo tối ưu về mặt giao diện, không đem lại đượctrải nghiệm tốt cho người dùng hay gây ra các vấn đề về khả năng

sử dụng khiến doanh thu của công ty, tổ chức bị giảm mạnh

Tại thị trường Việt Nam, các ứng dụng về cho thuê nhà trọ gần đây mớibắt đầu nổi lên một số sản phẩm Tuy nhiên, các sản phẩm nàygặp rất nhiều lỗi về thiết kế giao diện và cũng chưa thể tạo ra cáchiệu quả nổi bật trên thị trường ứng dụng Ngay kể cả ứng dụngcho thuê nhà trọ có thể nói là nổi tiếng nhất Việt Nam đến thờiđiểm hiện tại cũng không tránh khỏi các vấn đề này

Từ đây, đề tài nghiên cứu lý thuyết Design System và áp dụng vàothiết kế ứng dụng thuê nhà trọ Ohana hứa hẹn sẽ khai thác đượcnhiều khía cạnh thú vị, hi vọng sẽ đưa ra được một số giải phápmới trong việc ứng dụng Design System trong thiết kế giao diệnweb/app

2 Tính khoa học và khả thi của đề tài

- Tính khả thi:

Sau 4 năm học tập và rèn luyện tại trường, em đã có những tích luỹ

về kiến thức và kỹ năng như sau:

 Về kiến thức

o Nắm được các kiến thức cơ bản về tư duy thiết kế

o Sau khi được học các môn như Cơ sở tạo hình, Mỹ thuậtnâng cao, Nghệ thuật đồ hoạ chữ, em dần hình thành mắtthẩm mỹ, biết phân tích các sản phẩm thiết kế khác để cóthể đúc kết kinh nghiệm cho bản thân.

o Được cung cấp các kiến thức cơ bản về lập trình và xâydựng phần mềm sau khi được học qua các học phần Ngônngữ lập trình Java, C++, Nhập môn công nghệ phần mềm,…

o Được trang bị những kiến thức nền tảng về lĩnh vực UX/UIsau khi được học qua các học phần Thiết kế web cơ bản,Thiết kế tương tác đa phương tiện và thiết kế tương tác đaphương tiện nâng cao

o Có khả năng đọc hiểu tiếng Anh phục vụ cho việc tham khảocác tài liệu quốc tế

đã được thực hiện một số báo cáo nghiên cứu sau khi họcqua học phần Phương pháp luận nghiên cứu khoa học

o Có thể thiết kế được các sản phẩm về bộ nhận diện thươnghiệu, bộ ấn phẩm truyền thông, thiết kế web, UX/UI trongkhuôn khổ các môn học trong trường

o Dần hình thành khả năng đánh giá tính công năng và tínhthẩm mỹ của các sản phẩm đa phương tiện

- Tính khoa học:

 Để triển khai đề tài, tác giả sẽ tham khảo các mô hình DesignSystem đã có sẵn và được đông đảo các nhà thiết kế đánh giácao như Material Design của Google; Carbon của IBM; Fluentcủa Microsoft; Polaris của Shopify; Spectrum của Adobe; AntDesign… Ngoài ra còn tham khảo các bài báo được đăng tảitrên các trang web, diễn đàn, tổ chức uy tín trong lĩnh vựcUI/UX như Nielsen Norman Group, Smashing Magazine,designbetter.co,…

 Tình hình nghiên cứu về Design System tại Việt Nam hiện tại

có thể cho là chưa đưa ra được tài liệu nào uy tín Trong khi

đó, các tài liệu quốc tế cũng chưa có nhiều Qua tìm hiểu, tácgiả đã lựa chọn ra một cuốn sách có sự đầu tư và độ uy tín cao

trong lĩnh vực nghiên cứu về Design System đó là cuốn

“Design Systems Handbook” viết bởi Marco Suarez, Jina Anne,Katie Sylor-Miller, Diana Mounter và Roy Stanfield, được pháthành bởi Invision Cuốn sổ tay này hướng dẫn người đọc vềcác phương pháp tốt nhất để lập kế hoạch, phát triển, xâydựng và triển khai Design System, truyền tải những hiểu biếtsâu sắc và kinh nghiệm thực tế từ các chuyên gia đã từng làmviệc tại Invision

 Trong cuốn “Design Systems: A Practical Guide to CreatingDesign Languages for Digital Products”, tác giả AllaKholmatova, trước đây là nhà thiết kế chính tại FutureLearn,

đã chia sẻ cách tiếp cận và các khía cạnh chính của mộtDesign System hiệu quả Những chia sẻ này dựa trên kinhnghiệm của Alla thông qua các nghiên cứu điển hình tạiAirBnB, Atlassian, Eurostar, TED và Sipgate, cộng với 18 thángnghiên cứu và phỏng vấn – trong nỗ lực tìm ra những gì nên

và không nên có trong các sản phẩm thực tế

 Tác giả cũng sẽ khám phá mối quan hệ của Design System vớiphương pháp thiết kế Atomic Design dựa trên các lý thuyết màBrad Frost đưa ra trong cuốn sách “Atomic Design” Cuốn sáchnày trình bày một mô hình tư duy liên hệ giao diện người dùngvới hệ thống phân cấp thông minh Bắt đầu với những khíacạnh cơ bản nhất của thiết kế, Frost cung cấp cho người đọcmột khuôn khổ để mô tả cấu trúc nguyên tử của một thànhphần thiết kế Sau đó, ông trình bày chi tiết các tiêu chí quantrọng của việc xây dựng các thư viện mẫu hiệu quả và đưa racác lời khuyên về bảo trì cho các Design System

3 Mục đích và nhiệm vụ nghiên cứu

- Mục đích: Nghiên cứu nhằm mục đích bóc tách các khía cạnh cơbản nhất về Design System để từ đó áp dụng vào xây dựng môhình Design System cho ứng dụng Ohana một cách hiệu quảnhất

- Nhiệm vụ: Nghiên cứu về Design System, lợi ích, tầm quantrọng, các thành phần của nó và ứng dụng trong thiết kế giaodiện người dùng Ngoài ra còn phân tích và đưa ra hướng thiết

kế Design System phù hợp nhất cho ứng dụng thuê nhà Ohana

4 Đối tượng và phạm vi nghiên cứu

- Đối tượng nghiên cứu: Ứng dụng thuê nhà trọ Ohana, mô hìnhDesign System và phương pháp Atomic Design

- Phạm vi nghiên cứu: Lĩnh vực UI/UX, mô hình Design System vàgiao diện các ứng dụng cho thuê nhà hiện có trên thị trường

5 Phương pháp nghiên cứu

- Sử dụng phương pháp nghiên cứu thứ cấp (SecondaryResearch), phương pháp phân tích, tổng hợp để thu thập, tổnghợp và phân tích từ các tài liệu đã được phát hành từ đó rút ranhững kết luận cụ thể áp dụng cho đề tài

- Sử dụng phương pháp hệ thống để phân loại và hệ thống hóa lýthuyết, sắp xếp các tài liệu khoa học theo từng mặt, từng đơn vị,từng vấn đề có cùng dấu hiệu bản chất, cùng một hướng pháttriển cũng như chuẩn bị tri thức thành một hệ thống trên cơ sởmột mô hình lý thuyết làm sự hiểu biết về đối tượng (mà ở đây là

mô hình Design System) một cách tổng thể hơn

- Sử dụng phương pháp tổng kết thực tiễn đề làm sáng tỏ, phongphú thêm những vấn đề về lý luận

MỜI BẠN TẢI VỀ ĐỂ XEM TIẾP

6 Ý nghĩa lý luận và giá trị thực tiễn của đề tài

- Đề tài nghiên cứu mang lại một số ý nghĩa thực tiễn cho các nhà thiết kế, cáccông ty, doanh nghiệp đang có nhu cầu thiết kế, phát triển ứng dụng nói chung vàcho Ohana nói riêng Kết quả nghiên cứu này cũng giúp cho các nhà thiết kế, cáccông ty, doanh nghiệp có thể xem xét, điêu chỉnh Design System cho sản phẩmcủa mình để tối ưu hóa sản phẩm

- Nghiên cứu này cho thấy tầm quan trọng, đưa ra quy trình triển khai DesignSystem và các ứng dụng của nó trong quá trình thiết kế ứng dụng nói chung

7 Kết cấu đề tài

Đề tài được kết cấu thành 3 chương như sau:

- Chương 1: Tổng quan về Design System trong thiết kế giao diện

- Chương 2: Nghiên cứu về ứng dụng thuê phòng trọ Ohana

- Chương 3: Áp dụng lý thuyết Design System đề xuất giải pháp thiết kế ứng dụngthuê phòng trọ Ohana

CHƯƠNG 1: TỔNG QUAN VỀ DESIGN SYSTEM TRONG

THIẾT KẾ GIAO DIỆN

1.1 Tổng quan về thiết kế UX/UI

1.1.1 Thiết kế UX

Thuật ngữ “Trải nghiệm người dùng” được đưa ra lần đầu tiên bởi tiến sĩ DonaldNorman Ông là nhà nghiên cứu khoa học nhận thức, cũng là người đầu tiênnói về tầm quan trọng của phương pháp thiết kế lấy người dùng làm trungtâm Trong bài đăng có tên “The Definition of User Experience (UX)” đăngtrên trang web Nielsen Norman Group, tác giả Don Norman và JakobNielsen đã tóm tắt khái niệm UX như sau: "Trải nghiệm người dùng baogồm tất cả các khía cạnh tương tác của người dùng cuối với công ty, dịch

vụ và sản phẩm của công ty.” Trang bách khoa toàn thư mở Wikipedia cũngtrích dẫn về khái niệm này: “Trải nghiệm người dùng là trải nghiệm tổngthể của người dùng với một sản phẩm, trang web, ứng dụng trên thiết bị diđộng hoặc dịch vụ cụ thể UX không chỉ bao gồm việc sử dụng các tínhnăng mà còn bao gồm cả những khía cạnh khác như kinh nghiệm, cảm xúc,giá trị nhận được khi tương tác với sản phẩm, trang web, ứng dụng, dịch vụđó.”

Thiết kế UX liên quan đến nhu cầu của người dùng, nó nâng cao trải nghiệm củangười sử dụng về một hệ thống, lấy người dùng làm trung tâm để phát triển.Những nhà thiết kế website/app cần phải để tâm tới các tính năng, khả năng

sử dụng và truy cập web một cách nhanh chóng cho người dùng trước khithiết kế giao diện và nghiên cứu thói quen của họ

Khi xây dựng một website hay ứng dụng cho bất kỳ dự án nào, nhà thiết kế phảiđặt mình vào vị trí của người sử dụng, của khách hàng để đảm bảo rằng, thứ

họ xây dựng nên là cái mà người dùng muốn sử dụng Khi nhà thiết kế đặtmình ở vị trí đó sẽ giúp họ nhận thức rằng người dùng có cảm nhận như thếnào về sản phẩm của mình Từ đó tối ưu hóa thiết kế, và các tính năng củasản phẩm nhằm đảm bảo tính thẩm mĩ và khả năng tương tác tốt nhất

Chúng ta đang sống ở thời đại công nghệ số, khi mà công nghệ ngày càng pháttriển và phổ biến Các trang web và ứng dụng ngày càng nhiều tính năngphức tạp, công nghệ hiện đại hơn, khả năng tương tác cao hơn, vì thế, đòihỏi sự đơn giản và thân thiện trong sử dụng - phải có thiết kế trải nghiệmngười dùng

Ngoài ra, các loại trình duyệt, thiết bị truy cập internet cũng đa dạng hơn, từ máytính đến các thiết bị di động, thậm chí cả tivi và nhiều thiết bị khác, nhất làtrong thời đại mà người ta gọi là “ Internet everything” như hiện nay Nhàthiết kế cần nhận thức được khả năng tiếp cận giữa người dùng tới các trang

web, ứng dụng, phần mềm là rất đa dạng Việc nghiên cứu và ứng dụng UXchính là cách để giúp người dùng cảm thấy dễ dàng tiếp cận và tương tácvới trang web, ứng dụng.

1.1.2 Thiết kế UI

Trong bài viết “User Interface (UI)” đăng trên trang web TechTarget, tác giảFred Churchville, đưa ra định nghĩa UI như sau: “Giao diện người dùng(UI) là điểm giao tiếp và tương tác giữa con người với máy tính trong mộtthiết bị Nó có thể bao gồm màn hình hiển thị, bàn phím, chuột và thậm chí

cả ngoại hình của chiếc máy tính Thông qua UI, người dùng tương tác vớimột ứng dụng hoặc một trang web.”

Trang web Interaction Design Foundation đưa ra khái niệm cho thiết kế giao diệnngười dùng “là quy trình mà nhà thiết kế sử dụng để xây dựng giao diệntrong phần mềm hoặc thiết bị máy tính, tập trung vào ngoại hình hoặcphong cách Các nhà thiết kế hướng tới việc tạo ra các giao diện mà ngườidùng cảm thấy dễ sử dụng và hài lòng Thiết kế giao diện người dùng đềcập đến giao diện người dùng đồ họa và các dạng khác — ví dụ: giao diệnđiều khiển bằng giọng nói.”

Giao diện người dùng rất quan trọng trong việc đáp ứng các kỳ vọng của ngườidùng và hỗ trợ việc sử dụng hiệu quả của người dùng với một trang webhay ứng dụng Giao diện người dùng được thiết kế tốt sẽ tạo ra các tươngtác hiệu quả giữa người dùng và sản phẩm thông qua việc sử dụng hình ảnhphù hợp, thiết kế rõ ràng và khả năng phản hồi

Khi thiết kế giao diện người dùng cho trang web hay ứng dụng, điều quan trọng

là phải xem xét nhu cầu của người dùng về khả năng truy cập, tính thẩm mỹtrực quan và tính dễ sử dụng Sự kết hợp tối ưu giữa đồ họa đẹp mắt và khảnăng phản hồi hiệu quả sẽ cải thiện hiệu suất sử dụng sản phẩm

Thiết kế UI nên được tuân thủ theo các quy tắc, quy chuẩn như:

- Nguyên tắc cấu trúc: Tổ chức giao diện người sử dụng một cách có chủ

đích, dựa trên các mô hình rõ ràng, nhất quán, rõ ràng và dễ nhận biết đốivới người sử dụng Ví dụ như việc đặt những thứ liên quan lại với nhau

và tách biệt những thứ không liên quan

- Nguyên tắc đơn giản: Làm cho các tác vụ phổ biến, thường xuyên sử

dụng trở nên dễ dàng, đơn giản Đồng thời cung cấp các phím tắt hữu ích

để rút ngắn các các quy trình dài hơn

- Nguyên tắc hiển thị: Làm cho tất cả các tùy chọn và yếu tố cần thiết cho

một tác vụ nhất định hiển thị cùng lúc mà không làm cho người sử dụngmất tập trung với thông tin không liên quan hoặc dư thừa Một thiết kếtốt là thiết kế không áp đảo, bắt buộc người sử dụng với các lựa chọnthay thế hoặc nhầm lẫn với thông tin không cần thiết

- Nguyên tắc phản hồi: Thiết kế phải thông báo cho người sử dụng về các

hành động hoặc giải thích về các thay đổi trạng thái, điều kiện và các lỗihoặc các trường hợp ngoại lệ có liên quan và được người sử dụng quantâm Quá trình này phải thông qua ngôn ngữ rõ ràng, ngắn gọn và quenthuộc với họ

- Nguyên tắc linh hoạt: Thiết kế nên linh hoạt, giảm chi phí sai sót Đồng

thời ngăn ngừa lỗi bất cứ khi nào có thể bằng cách tiếp nhận các thôngtin và trình tự khác nhau Từ đó tiến hành diễn giải một cách hợp lý

- Nguyên tắc tái sử dụng: Thiết kế nên sử dụng lại các thành phần và

hành vi bên trong và bên ngoài, duy trì tính nhất quán với mục đích thay

vì chỉ thiết kế tùy ý, do đó giảm khả năng người sử dụng phải suy nghĩ

và các thiết bị di động khác… Ứng dụng di động ban đầuđược cung cấp với mục đích thông tin tổng quát và các dịch

vụ thông dụng trên mạng toàn cầu, bao gồm email, lịch,danh bạ, thị trường chứng khoán và thông tin thời tiết Tuynhiên, nhu cầu chung của những người sử dụng thiết bị diđộng và khả năng phát triển của các nhà lập trình đã mởrộng thành các loại khác, chẳng hạn như trò chơi di động, tựđộng hóa nhà máy, GPS và các dịch vụ dựa trên địa điểm,định vị và ngân hàng, để theo dõi, mua vé và các ứng dụng

y tế di động Sự bùng nổ về số lượng và sự đa dạng của cácứng dụng đã tạo ra một tiềm năng và thị trường lớn.”

Từ năm 2005, các nhà phát triển đã nhận thức được việc thiết kếgiao diện website theo kích thước nhỏ hơn, giao diện thânthiện hơn với màn hình của các thiết bị di động Vài nămsau, các Native Apps (Ứng dụng gốc) được phát triển, ngườidùng có thể điều hướng bằng những điểm chạm trên mànhình cảm ứng Khoảng năm 2013, sự phổ biến của MobileWeb-app tăng lên, công nghệ cũng được cập nhật để tăng

trải nghiệm người dùng Kể từ năm 2019, Mobile App pháttriển mạnh mẽ Chúng mang đến các giải pháp cho cuộcsống người dùng, tăng tính trải nghiệm cá nhân với sự trợgiúp từ trí tuệ nhân tạo.

Tại Việt Nam, việc sử dụng điện thoại thông minh cũng đangbùng nổ, ứng dụng di động đã bắt đầu đóng một vai tròquan trọng trong phong cách sống của người Việt Nó cũngtạo nên một xu hướng mới trong việc trở thành nguồn thôngtin cho người tiêu dùng Khi điện thoại thông minh được

“phổ cập” thì sự phát triển của ứng dụng di động cũng làmột điều tất yếu Ngày càng có nhiều ứng dụng di động rađời Có thể kể đến các ứng dụng như mạng xã hội, muasắm, ví điện tử cho đến các ứng dụng về sức khỏe, đặthàng… Doanh số dự kiến của thị trường ứng dụng di độngđược dự đoán lên tới 693 tỷ USD vào cuối năm 2021

1.2.2 Thiết kế UX/UI trong ứng dụng di động

Với một thị trường ứng dụng di động đang phát triển như vũ bão, sự cạnh tranhgiữa các ứng dụng cũng trở nên sôi động hơn bao giờ hết Ngày nay, khingười dùng đã có nhiều sự lựa chọn thì một ứng dụng chỉ đơn thuần là cungcấp một giải pháp nào đó sẽ không thể có sức cạnh tranh mạnh Bàn cân lúcnày sẽ nghiêng về những ứng dụng được đầu tư nghiêm túc về cả giao diệnlẫn trải nghiệm người dùng Như vậy, UX/UI là một thứ đòi hỏi các nhàthiết kế và phát triển ứng dụng phải đặc biệt chú ý Và để ứng dụng đảmbảo tốt nhất về mặt UX/UI thì cần phải tuân theo 6 nguyên tắc sau:

- Nguyên tắc cấu trúc (The Structure Principle): Thiết kế giao diện ứng

dụng nên tổ chức giao diện người dùng một cách có mục đích, có ý nghĩa

và hữu ích dựa trên các mô hình rõ ràng, nhất quán, dễ thấy và dễ nhậnbiết đối với người dùng

- Nguyên tắc đơn giản (The Simplicity Principle): Thiết kế giao diện

app mobile phải đơn giản, làm cho các thao tác thông thường được thựchiện dễ dàng, giao tiếp rõ ràng và sử dụng ngôn ngữ dễ hiểu cho ngườidùng Đồng thời cung cấp các phím tắt hữu ích cho quá trình sử dụngứng dụng của người dùng

- Nguyên tắc hiển thị (The Visibility Principle): Thiết kế giao diện ứng

dụng phải hiển thị tất cả các tùy chọn và thành phần, thông tin cần thiếtcho một tác vụ nhất định mà không làm người dùng phân tâm với thôngtin không liên quan hoặc dư thừa

- Nguyên tắc nhất quán (The Consistency Principle): Thiết kế giao diện

app mobile nên sử dụng lại các thành phần (elements) và các cấu trúc

giống nhau cho tất cả các trang nội dung của ứng dụng Điều này làmgiảm nhu cầu người dùng phải suy nghĩ và ghi nhớ.

- Nguyên tắc phản hồi (The Feedback Principle): Thiết kế giao diện app

mobile phải thông báo cho người dùng về các hành động hoặc có các giảithích, diễn giải cho hành động, các thay đổi của trạng thái ứng dụng vàcác lỗi có liên quan và được người dùng quan tâm

- Nguyên tắc dung sai (The Tolerance Principle): Thiết kế giao diện

phải linh hoạt và dễ sử dụng, giảm thiểu các sai sót và lạm dụng bằngcách cho phép hoàn tác và làm lại (undo và redo) Điều này có nghĩa làkhi người sử dụng thực hiện sai một thao tác nào, thì họ có tùy chọnquay trở lại để thực hiện lại thao tác

1.3 Tổng quan về Design System trong thiết kế UX/UI

Những năm gần đây chứng kiến sự phát triển mạnh mẽ trong lĩnh vực thiết kếgiao diện người dùng Không chỉ có hàng triệu ứng dụng và hàng tỷ trangweb (và vẫn không ngừng tăng lên mỗi năm), mà mỗi ứng dụng và trangweb đó có thể có hàng trăm hoặc hàng nghìn trang con Sự phát triển nở rộnày đòi hỏi các công ty, tổ chức phải có cách tiếp cận hợp lý công việc thiết

kế của mình Vì vậy, nhiều nhóm thiết kế tận dụng các Design Systemmạnh mẽ để quản lý các thiết kế trên quy mô lớn

Design System (Thiết kế hệ thống) là một giải pháp cần thiết cho các doanhnghiệp để hệ thống hóa thiết kế của mình và xây dựng các thiết kế có tínhnhất quán, có khả năng sử dụng Điều này không chỉ có lợi cho các nhàthiết kế và lập trình viên tại một công ty mà còn cho phép các bộ phận liênquan trong công ty nhìn nhận và hiểu rõ hơn về cách thức và lý do tại saocác quyết định thiết kế được đưa ra thông qua việc mọi thứ đã được trìnhbày trực quan và có tổ chức

1.3.1 Khái niệm Design System

Nielsen Norman Group – một tổ chức uy tín, gồm các chuyên gia đầu ngànhnghiên cứu về trải nghiệm người dùng có đưa ra khái niệm về DesignSystem như sau: “Design System là một tập hợp các tiêu chuẩn để quản lýthiết kế trên quy mô lớn thông qua việc tạo ra “ngôn ngữ” chung và đảmbảo nhất quán về mặt trực quan trên các trang và kênh khác nhau.”

Hay nói cách khác, Design System là một tập hợp đầy đủ các tiêu chuẩn nhằmquản lý thiết kế ở quy mô lớn bằng cách sử dụng các component (thànhphần) và pattern (mẫu) có thể tái sử dụng

Nathan Curtis – nhà đồng sáng lập của EightShapes có một câu nói rất hay:

“Design System là hệ thống của hệ thống” Một Design System thườngchứa nhiều hệ thống con để tạo nên một giao diện tốt, bao gồm: UI

components và các biến thể của nó trong thiết kế và code, Design tokens(Mã hiệu thiết kế), Typography system (Hệ thống kiểu chữ), Color system(Hệ thống màu), Layout/Grid system (Hệ thống bố cục / lưới), Icon system(Hệ thống biểu tượng) Tất cả các hệ thống con này đều kết hợp với nhau đểgiúp xây dựng nên một giao diện người dùng có chất lượng cao từ một tậphợp các component có thể tái sử dụng được.

1.3.2 Lợi ích khi sử dụng Design System

Design System khi được xây dựng tốt có thể mang lại rất nhiều lợi ích cho nhómthiết kế:

- Tạo ra thiết kế nhanh chóng trên quy mô lớn: Trong quá trình xây

dựng sản phẩm sẽ cần đưa ra nhiều phương án thiết kế khác nhau, pháttriển tiếp từ những phương án thiết kế đã có Design System giúp nhàthiết kế tạo ra và nhân rộng các bản thiết kế nhanh chóng bằng cách tái

sử dụng các thành phần thiết kế đã được tạo sẵn Giảm thiểu nhu cầu tạolại những cái đã có, nhờ đó giảm bớt sự không thống nhất trong thiết kế

có thể gây ra nhiều rủi ro ngoài ý muốn

- Tập trung vào các vấn đề lớn và phức tạp hơn: Khi các thành phần cơ

bản đã được tạo sẵn và có thể tái sử dụng, nhà thiết kế sẽ giảm bớt được

áp lực công việc vì không còn phải bận tâm nhiều về kiểu dáng, hìnhthức của các thành phần này nữa Nhờ vậy họ có thể tập trung giải quyếtcác vấn đề lớn và phức tạp hơn Ví dụ như phân cấp thông tin, tối ưuluồng hoạt động của người dùng

- Tạo nên cách diễn đạt thống nhất: Design System tạo nên cách diễn

đạt thống nhất giúp tránh lãng phí thời gian và công sức do những hiểunhầm trong giao tiếp gây ra Đặc biệt là khi có sự thay đổi về nhân sựtrong nhóm thiết kế hoặc khi các nhóm phải làm việc từ xa, không ởcùng một chỗ với nhau Ví dụ, mọi người sẽ không cần phải tốn thời giantranh cãi về chức năng hay hình thức của một component cụ thể nữa, vì

nó đã được thống nhất về định nghĩa trong Design System Hoặc giả sử,bỗng một ngày, các thành viên chủ chốt trong nhóm thiết kế vì lý do nào

đó không thể tiếp tục công việc hiện tại được nữa, nhưng dự án của công

ty vẫn phải tiếp tục hoạt động Lúc này, nhờ mọi thứ đã được định nghĩathống nhất trong Design System, các thành viên còn lại có thể dựa theo

đó để tiếp tục công việc đang dang dở

- Tạo nên tính nhất quán giữa các sản phẩm: Khi các nhóm thiết kế làm

việc trong các dự án riêng biệt, sản phẩm của nhóm này thường đượcphát triển độc lập với sản phẩm của nhóm khác Nếu như không có mộtDesign System chung cho các nhóm có thể sẽ khiến cho người dùng cảmthấy giao diện và trải nghiệm của các sản phẩm không nhất quán, có sự

chắp vá Người dùng sẽ dễ có cảm giác các sản phẩm không do cùng một

tổ chức hay công ty làm ra, không cùng một hệ thống với nhau DesignSystem sẽ cung cấp một nguồn chung duy nhất cho các component,pattern và style (phong cách), giúp tránh được sự thiếu nhất quán tronggiao diện và trải nghiệm của sản phẩm

- Trở thành công cụ và tài liệu tập huấn cho người mới: Các tài liệu

hướng dẫn của Design System nếu được biên soạn rõ ràng và chi tiết, sẽgiúp cho những nhân viên hay cộng tác viên mới dễ dàng làm quen vớicông việc Đồng thời, các tài liệu hướng dẫn này cũng là nguồn thamkhảo thường xuyên cho các nhân viên khác

1.3.3 Các thành phần của Design System

Trong bài viết “Anatomy of a Design System” đăng trên trang blog của ProductHive, tác giả Nate Baldwin đã đưa ra một biểu đồ trong đó cung cấp một cáinhìn rất trực quan về các thành phần của Design System:

Hình 1.1 Biểu đồ thể hiện mối quan hệ giữa các thành phần trong một Design System

của Nate Baldwin

Còn trong bài báo “Design Systems 101” được đăng trên trang web của NielsenNorman Group, tác giả Therese Fessenden xác định có hai phần quan trọngđối với một Design System là Design Repositories (Kho lưu trữ thiết kế) vànhững người quản lý nó.

1.3.3.1 Design Repositories

Design Repositories có thể có nhiều dạng, nhưng chúng thường bao gồm StyleGuide (Hướng dẫn mẫu), Component Library (Thư viện thành phần) vàPattern Library (Thư viện mẫu)

- Style Guide: Style Guide chứa các hướng dẫn triển khai cụ thể, tài liệutham khảo trực quan và các nguyên tắc thiết kế để tạo giao diện hoặc cácsản phẩm thiết kế khác Style Guide phổ biến nhất có xu hướng tập trungvào nhận diện thương hiệu (màu sắc, kiểu chữ, nhãn hiệu, logo vàphương tiện in ấn) Style Guide cũng cung cấp các hướng dẫn về nộidung (chẳng hạn như giọng nói và đề xuất ngôn ngữ), thiết kế hình ảnh

và tương tác tiêu chuẩn (còn được gọi là Style Guide front-end ) Nhữnghướng dẫn này đôi khi cũng được đưa vào Component Library, để cungcấp hướng dẫn phù hợp trong ngữ cảnh

Hình 1.2 Style Guide của Mailchimp

Một ví dụ điển hình là Style Guide của Mailchimp có chứa các hướng dẫn chitiết về cách viết các loại nội dung khác nhau để chúng phù hợp với cátính của công ty

- Component Library: Component Library (Thư viện thành phần hayThư viện thiết kế) chứa các phần tử giao diện người dùng được xác định

trước, có thể tái sử dụng và đóng vai trò như một “tiệm bách hóa” chocác nhà thiết kế và nhà phát triển để tìm hiểu và triển khai các phần tửgiao diện người dùng cụ thể Việc tạo các thư viện này cần nhiều thờigian và tài nguyên Ngoài các ví dụ trực quan về các component, chúngcòn bao gồm:

 Tên component: tên UI component được đặt cụ thể và độc nhất, để

tránh gây hiểu nhầm cho nhà thiết kế và nhà phát triển

 Mô tả: giải thích rõ ràng về yếu tố này là gì và nó thường được sử

dụng như thế nào, đôi khi kèm theo những điều nên và không nên làmcho các ngữ cảnh

 Thuộc tính: các biến hoặc điều chỉnh có thể được thực hiện để tùy

chỉnh component cho các nhu cầu cụ thể (ví dụ: màu sắc, kích thước,hình dạng, bản sao)

 Trạng thái: trạng thái mặc định và những tùy chỉnh về giao diện của

nó

 Đoạn mã: đoạn mã thực tế cho phần tử (một số Design System có

nhiều ví dụ và cung cấp môi trường “hộp cát” để thử các tùy chỉnhcomponent khác nhau)

 Các frontend và backend framework: để triển khai thư viện (nếu

có) cũng như để tránh gặp phải các lỗi

Hình 1.3 Component Library của hệ thống Material Design

Hệ thống Material Design của Google có Component Library bao gồm cácnguyên tắc triển khai và đoạn mã cho các hệ điều hành và framework(khung phần mềm) cụ thể, cũng như các nguyên tắc thiết kế kỹ lưỡng vềkhả năng sử dụng được và không được trong một tab riêng biệt

Hình 1.4 Design System Carbon của IBM

Design System Carbon của IBM có các hướng dẫn về cách sử dụng, phongcách và mã, cũng như các cân nhắc về khả năng truy cập và sandbox(hộp cát) cho các nhà thiết kế và nhà phát triển để trực quan hóa bất kỳtùy chỉnh nào trước khi triển khai

- Pattern Library: Hai thuật ngữ Component Library vàPattern Library rất hay bị đánh đồng; tuy nhiên, có sựkhác biệt giữa hai loại thư viện này Component Librarychỉ định các phần tử giao diện người dùng riêng lẻ, trongkhi Pattern Library có các bộ sưu tập các nhóm hoặc bốcục phần tử giao diện người dùng Pattern Library thườngđược cho là kém mạnh mẽ hơn so với Component Library,nhưng độ chi tiết của chúng có thể ở mức cao nếu cầnthiết Chúng thường có cấu trúc nội dung, bố cục và/hoặcpattern Giống như các component, các pattern có thể tái

sử dụng và tùy chỉnh

Hình 1.5 Design System Atlassian

Design System Atlassian xác định một số pattern có thể tái sử dụng bao gồmpage-header template (mẫu tiêu đề trang) Nó không chỉ đưa ra một ví dụtrực quan mà còn làm nổi bật component chính xác mà các nhà thiết kếnên tận dụng và giải thích cách sử dụng từng component

1.3.3.2 Đội ngũ quản trị

Một Design System chỉ hiệu quả khi có đội ngũ quản lý nó Cho dù được tạo

ra hay được tùy chỉnh, các Design System đều cần được bảo trì và giámsát liên tục để đảm bảo chúng không trở nên lỗi thời hoặc bị sử dụng saicách

Quy mô của đội ngũ này có thể khác nhau, do bản thân các Design System cóthể đảm nhận các quy mô và mức độ tùy chỉnh khác nhau, nhưng, tốithiểu, đội ngũ quản trị phải bao gồm 1 nhà thiết kế tương tác, 1 nhà thiết

kế trực quan và 1 lập trình viên, mỗi người đều có trách nhiệm viếtinteraction-design guidelines (hướng dẫn thiết kế-tương tác), tạo các ví

dụ trực quan, cung cấp các đoạn code và thông số kỹ thuật triển khaitương ứng cho từng phần tử Để hiệu quả nhất, nhóm này nên bao gồmmột part-time researcher (nhà nghiên cứu bán thời gian), part-timearchitect (kiến trúc sư bán thời gian) và content writer (người viết nộidung), nếu những vai trò này được xác định rõ ràng trong tổ chức

Đội ngũ này cũng nên có một executive sponsor (nhà tài trợ điều hành) (từ cáccấp lãnh đạo) để điều phối việc thiết kế hệ thống Mặc dù thiếu nhà tàitrợ không phải là nhân tố quan trọng nhất, nhưng họ có thể đảm bảo kinhphí và nguồn lực, đồng thời truyền tải tầm quan trọng của Design Systemcho các bên còn lại của tổ chức.

1.4 Phương pháp Atomic Design trong xây dựng Design System

Một trong những cách giải thích thường được nhắc đến nhất về cách thức hoạtđộng của một Design System là với Atomic Design (Thiết kế nguyên tử)của Brad Frost, một nhà thiết kế web đến từ Pittsburgh, Hoa Kỳ

Sự phân tích của Frost giúp hình thành ý tưởng về Design System và cách các UIcomponent hoạt động cùng nhau theo cách có hệ thống để xây dựng các sảnphẩm mà con người tương tác hàng ngày

1.4.1 Định nghĩa Atomic Design

Atomic Design là một trong những phương pháp được sử dụng để tối ưu thiết kếcủa sản phẩm Phương pháp này giúp cho thiết kế có sự thống nhất, rõ ràng

và đặc biệt là khả năng chỉnh sửa, cải thiện được dễ dàng

Atomic Design là một phương pháp thiết kế giao diện ưu tiên việc thực hiện thiết

kế các thành phần riêng lẻ và kết hợp chúng lại với nhau, thay vì thiết kế cảtrang

1.4.2 Các thành phần của Atomic Design

Frost chia nhỏ các phần của một Design System bằng cách bóc tách cấu tạo củanhững thứ được tìm thấy trong tự nhiên

Hình 1.6 Phương pháp Atomic Design của Brad Frost

Theo đó, thiết kế nguyên tử bao gồm 5 thành phần:

- Atoms (Nguyên tử): là các bước xây dựng các thành

phần nhỏ nhất (ví dụ: buttons, textarea, input, radio,label, etc ) Chúng cũng có thể chứa các thành phần trừutượng như màu sắc và phông chữ

- Molecules (Phân tử): là sự tập hợp của các Atoms nhóm lại với nhau, là

các phần tử bên ngoài như đơn vị (ví dụ: một input field và một button cóthể kết hợp thành một khung tìm kiếm) Molecules có thể đơn giản hoặcphức tạp, được xây dựng để tái sử dụng hoặc chỉ dùng một lần

- Organisms (Sinh vật): Tương tự với Molecules, Organisms gồm tập

hợp các Molecules (Ví dụ: Header trang có thể kết hợp từ một logo,thanh điều hướng và khung tìm kiếm)

- Templates (Mẫu): là kết hợp các Organisms với nhau tạo thành các

trang

- Pages (Các trang): được tạo nên từ Templates Tại đây có thể đánh giá

xem các Templates đã đúng và đủ cho công việc thực tế chưa Nếu chưathì có thể quay lại 4 bước bên trên để chỉnh sửa nếu cần thiết

1.4.3 Ưu điểm của phương pháp Atomic Design

- Khả năng kết hợp các component: Nếu có 3 trang gồm: Trang chủ,

Blog và Tin tức đều sử dụng khối màu xanh lá với cùng mục đích Vậythì thật tốn thời gian nếu ngồi sửa cả 3 file này riêng rẽ Atomic Designsinh ra để giải quyết vấn đề này, ta sẽ tạo ra các Atoms và chỉnh sửa lạithành những Molecules và cả Organisms Với việc này nghĩa là ta có thểtạo ra các yếu tố mà có thể tái sử dụng dễ dàng

- Dễ dàng hiểu layout: Với Atomic Design, những bên liên quan như

Marketing hay đội lập trình có thể dễ dàng hình dung những thành phần

có trong sản phẩm của mình và có thể tuân theo một cách suôn sẻ Điềunày cũng giúp sự tương tác giữa đội thiết kế và đội lập trình trở nên dễdàng hơn thay vì chỉ làm theo Style Guide thông thường

- Chỉnh sửa hoặc xóa các yếu tố dễ dàng hơn: Các component được tạo

ra, các trang sử dụng instances lấy từ các component này trên các trangcủa mình Như vậy, khi có sự thay đổi, nhà thiết kế chỉ cần chỉnh sửacomponent là mọi instances cũng sẽ thay đổi theo Tương tự như vậy, vớinhững component không như ý muốn xóa đi thì cũng dễ dàng được loại

bỏ Điều này giúp nhà thiết kế tiết kiệm được nhiều công sức hơn baogiờ hết

1.5 Phương pháp xây dựng Design System

1.5.1 Quy trình xây dựng Design System

Trên trang web Elementor, tác giả Nick Babich đã đưa ra quytrình 10 bước xây dựng một Design System trong bài viết

“How to Build a Design System: 10-Step Guide”:

1.5.1.1 Phân tích quy trình thiết kế hiện tại

- Để hiểu rõ hơn về loại Design System muốn triển khai, cần bắt đầu bằngcách xem xét và phân tích cách tiếp cận hiện tại cho thiết kế tại công ty.Tìm câu trả lời cho những câu hỏi như:

 Quy trình thiết kế mà công ty tuân theo là gì?

 Các công cụ hiện có mà công ty sử dụng là gì?

- Nhà thiết kế cũng nên đánh giá mức độ hoàn chỉnh về thiết kế của cácnhóm sản phẩm Điều này sẽ giúp nhà thiết kế ước tính thời gian cầnthiết để giới thiệu hệ thống cho tổ chức của họ

1.5.1.2 Xác định các thuộc tính của Thương hiệu

- Ngôn ngữ hình ảnh mà các nhà thiết kế sẽ sử dụng phải dựa trên thuộctính của một thương hiệu.Các thuộc tính này bao gồm đặc điểm nhậndạng thương hiệu (giá trị thương hiệu và sản phẩm) và ngôn ngữ thươnghiệu (màu sắc, phông chữ, hình dạng, hoạt ảnh, giọng nói và âm điệu).Xác định danh tính cũng như ngôn ngữ của thương hiệu bằng cách xemxét các nguyên tắc của thương hiệu và phỏng vấn các bên liên quan, sau

đó tham khảo thông tin này khi làm việc với các nguyên tắc thiết kế vàStyle Guide

1.5.1.3 Tiến hành kiểm tra giao diện người dùng

- Một trong những vấn đề nguy hiểm nhất trong thiết kế sản phẩm là sựtrùng lặp thiết kế dẫn đến phân mảnh, phân mảnh dẫn đến không thốngnhất Việc xác định sự trùng lặp của các yếu tố thiết kế giúp nhóm xâydựng sản phẩm tránh được tình huống mà trong đó các thành viên trongnhóm xây dựng một thứ từ đầu sau đó ngỡ ngàng nhận ra một phiên bảntương tự của nó đã tồn tại

- Đó là lý do tại sao phân loại tất cả các thành phần trực quan trong sảnphẩm nên là nhiệm vụ đầu tiên mà nhóm thiết kế thực hiện trước khi xâydựng Design System Cần phải xem xét chất lượng hình ảnh của các yếu

tố thiết kế Hoạt động này có hai mục tiêu:

 Đánh dấu các khu vực có sự mâu thuẫn đáng kể nhất trong sản phẩm

 Xác định các yếu tố và component quan trọng nhất, được sử dụngnhiều nhất trong sản phẩm

- Kiểm tra giao diện người dùng là một quá trình gồm nhiều bước Điềucần thiết là phải xác định các thuộc tính giao diện người dùng chính nhưmàu sắc, phông chữ, hình ảnh trước tiên, sau đó, phân tích cách cácthuộc tính này được sử dụng trong các component.

- Sau khi có thông tin về cách tạo kiểu, có thể khám phá các thành phần.Phương pháp Atomic Design của Brad Frost như đã được đề cập ở mục1.4 sẽ giúp ta chia nhỏ mọi trang web thành các phần tử riêng lẻ (Atoms,Molecules và Organisms)

1.5.1.4 Xác định các Nguyên tắc Thiết kế

- Hiểu được lý do đằng sau các quyết định thiết kế là rất quan trọng để tạo

ra trải nghiệm người dùng đặc biệt Đó là lý do tại sao khi nói đến việcthiết lập các nguyên tắc thiết kế cho một hệ thống, điều cần thiết là phảiđiều phối các nhóm liên quan một bộ mục tiêu rõ ràng để duy trì sự nhấtquán và cân bằng

- Các nguyên tắc thiết kế phải trả lời ba câu hỏi cơ bản:

 Chúng ta đang xây dựng cái gì?

 Tại sao chúng ta xây dựng nó?

 Chúng ta sẽ xây dựng nó như thế nào?

- Điều quan trọng là các nguyên tắc thiết kế phải phản ánh chân thực cácgiá trị của tổ chức và phù hợp với tầm nhìn tổng thể

1.5.1.5 Tạo Component Library / Pattern

- Tổng hợp tất cả các phần functional (chức năng) và decorative (trang trí)của giao diện người dùng - các input fields (trường đầu vào), nút, biểumẫu, hình ảnh, để đặt tên cho chúng - đánh giá chúng theo nhu cầu của

dự án (phù hợp với nhu cầu của người dùng / mục tiêu kinh doanh) vàchỉ để lại những gì cần thiết

- Trong cuốn sách "Design System", Alla Kholmatova định nghĩa hai loạiquy tắc:

 Quy tắc chặt chẽ (Strict rules): Các nhà thiết kế phải tuân theo một

quy trình nghiêm ngặt để đưa các component và pattern mới vàoDesign System