Reach me at FacebookDuc Huynh

Personal Website Case Study

Lời mở đầu

Sau nhiều năm đi làm, mình nhận ra rằng case study là một trong những yếu tố thể hiện và phản ánh đúng nhất quá trình làm việc của một người, từ việc họ lên kế hoạch, triển khai và giải quyết vấn đề.Khi duyệt CV của các bạn UI, mình sẽ ưu tiên các bạn có bao gồm cả portfolio và case study. Portfolio thường sẽ chỉ cho chúng ta thấy được thành phẩm cuối của dự án. Tuy nhiên, nếu các bạn đã từng tham gia một dự án thực tế, rất ít khi dự án sẽ đi theo con đường thẳng từ đầu đến cuối. Phần lớn các shareholders đều sẽ có tiếng nói trong dự án và phần lớn họ sẽ là người có quyết định cuối cùng đối với sản phẩm của bạn. Case study sẽ như một bản log (từ mà các bạn Developer hay dùng) để lưu lại tất cả các thử thách và các quyết định để đi được tới thành phẩm cuối cùng. Bên cạnh đó, case study cũng chính là những bài học, những kinh nghiệm mà một người đúc kết được khi hoàn thành dự án.Bài viết này sẽ tập trung vào quá trình mình lên ý tưởng, chọn tech-stack, lập trình và các vấn đề gặp phải để hoàn thiện trang portfolio của mình.

Kế hoạch

Mình đã nhen nhóm ý tưởng để làm trang portfolio từ năm ngoái (2023) và trên thực tế mình đã từng hoàn thành version đầu tiên theo style brutalism. Tuy nhiên, ở thời điểm đó, website của mình chỉ có các animation căn bản cho button và link như hover. Điểm nhấn duy nhất cho website đó có lẽ là việc mình ứng dụng three.js vào phần Hero.

Phiên bản đầu tiên trang Portfolio của mình

Sau khi hoàn thiện trang web đó, mình quyết định không deploy mà sẽ tập trung củng cố lại các kiến thức mình còn thiếu về animation, css và kể cả three.js.Tuy nhiên, do công việc và học tập, tới tận tháng 5/2024 mình mới có thể bắt đầu tiến hành lên ý tưởng cho version 2. Ở lần lên ý tưởng này, mình đã bỏ qua bước thiết kế giao diện trên Figma mà trực tiếp tiến hành vừa lên ý tưởng và vừa lập trình. Đối với mình, tuy quyết định này đã kéo dài thời gian dự án ra hơn dự định nhưng do tính chất dự án là không có deadline nên mình tin là mình đã rút ra được nhiều bài học và hiểu sâu hơn về cả công việc của UI Designer và Frontend Developer. Mình sẽ nói rõ thêm về phần này ở các phần dưới.Rút kinh nghiệm từ version 1, mình đã note ra một số thứ mà mình muốn ứng dụng vào trang web lần này:- Hiểu rõ về quy trình render của React để hạn chế việc re-rendering.- Cải thiện CSS - hiểu sâu hơn về các thuật toán của display và position.- Tìm hiểu thêm về SVG và cách animate SVG.- Ứng dụng Bento Grid và cách responsive cho nó.- Vẫn sử dụng three.js cho phần Hero.- Hiểu rõ thêm về ambient occlusion map (AO map), cách bake AO map từ Blender và cách sử dụng với three.js.- Sử dụng framer-motion làm thư viện animation chính và cách ứng dụng layout animation.Có thể nói trang web hiện tại của mình đã phần nào đáp ứng được hầu hết các tiêu chí của mình. Tuy nhiên, cho những dự án tiếp theo, tiêu chí hàng đầu của mình sẽ là cách tối ưu về mặt performance cho các thiết bị ở tầm trung và thấp.

Tech Stack

Các công nghệ mình đã sử dụng trong dự án lần này

Để hoàn thành trang web này, mình đã dùng các công nghệ sau:

React là thư viện chính cho frontend

Radix UI để style

framer-motion cho animation

three.js cho phần 3D

Blender để dựng 3D và bake map

Figma để vẽ SVG và thiết kế gradient

Sketchfab để lấy model (mèo, và người chạy)

Mixamo để tạo animation người chạy

Ý tưởng

