Nghiên cứu các tín hiệu thị giác ứng dụng trong thiết kế giao diện website quảng bá thương hiệu

TỔNG LIÊN ĐOÀN LAO ĐỘNG VIỆT NAM

TRƯỜNG ĐẠI HỌC TÔN ĐỨC THẮNG

KHOA MỸ THUẬT CÔNG NGHIỆP

---

NGUYỄN BẢO THÙY AN

NGHIÊN CỨU CÁC TÍN HIỆU

THỊ GIÁC ỨNG DỤNG TRONG

THIẾT KẾ GIAO DIỆN WEBSITE

QUẢNG BÁ THƯƠNG HIỆU

MELLOWER COFFEE

LUẬN VĂN THẠC SĨ

MỸ THUẬT ỨNG DỤNG

THÀNH PHỐ HỒ CHÍ MINH, NĂM 2023

TỔNG LIÊN ĐOÀN LAO ĐỘNG VIỆT NAM

TRƯỜNG ĐẠI HỌC TÔN ĐỨC THẮNG

KHOA MỸ THUẬT CÔNG NGHIỆP

---

NGUYỄN BẢO THÙY AN

NGHIÊN CỨU CÁC TÍN HIỆU

THỊ GIÁC ỨNG DỤNG TRONG

THIẾT KẾ GIAO DIỆN WEBSITE

QUẢNG BÁ THƯƠNG HIỆU

MELLOWER COFFEE

LUẬN VĂN THẠC SĨ

MỸ THUẬT ỨNG DỤNG

THÀNH PHỐ HỒ CHÍ MINH, NĂM 2023

iii

LỜI CẢM ƠN

Trước tiên, học viên xin được bày tỏ sự trân trọng và lòng biết ơn đối với TS.

Nguyễn Đức Sơn đã tin tưởng và ủng hộ cũng như hướng dẫn học viên thực hiện đề

tài luận văn tốt nghiệp này. Học viên xin cảm ơn cơ sở đào tạo trường Đại học Tôn

Đức Thắng và các thầy cô tại Khoa Mỹ Thuật Công Nghiệp đã giảng dạy và hỗ trợ

học viên trong suốt quá trình học và hoàn tất Chương trình cao học chuyên ngành Mỹ

thuật ứng dụng.

Lời cảm ơn thứ hai xin gửi đến tất cả đồng nghiệp tại Mellower Coffee đã tạo

điều kiện, cung cấp kiến thức, cổ vũ tinh thần trong suốt thời gian học viên theo học

và làm luận văn tốt nghiệp, đặc biệt là em Trung Tín đã luôn đồng hành hỗ trợ thực

hiện các mô hình thực nghiệm, cũng như cố vấn các kiến thức liên ngành.

Học viên xin cảm ơn em Lan Anh, bạn Trung Hiếu, anh Thành Sơn, chị Thanh

Hằng, bạn Duy Hoàng, em Thanh Triết đã chia sẻ và động viên học viên.

Cảm ơn tất cả những tình nguyện viên, cộng đồng Specialty coffee đã thực

hiện khảo sát, quan tâm chia sẻ và góp ý để học viên có thể hoàn thành được luận văn

và có thêm các cơ sở để tiếp tục phát triển dự án trong tương lai.

Con xin cảm ơn Mẹ, người đã luôn âm thầm chăm lo sức khỏe thể chất cũng

như tinh thần của con, xin cảm ơn chính bản thân học viên đã cố gắng nỗ lực vượt

qua chính mình để hoàn thành bài tốt nghiệp.

TP. Hồ Chí Minh, ngày 01 tháng 01 năm 2023

Tác giả

Nguyễn Bảo Thùy An

iv

LỜI CAM ĐOAN LUẬN VĂN

Công trình được hoàn thành tại Trường Đại học Tôn Đức Thắng

Cán bộ hướng dẫn khoa học: TS. Nguyễn Đức Sơn

Chữ ký:

TS. Nguyễn Đức Sơn

Luận văn thạc sĩ được bảo vệ tại Hội đồng đánh giá Luận văn thạc sĩ Trường Đại

học Tôn Đức Thắng vào ngày 11/12/2022 theo Quyết định số 3286-3/QĐ-TĐT ngày

09/11/2022.

