Website portfolio sáng tạo: cuốn truyện nàng tiên của tôi

Làm thế nào để xây một website portfolio sáng tạo thể hiện được con người bạn mà vẫn chuyên nghiệp? Tôi mới tốt nghiệp ngành Digital Marketing, và tôi muốn portfolio đầu tiên của mình không chỉ là một danh sách dự án. Vì vậy tôi xây nó như một cuốn truyện tương tác, nơi một nàng tiên nhỏ dẫn khách đi qua công việc của tôi.

Bài này dành cho ai: những bạn mới tốt nghiệp, người làm marketing và người làm sáng tạo đang xây portfolio đầu tiên, muốn nó mang dấu ấn của mình mà vẫn rõ ràng.

Bài phân tích portfolio này của tôi gồm bảy phần. Mỗi phần bắt đầu bằng việc tôi đã làm và lý do, rồi đến điều bạn có thể làm theo:

• Bảy lựa chọn, từ ý tưởng và bản sắc hình ảnh đến hoạt ảnh, khả năng sử dụng, bằng chứng và những đánh đổi.
• Bài kiểm tra 30 giây của người xét duyệt để bạn thử trên website của mình, cùng những lỗi portfolio mà các lựa chọn này tránh được.
• Cái giá của từng lựa chọn, về dung lượng và công duy trì, để bạn cân nhắc trước khi làm theo.

Vì sao tôi làm điều khác biệt: portfolio nên thể hiện cá tính

Là một người mới tốt nghiệp, tôi biết mình muốn một portfolio không chỉ là danh sách dự án và thành tích. Tôi muốn một thế giới nhỏ phản ánh con người tôi. Tôi yêu sự sáng tạo, yêu kể chuyện và yêu việc biến những ý tưởng khác thường thành hiện thực, nên một mẫu giao diện truyền thống chưa bao giờ thấy đúng. Tôi muốn một thứ thực sự là của riêng tôi.

Cách làm theo. Hãy bắt đầu từ điều bạn thích làm, không phải từ một mẫu có sẵn. Người xét duyệt không đọc từng chữ. Nielsen Norman Group ghi nhận rằng hiếm khi các nhà quản lý tuyển dụng dành thời gian đọc toàn bộ portfolio của bạn từng chữ một, còn Designlab cảnh báo rằng bạn chỉ có vài giây để tạo kết nối với khách truy cập trước khi họ đóng trang.

Cá tính là thứ khiến người ta dừng lại trong vài giây ấy. Một portfolio marketing đưa ra một lời khẳng định trước khi cho xem bất kỳ sản phẩm mẫu nào: người này làm được cho một thương hiệu có cảm giác như một con người. Nếu trang bao quanh các sản phẩm chỉ là một mẫu trung tính thì lời khẳng định ấy không có bằng chứng. Trang chủ của tôi có một câu về điều này: “Marketing không chỉ là kể một câu chuyện. Đó là làm cho người ta cảm nhận được nó.” Hướng dẫn làm portfolio của Shopify đặt bản sắc thương hiệu lên hàng đầu: màu sắc, kiểu chữ và hình ảnh giúp tạo nên tông của website, và giọng văn cũng quan trọng không kém.

Màn hình đầu tiên của tôi làm điều này trước mọi lời giải thích. Nó có tên tôi bằng chữ viết tay với chữ N màu hồng đậm hơn, dòng “Marketing · Creative · Da Nang → United States” và hai nút, View Work và Get in Touch.

Tìm bản sắc hình ảnh của tôi: nàng tiên, bảng màu và kiểu chữ

Tôi luôn bị cuốn hút bởi truyện cổ tích, thiên nhiên và tranh minh họa kỳ ảo, nên ý tưởng nàng tiên giống như một phần mở rộng tự nhiên của con người tôi. Tôi chọn xanh lá dịu, hồng, chi tiết hoa và những nét vẽ tay để trang vui tươi mà vẫn chuyên nghiệp. Tôi muốn khách nhận ra cá tính của tôi qua thiết kế, trước khi họ đọc một chữ nào về tôi.