Khác với version 1, ở version 2 mình không làm Figma do ở thời điểm đó mình thực sự không hình dung được trang web mình sẽ như nào. Mình biết sẽ theo style tối giản (do mình không chuyên về thiết kế nên style càng phức tạp sẽ càng bộc lộ điểm yếu của mình). Bên cạnh đó, việc làm animation bằng Figma sẽ tốn kha khá thời gian và nếu mình cảm giác nếu một người chuyên về CSS thì sẽ có thể làm animation nhanh hơn so với làm bằng Figma. Bên cạnh đó, animation trên Figma sẽ phải sử dụng prototype để xem nên sẽ lại tốn thêm 1 bước. Lưu ý, đây là quyết định cá nhân của mình cho dự án cá nhân của mình. Đối với 1 dự án thực tế, mọi người vẫn nên làm trên Figma (hoặc các phần mềm làm hiệu ứng khác) để phía Developer có thể hình dung ra được.Mình muốn trang portfolio lần này sẽ phần nào thể hiện được bản thân mình (sưu tập bàn phím cơ, thích chạy bộ và rất thích nuôi mèo). Đó cũng là lý do mình quyết định làm phần Hero theo phong cách hiện tại.Mình cũng rất yêu thích việc các designer nước ngoài sử dụng để tạo điểm nhấn cho trang web của mình nên mình cũng đồng thời lên ý tưởng và sử dụng khá khá (có lẽ quá nhiều) ở các mục như Contact và Projects.Bento Grid đã nổi lên thời gian gần đây nhưng phần lớn là dưới dạng Figma file và không có phần responsive ở các thiết bị. Mình luôn thắc mắc nếu một bạn UI Designer handoff file Figma cho phía Developer mà không có phần responsive cho Bento Grid thì sao. Đây là một vấn đề quan trọng do khách hàng và cả người dùng đều sẽ sử dụng thiết bị với kích cỡ màn hình khác nhau, hoặc cả với kích cỡ màn hình giống nhau thì số điểm ảnh (pixel) và tỷ lệ điểm ảnh (pixel ratio) cũng khác nhau.

Những lưu ý khi bắt đầu

Về React

Mình nhận ra một điều là tất cả quá trình mình hoàn thiện website của mình đều gói gọn trong ba chữ: trial and error.

0.306Re-rerendering

0.915Không re-rerendering

Một ví dụ đơn giản về việc re-rendering

Mình đã gặp kha khá vấn đề về việc re-rendering do mình không hiểu rõ về quy trình render của React. Đối với các website không có hiệu ứng thì mọi người có thể dễ dàng bỏ qua việc này, tuy nhiên, đối với các website có nhiều hiệu ứng thì việc re-rendering sẽ làm cho các hiệu ứng bị giật và đồng thời ảnh hưởng kha khá đến performance. Vì vậy, việc hiểu rõ quy trình rendering của React và cách quản lý state của React là vô cùng quan trọng. Bên cạnh đó, một tips khá hay là khi mình cần chủ động kích hoạt các hiệu ứng thì việc sử dụng key của React là vô cùng hiệu quả.Việc tách component và sắp xếp state của các component cũng vô cùng quan trọng. Tùy theo cách mà các bạn sắp xếp state (đặt ở component cha hay con) sẽ đồng thời ảnh hưởng đến hiệu năng trang web của bạn. Rule of thumb là cứ đặt state ở sát với component mà bạn cần quản lý nhất có thể để tránh việc re-rendering các component mà mình không mong muốn.

Về three.js

Model đơn giản sử dụng boxGeometry và meshNormalMaterial

Để nói hết về three.js thì có lẽ đó sẽ cần một series bài. Một mục thì khó có thể để mình nói hết được trong bài kì này. Một số lưu ý mà mình có thể đưa ra là để có thể ứng dụng three.js vào trong website thì mọi người sẽ cần phải hiểu rõ được về các yếu tố sau:

vector chuyển động

euler và quaternion: Xoay sử dụng

geometry bản chất của

mesh bản chất của

materials các loại

lerp animation

ánh sáng và đổ bóng

vertex shader và fragment shader

Learning curve của three.js là vô cùng lớn nên các bạn cần phải chuẩn bị tinh thần khi muốn ứng dụng three.js trong dự án.Thật ra thì chỉ xem căn bản vẫn có thể ứng dụng được nhưng mình chắc chắn bạn sẽ gặp vấn đề khi muốn tinh chỉnh những cái không có sẵn.Ở trong dự án lần này mình chỉ sử dụng các phần căn bản nhưng nếu bạn bấm vào phần projects thì mình đã từng làm một dự án cá nhân để tham gia challenge mà 90% là sử dụng three.js. Mình đã phải ứng dụng kha khá shader để có thể tạo ra hiệu ứng mà mình mong muốn. Đồng thời mình cũng đã phải xem về chuyển động trong môi trường 3D để có thể tích hợp việc điều khiển chuyển động.