Thành phần Hội đồng đánh giá Luận văn thạc sĩ gồm:

1. GS.TS. Nguyễn Xuân Tiên Chủ tịch

2. PGS.TS. Đỗ Lệnh Hùng Tú Uỷ viên, Phản biện 1

3. PGS.TS. Võ Thị Thu Thuỷ Uỷ viên, Phản biện 2

4. PGS.TS. Cung Dương Hằng Uỷ viên

5. TS. Ngô Tú Quỳnh Loan Uỷ viên, Thư ký

Xác nhận của Chủ tịch Hội đồng đánh giá Luận văn và Trưởng khoa quản lý chuyên

ngành sau khi nhận Luận văn đã được sửa chữa (nếu có).

CHỦ TỊCH HỘI ĐỒNG TRƯỞNG KHOA

GS.TS. Nguyễn Xuân Tiên ThS. Nguyễn Thị Thuỳ Vân

v

CÔNG TRÌNH ĐƯỢC HOÀN THÀNH

TẠI TRƯỜNG ĐẠI HỌC TÔN ĐỨC THẮNG

Học viên xin cam đoan đây là công trình nghiên cứu của riêng học viên và

được sự hướng dẫn khoa học của TS. Nguyễn Đức Sơn; các nội dung nghiên cứu, kết

quả trong đề tài là trung thực do chính học viên thực hiện và không vi phạm đạo đức

nghiên cứu. Những số liệu trong các bảng biểu phục vụ cho việc phân tích, nhận xét,

đánh giá được chính tác giả thu thập từ các nguồn khác nhau có ghi rõ trong phần tài

liệu tham khảo.

Ngoài ra, trong Luận văn còn sử dụng một số nhận xét, đánh giá cũng như số

liệu của các tác giả, cơ quan tổ chức khác đều có trích dẫn và chú thích nguồn gốc.

Nếu phát hiện có bất kỳ sự gian lận nào học viên hoàn toàn chịu trách

nhiệm về nội dung Luận văn của mình. Trường Đại học Tôn Đức Thắng không

liên quan đến những vi phạm tác quyền, bản quyền do học viên gây ra trong quá trình

thực hiện (nếu có).

TP. Hồ Chí Minh, ngày 01 tháng 01 năm 2023

Tác giả

Nguyễn Bảo Thùy An

vi

NGHIÊN CỨU CÁC TÍN HIỆU THỊ GIÁC ỨNG DỤNG

TRONG THIẾT KẾ GIAO DIỆN WEBSITE QUẢNG BÁ

THƯƠNG HIỆU MELLOWER COFFEE

TÓM TẮT

Tín hiệu thị giác là một yếu tố thị giác có ý nghĩa quan trọng trong nghệ thuật

truyền thông thị giác (bằng hình ảnh), các yếu tố thị giác này giúp truyền đạt thông

điệp một cách nhanh chóng. Các cuộc khảo cổ đã phát hiện ra những hình vẽ, bộ chữ

tượng hình Ai Cập từ trước khi ngôn ngữ chữ viết ra đời, cho đến nay, giao tiếp bằng

hình ảnh vẫn là một phần thiết yếu và khi công nghệ bùng nổ với các phương tiện

điện tử đã mở ra một kỉ nguyên mới trong việc giao tiếp bằng hình ảnh. Bất kì một

cá nhân, doanh nghiệp, hay tổ chức nào muốn quảng bá thương hiệu trong thời đại

này cũng phải có ít nhất một kênh thông tin trực tuyến làm phương tiện để truyền

thông, Website là một trong những công cụ cơ bản nhất nên có, những tín hiệu thị

giác trên giao diện web quảng bá thương hiệu lại có những tính chất và đặc điểm

riêng khi thiết kế. Đặc biệt trong lĩnh vực F&B, khi trải nghiệm vật lý bao gồm đầy

đủ 5 giác quan và xúc giác thì trải nghiệm trực tuyến chủ yếu thông qua cảm nhận thị

giác, thính giác, tương tác thông qua các thao tác trên màn hình thiết bị điện tử, trong

đó, tín hiệu thị giác là một trong những yếu tố có tầm ảnh hưởng và quyết định phần

lớn. Lĩnh vực Specialty coffee, thông qua Coffee Taster's Flavor Wheel đã sử dụng

