Tái hiện Windows XP thành portfolio
(mitchivin.com)- Nhà thiết kế đồ họa Mitch Ivin đã tái hiện trang portfolio của mình theo phong cách Windows XP
- Cần bật JavaScript để trải nghiệm đầy đủ mọi hiệu ứng hình ảnh và tính năng
- Toàn bộ trang mô phỏng rất sát cảm giác desktop Windows XP và các tương tác của nó
- Người truy cập có thể tự do khám phá giao diện đăng nhập cùng menu Start, taskbar và nhiều thành phần khác
- Bản thân trải nghiệm portfolio này nhấn mạnh năng lực thiết kế giao diện độc đáo
Mitch Ivin — Giới thiệu website portfolio
- Mitch Ivin là một nhà thiết kế đồ họa, đã xây dựng website portfolio của mình một cách tinh xảo như môi trường desktop của hệ điều hành Windows XP
- Ngay từ màn hình đầu tiên, người truy cập có thể bắt gặp các yếu tố thị giác gợi nhớ môi trường sử dụng thực tế như hình nền Windows XP (Bliss) và hoạt ảnh boot loading
- Để đăng nhập, người dùng bấm vào ‘Mitch Ivin’; sau bước này, họ có thể khám phá website như đang sử dụng một desktop thực thụ
- Khắp giao diện có taskbar, menu Start, biểu tượng hồ sơ người dùng, nút khởi động lại và đăng xuất, tái hiện trung thực bầu không khí và UX của hệ điều hành thật
- Website này là một portfolio sáng tạo, vừa thể hiện năng lực thiết kế và phát triển frontend thông qua chính “trải nghiệm”, vừa là một ví dụ thú vị về tương tác web
Tính năng và đặc điểm chính
- Toàn bộ trải nghiệm yêu cầu JavaScript
- Dùng phím F11 để vào chế độ toàn màn hình sẽ cho cảm giác gần với trải nghiệm desktop thực tế hơn
- Cung cấp các nút tắt để đi tới hồ sơ và sản phẩm bên ngoài như LinkedIn, GitHub, Instagram
- Trên thiết bị di động, có áp dụng các hoạt ảnh thân thiện với người dùng như hộp hướng dẫn yêu cầu xoay thiết bị sang chế độ dọc
- Mỗi biểu tượng, nút bấm và hoạt ảnh đều là thiết kế có chủ đích, tối giản nhưng vẫn truyền tải nguyên vẹn cảm giác ‘Windows XP’ nguyên bản
Cấu trúc giao diện
Màn hình desktop và đăng nhập
- Màn hình khởi đầu hiển thị hình nền Windows XP và hoạt ảnh khởi động
- Nhấp vào biểu tượng người dùng ‘Mitch Ivin’ để thực hiện quy trình đăng nhập
- Sau khi đăng nhập thành công, các thành phần như taskbar và nút Start sẽ được kích hoạt
Taskbar và Start Menu
- Hiển thị taskbar rất giống với Windows XP thật
- Bố trí các nút trực quan như Restart (khởi động lại) và Log Off (đăng xuất)
- Khi nhấp vào từng nút sẽ có tương tác được dàn dựng giống hệ điều hành thật
Tóm tắt
- Website portfolio Windows XP của Mitch Ivin mang đến phần giới thiệu bản thân khác biệt bằng UI/UX đầy cá tính
- Thay vì chỉ xem danh sách dự án, người truy cập sẽ trải nghiệm một portfolio theo kiểu tương tác trực tiếp
- Đây là một ví dụ về thiết kế giao diện và branding đáng tham khảo cho các nhà thiết kế số và lập trình viên frontend
3 bình luận
Ý kiến trên Hacker News
Thật ra tôi khá thích dự án này, làm rất đẹp mắt
Nhưng vì tự giới thiệu mình là “graphic designer” mà lại tái tạo nguyên xi Windows XP, nên hơi tiếc là chưa thể biết ngay được bạn có bản sắc thiết kế riêng đến đâu
Nhìn các dự án khác bên dưới biểu tượng IE thì có cảm giác cá tính riêng rõ hơn một chút, nhưng vài phần hình ảnh trông như được AI tạo ra nên làm tôi bớt kỳ vọng
UX cũng hơi lạ, ví dụ phần điều khiển lịch sử lại hoạt động như carousel trong portfolio. Tôi tưởng bấm nút back/previous thì sẽ quay lại menu dự án, nhưng không phải vậy
Nếu ai đó nộp đơn cho tôi bằng portfolio kiểu này, tôi vẫn sẽ cho cơ hội phỏng vấn. Rõ ràng đây là sản phẩm được đầu tư rất nhiều công sức và có chất lượng cao, điều đó khá ấn tượng
Nhưng những điểm nói ở trên, đặc biệt là việc chưa thể hiện rõ cách tiếp cận lấy người dùng làm trung tâm, sẽ là điều tôi muốn hỏi kỹ trong buổi phỏng vấn
Nói thêm cho rõ thì kiểu thiết kế này tôi cũng làm được. Về bản chất, nó giống hệt việc hiện thực hóa một mockup mà UX designer đưa ra, và tôi đã làm kiểu đó rất nhiều
Tôi sợ nghe có vẻ thất vọng, nhưng dù sao đây vẫn là một sản phẩm rất đẹp, tôi thích nó, và ở nhiều nơi nó chắc chắn đủ sức vượt qua “vòng đầu”. Chỉ mong bạn nhớ rằng bước tiếp theo mới là lúc thể hiện năng lực thật sự của mình
Bạn nói thật sự là mình cũng làm được thiết kế này dù không phải người có gu thẩm mỹ, nên tôi muốn hỏi liệu bạn có chắc điều đó không
Tôi đã thấy vô số giao diện nhái XP, nhưng lúc nào cũng có gì đó hơi lệch
MitchIvin có thể không phải bản sao trùng khít hoàn toàn của XP, nhưng trải nghiệm sử dụng thì khá dễ chịu
Tôi cũng có lo ngại tương tự
Nếu chỉ là dự án đơn thuần thì khá thú vị, nhưng nếu là bản sao XP thì đã có nhiều ví dụ chính xác hơn rồi
Với tư cách portfolio thì có vẻ còn phản tác dụng. Trong thiết kế ngày nay, việc cho thấy một thử nghiệm mang tính nguyên bản quan trọng hơn nhiều
Graphic design thường bị xem chỉ là mức độ thành thạo phần mềm hoặc kỹ năng vẽ thứ gì đó đẹp mắt, nhưng thực ra nó là hoạt động giao tiếp bằng hình ảnh, nơi thông điệp được thiết kế thông qua ràng buộc, đối tượng và cảm xúc
Không có đường tắt đâu, phải nghiên cứu các thiết kế đã có và luyện tập xem mình muốn thể hiện điều gì bằng màu sắc, bố cục, typography và hình ảnh
Hãy tự tay vẽ nữa, và nên tránh generative AI cho đến khi bản thân thật sự thành thạo
Ở giai đoạn này, với tư cách portfolio thì nó khá đáng tiếc nếu muốn trở nên đáng nhớ, và vẫn cần luyện tập thêm
Dù vậy, việc hoàn thành nó và đưa được lên top HN vẫn cực kỳ đáng khen, mong cơ hội này sẽ trở thành bước ngoặt để bạn tiếp tục tạo ra nhiều thứ hơn
Việc “có vài điểm tò mò để hỏi trong phỏng vấn nên có thể tuyển có điều kiện” nghĩa là trang này đã hoàn thành vai trò của một portfolio
Portfolio chỉ cần đủ để khiến ai đó nảy sinh sự tò mò kiểu “muốn gặp thử người này xem sao” là được
Xét cho cùng, nó là thứ để “gõ cánh cửa đầu tiên”, chứ không phải thứ tự nó đem lại công việc
Thật ra graphic design không phải là nghệ thuật
Nó là một hình thức giao tiếp dùng chiến lược với văn bản, hình ảnh và bố cục để truyền tải thông tin một cách trực quan và hiệu quả
Tính nguyên bản chỉ quan trọng trong branding, vấn đề bản quyền, hoặc khi bạn bê nguyên văn hóa sẵn có vào dùng
Câu hỏi quan trọng hơn là: “Vì sao bạn muốn thể hiện bản thân và portfolio của mình thông qua Windows XP?”
Điều tôi cảm nhận được chủ yếu là năng lực kỹ thuật
Có lẽ ý đồ là nhắm đến khách hàng trong ngành công nghệ, đặc biệt là freelancer, bằng cách khơi gợi hoài niệm
Nếu là art director thì tôi có lẽ sẽ không gọi phỏng vấn, nhưng có lẽ đây cũng không phải portfolio dành cho art director
Và chuyện “cái này tôi cũng làm được” là điều rất thường nghe trong công việc thiết kế
Việc triển khai thật ra là phần dễ nhất trong thiết kế; portfolio này lẽ ra phải trông tốt hơn cả XP, và đó mới là kỹ năng
Khi tuyển designer, tôi không quan tâm bạn tái hiện chính xác đến đâu cái sự vụng về của XP
Nếu là developer thì việc làm được thứ này là điều bình thường, không có gì đáng ngạc nhiên
Ngược lại, tôi còn ấn tượng hơn khi developer chú ý đến typography hay bố cục đẹp. Trên thực tế, phần khó nhất là quyết định những yếu tố nào sẽ xuất hiện trên màn hình và cấu trúc thông tin ra sao
Đưa gì vào và tổ chức nó thế nào mới là chìa khóa thành công
Tôi muốn tuyển người này
Người này có đủ sự lì lợm, bền bỉ và sáng tạo để tạo khác biệt với ứng viên khác
Hàng nghìn người dùng HN, bạn bè của họ, các nhà báo công nghệ và vô số người khác đã thưởng thức tác phẩm này, và rồi sẽ còn nhiều người biết đến hơn nữa
Thời buổi này kiếm việc không dễ, nhưng nếu cho thấy được phong cách như thế này thì chắc chắn sẽ có hàng loạt lời mời
Tiện nói luôn, portfolio của tôi cũng sắp cần nâng cấp, và nhìn cái này khiến tôi được truyền cảm hứng, muốn thử làm một cú tương tự
Thấy giới thiệu là “portfolio tùy biến theo phong cách XP chú ý đến chi tiết”, nên tôi muốn chỉ ra vài điểm cụ thể
Nếu là tôi làm thứ này, tôi sẽ bỏ qua màn hình boot và login. Đặc biệt, sẽ tốt hơn nếu ngay lúc khởi động đã cho hiện About Me để client dễ tìm thấy hơn
Nếu double-click biểu tượng ở góc trên bên trái của title bar thì cửa sổ phải đóng. Khác với khi bấm vào phần thân của title bar, thao tác đó nguyên gốc là đóng chứ không phải maximize
Tôi nghĩ màn hình boot và login góp phần lớn vào sức hút của toàn bộ bản tái hiện
Những chi tiết nhỏ như thế và cảm giác đắm chìm của người dùng là điểm cực kỳ quan trọng trong các dự án GUI
Nó cho cảm giác mượt hơn cả Windows XP thật
Khó giải thích nhưng rõ ràng có một sức hút nào đó về mặt UX/UI
Cũng thú vị ở chỗ nó hòa hợp tự nhiên với cấu trúc phân cấp của tab trình duyệt
Nhờ màn hình khởi động, đăng nhập và âm thanh tạo cảm giác về một không gian riêng, nó khiến người ta có cảm giác như đang bước vào “một nơi chỉ có ở đây”
Dù là Windows hay thứ gì đi nữa, cứ nhanh là thấy ngầu hơn nhiều
Phải phản hồi trong vòng 20ms thì mới không cảm thấy có độ trễ và mới thấy mượt
Hoàn toàn đồng ý
Tôi đang dùng macOS 26 beta nhưng bản clone Windows XP này còn có cảm giác như một bản nâng cấp
Lý do là nó đơn giản, nhanh và tôi đã biết cách dùng hết rồi
Windows đời cũ chạy single-core nên đa nhiệm kém, nhưng trớ trêu là chính vì vậy lại có lợi cho việc tập trung
Với OS hiện đại, tôi hay phải dùng hàng chục cửa sổ và hàng trăm tab rải khắp nhiều workspace và màn hình, nên thấy rất phân tán
Hoài niệm là yếu tố chính, nhưng tôi thấy còn bị cuốn vào bởi âm thanh đăng nhập nữa
Không biết bạn đã thử bấm logout chưa
Tốc độ tương tác UI rất nhanh
UI hiện đại thường chỉ có vài chuyển cảnh là nhanh, còn tổng thể phản hồi lại chậm nên tạo cảm giác khá kỳ
Nói thật là khá thú vị, nhưng tôi có cảm giác cách tiếp cận đang bị sai ở đâu đó
Thấy giới thiệu “graphic designer” trong portfolio nên tôi vào xem, nhưng thực chất lại giống như chỉ sao chép một thiết kế cũ của người khác
Hình AI ở màn hình login và các icon di chuyển lạ khi hover cũng rất dễ nhận ra
Tôi không nhớ Windows XP có hiệu ứng như vậy, nên còn phân vân không biết đó là bug kỳ quặc hay gì
Từ đoạn đó tôi bắt đầu mất niềm tin
Là “graphic designer” mà lại dùng đồ họa do AI tạo ra, nên tôi cũng tự hỏi có phải phần code cũng được giao cho AI viết theo cách tương tự không
Cách hiển thị CV như một file PDF giả cũng tạo cảm giác bức bối
Nhiều dự án cũng bị nhốt trong các cửa sổ nhỏ nên khó xem tử tế, còn hai cái thì chỉ hiện animation loading
Ban đầu bạn nói mình chưa có kinh nghiệm lập trình và có nhờ AI agent hỗ trợ, đồng thời “mọi quyết định đều do con người đưa ra”, nhưng nếu bạn chưa có năng lực tự viết code thì liệu trên thực tế LLM có nắm nhiều quyền quyết định hơn không
Tôi cũng thắc mắc liệu bạn có tự tin là mình có thể tự làm lại dự án này từ đầu hay không
Đây là một dự án thú vị và ngầu, nhưng đáng tiếc là với tư cách portfolio, nó lại khiến năng lực của chính bạn bị đánh giá thấp đi
Ngoài ra, đã có khá nhiều ví dụ tương tự rồi win32.run
Trước đây tôi định đăng cái này lên nhưng không thành, nên cũng thấy tiếc
Giờ thấy mọi người đang thích thú với nó thì tôi vui lắm
Tôi mới tạo tài khoản HN nên giờ cũng muốn kiếm chút karma
(Tôi là mod)
Tôi đã đăng lại bài Show HN mà bạn vốn định đăng, và cũng gộp các bình luận vào rồi
Tôi cũng đánh dấu tài khoản của bạn là tài khoản bình thường để bạn khỏi lo bị bộ lọc spam chặn nữa
Mức độ hoàn thiện rất tuyệt! Tôi nghĩ bạn đã tái hiện rất tốt cả cảm giác XP lẫn tinh thần của thời kỳ đó
Nếu thật sự từng có một ứng dụng “trình tạo portfolio” cực kỳ chuyên nghiệp trên Windows XP, và đầu ra của nó đạt chất lượng như thế này, chắc mọi người đều sẽ công nhận đây là một sản phẩm tuyệt vời và đẹp mắt
Đây là một tác phẩm xuất sắc, vừa cho thấy kỹ năng của bạn, vừa tái hiện vẻ đẹp của Windows XP theo cách hiện đại và cũng mang tính lịch sử
Làm quá tốt luôn! Tác phẩm rất ấn tượng
Trên trình duyệt của tôi (Chrome 138, Windows 10), start menu hiện ra vài giây rồi lóe lên ngắn một cái và biến mất ngay
Độ hoàn thiện rất cao, kết quả thật sự xuất sắc
Là một người dùng XP, tôi thật sự rất thích tác phẩm này
Nếu soi kỹ một chút thì
Tôi xem đây là một lời tri ân, tức một ví dụ nâng cấp tinh tế khi trộn thẩm mỹ Windows XP cổ điển với một cách biểu đạt mới của thời nay
Việc tái diễn giải và kế thừa nghệ thuật, phong cách theo lối hiện đại mà vẫn tôn trọng cội nguồn là cách rất phổ biến để cảm quan thẩm mỹ tiến hóa
Tab taskbar — nhận xét đó đúng, và tôi đã bỏ rất nhiều thời gian để cố khớp phần này
Cuối cùng thì vẫn có chút khác biệt, nhưng tôi nghĩ mình đã làm được gần giống rồi
Những phần còn lại là quyết định thẩm mỹ có chủ đích. Thực ra có một khác biệt lớn mà có vẻ chưa ai nhắc đến
Khi kéo chọn các icon desktop, phần highlight trông gần với Windows 11 hơn là XP
Tôi cũng muốn cải thiện thêm chỗ đó về sau
Tác phẩm này rất đẹp, nhưng có hai điểm khiến tôi hơi tiếc
Thứ nhất là cảm giác “máy tính” chưa được sống dậy hoàn toàn. Ví dụ nếu gõ
dirtrong command line mà có thêm một tương tác vui nào đó thì sẽ thú vị hơn nhiềuThứ hai là chất lượng nội dung bên trong portfolio không theo kịp cảm giác mà website này tạo ra. Website thì rất chất lượng, nhưng khi xem các tác phẩm khác của bạn ở trong đó, chúng lại quá đơn giản và hơi trống trải
Nhìn chung vẫn là một dự án tốt
Tác phẩm thật sự rất tuyệt
Mỗi lần nhìn lại đều thấy nhớ phong cách của Windows XP
XP là phiên bản Windows duy nhất từng cố gắng theo đuổi sự “vui nhộn”, thậm chí còn có cả chú chó linh vật trong kết quả tìm kiếm
Thanh taskbar phía dưới cũng giống đồ chơi Fisher Price, và tôi cũng nhớ cả Clippy
Thật tiếc cho cái thời mà phần mềm chuyên nghiệp còn được phép vui tươi như vậy
Nói thêm, phong cách avatar của bạn gợi cảm giác như Simpsons hay Bob's Burgers nên khá ấn tượng
Đây là một tác phẩm ấn tượng, nhưng tôi nghĩ vẫn cần suy nghĩ sâu hơn
Giữa sao chép và sáng tạo luôn tồn tại một sự căng thẳng mang tính nền tảng
Đúng là nhiều tác phẩm sáng tạo bắt đầu từ những khuôn mẫu có sẵn. Ví dụ tiểu thuyết trinh thám thường có xác chết, chai rượu, những câu thoại dí dỏm như một công thức. Nhưng nghệ thuật thật sự nằm ở chỗ bạn tái diễn giải khuôn mẫu đó theo cách của riêng mình
Có thể giao cốt truyện cho AI, nhưng các lựa chọn, giọng điệu, va chạm và cái “sự hiện diện” thật sự, hay linh hồn của tác phẩm, vẫn phải do con người thêm vào
Ở đây tôi cảm thấy đang thiếu cái “sự hiện diện” đó
Dự án được làm tốt, nhưng nó đơn giản chỉ là Windows XP, nhìn đẹp nhưng phẳng
Tôi tôn trọng công sức và quá trình học hỏi của tác giả, nhưng cuối cùng nó vẫn giống một bản “chép lại”
Nếu tôi là nhân vật chính thì tôi sẽ xem đây là bước đầu tiên. “Đã sao chép xong rồi, vậy giờ mình có thể cải thiện gì? Có thể thay đổi phần nào, chấp nhận mạo hiểm ở đâu? Có thể cho thấy so sánh before & after không?”
Điều then chốt thật sự là tại sao lại dừng ở hàng nhái, sao không tiến thêm để vượt qua giới hạn của sao chép, cải thiện, mở rộng và biến nó thành của riêng mình
Khi cộng tác với AI, trong một thế giới đầy template vô tận và lặp lại cực nhanh, đây là câu hỏi nghiêm túc: làm sao để thể hiện điểm khác biệt của riêng mình, hay “linh hồn” của mình
(Nhân tiện, bài này cũng được Grammarly rà câu chữ, nên tôi nhớ đến câu nổi tiếng: “Một người phải biết giới hạn của mình”)
Một dự án mở rộng quy mô lớn, một dự án sao chép gọn gàng và đáng nhớ — sự kết hợp đó có thể hấp dẫn hơn với những người đang lướt nhanh qua hàng loạt portfolio
Nhưng tôi đồng ý rằng cuối cùng portfolio vẫn cần được đa dạng hóa một cách cân bằng
Tôi rất thích nó
Nếu soi kỹ một vài lỗi nhỏ của XP thì
Tôi xem đây là một lời tri ân đẹp, hoặc một cách diễn giải hiện đại cho phong cách cổ điển
Đó là quá trình tiến hóa chính thống, khi kết hợp thẩm mỹ cổ điển với cảm quan hiện đại để tạo ra thứ gì đó mới mà không đánh mất gốc rễ
Tab taskbar — nhận xét đó chính xác, tôi đã dành rất nhiều thời gian cho nó nhưng không thể làm giống hoàn toàn nên đành chấp nhận ở một mức nào đó
Những phần còn lại đều là quyết định thẩm mỹ. Thật ra có một chỗ mà chưa ai nhắc tới: khi kéo chọn icon desktop thì nó trông gần với phong cách Windows 11 hơn XP rất nhiều
Cá nhân tôi cũng nghĩ phần đó cần thay đổi
Đây là một tác phẩm rất đẹp, nhưng vẫn hơi thiếu cảm giác “giống máy tính thật”
Ví dụ nếu gõ
dirở dòng lệnh mà có thêm vài tương tác nho nhỏ thì sẽ vui hơn rất nhiềuĐiểm thứ hai là chất lượng nội dung của portfolio quá đơn giản nên không xứng với chất lượng của chính website
Nhìn chung vẫn là một dự án tốt
Tác phẩm thật sự rất tuyệt
Càng nhìn càng thấy nhớ phong cách thời Windows XP
XP là phiên bản Windows duy nhất từng theo đuổi sự “vui nhộn”, với chú chó dễ thương, taskbar như đồ chơi Fisher Price và cả Clippy đầy duyên dáng
Tôi nhớ cái thời mà phần mềm chuyên nghiệp vẫn còn được phép vui tươi như thế
Và avatar của bạn trông như phong cách Simpsons/Bob's Burgers nên rất ấn tượng
Dự án này thật sự rất tuyệt
Nó cho thấy kỹ năng, khả năng học hỏi, sự kiên trì và mức độ chú ý đến chi tiết của bạn
Khác với những người chỉ trích chuyện sao chép hay lệch chi tiết, tôi không nghĩ đó mới là điểm quan trọng
Đây là một dự án rất ngầu, chúc mừng bạn
Xin chào, tôi là một lập trình viên backend đang phát triển một portfolio rất giống với bài viết này. Dù vẫn đang trong quá trình chỉnh sửa hoàn thiện,
tôi cũng muốn để lại bình luận để xem mình có thể nhận được những góp ý thẳng thắn hay không.
Nếu việc để lại bình luận như thế này không có vấn đề gì, tôi sẽ đăng link portfolio.
+) Ngoài ra, tôi mới đến đây lần đầu nên cũng muốn hỏi liệu việc dùng văn phong ngắn gọn kiểu
~음có phải là quy tắc ở đây không?Không cần làm vậy đâu. Làm ơn, mong các anh chị lập trình viên đừng như thế. Thật ra tôi ghét đến mức phát bực khi phải nhìn kiểu đó, nhưng vì có nhiều thông tin hữu ích và đó là cách họ dùng để truyền đạt thông tin hiệu quả nên dù thấy khó chịu tôi vẫn xem. Nếu có thể chia sẻ thông tin bằng những câu từ tử tế, đàng hoàng thì tôi sẽ rất cảm kích.