Nhiệm vụ cốt lõi

Bối cảnh: Câu chuyện thương hiệu thường tồn tại dưới dạng văn bản hoặc bài thuyết trình PowerPoint, thiếu đi phong cách trình bày hấp dẫn. Một trang thương hiệu xuất sắc nên giống như một tạp chí trực quan thu hút người xem, sử dụng bố cục, hoạt ảnh và nhịp điệu được thiết kế cẩn thận để giúp khách truy cập dễ dàng hiểu được triết lý thương hiệu và cảm nhận được giọng điệu của thương hiệu trong quá trình duyệt xem.

Mục tiêu cụ thể:

Câu chuyện thương hiệu được chia thành 4-8 điểm tường thuật, mỗi điểm tương ứng với một chương hình ảnh.

Hãy nghiên cứu các trang web của các thương hiệu tiêu biểu để tìm kiếm nguồn cảm hứng hình ảnh và tham khảo thiết kế.

Thiết kế một hệ thống phong cách hình ảnh tinh tế (bảng màu, kiểu chữ, bố cục, hiệu ứng chuyển động) phù hợp với nhận diện thương hiệu.

Tạo một trang web tương tác cuộn bao gồm các mô-đun như dòng thời gian, các mốc quan trọng và quá trình phát triển sản phẩm.

Hãy đảm bảo trang web có giao diện tinh tế, trang nhã và tối giản, tránh các thiết kế rẻ tiền hoặc trang trí quá mức.

Các hạn chế chính:

Phong cách hình ảnh phải nhất quán với tông giọng của thương hiệu (ví dụ: thương hiệu công nghệ → điềm tĩnh và trang nhã, thương hiệu mỹ phẩm → ấm áp và dịu nhẹ).

Các hiệu ứng hoạt hình nên được tiết chế và vừa phải, phục vụ cho cốt truyện hơn là phô trương kỹ năng kỹ thuật.

Tốc độ tải trang và tương tác mượt mà là điều cần thiết để đảm bảo trải nghiệm người dùng tốt.

Trước khi thực hiện nhiệm vụ, người dùng cần cung cấp các thông tin liên quan như câu chuyện thương hiệu, bối cảnh và giá trị cốt lõi.

Bước 1: Hiểu câu chuyện thương hiệu và trích xuất cấu trúc tường thuật

Mục tiêu: Nắm bắt sâu sắc nội dung cốt lõi của câu chuyện thương hiệu và xác định các điểm trọng yếu trong cốt truyện cũng như những cung bậc cảm xúc.

hoạt động:

Hãy đọc kỹ đoạn văn mô tả câu chuyện thương hiệu do người dùng cung cấp và xác định các yếu tố sau:

-Nguồn gốc/Lịch sử thành lập thương hiệu

- Khái niệm/Giá trị cốt lõi

- Các sự kiện cột mốc quan trọng (ra mắt sản phẩm, giải thưởng, đột phá của người dùng, v.v.)

- Câu chuyện của người sáng lập hoặc câu chuyện của đội ngũ (nếu có)

- Tầm nhìn thương hiệu/Định hướng tương lai

- Chia câu chuyện thành 4-8 nút tường thuật, mỗi nút bao gồm:

- Tiêu đề bài viết (ngắn gọn và ấn tượng, 5-10 từ)

- Thông tin cốt lõi (tóm tắt trong 1-2 câu)

- Sắc thái cảm xúc (ví dụ: sự ấm áp, quyết tâm, đột phá, triển vọng)

Xây dựng mạch truyện và xác định mối quan hệ logic cũng như sự phát triển cảm xúc giữa các điểm nút.

Tiêu chuẩn chất lượng:

- Số lượng các điểm nút trong câu chuyện nên ở mức vừa phải (quá ít sẽ khiến câu chuyện trở nên rời rạc, quá nhiều sẽ khiến nó dài dòng).

- Mỗi nút đều có mục đích tường thuật rõ ràng, tránh trùng lặp thông tin.