shaderMaterial để làm hiệu ứng lửa

shaderMaterial để làm hiệu ứng hologram

shaderMaterial để làm hiệu ứng bề mặt cho hành tinh

Dành cho các bạn UI Designer, three.js là một thư viện được dùng để đưa các mô hình 3D lên môi trường web. Minh tin đây sẽ là xu hướng của tương lai. Mình thấy các trang web của nước ngoài ứng dụng three.js khá nhiều, chỉ là hiện tại chưa phổ biến lắm tại Việt Nam. Các bạn có thể tìm hiểu thêm về các tools để tạo mô hình 3D như Blender hoặc Spline. Tuy learning curve sẽ khó nhưng mình tin chắc là việc nắm vững các phần mềm này sẽ giúp các bạn ghi điểm trong mắt nhà tuyển dụng.

Về framer-motion

spring

linear

ease

Sự khác biệt trong chuyển động giữa spring, linear và easing

Có thể nói việc sử dụng framer-motion đã giúp mình vừa học và hiểu rõ mối liên hệ giữa UI designer khi thiết kế hiệu ứng và handoff cho Developer.Để ứng dụng framer-motion thì việc sử dụng thuần thục CSS là rất cần thiết do bạn có rất nhiều cách để đạt được cùng một loại hiệu ứng nhưng đâu là cách tối ưu nhất thì chỉ hiểu rõ về CSS bạn mới có thể tối ưu được về mặt hiệu năng.Bên cạnh đó, nếu một hiệu ứng có thể animate được bằng CSS thì lời khuyên của mình là nên sử dụng CSS. Chỉ khi bạn muốn ứng dụng spring physics cho animation của mình thì bạn mới cần đến framer-motion. Đôi khi bezier-curve là đủ để có thể làm hiệu ứng của bạn trông tự nhiên hơn.Một điều quan trọng mà mình học được khi sử dụng framer-motion là không nên để framer-motion animate width hoặc height mà có khả năng ảnh hưởng đến toàn bộ layout của web. Mình đã mất 2 ngày để tìm ra lý do vì sao animation của mình gây ra hiện tượng giật lag cho toàn website khi truy cập bằng điện thoại. Nguyên nhân là do khi thay đổi width hoặc height của một component mà ảnh hưởng đến layout của toàn bộ website thì browser sẽ phải tính toán lại toàn bộ width/height của các component khác và tùy theo tần số quét màn hình mà số phép tính browser phải tính là vô cùng lớn.Về phía các bạn UI Designer, việc thiết kế các animation có thể sẽ không thuộc về scope của các bạn. Tuy nhiên, đối với các hiệu ứng đơn giản như sử dụng opacity hay color thì các bạn vẫn nên nắm được khái niệm của timing function. Kể cả khi các bạn làm hiệu ứng cho prototype trong Figma, các bạn đều sẽ phải chọn timing function (ease-in, ease-out,...). Việc tinh chỉnh timing function sẽ giúp cho hiệu ứng của các bạn nhìn mượt hơn so với việc sử dụng timing function mặc định (tuyến tính - linear). Nâng cao hơn, các bạn có thể tìm hiểu thêm về spring physics. Nói một cách đơn giản nhất, khác với easing function, sử dụng spring physics là khi các bạn phải tinh chỉnh các tham số như mass, tension và friction để tạo ra các timing function. Một khi tìm được các tham số phù hợp, spring physics sẽ đem lại sự tự nhiên cho hiệu ứng của bạn rất nhiều. Đây là một concept khá nâng cao nên có lẽ mình sẽ viết một bài blog riêng để đi sâu hơn về vấn đề này.Một tip nhỏ là các bạn nên đồng bộ tất cả các hiệu ứng của mình sử dụng cùng một timing function. Trừ khi các bạn có ý đồ cụ thể để sử dụng time function khác nhau cho từng hiệu ứng khác nhau, nếu không, trang web của bạn sẽ chuyên nghiệp hơn rất nhiều nếu các hiệu ứng đều được đồng bộ.

Về grid layout

Grid layout ở những breakpoints khác nhau