tín hiệu màu sắc là một yếu tố chính để phân biệt hương vị. Tuy nhiên, lĩnh vực này

còn khá mới mẻ tại Việt Nam và dần đang được phổ biến.

Đề tài nghiên cứu tín hiệu thị giác nào sẽ truyền đạt hiệu quả khi ứng dụng

trong Thiết kế giao diện Website quảng bá thương hiệu Mellower Coffee. Thông qua

các phương pháp nghiên cứu là phương pháp thu thập, phân tích và tổng hợp dữ liệu;

phương pháp mĩ thuật học; phương pháp nghiên cứu thực nghiệm và hướng tiếp cận

liên ngành. Các phương pháp này được ứng dụng để tổng hợp, phân tích các cơ sở lý

vii

luận hoặc dữ liệu để đúc kết làm tiền đề cho các thiết kế để khảo sát và kết quả sẽ

được dùng để đánh giá và chứng minh tính ứng dụng của đề tài vào thực tiễn. Ngoài

ra, luận văn còn có hướng tiếp cận liên ngành với các lĩnh vực khác như Specialty

coffee, lập trình giao diện Website, thương mại, thương mại điện tử, quảng bá thương

hiệu,... để hướng tiếp cận được bao quát, khách quan và hiệu quả khi ứng dụng vào

thực tiễn. Khảo sát được thực hiện trực tuyến 329 người với 3 mô hình giao diện

Website và đã đưa được kết luận và minh chứng về mức độ quan trọng của tín hiệu

màu sắc và hình minh họa, là ngôn ngữ hiệu quả khi truyền đạt thông tin về hương vị

cho lĩnh vực Specialty coffee, mang lại cảm nhận đa giác quan và đạt được trải

nghiệm tốt nhất cho người dùng, góp phần nâng cao nhận thức của người dùng về

Specialty coffee và cà phê thương mại. Dưới góc độ Thiết kế giao diện chuyên sâu

về mặt thẩm mỹ, nội dung luận văn mang lại giá trị Mỹ thuật ứng dụng, cụ thể là ứng

dụng các tín hiệu thị giác tiêu biểu là màu sắc và hình minh hoạ trong cảm nhận đa

giác quan, để hỗ trợ cảm nhận hiệu quả hơn trong lĩnh vực Specialty coffee.

Từ khoá: tín hiệu thị giác của Specialty coffee, giao diện web, Website quảng

bá thương hiệu, quảng bá thương hiệu,...

viii

RESEARCHING ON VISUAL ELEMENTS APPLIED IN

WEBSITE INTERFACE DESIGN FOR BRANDING

MELLOWER COFFEE

ABSTRACT

The visual element is a term that is used to demonstrate the elements relating

to visual communication (by images), and communication methods that require sight

and can be used for the rapid transferring of arranged messages. Archaeological

excavations have discovered several Egyptian hieroglyphs and drawings which were

used as a communication method even before the invention of written languages.

Until today, visual communication still plays an important part in our daily

communication routine, and thanks to the evolution of electronic devices have opened

a new era of visual communication. Any individual, business, or organization that

wants to promote itself needs at least one online information channel for media

solutions, Website is one of the most basic tools for this matter, the visual cues on the

interface of the Websites used to promote each brand has particular properties and

characteristics in design. Especially in the F&B industry, customers use the five

senses and tactile feeling for physical experiences, but online experience mainly

relies on visual and hearing feelings, through the interactions with the screen on

electronic devices where visual signals are one of the most influential and decisive

factors. In the Specialty coffee sector, Coffee Taster’s Flavor Wheel has applied the

colors signals to the demonstrations to differentiate coffee flavors. However, this

Subject is relatively new in Vietnam and has not been popular.

This topic elaborates on finding out which visual element will be effectively

communicated when applied in the design of the Website interface to promote

Mellower Coffee. Research methods are methods of data collection, analysis, and

synthesis; aesthetics methods; empirical research methods, and interdisciplinary

ix

approaches. These methods are applied to synthesize and analyze theoretical bases or

data to summarize as a premise for survey designs. The results will be used to evaluate

and prove the applicability of this methods-topic in practice. In addition, the thesis

also has an interdisciplinary approach to other fields such as Specialty coffee,