Cách làm theo. Chọn vài thứ mang bản sắc của bạn. Của tôi dựa trên một nàng tiên, một khung hoa lan xanh và một cái tên viết tay. Bảng màu và kiểu chữ dưới đây dựng nên chúng, còn phần sau làm chúng chuyển động.

Hai bảng màu, một cảm giác

Tôi đã làm gì. Trang chủ và blog của tôi chung một cảm giác nhưng không chung bảng màu. Trang chủ là giấy màu kem (#F2EDE3) với hồng, xanh xô thơm, xanh rừng, ô liu, nâu và vàng. Blog là nền trắng thuần với một số ít màu thương hiệu. Sự mềm mại đến từ màu hồng bụi (#D4A8B4) và màu xanh xô thơm (#8B9E7A) đặt cạnh màu xanh rừng (#4A6741), còn khung hoa quanh phần đầu trang được dựng thành hai lớp, một nền giấy tĩnh và một lớp hoa riêng chuyển động.

Blog chuyển sang màu trắng nhờ một lần chỉnh lại được ghi trong bảng token của chính nó. Phiên bản đầu dùng giấy màu kem, nhưng màu kem đó hóa ra là màu của khung ứng dụng chứ không phải của bài viết. Đo trên các trang bài viết, năm trên năm bề mặt đọc mặc định là trắng thuần. Vì vậy sự ấm áp được chuyển đến nơi không chạm vào chữ chạy: màu nhấn, các huy hiệu và một lớp nền ấm sau các khung chú thích.

Kiểu chữ ghép theo vai trò, lời văn giữ nghĩa đen

Tôi đã làm gì. Tên trên trang chủ được đặt bằng Dancing Script, chữ N có màu hồng nhạt hơn, và dòng nhỏ phía trên dùng cùng kiểu chữ ở cỡ nhỏ hơn. Tiêu đề mục dùng Cormorant Garamond, nhãn nhỏ dùng Caveat và chữ giao diện dùng Inter. Blog tách các vai trò nghiêm ngặt hơn: Geist cho giao diện và tiêu đề, Source Serif 4 để đọc, cỡ 20 pixel trên 32 với cột rộng 680 pixel.

Vì sao người xét duyệt quan tâm. Chữ viết tay là lựa chọn tồi cho các đoạn văn, nên nó chỉ xuất hiện ở nơi trang đang là một con người: cái tên và dòng phía trên. Trang chủ có thể dùng bốn kiểu chữ vì nó là một tấm áp phích. Blog thì không, vì người ta đọc nó.

Lời văn theo cùng cách chia đó. Tiêu đề đầu blog là “The Fairy’s Field Notes” phía trên câu “Where Curious Ideas Grow”, đó là nhân vật lên tiếng với một liều nhỏ. Những phần thực dụng giữ nguyên nghĩa đen: thanh điều hướng trang chủ ghi Social, Mobile, Design, SEO, Web App, Writing, About, Sign in và Contact, mỗi mục là một loại công việc mà nhà tuyển dụng có thể đang tìm, không phải một câu đố.

Cách làm theo. Giao cho mỗi kiểu chữ một việc và nói to ra: kiểu này là tên, kiểu này để đọc. Để giọng của bạn hiện ra ở tiêu đề đầu trang và các dòng giới thiệu, và giữ nhãn điều hướng đủ rõ để lướt qua.

Thổi sức sống vào portfolio: hình minh họa, linh vật và hoạt ảnh

Tôi không muốn một bản trình bày tĩnh. Tôi muốn một cuốn truyện tương tác, nơi một nàng tiên nhỏ dẫn khách đi qua các dự án của tôi, hình minh họa trở nên sống động và mỗi mục có một nhân vật riêng. Hoạt ảnh và những tương tác nhỏ ở đó để việc khám phá giống một trải nghiệm, không giống việc cuộn qua một bản sơ yếu lý lịch.

Cách làm theo. Giao cho chuyển động một việc, và xây công tắc tắt cùng lúc. Hai phần dưới đây cho thấy cách làm.

Một linh vật có việc, và một công tắc tắt

Tôi đã làm gì. Nàng tiên là thứ đầu tiên trên trang chủ chuyển động. Cô ấy có bảy sprite sheet, mỗi tư thế một tấm (bay, vỗ cánh, ngồi, suy nghĩ, vui, chạm và xoay người), mỗi tấm tám khung hình. Bảy tấm PNG cộng lại nặng hơn 1 MB một chút, đó là toàn bộ cái giá của một linh vật biết cử động.

Nàng cũng phản ứng với người xem. Nàng chạm khi bạn nhấn, tỏ vẻ vui khi bạn tới một liên kết hay một nút, và quay mặt theo hướng nàng đang di chuyển. Đó là ba trong bảy tư thế của nàng đang làm việc.

Cô ấy xứng với chỗ đứng của mình vì làm được điều gì đó. Trên thiết bị có con trỏ, cô ấy đi theo con trỏ chuột bằng một lò xo giảm chấn, nên bám theo con trỏ chứ không giật tới nơi. Trên điện thoại không có con trỏ để theo, nên cô ấy đi cùng thao tác cuộn và ghé thăm các tiêu đề. Tư thế mang ý nghĩa ở nơi chúng được đặt: cô ấy suy nghĩ cạnh tiêu đề SEO, ngồi cạnh tiêu đề About và vui cạnh tiêu đề liên hệ.

Vì sao người xét duyệt quan tâm. Một linh vật có việc để làm vừa là chữ ký vừa là người dẫn đường. Một linh vật dán ở góc trang chỉ là miếng sticker. Cô ấy xuất hiện ở các tiêu đề mục và mép trang, không bao giờ đè lên một sản phẩm mẫu, nên công việc vẫn là nhân vật chính.

Công tắc tắt. Chuyển động là chỗ cá tính biến thành rủi ro. Trình duyệt có thể báo người dùng có yêu cầu thiết bị giảm thiểu chuyển động không thiết yếu hay không, và MDN lưu ý rằng loại hoạt ảnh đó có thể gây khó chịu cho những người rối loạn tiền đình. Trên thiết bị có con trỏ, trang chủ ẩn con trỏ hệ thống, vẽ nàng tiên và giữ một chấm nhỏ 15 pixel đúng vị trí con trỏ, với một vệt lấp lánh bốn cánh phía sau. Vệt đó không chạy với khách đã yêu cầu giảm chuyển động, và cũng không chạy trên màn hình cảm ứng. Trên blog, nàng tiên nghỉ trên vệt bay của mình với khung hình đầu tiên của đôi cánh, còn trên trang chủ cô ấy được gắn cố định vào con trỏ thay vì bám theo bằng lò xo.

Các tương tác nhỏ theo cùng một quy tắc. Một nút nâng lên 2 pixel khi rê chuột, rồi hạ xuống và tối đi nhẹ khi được nhấn, còn một sản phẩm trong phần công việc nhô lên khi rê chuột. Cuốn sách bên dưới mở ra khi bạn kéo bìa hoặc nhấn Enter, và các phím mũi tên lật trang.

Cách làm theo. Chọn một họa tiết. Quyết định nơi nó xuất hiện (tiêu đề và mép trang) và nơi nó không bao giờ xuất hiện (đè lên sản phẩm mẫu), rồi viết phiên bản giảm chuyển động cùng lúc với hiệu ứng.

Một bộ hình minh họa, dùng lại nhiều lần

Tôi đã làm gì. Khung hoa lan trên trang chủ, các con bướm, những tia lấp lánh và dây leo là một bộ ngôn ngữ hình ảnh. Chúng lặp lại qua các mục, nên khách học được điều gì thuộc về website này sau màn hình đầu tiên. Các bản vẽ vector có gân lá, đốm và đổ bóng đã thay những hình cắt raster ban đầu vốn trông bị mờ. Những con bướm vẫn vỗ cánh và mầm cây vẫn nở một bông duy nhất, và tất cả đều đứng yên khi khách yêu cầu giảm chuyển động.

Ngôn ngữ hình ảnh ấy đi vào chính công việc. Mảng Mobile Marketing được vẽ như một cuốn sách: bìa xanh viền vàng với dấu hiệu của tôi, mở ra một trang chương bên cạnh các mẫu điện thoại, và các trang lật qua bốn kênh.

Mobile
Marketing

CeraVe × Creva

Chapter II

Mobile Marketing

• I. SMS Messages
• II. MMS Rich Media
• III. Email Campaign
• IV. Push Notifications

Vì sao người xét duyệt quan tâm. Designlab khuyên dùng một bộ mockup nhất quán giúp thống nhất portfolio về mặt hình ảnh. Một bộ ngôn ngữ hình ảnh lặp lại làm việc đó cho cả trang, và vector luôn sắc nét ở mọi kích thước còn ảnh raster bị kéo giãn thì không.

Cách làm theo. Cố định một bộ nhỏ các hình khối và màu sắc, dùng lại ở mọi mục, và áp dụng cả cho cách trình bày sản phẩm mẫu. Hãy chuẩn bị bỏ ra nhiều công hơn so với ảnh stock.

Thiết kế cho con người, không chỉ cho vẻ đẹp: UX, dễ đọc và khả năng tiếp cận

Thử thách lớn nhất là cân bằng giữa hình minh họa chi tiết và trải nghiệm người dùng gọn gàng, chuyên nghiệp. Là người làm marketing, tôi biết thiết kế đẹp chẳng có nhiều ý nghĩa nếu khách không tìm được thứ họ cần. Vì vậy tôi giữ các dự án luôn dễ thấy, điều hướng rõ ràng và blog dễ đọc.

Cách làm theo. Đây là những phép kiểm tra tôi làm về khả năng đọc, tiếp cận và dùng trên điện thoại. Trên blog, sự dễ đọc là một cột rộng 680 pixel với chữ cỡ 20 pixel trên dòng cao 32 pixel, mực đậm trên nền trắng, đúng khổ mà Medium dùng cho phần thân bài.

Độ tương phản đo được

Vì sao người xét duyệt quan tâm. Độ tương phản thấp trông như cẩu thả và làm mỏi mắt. Các hướng dẫn về khả năng tiếp cận web yêu cầu tỷ lệ tương phản tối thiểu 4,5:1 cho chữ thường. Màu mực chữ của blog là 15,52:1 trên nền trắng và màu xanh dùng cho nút là 6,35:1. Vàng và hồng không đạt khi làm màu chữ, ở mức 2,29:1 và 2,24:1, nên blog chỉ dùng chúng làm màu nền và giữ những bản đậm hơn cho chữ: mực hồng 5,56:1 và mực vàng 6,10:1. Tôi làm chúng đậm hơn cho đến khi đạt, thay vì bỏ các màu ấy.

Cách làm theo. Chọn màu bản sắc trước, rồi thử từng màu làm chữ trên nền trang của bạn. Màu nào không đạt thì giữ làm màu nền và làm một bản đậm hơn cho chữ. Đặt sự ấm áp vào khung và giữ chữ chạy trên nền đơn giản, tương phản cao.

Chuyển động, màn hình cảm ứng và bước tiếp theo rõ ràng

Mọi hiệu ứng ở trên đều có phiên bản giảm chuyển động, và màn hình cảm ứng có lộ trình riêng vì điện thoại không có con trỏ để theo. Thanh điều hướng trang chủ kết thúc bằng nút Contact và phần đầu trang có nút Get in Touch, nên khách thích công việc biết cần làm gì tiếp theo. Designlab khuyên làm cho trải nghiệm trên điện thoại đơn giản và dễ dùng và đưa ra lời kêu gọi hành động rõ ràng. Các điều khiển cũng có trạng thái được nhấn, không chỉ trạng thái rê chuột, vì ngón tay không bao giờ rê chuột, và điều khiển đang được chọn có viền 2 pixel dễ thấy.

Bài kiểm tra 30 giây của người xét duyệt cho portfolio của bạn

Mở portfolio của bạn trên điện thoại, bấm giờ và trả lời các câu sau theo thứ tự. Đây là phép thử tôi dùng để đọc một trang như người xét duyệt đang lướt, không phải một tiêu chuẩn.

1. 5 giây đầu. Bạn có nói được đây là ai và họ làm loại công việc nào không? Nếu phải cuộn mới biết, màn hình đầu tiên chưa làm tròn việc của nó.
2. 10 giây tiếp theo. Đếm số sản phẩm. Designlab đặt điểm lý tưởng ở 3-5 dự án, và Nielsen Norman Group đặt tên bước này là chọn 3-5 dự án làm các nghiên cứu điển hình chi tiết.
3. 5 giây tiếp theo. Tìm cách liên hệ. Designlab khuyên có một nút “Get in touch” nổi bật làm lời kêu gọi hành động.
4. 5 giây tiếp theo. Đọc một đoạn văn thân bài. Chữ có đạt ít nhất 4,5:1 so với nền không, và độ dài dòng có dễ đọc không?
5. 5 giây cuối. Kiểm tra một con số hoặc một lời khẳng định. Có nhãn nào bên cạnh nói rõ nó là gì và không phải là gì không?
6. Sau đó bật giảm chuyển động trong cài đặt thiết bị và tải lại. Trang vẫn phải có nghĩa, với các hiệu ứng đứng yên.

Để công việc tự lên tiếng: cách tôi trình bày dự án

Portfolio của tôi gom lại mạng xã hội, SEO, thiết kế đồ họa và các chiến dịch sáng tạo. Nó cho thấy công việc tôi đã làm: phát triển cộng đồng mạng xã hội, tạo nội dung và làm các dự án marketing. Tôi tin sự sáng tạo luôn phải có mục đích: thiết kế thu hút sự chú ý, còn công việc mới kể câu chuyện thật.

Tôi đã làm gì. Trang chủ nêu năm mảng (mạng xã hội, mobile marketing, thiết kế đồ họa, SEO và một web app), và công việc nằm cách màn hình đầu tiên một lần cuộn. Một trang được trang trí nhiều dễ khiến người ta nghi ngờ nội dung mỏng, nên các mục bằng chứng được viết cố ý theo nghĩa đen. Ở chỗ một con số có thể bị hiểu sai, trang nói rõ ngay bên cạnh: “Các con số tổng của tài khoản này là ảnh chụp nhanh, không phải thành quả cá nhân của tôi hay mức tăng trưởng có thể quy cho tôi.” Mỗi thẻ chương cũng có một nhãn rõ ràng bên cạnh thương hiệu, như Account snapshot, Coursework hoặc Live product.

Vì sao người xét duyệt quan tâm. Cá tính thu hút sự chú ý, còn nhãn giản dị giữ cho sự chú ý ấy không biến thành nghi ngờ. Một người xét duyệt đang lướt có thể tin một con số tự mang theo giới hạn của nó.

Cách làm theo. Gọi tên mỗi sản phẩm theo đúng bản chất và việc bạn đã làm. Đặt lời lưu ý ngay cạnh con số, đừng để ở chú thích cuối trang. Trang càng được trang trí nhiều thì lời khẳng định càng nên giản dị.

Các lựa chọn này tránh được gì? Những lỗi portfolio thường gặp

Mỗi lựa chọn ở trên chặn một lỗi mà các hướng dẫn làm portfolio nêu tên.

Những đánh đổi đằng sau phép màu: hiệu năng và chi phí thiết kế

Có những đánh đổi. Đôi khi tôi đơn giản hóa một hình minh họa, giảm bớt một hoạt ảnh hoặc chọn bố cục dễ đọc hơn thay cho thứ trông thú vị hơn. Một thương hiệu cá nhân mạnh không phải là thêm mọi ý tưởng sáng tạo. Đó là chọn những chi tiết làm trải nghiệm tốt hơn.

Cách làm theo. Hãy cân giá từng ý tưởng trước khi giữ lại. Đây là cái giá của tôi, về dung lượng và công duy trì. Hai trong số các lựa chọn dưới đây đơn giản có chủ đích: blog giữ nền trắng, và nàng tiên nghỉ khi người xem muốn ít chuyển động hơn.

Xây portfolio dạy tôi điều gì về thương hiệu cá nhân

Xây portfolio này dạy tôi rằng thương hiệu cá nhân là hiểu bản thân và tìm một cách sáng tạo để truyền đạt điều đó. Tôi không giấu cá tính vui tươi của mình để trông chuyên nghiệp, vì sáng tạo và chuyên nghiệp có thể cùng tồn tại.

Điều tôi muốn gửi lại:

• Chọn một nhân vật hoặc họa tiết và giao việc cho nó. Một linh vật ngồi cạnh tiêu đề và phản ứng với con trỏ là một hệ thống. Một linh vật dán ở góc là một miếng sticker.
• Để cá tính nằm trong khung. Giữ chữ chạy trên nền đơn giản, tương phản cao.
• Kiểm tra độ tương phản trước khi phải lòng một màu. Nếu màu thương hiệu không đạt khi làm chữ, dùng nó làm màu nền và làm một bản đậm hơn cho chữ.
• Xây công tắc tắt cùng lúc với hiệu ứng. Giảm chuyển động và màn hình cảm ứng cũng là khách truy cập.
• Gắn nhãn bằng chứng bằng lời giản dị. Trang càng được trang trí nhiều thì lời khẳng định càng nên giản dị.

Tôi không chỉ xây một portfolio để cho thấy mình đã làm gì. Tôi xây một thế giới nhỏ cho thấy tôi là ai.

Hỏi đáp: làm thế nào để portfolio nổi bật

Một website portfolio sáng tạo nên cho xem bao nhiêu dự án?

Ít hơn bạn nghĩ. Designlab nói điểm lý tưởng thường nằm trong khoảng 3-5, và Nielsen Norman Group gợi ý 3-5 dự án làm các nghiên cứu điển hình chi tiết. Trang chủ của tôi cho xem năm mảng, và mỗi mảng nói rõ công việc đó là gì.

Linh vật hay hình minh họa có khiến portfolio của tôi trông thiếu chuyên nghiệp không?

Không, khi nó có việc để làm và không che công việc. Linh vật của tôi xuất hiện ở tiêu đề và mép trang, không bao giờ đè lên một sản phẩm mẫu, và mọi hiệu ứng đều có phiên bản giảm chuyển động. Rủi ro mà các hướng dẫn nêu tên là phần trang trí làm xao nhãng nội dung, vì thế các mục bằng chứng được giữ ở nghĩa đen.

Chọn màu cho một portfolio thương hiệu cá nhân thế nào?

Bắt đầu từ bản sắc, vì Shopify đặt bản sắc thương hiệu lên hàng đầu, rồi thử từng màu làm màu chữ. Hướng dẫn về khả năng tiếp cận yêu cầu tối thiểu 4,5:1 cho chữ thường. Những màu không đạt vẫn dùng được làm màu nền, kèm một bản đậm hơn cho chữ.

Người xét duyệt có đọc phần mô tả của tôi không?

Nhiều khả năng là không đọc hết, nên hãy viết ngắn và mở đầu bằng việc bạn đã làm. Lời khuyên của Shopify cho phần mô tả công việc là giữ cho ngắn, và một nhà quản lý tuyển dụng được Nielsen Norman Group trích dẫn nói “Đừng chỉ cho tôi xem sản phẩm hoàn thiện.”

Tôi có nên viết về cách mình xây portfolio của chính mình không?

Có, nếu bạn viết từ trải nghiệm thật. Hướng dẫn nội dung hữu ích của Google hỏi liệu nội dung của bạn có thể hiện rõ chuyên môn trực tiếp và chiều sâu hiểu biết hay không. Một bài phân tích chính website của bạn, với những lựa chọn thật và cái giá của chúng, vốn dĩ là trải nghiệm trực tiếp.

Nếu bạn đang lên kế hoạch cho một portfolio sáng tạo của riêng mình, tôi hy vọng những đánh đổi ở trên giúp bạn đỡ đi vài đường vòng. Muốn xem tất cả cùng nhau, portfolio là nơi nên bắt đầu, và blog cho thấy phiên bản lặng hơn của cùng một bản sắc. Bạn có thể liên hệ với tôi qua trang liên hệ.

Đây là lời kể ngôi thứ nhất về website của chính tôi, không phải một tiêu chuẩn thiết kế. Các nguồn được liên kết đặt ra hướng dẫn về độ tương phản, giảm chuyển động và portfolio; mọi điều khác mô tả website này đúng như đã xây.