Bản chất của Bento Grid là grid layout. Do vừa biết chút về UI và vừa biết chút về Developer, một lời khuyên chân thành từ mình là UI cũng cần hiểu về box model và các loại layout trong CSS. Một UI Designer hiểu được các kiến thức này mình tin sẽ làm việc hiệu quả với Developer gấp nhiều lần so với các UI designer khác.Quay lại vấn đề về responsive của Bento Grid, cho đến thời điểm hiện tại thì việc các bạn UI designer phải làm là cho phía Developer thấy được Bento Grid sẽ có responsive behavior như thế nào ở các size thiết bị khác nhau. Minh tin chắc là Bento Grid mà bạn thiết kế cho giao diện máy tính sẽ không thể nào hiển thị đầy đủ trên điện thoại.Đối với các bạn UI Designer mà mình từng có cơ hội làm việc cùng, mình luôn nhấn mạnh concept của responsive behavior. Các bạn thường lầm tưởng về việc chỉ thiết kế cho 3 màn hình (desktop, tablet và mobile), nhưng trên thực tế, việc responsive của width và height không chỉ đơn giản là tăng hoặc giảm. Cùng với sự xuất hiện của clamp, min, max, minmax kết hợp với các đơn vị như px, rem, %, vw, vh, ... sẽ tạo ra hằng hà sa số các tổ hợp ảnh hưởng đến responsive behavior trên các thiết bị khác nhau.Chỉ khi các bạn nắm vững về mental model của responsive behavior, các bạn mới có thể truyển tải hiệu quả việc responsive trong thiết kế của mình cho các Developer.

Về SVG

Icon switch bàn phím được tạo từ line, rect và polygon

Việc animate SVG sử dụng code (còn gọi là SMIL) là hoàn toàn khả thi khi bạn thiết kế sử dụng các thuộc tính line, polyline, polygon, và rect.Các hiệu ứng svg mà mình sử dụng trong portfolio lần này phần lớn là mình code chay svg để có thể hoàn toàn kiểm soát animation sử dụng SMIL mà không cần phải dùng Lottie hay After Effect. Việc hiểu rõ SMIL sẽ giúp các bạn rất nhiều trong việc tạo hiệu ứng cho SVG.Trong tương lai, tùy theo nhu cầu của cộng đồng, mình sẽ cân nhắc làm thêm một series riêng về việc code SVG để có thể dễ dàng kiểm soát phần animation.Dành cho các bạn UI Designer, mình sẽ chỉ có một lời khuyên là các bạn nên sử dụng SVG đồng nhất từ một thư viện icon. Việc sử dụng nhiều loại icon từ các thư viện khác nhau sẽ làm cho các trang web của bạn nhìn không chuyên nghiệp. Vậy nếu icon bạn cần không có trong thư viện bạn dùng thì phải xử lý như thế nào? Đối với mình, nếu thư viện icon mình dùng không có icon mình muốn, mình sẽ sử dụng pen tool của Figma và tìm các hình ảnh tương đồng với icon mà mình muốn sử dụng rồi trace theo nét vẽ. Tuy cách này sẽ hơi mất thời gian nhưng mình có thể đảm bảo là các icon của mình đều sẽ đồng nhất.

Quá trình phát triển

Hero section

Phần hero của trang portfolio