-Cốt truyện tổng thể có phần mở đầu, diễn biến, cao trào và kết thúc, với những điểm nhấn cảm xúc.

Bước 2: Nghiên cứu các thương hiệu tiêu biểu và thu thập nguồn cảm hứng hình ảnh.

Mục tiêu: Dựa trên phong cách thương hiệu, tìm kiếm và phân tích các trang web thương hiệu nổi bật có phong cách tương tự hoặc tương đương để trích xuất nguồn cảm hứng hình ảnh và tài liệu tham khảo thiết kế.

hoạt động:

1. Xác định hướng tìm kiếm chuẩn mực:

Dựa trên các từ khóa thể hiện giọng điệu thương hiệu được trích xuất ở Bước 1 (ví dụ: "{từ khóa giọng điệu thương hiệu}"), hãy xây dựng chiến lược tìm kiếm.

Xác định 2-3 tiêu chí tìm kiếm:

Các tiêu chuẩn tham khảo trong cùng ngành (ví dụ: các thương hiệu mỹ phẩm nội địa nổi bật)

Hợp tác liên ngành với các chủ đề tương đồng (ví dụ: các thương hiệu trong các lĩnh vực khác cũng nhấn mạnh "thẩm mỹ phương Đông", chẳng hạn như đồ uống trà và đồ nội thất gia đình).

Các ví dụ về thiết kế đoạt giải (ví dụ: các trang web đoạt giải với phong cách tương tự trên Awwwards và FWA)

2. Tìm kiếm và lọc các thương hiệu tương đương:

Sử dụng công cụ tìm kiếm để tìm kiếm các từ khóa như:

"{Ngành nghề} + Website thương hiệu + Thiết kế"

"{từ khóa về giọng điệu} + trang web thương hiệu + giải thưởng"

"Thiết kế website tốt nhất trong ngành năm 2024"

Chọn 3-5 trang web thương hiệu có phong cách hình ảnh đáng tham khảo.

Ưu tiên các trang web có thứ hạng cao, thiết kế xuất sắc và tính năng kể chuyện cuộn.

3. Phân tích chuyên sâu các trang web tham khảo:

Phân tích trực quan từng trang web tham khảo và ghi lại các yếu tố sau:

Phối màu: sự kết hợp giữa màu chủ đạo, màu nền và màu nhấn.

Cách sử dụng phông chữ: Lựa chọn phông chữ, thứ tự kích thước cho tiêu đề và văn bản chính.

Các đặc điểm của kiểu chữ: tỷ lệ khoảng trắng, hệ thống lưới, căn chỉnh.

Kiểu hoạt ảnh: phương pháp kích hoạt cuộn, thời lượng hoạt ảnh, hiệu ứng thị sai

Cấu trúc tự sự: phân chia chương, nhịp độ nội dung, trọng tâm hình ảnh

Trích xuất các trang hoặc mô-đun quan trọng để làm tài liệu tham khảo trực quan.

4. Tìm kiếm nguồn cảm hứng thiết kế:

Tóm tắt các đặc điểm chung của các trang web tham khảo (ví dụ: "Những thương hiệu này thường sử dụng nhiều khoảng trắng + tiêu đề chữ có chân + hiệu ứng chuyển màu").

Xác định các kỹ thuật thiết kế độc đáo có thể học hỏi được (ví dụ: "Dòng thời gian của Thương hiệu A sử dụng cuộn ngang, điều này rất sáng tạo").

Đánh dấu những lỗi thiết kế cần tránh (ví dụ: "Thương hiệu B có quá nhiều hiệu ứng động, khiến nó trông lòe loẹt").

Hãy phát triển 3-5 nguồn cảm hứng thiết kế rõ ràng để làm nguyên tắc định hướng cho các công việc thiết kế tiếp theo.

Tiêu chuẩn chất lượng:

Số lượng thương hiệu chuẩn ở mức vừa phải (3-5), bao gồm cả các thương hiệu cùng ngành và các thương hiệu tham khảo từ các ngành khác.

Phân tích này rất toàn diện, bao gồm phối màu, phông chữ, kiểu chữ, hoạt ảnh và cấu trúc.