Website interface programming, commerce, e-commerce, and brand promotion,... for

a comprehensive approach, which is objective and effective when applied in practice.

The online survey of 329 people and result is about the importance of colors and

illustrations cues in the Website’s interface design for Mellower Coffee brand,

bringing multi-sensory perception and achieving the best user experience, contributes

to increasing the awareness of customers about Specialty coffee compared to

commercial coffee. From the perspective of aesthetic intensive interface design, the

content of the thesis brings the value of applied art, namely the application of typical

visual signals such as colors and illustrations in multi-sensory perception, to support

more effective perception in the Specialty coffee sector.

Keywords: visual element in Specialty coffee, Website interface, brand

promoting Website, brand promoting,...

x

MỤC LỤC

DANH MỤC HÌNH VẼ ........................................................................................ xiii

DANH MỤC BẢNG BIỂU ................................................................................ xviiii

DANH MỤC CHỮ VIẾT TẮT .......................................................................... xviii

DANH MỤC THUẬT NGỮ ............................................................................... xviii

PHẦN MỞ ĐẦU ........................................................................................................1

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

2. Tình hình nghiên cứu........................................................................................1

3. Mục đích nghiên cứu.........................................................................................5

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

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

6. Những đóng góp của luận văn..........................................................................6

7. Cấu trúc luận văn..............................................................................................7

8. Sơ đồ nghiên cứu ...............................................................................................8

CHƯƠNG 1: CƠ SỞ LÝ LUẬN VÀ THỰC TIẾN NGHIÊN CỨU TÍN HIỆU

THỊ GIÁC TRONG THIẾT KẾ GIAO DIỆN WEBSITE QUẢNG BÁ

THƯƠNG HIỆU .......................................................................................................9

1.1. Một số khái niệm liên quan đến nội dung đề tài nghiên cứu ...................10

1.1.1. Khái niệm về tín hiệu thị giác .................................................................10

1.1.2. Khái niệm về Website quảng bá thương hiệu .........................................12

1.1.3. Khái niệm về Thiết kế giao diện Website ...............................................13

1.2. Tín hiệu thị giác trong Thiết kế giao diện Website ...................................15

1.2.1. Các thành phần cơ bản của một Trang giao diện web ............................15

xi

1.2.2. Các yếu tố thị giác trên các thành phần hiển thị màn hình điện tử

(Electronic Visual Display) và Điều khiển dựa trên màn hình (Screen-Based

Controls) trong giao diện Website ....................................................................16

1.2.3. Trình tự nhận thức các tín hiệu thị giác và hệ thống phân cấp trực quan

trong Thiết kế giao diện Website ......................................................................21

1.2.4. Một số nguyên tắc liên quan đến tín hiệu thị giác trong thiết kế

giao diện Website..............................................................................................23

1.3. Vai trò và tầm quan trọng của tín hiệu thị giác trong Thiết kế giao diện

Website quảng bá thương hiệu và trải nghiệm người dùng........................26

1.3.1. Tín hiệu thị giác trong Thiết kế quảng bá thương hiệu...........................26

1.3.2. Vai trò, tầm quan trọng của tín hiệu thị giác trong Thiết kế giao diện

Website và trải nghiệm người dùng ..................................................................31

Tiểu kết Chương 1...............................................................................................34

CHƯƠNG 2. TÍN HIỆU THỊ GIÁC VÀ HIỆN TRẠNG THIẾT KẾ GIAO DIỆN

WEBSITE QUẢNG BÁ CÁC THƯƠNG HIỆU SPECIALTY COFFEE VÀ

MELLOWER COFFEE HIỆN NAY TẠI THÀNH PHỐ HỒ CHÍ MINH ......36

2.1. Tín hiệu thị giác trong lĩnh vực Specialty coffee .......................................37

2.1.1. Khái niệm về Specialty coffee ................................................................37

2.1.2. Tín hiệu Màu sắc trong lĩnh vực Specialty coffee ..................................38

2.1.3. Thị giác trong cảm quan thực phẩm và cảm nhận đa giác quan của

Specialty Coffee ................................................................................................40

2.2. Thực trạng Thiết kế giao diện Website các thương hiệu

Specialty coffee ....................................................................................................42