Vì đây là phần đầu tiên mà mọi người sẽ nhìn thấy khi vào trang của mình nên mình đã dành nhiều thời gian nhất. Ý tưởng của mình là để mọi người sẽ phần nào biết được các sở thích của mình.Dự định ban đầu của mình sẽ chỉ là làm mô hình phòng của mình dưới dạng isometric và đặt những phần tương tác ở trong mô hình đó. Tuy nhiên, do việc dựng 3D phòng mình sẽ kéo dài thời gian dự án ra rất nhiều và việc đảm bảo độ mượt của trang web trên các thiết bị yếu sẽ rất khó khăn nên mình quyết định tách ra làm 4 model nhỏ.Đối với phần UI, mình chọn kiểu thiết kế khá phổ biến với CTA ở phía trên và Hero image ở phía dưới. Đối với các trang web khác thì khi bạn nhấn vào Button ở phía dưới CTA thì sẽ được chuyển tới trang khác, chuyển đến section khác hoặc chuyển hình ảnh Hero.Cho trang portfolio của mình, Button ở mục này được sử dụng để chuyển các 3D model đại diện cho các sở thích của mình. Bên trong button là các icon cùng với animation sẽ được trigger khi nhấn vào các nút. Các animation mình tạo cho các icon chủ yếu được liệt vào micro-interaction để tạo điểm nhấn và không làm người xem phân tâm nên chủ yếu sẽ chỉ animate vị trí, scale và opacity.Về màu sắc, ý định ban đầu của mình sẽ chỉ là sử dụng hai màu trắng đen. Tuy nhiên, trong quá trình phát triển, mình nhận ra mình muốn tạo điểm nhấn cho những sở thích của mình. Nói một cách hoa mỹ thì nếu mình không có sở thích thì sẽ chỉ gồm hai màu trắng đen, và khi có sở thích thì từng sở thích khác nhau sẽ đem đến các sắc màu khác nhau. Có thể nó sẽ hơi cliche nhưng mình cảm nhận là nó sẽ giúp cho trang web của mình không quá một màu.Ý định đằng sau việc đổi font chữ tên mình khi bấm vào từng Button cũng mang hàm ý là từng sở thích sẽ tạo ra một phiên bản khác của mình. Ban đầu, mình định sẽ sử dụng các font chữ nào có thể thể hiện sát nhất với sở thích đó của mình (kiểu như là khi bấm vào Cat Lover thì sẽ có font chữ nào có con mèo). Tuy nhiên mình đã từ bỏ ý định đó sau 1 tiếng tìm kiếm trên Google 😂.Đối với các model hiện tại, model bàn làm việc của mình hiện đang là model tĩnh, trong tương lai có thể mình sẽ thêm video texture cho màn hình và shader material để làm khói cho ly cà phê. Model của developer thì nếu bạn truy cập bằng máy tính thì có thể gõ các chữ cái trên bàn phím thì sẽ thấy các key tương ứng trong model mình gõ theo. Còn đối với model của runner thì mình đã sử dụng Mixamo để thêm animation rồi bake animation trong Blender để có thể chạy trong three.js.Một lưu ý dành cho các bạn Dev là ban đầu mình đã có dự định sử dụng clip-path để animate chuyển gradient phía sau khi bấm vào từng Button. Tuy nhiên, do mình sử dụng requestFrameAnimation trong three.js cùng với motion component của framer-motion nên mình nghĩ đã có sự xung đột ở đâu đó do không cùng frame-rate. Mình sẽ cần đào sâu thêm vấn đề này để tìm ra cách khắc phục.

Services section

Phần services của trang portfolio

Đây là phần mà mình quyết định sử dụng Bento Grid. Như mình đã đề cập, bản chất của Bento Grid là grid layout của CSS. Chỉ cần bạn Developer có thể thấy được các thiết kế Bento Grid ở trên các thiết bị khác nhau thì cũng sẽ dễ dàng quy định được. Chỉ là phần lớn các thiết kế Bento Grid mà mình thấy thường chỉ được làm cho giao diện desktop.Trong phần này, mình đã có một ý tưởng là dùng api của chatGPT để đưa ra lời gợi ý dựa trên số lượng dịch vụ mà mọi người hover vào, tuy nhiên, việc kiểm soát số lượng token sẽ rất khó khăn nên mình quyết định sử dụng if/else để có 2 version cho câu suggestion ở khung giữa.Về phần UX thì nếu đây là một dự án thực tế mình sẽ không bắt người xem phải hover vào từng icon rồi mới hiện ra tên dịch vụ, như vậy sẽ tốn thêm bước và dễ dàng gây overload cho người xem.Tuy nhiên, do đây là dự án cá nhân và mình muốn sử dụng framer-motion cùng spring physics để animate các icon nên mình đã quyết định làm như hiện tại. Nếu các bạn để ý chuyển động của các icon thì sẽ thấy được điểm khác biệt của spring physics là các icon sẽ có đổ nảy (bounce) nhất định chứ không phải chỉ di chuyển tuyến tính từ a đến b.

Projects section

Phần project của trang portfolio

To be honest, mình không hề lên ý tưởng trước cho hiệu ứng của phần này. Mình biết mình sẽ sử dụng Card để thể hiện các dự án mình đã từng có cơ hội tham gia, tuy nhiên hiệu ứng Card xuất hiện, công thức xoay được tính bằng số lượng dự án truyền vào và di chuyển lên khi hover đều là nhờ quá trình trial and error.

Hiệu ứng sau khi click vào một dự án