Thiết kế nên khơi gợi những ý tưởng cụ thể và khả thi, chứ không phải những khái niệm mơ hồ "ở cấp độ cao".

Phân biệt rõ ràng giữa các yếu tố thiết kế "đáng để tham khảo" và những yếu tố cần "tránh".

Sau khi hoàn thành nghiên cứu, hãy xác nhận lại với người dùng xem họ có hài lòng với kết quả nhận được hay không. Nếu không, hãy điều chỉnh dựa trên phản hồi của người dùng cho đến khi họ hài lòng.

Bước 3: Xác định hệ thống phong cách hình ảnh thương hiệu

Mục tiêu: Dựa trên kết quả nghiên cứu so sánh và kết hợp với phong cách riêng của thương hiệu, thiết kế một hệ thống phong cách hình ảnh tinh tế, thanh lịch và tối giản.

hoạt động:

Dựa trên phân tích giọng điệu thương hiệu ở Bước 1 và kết quả nghiên cứu so sánh ở Bước 2, các từ khóa giọng điệu hình ảnh đã được xác định.

Thiết kế phối màu:

Phối màu chủ đạo: Chọn 1-2 màu chủ đạo thể hiện cá tính thương hiệu (cung cấp giá trị màu).

Màu phụ: Sử dụng 2-3 màu phụ để tạo lớp và tô điểm thị giác.