2.2.1. Thông tin một số Trang web thuộc lĩnh vực Specialty coffee ................42

2.2.2. Thực trạng ứng dụng tín hiệu thị giác trong một số giao diện Trang web

của lĩnh vực Specialty coffee ............................................................................44

xii

2.3. Tín hiệu thị giác trong Nhận diện thương hiệu Mellower Coffee............46

2.3.1. Tổng quan về thương hiệu Mellower Coffee ..........................................46

2.3.2. Sản phẩm Specialty coffee của thương hiệu Mellower Coffee...............49

2.4. Thực trạng đối tượng người dùng ..............................................................52

2.4.1. Nghiên cứu đối tượng người dùng ..........................................................52

2.4.2. Chân dung khách hàng (Customer Persona)...........................................55

2.4.3. Trải nghiệm khách hàng (Customer Experience)....................................56

Tiểu kết Chương 2...............................................................................................57

CHƯƠNG 3: ỨNG DỤNG TÍN HIỆU THỊ GIÁC TRONG THIẾT KẾ GIAO

DIỆN WEBSITE QUẢNG BÁ THƯƠNG HIỆU MELLOWER COFFEE TẠI

THÀNH PHỐ HỒ CHÍ MINH .............................................................................59

3.1. Vấn đề và định hướng giải pháp ứng dụng tín hiệu thị giác trong thiết kế

giao diện website quảng bá thương hiệu Mellower Coffee..............................60

3.2. Quy chuẩn thiết kế nhận diện thương hiệu Mellower Coffee ..................64

3.3. Phác thảo sơ đồ và thiết kế “Style Guildline” cho Website......................69

3.3.1. Phác thảo Sơ đồ Website (Sitemap)........................................................69

3.3.2. Thiết kế Style Guildline cho Website .....................................................71

3.4. Thiết kế Wireframe ......................................................................................69

3.2.1. Thiết kế Wireframe các thành phần giao diện web.................................73

3.2.2. Thiết kế Wireframe các Trang web.........................................................76

3.3. Thiết kế 3 mô hình giao diện Website ........................................................84

3.3.1. Mô hình Thiết kế giao diện 1 chỉ sử dụng 3 màu sắc cơ bản của

thương hiệu........................................................................................................84

xiii

3.3.2. Mô hình Thiết kế giao diện 2 ứng dụng màu sắc gồm: 3 màu cơ bản của

thương hiệu; màu sắc từ Coffee Taster’s Flavor Wheel, màu nền từ màu sắc

thức uống...........................................................................................................92

3.3.3. Mô hình Thiết kế giao diện 3 kết hợp ứng dụng màu sắc gồm: 3 màu cơ

bản của thương hiệu; màu sắc từ Coffee Taster’s Flavor Wheel, màu chuyển sắc

Gradient; màu nền từ màu sắc thức uống và tín hiệu hình minh họa .............101

Tiểu kết Chương 3.............................................................................................111

CHƯƠNG 4: TỔ CHỨC KHẢO SÁT VÀ LUẬN BÀN KẾT QUẢ ĐỒ ÁN

THIẾT KẾ GIAO DIỆN WEBSITE QUẢNG BÁ THƯƠNG HIỆU

MELLOWER COFFEE TẠI THÀNH PHỐ HỒ CHÍ MINH ........................112

4.1. Tổ chức khảo sát 3 giao diện Website quảng bá thương hiệu

Mellower Coffee ................................................................................................114

4.1.1. Mục tiêu khảo sát ..................................................................................114

4.1.2. Đối tượng khảo sát ................................................................................114

4.1.3. Phương pháp thực hiện..........................................................................114

4.2. Tổng hợp dữ liệu, kết quả khảo sát và bàn luận kết quả nghiên cứu ...114

4.2.1. Tổng hợp dữ liệu và kết quả khảo sát ...................................................128

4.2.2. Bàn luận kết quả nghiên cứu .................................................................131

4.3. Kiến nghị và đề xuất hướng phát triển ....................................................114

Tiểu kết Chương 4.............................................................................................133

KẾT LUẬN ............................................................................................................134

TÀI LIỆU THAM KHẢO ....................................................................................137

PHẦN PHỤ LỤC....................................................................................................xix

DANH MỤC HÌNH VẼ

xiv