Phần này mình đã ứng dụng một tính năng gọi là layout animation của framer-motion. Đây có thể nói là lợi thế của một bạn UI Designer khi biết framer-motion, bởi sẽ rất khó để tái hiện hiệu ứng này trên Figma. Ở đây, mình đã sử dụng shadow với các giá trị khác nhau để tạo hiệu ứng về độ cao. Khi các dự án xuất hiện, người xem sẽ có cảm giác Card đang lơ lửng trên không. Khi người xem bấm vào dự án bất kì, các Card sẽ xếp lại, đồng thời, giá trị của shadow sẽ thay đổi để tạo cảm giác Card rơi xuống và mở rộng ra để thể hiện thông tin của dự án.Về bản chất, đây hoàn toàn là hai component khác nhau được liên kết với nhau bằng cùng layoutId trong framer-motion.

FAQs section

Phần faq của trang portfolio

Phần này thì khá căn bản, tuy nhiên mình cũng đã học được bài học mà mình đã đề cập ở trên.Bài học thứ nhất là nếu hiệu ứng có thể thực hiện được bằng CSS thì mình nên sử dụng CSS. Điều này sẽ giúp cải thiện tốc độ cho website rất nhiều.Bài học thứ hai là hạn chế các hiệu ứng sẽ có thể ảnh hưởng đến width và height của các component khác. Đây cũng là lỗi mà mình đã gặp và tốn khá nhiều thời gian của mình để tìm ra nguyên do.Hướng giải quyết là mình sẽ để dành một khoảng thở ở phía dưới để khi các component mở rộng ra sẽ không ảnh hưởng đến component dưới.

CTA section

Phần cta của trang portfolio

Đây có lẽ là phần mình ứng dụng framer-motion nhiều nhất. Từ việc section xuất hiện khi mình scroll xuống, layout animation giữa Text và Button và đồng thời cho Button khi người dùng bấm vào.Hiệu ứng bấm và mở rộng ra thành Card được mình lấy cảm hứng từ việc Framer cho ra mắt Form và mình muốn code để có thể hiện lại hiệu ứng đó. Thiết kế thì cũng khá rõ là mình sử dụng thiết kế của thẻ tín dụng.Một chi tiết nhỏ là animation của mũi tên và dấu x là hoàn toàn được code bằng SMIL chứ không sử dụng Lottie (do phí khá mắc) và After Effect (do mình không biết dùng).

Tạm kết

Trước khi bắt đầu viết, mình đã nghĩ có thể gói gọn tất cả trong một bài. Tuy nhiên, chỉ khi bắt đầu viết mình mới nhận ra điều này là không thể. Tùy theo khối lượng công việc, mình sẽ ra tiếp phần sau để có thể cùng chia sẻ những điều mình đã học được với mọi người.Mình vẫn còn khá nhiều ý tưởng để cải thiện trang portfolio hiện tại nhưng một bài học mình học được là việc cho ra một sản phẩm chưa hoàn thiện quan trọng hơn việc cố gắng chờ đến khi hoàn thiện sản phẩm của mình.Mình khuyến khích tất cả các bạn UI Designer sẽ không chỉ dừng lại ở việc hoàn thiện portfolio mà đồng thời cũng sẽ ghi case study cho từng dự án mà mình đã thực hiện. Mình tin nhà tuyển dụng sẽ rất ấn tượng nếu có thể đọc được case study của các bạn.Sau khi đọc lại bản nháp của bài viết, mình nhận ra có thể sẽ có nhiều từ mình dùng, hoặc nhiều vấn đề mình đề cập mà nếu các bạn UI Designer không chuyên về lập trình sẽ khó hiểu. Nếu các bạn đang thắc mắc liệu mình có phải biết tất cả những vấn đề này không, thì câu trả lời là không.Khi đi làm, phần lớn công ty sẽ có mỗi người chuyên môn ở từng vị trí và giải quyết vấn đề cho bạn. Tuy nhiên, mình tin là không có lý do gì mà một bạn UI Designer muốn phát triển bản thân lại ngại không muốn tìm hiểu thêm kiến thức mới để hỗ trợ công việc của mình phải không nào? Là một người tuyển dụng, mình cũng đồng thời đánh giá rất cao nếu một bạn UI Designer có thêm những skillset để có thể giải quyết công việc một cách tốt hơn.Cảm ơn mọi người vì đã đọc và hi vọng có cơ hội cùng làm việc với mọi người!

Made withand lots of