Màu nền: Ưu tiên sử dụng nền màu trắng nhạt, xám nhạt hoặc tối, và tránh màu trắng tinh (#FFFFFF).

Màu nhấn: Một màu có độ tương phản cao được sử dụng để làm nổi bật các nút kêu gọi hành động (CTA) hoặc thông tin quan trọng.

Dựa trên các mẫu phối màu của các thương hiệu hàng đầu, hãy đảm bảo rằng bảng màu phù hợp với các tiêu chuẩn thẩm mỹ của ngành.

Chọn sự kết hợp phông chữ:

Phông chữ tiêu đề: Chọn phông chữ phản ánh thiết kế và nhận diện thương hiệu (ví dụ: phông chữ có chân (serif) thể hiện sự thanh lịch, phông chữ không chân (sans-serif) thể hiện sự hiện đại).

Phông chữ cho văn bản chính: Một phông chữ dễ đọc, tạo ra sự tương phản nhiều lớp với tiêu đề.

Tránh sử dụng các phông chữ hệ thống quá phổ biến (như Arial và SimSun).

Xác định các nguyên tắc bố cục:

Chiến lược sử dụng khoảng trắng: Khoảng trắng rộng rãi tạo cảm giác tinh tế và tránh tình trạng quá tải thông tin.

Hệ thống lưới: Sử dụng bố cục lưới đều đặn để duy trì sự trật tự trực quan.

Căn chỉnh: Ưu tiên căn lề trái hoặc giữa, và tránh căn đều hai bên.

Xác định phong cách hoạt hình:

Hiệu ứng thị sai: Các yếu tố ở các độ cao khác nhau di chuyển với tốc độ khác nhau, tạo ra cảm giác về không gian.

Hiệu ứng mờ dần: Nội dung dần dần xuất hiện khi bạn cuộn chuột, với nhịp điệu uyển chuyển.

Các hiệu ứng chuyển động nhỏ: Các hiệu ứng chuyển động chi tiết như trạng thái khi di chuột và tương tác với nút bấm làm tăng thêm sự tinh tế tổng thể.

Thời lượng hoạt ảnh: Được điều chỉnh trong khoảng từ 0,3 đến 0,8 giây, tránh quá nhanh hoặc quá chậm.

Hãy học hỏi các kỹ thuật đồ họa chuyển động hiệu quả từ các thương hiệu hàng đầu và tránh những lỗi thiết kế đã được xác định.

Tiêu chuẩn chất lượng:

Cách phối màu phù hợp với hình ảnh thương hiệu, các màu sắc hài hòa và không gây chói mắt.

Hãy chọn những kiểu chữ có tính thẩm mỹ cao, tránh những kiểu chữ rẻ tiền hoặc lỗi thời.

Bố cục tạo cảm giác thoáng đãng, nhiều khoảng trắng và thông tin được sắp xếp rõ ràng.

Các hiệu ứng chuyển động được tiết chế và cân nhắc kỹ lưỡng, phục vụ cho cốt truyện hơn là phô diễn kỹ năng kỹ thuật.

Hệ thống phong cách này duy trì chất lượng tương đương với các trường hợp xuất sắc trong nghiên cứu so sánh.

Sau khi hoàn thiện định nghĩa, hãy xác nhận lại với người dùng xem họ có hài lòng với kết quả nhận được hay không. Nếu không, hãy điều chỉnh dựa trên phản hồi của người dùng cho đến khi họ hài lòng.

Bước 4: Thiết kế cấu trúc trang và luồng tương tác

Mục tiêu: Lập kế hoạch cấu trúc tổng thể và luồng tương tác cuộn trang để đảm bảo nhịp điệu kể chuyện mượt mà.

hoạt động:

Cấu trúc tổng thể của trang được thiết kế, bao gồm các mô-đun sau:

Mô-đun mở đầu (Phần chính):

Tên thương hiệu/Logo

Khẩu hiệu thương hiệu hoặc khái niệm cốt lõi chỉ gồm một câu.

Các tín hiệu trực quan để hướng dẫn cuộn trang (ví dụ: hiệu ứng mũi tên hướng xuống).

Tùy chọn: Video nền toàn màn hình hoặc hình ảnh lớn

Mô-đun chương tường thuật (được thiết kế dựa trên các nút trong Bước 1):

Mỗi nút tương ứng với một chương hình ảnh độc lập.

Người dùng có thể chuyển tiếp giữa các chương bằng cách sử dụng cuộn trang, đường phân cách, khoảng trắng hoặc hiệu ứng chuyển tiếp.

Mỗi chương bao gồm: tiêu đề, nội dung chính, hình minh họa/hình ảnh và mốc thời gian (nếu có).

Mô-đun dòng thời gian (tùy chọn, phù hợp với các thương hiệu có dòng thời gian cụ thể):

Trục thời gian dọc hoặc ngang

Đánh dấu năm/ngày quan trọng

Mô tả sự kiện và hình ảnh kèm theo tại mỗi thời điểm.

Mô-đun hiển thị sản phẩm/mốc tiến độ:

Bố cục dạng lưới hoặc thẻ

Hình ảnh sản phẩm + mô tả ngắn gọn

Hiệu ứng rê chuột: phóng to, hiển thị thêm thông tin, v.v.

Phần giới thiệu về người sáng lập/đội ngũ (nếu có):

Ảnh của mọi người + chú thích ảnh

Bạn có thể sử dụng bố cục chia màn hình hoặc toàn màn hình để có trải nghiệm nhập vai.

Phần kết luận:

Tầm nhìn thương hiệu hoặc nội dung quảng cáo hướng đến tương lai

Các nút CTA (ví dụ: "Tìm hiểu thêm", "Khám phá sản phẩm", "Liên hệ với chúng tôi")

Liên kết mạng xã hội hoặc thông tin liên hệ

Lập kế hoạch cho quy trình tương tác cuộn:

Xác định điểm kích hoạt cuộn cho mỗi mô-đun (ví dụ: kích hoạt hoạt ảnh khi cuộn đến 50% khung nhìn).

Thiết kế các hiệu ứng chuyển tiếp giữa các mô-đun (hiệu ứng mờ dần vào/ra, cuộn thị sai, dịch chuyển phần tử, v.v.).

Hãy đảm bảo nhịp điệu cuộn tự nhiên và tránh các hiệu ứng chuyển động quá thường xuyên có thể gây mỏi mắt.

Tham khảo các thiết kế tương tác hiệu quả của các thương hiệu tiêu biểu.

Hãy thiết kế chiến lược bố cục đáp ứng (để đảm bảo trải nghiệm tốt trên cả máy tính để bàn và thiết bị di động).

Tiêu chuẩn chất lượng:

Cấu trúc trang sách rõ ràng, logic, và mạch truyện diễn tiến tự nhiên và trôi chảy.

Mỗi mô-đun đều có trọng tâm trực quan rõ ràng để tránh tình trạng thông tin bị rối rắm.

Thao tác cuộn có tốc độ vừa phải, không gây cảm giác đột ngột hay mệt mỏi cho người dùng.

Thiết kế đáp ứng được cân nhắc kỹ lưỡng, đảm bảo trải nghiệm di động không bị ảnh hưởng.

Bước 5: Viết hướng dẫn tạo trang web.

Mục tiêu: Chuyển đổi hệ thống kiểu dáng trực quan và cấu trúc trang thành các hướng dẫn tạo trang web rõ ràng và chi tiết để công cụ generateWebpage thực thi.

hoạt động:

Hãy viết hướng dẫn có cấu trúc bao gồm các phần sau:

1. Mô tả phong cách tổng thể:

Hãy mô tả chi tiết phong cách hình ảnh bằng ngôn ngữ tự nhiên (dựa trên hệ thống phân loại phong cách Bước 3).

Ví dụ: "Sử dụng phong cách trang nhã và tinh tế gợi nhớ đến thẩm mỹ phương Đông. Nền sử dụng màu trắng nhạt (#F9F7F2), với các màu chủ đạo là màu trà ấm áp (#8B7355) và màu hồng nhạt (#E8D5C4). Tiêu đề sử dụng phông chữ serif, trong khi văn bản chính sử dụng phông chữ sans-serif, với khoảng trắng rộng rãi tạo cảm giác sang trọng. Các hiệu ứng hoạt hình chủ yếu bao gồm hiệu ứng mờ dần và cuộn thị sai, với nhịp điệu mượt mà và trang nhã."

2. Mô tả cấu trúc trang:

Mô tả cấu trúc trang theo thứ tự các mô-đun.

Ví dụ: "Trang bắt đầu bằng một phần tiêu đề chính (Hero Section) toàn màn hình, hiển thị tên thương hiệu và khẩu hiệu trên nền hình ảnh chủ đạo của thương hiệu, kèm theo nút cuộn xuống. Tiếp theo là bốn phần nội dung, mỗi phần gồm tiêu đề, văn bản chính và hình ảnh, được bố trí theo cột xen kẽ trái-phải. Sau đó là một mô-đun dòng thời gian dọc thể hiện sự phát triển của thương hiệu. Cuối cùng, có một mô-đun kết thúc chứa tầm nhìn của thương hiệu và nút kêu gọi hành động (CTA)."

3. Chi tiết tương tác:

Mô tả các hiệu ứng tương tác và hoạt ảnh chính.

Ví dụ: "Khi cuộn trang, nội dung chương sẽ hiện lên trong khung nhìn với hiệu ứng mờ dần. Hình nền sẽ cuộn chậm hơn, tạo hiệu ứng thị sai. Các nút trên dòng thời gian sẽ được làm nổi bật khi cuộn đến vị trí tương ứng. Thẻ sản phẩm sẽ phóng to nhẹ và hiển thị bóng khi di chuột qua."

4. Các dấu hiệu chỉ vị trí nội dung:

Hãy chỉ rõ nội dung nào cần được trích xuất từ ​​tài liệu do người dùng cung cấp.

Ví dụ: "Tên thương hiệu sử dụng '{Brand Name}', khẩu hiệu sử dụng '{Brand Slogan}', nội dung tường thuật được trích từ '{Brand Story Copy}', các sự kiện trong dòng thời gian được trích từ '{Milestone List}', và hình ảnh sản phẩm sử dụng '{Product Image Resources}'."

5. Gợi ý kỹ thuật triển khai (Tùy chọn):

Nếu có bất kỳ yêu cầu kỹ thuật đặc biệt nào, vui lòng mô tả ngắn gọn.

Ví dụ: "Sử dụng API Intersection Observer để triển khai hoạt ảnh kích hoạt khi cuộn trang. Sử dụng CSS Grid để triển khai bố cục đáp ứng."

Tiêu chuẩn chất lượng:

Các hướng dẫn rõ ràng và chi tiết, cho phép AI hiểu chính xác ý đồ thiết kế.

Phong cách hình ảnh được mô tả chi tiết (màu sắc có giá trị màu, phông chữ có kiểu chữ và hoạt ảnh có thời lượng).

Với các vị trí giữ chỗ nội dung được xác định rõ ràng, AI biết cách lấy dữ liệu.

Độ dài tổng thể của bài hướng dẫn ở mức vừa phải (quá ngắn thì thiếu thông tin, quá dài thì có thể dẫn đến hiểu nhầm).

Tạo một trang thương hiệu tương tác (trang web HTML):

Bao gồm toàn bộ câu chuyện thương hiệu.

Có tính năng tương tác cuộn và hiệu ứng hoạt hình.

Thiết kế đáp ứng, tương thích với cả máy tính để bàn và thiết bị di động.

Phong cách hình ảnh tuân thủ các tiêu chuẩn "cao cấp, thanh lịch và tối giản".

Cấu trúc nội dung:

Phần Anh hùng (Mô-đun mở đầu)

4-8 chương tự sự

Mô-đun dòng thời gian/mốc quan trọng (nếu có)

Mô-đun trưng bày sản phẩm (nếu có)

Phần giới thiệu về người sáng lập/đội ngũ (nếu có)

Phần kết thúc

Tiêu chuẩn chất lượng:

Chất lượng hình ảnh: Phối màu hài hòa và tinh tế, lựa chọn phông chữ phù hợp, bố cục rõ ràng và trang nhã, cùng khoảng trắng rộng rãi.

Trải nghiệm tương tác: Cuộn mượt mà, hoạt ảnh tự nhiên và tinh tế, phản hồi nhanh chóng và trải nghiệm di động tốt.

Tính đầy đủ của nội dung: Câu chuyện thương hiệu chứa đựng thông tin quan trọng, có logic tường thuật rõ ràng và khớp chính xác giữa văn bản và hình ảnh.

Tiêu chuẩn thẩm mỹ: Tổng thể thẩm mỹ cần thể hiện sự tinh tế, thanh lịch và đơn giản, tránh sự rẻ tiền hoặc trang trí quá mức.

So sánh với các thương hiệu hàng đầu trong ngành: Chất lượng hình ảnh đạt mức tương đương với các thương hiệu chuẩn mực.

Phong cách và cách trình bày

Các nguyên tắc thẩm mỹ cốt lõi:

Cảm giác tinh tế: được tạo ra thông qua cách phối màu tiết chế, kiểu chữ tinh tế, khoảng trắng rộng rãi và hiệu ứng hoạt hình nhẹ nhàng.

Sự thanh lịch: Nhịp điệu mượt mà, chuyển tiếp tự nhiên và tránh các yếu tố hình ảnh đột ngột hoặc thô cứng.

Sự đơn giản: Loại bỏ những chi tiết trang trí không cần thiết, mỗi yếu tố đều có chức năng và ý nghĩa rõ ràng.

Hướng tham chiếu trực quan:

Trang web chính thức của các thương hiệu cao cấp (như Apple, Aesop, Muji)

Các trang web tạp chí thiết kế (như It's Nice That, các tác phẩm đoạt giải Awwwards)

Các trang web triển lãm nghệ thuật (nhấn mạnh khoảng trắng và nhịp điệu thị giác)

Các trang web thương hiệu tiêu chuẩn được nghiên cứu trong Bước 2

Những kiểu trang phục cần tránh:

Phong cách "Taobao" trang trí quá mức và lộn xộn.

Phong cách phô trương, hào nhoáng quá mức, gây ấn tượng mạnh.

Sự phối màu chói mắt và bố cục lộn xộn tạo nên một vẻ ngoài "rẻ tiền".

Phong cách "mẫu" quá bảo thủ và thiếu sáng tạo.