Hình 3.1: Sơ đồ giả thiết trải nghiệm Website Mellower Coffee ............................60

Hình 3.2: Các hình thức logo của Mellower Coffee .................................................65

Hình 3.3: Kích thước nhỏ nhất của các hình thức logo Mellower Coffee ................66

Hình 3.4: Màu sắc chính của thương hiệu Mellower Coffee ...................................67

Hình 3.5: Hoạ tiết phụ trợ thương hiệu Mellower Coffee.........................................68

Hình 3.6: Kiểu chữ và phân cấp kiểu chữ thương hiệu Mellower Coffee ................68

Hình 3.7: Một số bao bì sản phẩm cà phê lon thương hiệu Mellower Coffee ..........69

Hình 3.8: Sơ dồ Sitemap ...........................................................................................71

Hình 3.9: Style Guide cơ bản ....................................................................................71

Hình 3.10: Tổng quan Wireframe .............................................................................72

Hình 3.11: Wireframe phần Navigation và Footer....................................................73

Hình 3.12: Wireframe phần Buttons.........................................................................73

Hình 3.13: Wireframe phần Mini Bubble .................................................................74

Hình 3.14: Wireframe phần Cards ............................................................................74

Hình 3.15: Wireframe phần Submenu Beans............................................................75

Hình 3.16: Wireframe phần Submenu Beverages.....................................................75

Hình 3.17: Wireframe phần Discover Coffee Beans Page........................................76

Hình 3.18: Wireframe phần America/ Africa/ Asia Single Page bước truy cập 1....76

Hình 3.19: Wireframe phần America/ Africa/ Asia Single Page bước truy cập 2....77

Hình 3.20: Wireframe phần Handcrafted Coffee Single Page..................................77

Hình 3.21: Wireframe phần Ice Drip Coffee Single Page ........................................78

Hình 3.22: Wireframe phần Signature & Beverages Single Page ............................78

Hình 3.23: Wireframe phần Whiskey Single Page ...................................................79

Hình 3.24: Wireframe phần Frappe Single Page ......................................................79

xv

Hình 3.25: Wireframe phần Frappe Single Page ......................................................80

Hình 3.26: Wireframe phần Espresso Based Coffee Single Page.............................81

Hình 3.27: Wireframe phần Coffee Bean Information Single Page .........................82

Hình 3.28: Wireframe phần Homepage ....................................................................83

Hình 3.29. Màu chữ đen chuyển sang trắng khi “hover”..........................................84

Hình 3.30: Tổng quan Giao diện 1............................................................................85

Hình 3.31: Giao diện 1 phần Button, Card, Navigation và Footer............................86

Hình 3.32: Giao diện 1 phần Submenu Beverages, Beans........................................86

Hình 3.33: Giao diện 1 phần Homepage ...................................................................87

Hình 3.34: Giao diện 1 phần Trang chi tiết các món nước 1 ....................................88

Hình 3.35: Giao diện 1 phần Trang chi tiết các món nước 2 ....................................89

Hình 3.36: Giao diện 1 mẫu chung phần Trang chi tiết các món nước 3 .................89

Hình 3.37: Giao diện 1 phần Trang Bản đồ khám phá hạt cà phê ............................90

Hình 3.38: Giao diện 1 phần Trang Hạt cà phê theo châu lục ..................................90

Hình 3.39: Giao diện 1 phần Landing Page Flame of Geisha...................................91

Hình 3.40: Giao diện 1 phần Landing Page Hạt cà phê ............................................92

Hình 3.41: Tổng quan Giao diện 2............................................................................93

Hình 3.42: Giao diện 2 khi tương tác “hover”, Navigation và Footer......................94

Hình 3.43: Giao diện 2 phần Submenu Beverages và khi tương tác hover ..............94

Hình 3.44: Giao diện 2 phần Homepage và khi tương tác phần ...............................95

Hình 3.45: Giao diện 2 phần Trang chi tiết các món nước 1 ....................................96

Hình 3.46: Giao diện 2 phần Trang chi tiết các món nước 2 ....................................97

Hình 3.47: Bộ màu hương vị ứng với tên từng loại cà phê giao diện 2....................97

Hình 3.48: Bộ card cùng màu chủ đạo ứng với tên từng loại cà phê giao diện 2 .....98