<p>Mình là Hưng đến từ ABC Software Solutions Company.&nbsp;<br>Trong thời gian gần đây, mình có cơ hội thử trải nghiệm xây dựng một trang web trên nền tảng WIX và mình muốn chia sẻ lại với các bạn những lợi ích mà nó mang lại, cùng với trải nghiệm cá nhân của mình và những kinh nghiệm mà mình đã rút ra.</p><h2>Wix là gì?</h2><p>Wix là một nền tảng xây dựng website trực tuyến (website builder) cho phép người dùng tạo và quản lý các trang web một cách dễ dàng mà không cần kiến thức về lập trình. Wix cung cấp một giao diện kéo và thả (drag-and-drop) cho phép người dùng chọn và sắp xếp các thành phần và nội dung trên trang web theo ý muốn.<br>Người dùng có thể truy cập vào Wix thông qua trình duyệt web và bắt đầu xây dựng trang web của mình từ các mẫu có sẵn hoặc bắt đầu từ đầu với giao diện trống. Wix cung cấp một loạt các công cụ và tính năng để tùy chỉnh và thiết kế trang web, bao gồm cả việc thay đổi giao diện, sắp xếp các thành phần, tạo trang sản phẩm, thêm các tính năng như blog, cửa hàng trực tuyến, form liên hệ, và nhiều hơn nữa.<br>Wix cũng cung cấp các tính năng quản lý nội dung và phân tích thống kê để người dùng có thể theo dõi hiệu suất của trang web và tương tác với khách truy cập. Ngoài ra, Wix cũng hỗ trợ tích hợp các dịch vụ bên thứ ba như công cụ tối ưu hóa công cụ tìm kiếm (SEO), email marketing, tích hợp mạng xã hội và nhiều hơn nữa.<br>Với Wix, người dùng không cần phải có kiến thức về mã hóa hay thiết kế web phức tạp, và có thể tạo ra một trang web chuyên nghiệp và hấp dẫn trong thời gian ngắn.</p><h2>Trải nghiệm của mình</h2><p>Với vai trò là một UI/UX designer mình đến với Wix thông qua một yêu cầu của khách hàng về xây dựng website B2B Landing page. Mình được tạo điều kiện thời gian khoản gần 2 tuần để tìm hiểu và thực hành. Trước đây mình đã có kinh nghiệm xây dựng website bằng WordPress với việc áp dụng các plugin như Elementor, Flatsome, Woocommerce,...Việc làm việc trên Wix lần này có một số điểm tương đồng với WordPress đã làm cho mình cảm thấy thú vị hơn, đồng thời cung cấp cho bản thân mình nhiều kiến thức mới và thú vị hơn về nền tảng này. Dưới đây là những gì mình đã tìm hiểu được về Wix.</p><h3>Ưu điểm của Wix</h3><p>Wix tỏa sáng với một loạt các tính năng đáng chú ý. Với sự thu hút của một đám đông người dùng, Wix gây ấn tượng bằng những ưu điểm nổi bật sau:</p><ul><li><strong>Giao diện dễ sử dụng:</strong> Wix được thiết kế với giao diện người dùng thân thiện và dễ dàng tiếp cận. Người dùng có thể tạo và chỉnh sửa trang web một cách đơn giản thông qua công cụ kéo và thả.</li><li><strong>Thiết kế linh hoạt:</strong> Wix cung cấp nhiều mẫu và giao diện đẹp mắt để người dùng lựa chọn. Bên cạnh đó, người dùng có thể tùy chỉnh bố cục, màu sắc, phông chữ và hình ảnh theo ý muốn, giúp tạo ra trang web độc đáo và phù hợp với ý tưởng của mình.</li><li><strong>Tích hợp tính năng mạnh mẽ:</strong> Wix đi kèm với nhiều tính năng tích hợp như blog, cửa hàng trực tuyến, tích hợp mạng xã hội, hỗ trợ SEO và nhiều tính năng khác. Điều này giúp người dùng dễ dàng xây dựng và quản lý trang web theo nhu cầu của mình.</li><li><strong>Đáp ứng trên nhiều thiết bị:</strong> Trang web được xây dựng trên Wix tự động thích ứng với các thiết bị khác nhau như desktop, điện thoại di động và máy tính bảng. Điều này đảm bảo trải nghiệm người dùng tốt trên mọi nền tảng.</li><li><strong>Hỗ trợ khách hàng tận tâm:</strong> Wix cung cấp các tài liệu hướng dẫn chi tiết, trung tâm hỗ trợ và diễn đàn cộng đồng để hỗ trợ người dùng. Bạn có thể tìm thấy sự giúp đỡ và giải đáp thắc mắc nhanh chóng khi cần thiết.</li></ul><h3>Một số nhược điểm của Wix</h3><p>Bên cạnh những ưu điểm, Wix cũng có một số nhược điểm cần lưu ý:</p><ul><li><strong>Giới hạn tùy chỉnh mã nguồn: </strong>Wix không cho phép truy cập và chỉnh sửa mã nguồn trực tiếp. Người dùng chỉ có thể thực hiện tùy chỉnh thông qua giao diện người dùng. Điều này hạn chế sự linh hoạt và khả năng tùy chỉnh cao hơn của trang web.</li><li><strong>Giới hạn mở rộng tính năng:</strong> Wix có một số ứng dụng và tiện ích mở rộng trong Wix App Market, nhưng không phải tất cả các tính năng mà bạn có thể tìm thấy trên nền tảng phát triển web chung. Điều này có thể khiến việc đáp ứng những yêu cầu đặc biệt hoặc tích hợp các công cụ bên ngoài trở nên khó khăn hơn.</li><li><strong>Phí dịch vụ và giới hạn băng thông:</strong> Một số tính năng và tài nguyên mở rộng của Wix chỉ có sẵn trong các gói dịch vụ trả phí. Một số gói dịch vụ cũng có giới hạn về băng thông, điều này có thể ảnh hưởng đến khả năng tải trang nhanh chóng và xử lý lưu lượng truy cập lớn.</li><li><strong>Quảng cáo Wix: </strong>Trong phiên bản miễn phí, Wix hiển thị quảng cáo của chính họ trên trang web của bạn. Để loại bỏ quảng cáo này, bạn cần nâng cấp lên các gói dịch vụ trả phí.</li><li><strong>Khó khăn với di chuyển nền tảng: </strong>Nếu bạn muốn chuyển đổi từ Wix sang một nền tảng khác, quá trình di chuyển có thể gặp khó khăn. Việc chuyển đổi có thể mất thời gian và công sức để tùy chỉnh lại trang web trên nền tảng mới.</li></ul><p>Tuy nhiên, nhược điểm này không ảnh hưởng đến khả năng Wix cung cấp một giải pháp xây dựng trang web nhanh chóng và dễ dàng cho người dùng không có kỹ năng lập trình.</p><h3>So sánh Wix và WordPress</h3><p><br>Sau khoản thời gian tìm hiểu về Wix, mình nhận ra Wix và WordPress sẽ có nhiều điểm khác biệt, sau đây là một số điểm cần quan tâm:<br><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/WIX_VS_WP_b34d13fea7.png" alt="WIX VS WP.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_WIX_VS_WP_b34d13fea7.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_WIX_VS_WP_b34d13fea7.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_WIX_VS_WP_b34d13fea7.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_WIX_VS_WP_b34d13fea7.png 1000w," sizes="100vw"></p><h4><strong>Thiết kế và bố cục</strong></h4><p>Wix và WordPress đều cung cấp một loạt các mẫu giao diện để bạn lựa chọn. Wix có hơn 500 mẫu được thiết kế sẵn, phù hợp với nhiều ngành nghề khác nhau. Các mẫu này có giao diện trực quan và bạn có thể dễ dàng tùy chỉnh bố cục và công cụ theo ý muốn. Tuy nhiên, một điểm lưu ý là khi mình đã chọn một mẫu giao diện trên WIX, sẽ không thể thay đổi sang mẫu khác. Thay vào đó, mình phải tiếp tục tùy chỉnh bố cục và các thành phần trên mẫu đã chọn.<br>WordPress cũng mang đến cho người dùng một thư viện đa dạng với hàng nghìn mẫu giao diện, bao gồm cả miễn phí và có phí. Một điểm khác biệt với Wix là WordPress cho phép dễ dàng tùy chỉnh lại mẫu giao diện đã chọn bằng cách sử dụng các theme và plugin khác. Điều này mang lại cho người dùng một một mức độ linh hoạt cao hơn trong việc tạo ra trang web độc đáo và phù hợp với mục tiêu hướng đến.<br>Dù là Wix hay WordPress, cả hai nền tảng đều cung cấp các công cụ và tùy chọn tùy chỉnh để bạn tạo ra một trang web đẹp mắt và chuyên nghiệp. Quyết định lựa chọn giữa hai nền tảng này phụ thuộc vào nhu cầu và mục tiêu của bạn. Nếu bạn muốn sự đơn giản và dễ sử dụng, cùng với một số mẫu giao diện sẵn có để tùy chỉnh, Wix là một sự lựa chọn tốt. Ngược lại, nếu bạn mong muốn sự linh hoạt và khả năng tùy chỉnh cao hơn, WordPress sẽ là một lựa chọn phù hợp, mặc dù có đôi chút đòi hỏi kiến thức về mã hóa và quản lý.</p><h4><strong>Tính trải nghiệm</strong></h4><p>Wix sở hữu rất nhiều công cụ được thiết kế thông minh và vô cùng dễ sử dụng. Thậm chí với những người hoàn toàn không am hiểu về code hay thiết kế website vẫn có thể dùng được.<br>Trong khi đó, WorPress lại có visual editor giúp viết nội dung và chỉnh sửa theme một cách nhanh chóng, dễ dàng. Tuy nhiên, với những tính năng trong WordPress, bạn cần phải tốn nhiều thời gian và công sức để tìm hiểu.</p><h4><strong>Plugin/App</strong></h4><p>Nền tảng Wix hiện tại đang có khoảng hơn 500 app hỗ trợ với những chức năng như: nhận xét, thư viện, theme biểu mẫu liên hệ,… Phần lớn các app này đều được miễn phí.<br>Trong khi đó, số lượng plugin của WordPress đã lên tới con số 55.000 chưa kể hàng nghìn app có trả phí khác. <br>Tóm lại, tính tới thời điểm hiện tại, nếu so về sự tương quan giữa chi phí – lượng tính năng, tài nguyên, thiết kế bố cục, plugin/app thì WordPress vẫn đang chiếm nhiều ưu thế hơn hẳn. Tuy nhiên, Wix vẫn được đánh giá cao hơn bởi tính dễ sử dụng cho người mới.</p><h3>Có nên sử dụng Wix?</h3><p>Nền tảng Wix đơn giản và dễ sử dụng, ngay cả cho những người không có nhiều kiến thức về lập trình. Mọi người có thể bắt đầu sử dụng Wix mà không cần mua hosting và domain riêng. Điều này làm cho Wix trở thành lựa chọn hợp lý cho những người không muốn đầu tư quá nhiều về mặt kỹ thuật và tài chính.<br>Nếu bạn không am hiểu sâu về công nghệ và không muốn chi tiền mua hosting và domain, Wix là sự lựa chọn phù hợp. Bạn có thể tạo ra một trang web chuyên nghiệp theo yêu cầu mà không cần quá nhiều khó khăn. Tuy nhiên, nếu bạn đang xây dựng một trang web lớn hơn với quy mô phức tạp hơn, WordPress là sự lựa chọn tốt hơn. WordPress cung cấp nhiều tính năng và khả năng tùy chỉnh mạnh mẽ hơn, đồng thời cho phép bạn sử dụng tên miền riêng và khai thác các tính năng nâng cao.<br>Đó là những kiến thức cơ bản về nền tảng Wix và cách sử dụng công cụ này để tạo ra một trang web đơn giản. Tuy nhiên, cũng cần lưu ý rằng Wix còn có một số hạn chế. Nếu bạn chỉ cần một trang web đơn giản hoặc không có nhiều kiến thức chuyên sâu, thì Wix là một lựa chọn an toàn và tiện lợi.</p><p><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Should_use_WIX_08197ecde3.png" alt="Should use WIX_.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Should_use_WIX_08197ecde3.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Should_use_WIX_08197ecde3.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Should_use_WIX_08197ecde3.png 750w," sizes="100vw"></p><h2>Kinh nghiệm mình có được</h2><p>Dù có nhiều lợi ích, mình cũng gặp một số thách thức trong quá trình xây dựng trang web trên Wix. Một trong số đó là giới hạn của các mẫu thiết kế có sẵn, khiến mình phải tìm cách tùy chỉnh để đáp ứng đúng yêu cầu của dự án. Tuy nhiên, mình đã vượt qua các thách thức này bằng cách tìm hiểu kỹ càng và tận dụng các tính năng linh hoạt của Wix.<br>Trải nghiệm xây dựng website trên Wix đã mang lại cho mình nhiều bài học quý giá. Mình nhận thấy rằng việc nắm vững cách sử dụng một công cụ thiết kế web quan trọng như Wix giúp mình tăng cường khả năng thực hiện các dự án trong tương lai. Mình cũng nhận ra tầm quan trọng của việc tối ưu hóa trải nghiệm người dùng và tạo ra một thiết kế hợp lý để đáp ứng nhu cầu của khách hàng.<br>Tổng kết lại, trải nghiệm xây dựng trang web trên Wix đã mang lại cho mình nhiều kiến thức và kỹ năng quý giá trong lĩnh vực UI/UX design. Mình đã hiểu rõ hơn về lợi ích và hạn chế của Wix, cũng như cách tùy chỉnh và linh hoạt để tạo ra một trang web đẹp và hấp dẫn. Qua khoản thời gian này, mình biết rằng việc không ngừng học hỏi và thử nghiệm mới sẽ giúp mình phát triển hơn về những công nghệ mới cũng như nâng cao tư duy và sáng tạo, mang đến người dùng những sản phẩm tuyệt vời.<br>Mình hy vọng blog này đã mang lại cho các bạn những thông tin hữu ích và động lực để khám phá thế giới của thiết kế website. Hãy tiếp tục duy trì đam mê và sáng tạo, luôn khám phá những công nghệ mới và không ngừng học hỏi.&nbsp;<br>Một lần nữa, xin chân thành cảm ơn và hy vọng rằng chúng ta sẽ tiếp tục gặp gỡ trong những bài viết và chia sẻ tương lai.&nbsp;<br>Hẹn gặp lại!</p>

Wix mang lại sự dễ dàng và linh hoạt. Với nhiều mẫu giao diện thiết kế sẵn và công cụ tùy chỉnh, bạn có thể tạo ra một trang web đẹp và chuyên nghiệp một cách nhanh chóng và dễ dàng.

Trải nghiệm xây dựng website trên Wix

<p>Xin chào !!&nbsp;<br>Mình là Hưng đến từ ABC Software Solutions Company.&nbsp;</p><p>Mình muốn chia sẻ về trải nghiệm của mình với vai trò UI/UX designer trong những lần gặp gỡ và làm việc trực tiếp với khách hàng. Đó là một trải nghiệm đầy mới mẻ, nhưng cũng rất hữu ích.&nbsp;</p><h2>Tầm quan trọng khi làm việc trực tiếp với khách hàng</h2><p>Trước đây, các giao diện mà mình thiết kế thường dựa trên ý tưởng của bản thân, và chỉ dựa vào một số yêu cầu khá chung chung từ khách hàng. Điều này có thể dẫn đến sự không thống nhất vì khi mình gửi bản thiết kế để khách hàng đánh giá, thì họ có thể không đồng ý với ý tưởng của mình (ví dụ như khách hàng yêu cầu một form đăng nhập đơn giản với tài khoản và mật khẩu, nhưng sau đó lại yêu cầu thêm các tùy chọn đăng nhập khác như Gmail, Facebook,...). Đặc biệt là khi đối tượng khách hàng không có kiến thức về thiết kế, việc làm việc chỉ dựa trên yêu cầu có sẵn sẽ rất khó khăn và tốn nhiều thời gian để cập nhật và điều chỉnh.&nbsp;<br><br>Sau khi trải qua những trường hợp như vậy, mình nhận thấy rằng để tạo ra một giao diện thực sự phù hợp với nhu cầu của khách hàng, việc làm việc trực tiếp và chia sẻ ý tưởng với họ là rất quan trọng. Điều này giúp mình hiểu rõ hơn về mong muốn và nhu cầu của khách hàng, từ đó đưa ra các giải pháp thiết kế tốt hơn. khi mình có cơ hội gặp gỡ và làm việc trực tiếp với khách hàng, mình hiểu rằng điều quan trọng nhất không phải là ý tưởng thiết kế của bản thân mình, mà là nắm bắt được nhu cầu thực tế của khách hàng. Bởi vì nhu cầu của khách hàng luôn thay đổi và được ảnh hưởng bởi nhiều yếu tố khác nhau. Vì vậy, bản thân đã thấy rằng việc làm việc trực tiếp với khách hàng là một bước quan trọng để có được sự đồng thuận về thiết kế.</p><h2>Lần làm việc với khách hàng để lại ấn tượng lớn cho mình</h2><p>Vào tháng 3 vừa qua, team của mình được khách hàng tin tưởng để phát triển một trang web lớn để quản lý và bán các sản phẩm du lịch. Với kinh nghiệm thiết kế giao diện và xây dựng các trang web du lịch trước đây, ban đầu mình đã nghĩ rằng đây là một dự án đơn giản và có thể hoàn thành nhanh chóng. Tuy nhiên, khi khách hàng đến công ty để triển khai ý tưởng, mình mới nhận ra rằng đây là một dự án rất thú vị. Team mình đã hội thảo với khách hàng để lắng nghe ý tưởng của họ, mình nhận ra rằng những giao diện mình đã nghĩ trong đầu hoàn toàn không phù hợp với dự án mà khách hàng muốn xây dựng. Nhờ cơ hội này mình cũng đã được nghe rất nhiều và có hiểu thêm các kiến thức về lĩnh vực mà khách hàng đã chia sẻ. Tại buổi họp này, mình và team cố gắng hỏi và nghe kỹ nhu cầu của khách hàng, từ đó xây dựng ra một bản thiết kế sát với yêu cầu thực tế của họ. Bằng cách này,có thể tiết kiệm được rất nhiều thời gian và tránh những sai sót có thể xảy ra. <br>Cùng với sự thật làm việc với khách hàng trực tiếp là khó khăn và thách thức, nhưng đó cũng là những trải nghiệm thú vị mà một UI/UX designer có thể gặp phải trong sự nghiệp của mình. Không chỉ giúp cho chúng ta hiểu rõ hơn về mong muốn của khách hàng, mà còn tạo cơ hội để chúng ta hoàn thiện kỹ năng mềm về giao tiếp và thiết kế.</p><h2><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/The_time_I_worked_with_a_customer_left_a_great_impression_on_me_a6491514bf.png" alt="The time I worked with a customer left a great impression on me.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_The_time_I_worked_with_a_customer_left_a_great_impression_on_me_a6491514bf.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_The_time_I_worked_with_a_customer_left_a_great_impression_on_me_a6491514bf.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_The_time_I_worked_with_a_customer_left_a_great_impression_on_me_a6491514bf.png 750w," sizes="100vw"><br>Một số kinh nghiệm mình có được thông qua việc trực tiếp với khách hàng</h2><p>Nếu bạn là một UI/UX designer và chuẩn bị đối mặt với việc làm việc trực tiếp với khách hàng, đừng lo lắng. Dưới đây là một số kinh nghiệm của mình để giúp bạn vượt qua những trở ngại và mang đến trải nghiệm tốt nhất cho khách hàng của mình:</p><ul><li><strong>Luôn lắng nghe và hiểu rõ yêu cầu của khách hàng: </strong>Việc lắng nghe và hiểu rõ yêu cầu của khách hàng là một trong những yếu tố quan trọng nhất để thành công trong việc thiết kế giao diện người dùng. Hãy thảo luận cẩn thận với khách hàng để hiểu rõ về nhu cầu của họ, các mục tiêu và mong muốn của dự án. Việc hiểu rõ yêu cầu của khách hàng sẽ giúp bạn tạo ra một thiết kế tốt hơn và giải quyết được những vấn đề mà họ đang gặp phải.</li><li><strong>Chia sẻ ý tưởng và đưa ra các giải pháp hợp lý:</strong> Sau khi hiểu rõ yêu cầu của khách hàng, hãy chia sẻ ý tưởng của bạn và đưa ra các giải pháp hợp lý. Bạn có thể sử dụng các công cụ thiết kế và phát triển để hiển thị các ý tưởng của mình dưới dạng mockup hoặc prototype. Nói với khách hàng về lợi ích và các tính năng mà thiết kế của bạn có thể đem lại, cũng như giải thích tại sao nó được thiết kế theo cách đó.</li><li><strong>Giữ thái độ tích cực và thân thiện:</strong> Trong quá trình làm việc với khách hàng, bạn cần phải giữ thái độ tích cực và thân thiện với khách hàng. Điều này sẽ giúp bạn tạo dựng mối quan hệ tốt với khách hàng và đưa ra những giải pháp tốt nhất cho họ.</li><li><strong>Hướng dẫn khách hàng qua từng bước trong quá trình thiết kế: </strong>Khi làm việc với khách hàng, mình cần phải hướng dẫn họ qua từng bước trong quá trình thiết kế. Điều này giúp khách hàng hiểu rõ hơn về quy trình và có thể đưa ra những ý kiến hoặc góp ý để sản phẩm được hoàn thiện tốt hơn.</li><li><strong>Giải đáp những câu hỏi một cách nhanh chóng và chính xác:</strong> Trong quá trình làm việc với khách hàng, bạn sẽ gặp phải nhiều câu hỏi từ khách hàng. Việc giải đáp những câu hỏi một cách nhanh chóng và chính xác sẽ giúp khách hàng cảm thấy được quan tâm và hỗ trợ tốt nhất từ bạn.</li><li><strong>Tận dụng các công cụ hỗ trợ:</strong> Với các UI/UX designer thì Figma rất hữu ích để giúp bạn tạo ra các bản thiết kế và prototype chuyên nghiệp. Chúng cũng có thể giúp cho việc giao tiếp và chia sẻ với khách</li><li><strong>Tạo mối quan hệ lâu dài với khách hàng:</strong> Việc làm việc trực tiếp với khách hàng không chỉ giúp bạn hiểu rõ hơn về nhu cầu của họ, mà còn giúp bạn tạo dựng mối quan hệ lâu dài với khách hàng. Điều này sẽ giúp bạn tạo được sự tin tưởng và hỗ trợ từ khách hàng trong tương lai.<br>&nbsp;</li></ul><h2>Ý kiến của mình</h2><p><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/My_review_604b7c27c5.png" alt="My review.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_My_review_604b7c27c5.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_My_review_604b7c27c5.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_My_review_604b7c27c5.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_My_review_604b7c27c5.png 1000w," sizes="100vw"></p><p>Một trong những điều quan trọng nhất mà mình có cơ hội học được trong quá trình làm việc với khách hàng là tầm quan trọng của việc giao tiếp hiệu quả. Trong quá trình này, việc lắng nghe và hiểu được yêu cầu của khách hàng là rất quan trọng. Việc này giúp mình hiểu rõ hơn về khách hàng của mình, nắm bắt được thị hiếu của họ, cảm nhận được những thay đổi trong nhu cầu của họ và đưa ra các giải pháp tốt nhất để đáp ứng được những yêu cầu này.  Không chỉ là việc lắng nghe, mình cũng học được cách tương tác với khách hàng một cách chuyên nghiệp và lịch sự. Điều này bao gồm việc giữ thái độ tích cực và thân thiện với khách hàng, hướng dẫn họ qua từng bước trong quá trình thiết kế và giải đáp những câu hỏi một cách nhanh chóng và chính xác. Khi làm việc với khách hàng, mình luôn đặt mục tiêu là giúp họ cảm thấy thoải mái và tin tưởng trong quá trình thiết kế.<br><br>Không chỉ là việc giao tiếp và tương tác, việc làm việc trực tiếp với khách hàng còn giúp mình học được nhiều kỹ năng khác như cách xây dựng một bản giao diện hiệu quả và dễ sử dụng cho khách hàng, cách phân tích dữ liệu và đánh giá hiệu quả của giao diện, cách phát triển sản phẩm phù hợp với nhu cầu thị trường. Tất cả những kỹ năng này đều rất quan trọng đối với một UI/UX Designer và đó cũng là những kỹ năng mà mình đã học được trong quá trình làm việc trực tiếp với khách hàng. </p><p>Ngoài ra, khi làm việc trực tiếp với khách hàng, mình cũng học được cách tạo động lực cho bản thân và đội ngũ của mình. Đôi khi, trong quá trình thiết kế, khách hàng có thể yêu cầu những điều mà mình chưa từng làm và đòi hỏi mình phải nghiên cứu và áp dụng các kỹ thuật mới. Tuy nhiên, thách thức này cũng giúp mình phát triển kỹ năng tìm kiếm thông tin và nghiên cứu, đồng thời tạo động lực để mình cố gắng hơn nữa trong công việc.<br>Không chỉ học được những kỹ năng cần thiết để làm việc hiệu quả với khách hàng, mình cũng đã xây dựng được mối quan hệ tốt với khách hàng. Đôi khi, khi hoàn thành một dự án, khách hàng cảm thấy hài lòng và rất vui vì sản phẩm của mình. Điều này không chỉ làm mình cảm thấy hạnh phúc mà còn giúp mình xây dựng được uy tín và trở thành một UI/UX Designer được khách hàng tin tưởng.</p><p>Cảm ơn mọi người đã theo dõi bài viết của mình. Một lần nữa mình là Hưng, hẹn các bạn ở bài viết tiếp theo nhé!!!</p>

Mình muốn chia sẻ về trải nghiệm của mình với vai trò UI/UX Designer trong những lần gặp gỡ và làm việc trực tiếp với khách hàng. Đó là một trải nghiệm đầy mới mẻ, nhưng cũng rất hữu ích. 

Những trải nghiệm thú vị của UI/UX Designer khi gặp gỡ và làm việc trực tiếp với khách hàng

<p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">Chào mừng mọi người đã quay lại với serie học gì chia sẻ nấy và mình là Tuyền. Với các nội dung chia sẻ trước đó về các lĩnh vực code, BA thì hôm nay mình sẽ dẫn dắt các bạn tiếp cận đến với một lĩnh khác cũng góp phần giúp cho dự án trở nên thành công không thể kể đến vai trò của designer.&nbsp;</span><br><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">Đối với một designer ngoài&nbsp; kĩ năng được học hoặc tiếp thu kiến thức từ nhiều nguồn thì những công cụ có thể giúp họ thể hiện ý tưởng,&nbsp; sự tự do sáng tạo,... cũng là một phần thành công. Phải kể đến các công cụ hữu ích như: Adobe Creative Suite (Photoshop, Illustrator,...), Figma,... Riêng đối với mình thì 2 công cụ này khá hữu dụng đối với một dân designer như mình.&nbsp;</span></p><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">Các bạn thường được nghe dân design nói tôi dùng phần mềm này phần mềm kia để thiết kế nhưng chúng ta chỉ nghe và không hề hiểu rõ về chúng. Lỡ sau này chúng ta cần dùng đến thì chúng ta cũng phải hỏi lại họ về tên các phần mềm đó. Với bất cập đó, mình viết bài blog này là muốn chia sẻ phần mềm mà mình hay dùng nhất khi design đó là Figma.</span></p><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">Figma là một phần mềm thiết kế được ra mắt vào năm 2015 và nhanh chóng được sử dụng rộng rãi trong cộng đồng thiết kế và cho phép người dùng tạo ra các bản vẽ thiết kế tương tác và chia sẻ chúng với các thành viên khác của nhóm dự án.</span></p><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">Figma cung cấp hàng loạt tính năng hữu ích như các công cụ vẽ hình học, phông chữ, màu sắc và cả các tính năng để tạo ra các bản vẽ tương tác và các mẫu thiết kế. Ngoài ra, còn tích hợp được với nhiều công cụ khác như Sketch, Photoshop và các công cụ quản lý dự án như Jira và Trello. Một tính năng đặc biệt của Figma là cho phép người dùng tương tác hoạt động (các nút bấm, liên kết,...)&nbsp; của bản thiết kế như một trang web.</span></p><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">Với sự linh hoạt và tính năng tuyệt vời của Figma mang lại và bạn có thể tận dụng điều này để là cho nó trở nên tốt hơn thông qua việc cải thiện sự trải nghiệm và làm cho việc thiết kế trở nên dễ dàng hơn không thể thiếu sự trợ giúp của các plugin.&nbsp;</span></p><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">Như bài blog “</span><a target="_blank" rel="noopener noreferrer" href="https://www.abcsoftwarecompany.com/vi/blog/nhung-plugin-figma-thong-dung-danh-cho-thiet-ke-ui"><span style="background-color:transparent;color:#1155cc;font-family:Montserrat,sans-serif;"><u>https://www.abcsoftwarecompany.com/vi/blog/nhung-plugin-figma-thong-dung-danh-cho-thiet-ke-ui</u></span></a><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">” của bạn Quốc Hưng chia sẻ thì bạn cũng là một dân designer và bạn cũng từng sử dụng các plugin thông dụng trong thiết kế của bạn như: Stylelist, remove.bg, lorem ipsum, unsplash, iconify,... và mình cũng thế. Nhưng bản thân mình lại vô tình phát hiện những điều tuyệt vời hơn của một số plugin của Figma mang lại, cụ thể: anima, content reel, design lint.</span></p><h4><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;"><strong>Anima</strong></span></h4><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">Anima là một plugin cho phép người dùng tạo ra các button, form, dropdown và nhiều hơn nữa với tính năng chia sẻ và tái sử dụng linh hoạt giúp&nbsp; trang web và ứng dụng hoạt động mượt mà và có tính tương tác cao.</span></p><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_f14b6226ee.png"></span></p><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">Có thể tham khảo UI của các components: button, form, dropdown,...</span></p><p style="text-align:center;"><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_12c94a945e.png"></span></p><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">Plugin này hỗ trợ những sự linh hoạt, UI, code giúp cho dân dev dễ dàng tham khảo và code không bị sai lệch yêu cầu và mục đích của khách hàng với designer.</span></p><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">Sau khi một designer thiết kế xong 1 page (frame) thì chúng ta chọn frame đó để export sang code theo các ngôn ngữ tùy chỉnh mà plugin Anima hỗ trợ. Mình có thể demo cho các bạn xem một ví dụ nhỏ:&nbsp;</span></p><ul><li><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">Mình lựa chọn một frame (Home page) đã được design trước đó và chuột phải nhấn chọnPlugin -&gt; Anima -&gt; Get code. Nhưng trước khi sử dụng được plugin này bạn cần phải cài đặt plugin này nhé ^^!</span></li></ul><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_f1e884be72.png"></span></p><ul><li><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">Sau khi Get code bạn có thể lựa chọn ngôn ngữ để plugin hỗ trợ export sang code</span></li></ul><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_747bab4051.png"></span></p><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">Bạn có thể export ra code theo các ngôn ngữ được hỗ trợ sẵn như: HTML, React, Vue</span></p><ul><li><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">Cuối cùng kết quả hiển thị code cho frame (Home page). Nhưng lưu ý, tính năng này còn hạn chế nếu bạn muốn export code và download source về thì nên bỏ thêm tí $ để tiện đôi đường nhé. Còn có cách khác lách luật hơn tí bạn có thể mở sang code pen như mình và xem trực tiếp luôn.&nbsp;</span><br>&nbsp;</li></ul><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_d3dc2f743b.png"></span></p><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">Đây là một plugin hay nhưng lại bị hạn chế tính năng dùng free. Vậy nên muốn trải nghiệm tốt và có điều kiện bạn nên thêm tí $ để có những trải nghiệm tuyệt vời hơn nhé!!!!</span></p><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">Ngoài ra, plugin này còn có một tính năng tuyệt vời hơn là Auto Layout cho phép các phần tử tự động thay đổi kích thước và định vị khi kích thước của khung bao quanh nếu&nbsp; chúng thay đổi. Điều này giúp giảm thiểu thời gian cần để cập nhật và sắp xếp các phần tử trong thiết kế.</span></p><h4><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;"><strong>Content Reel</strong></span></h4><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">Là một plugin giúp cho việc thể hiện content (hình ảnh, nội dung, đoạn video, gif và hình ảnh động) trong thiết kế trở nên sinh động, đẹp mắt.</span></p><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_533fce5a90.png"></span></p><h4><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;"><strong>Design Lint&nbsp;</strong></span></h4><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">Là một plugin giúp kiểm tra chất lượng và tiêu chuẩn của thiết kế: đảm bảo tính nhất quán trong toàn bộ bản thiết kế, màu sắc, khoảng cách, phông chữ và các quy tắc thiết kế khác, giúp người dùng tìm ra các lỗi thiết kế và sửa chúng một cách nhanh chóng.</span></p><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">Mình có một bài tập cá nhân sau khi mình design và tiến hành nhờ plugin hỗ trợ để kiểm tra thì kết quá mình nhận được khá bất ngờ.&nbsp;</span></p><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_af9d243da8.png"></span></p><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">Chỉ một page thôi mà mình đã sai rất nhiều tiêu chuẩn, con số rất kinh ngạc. Mình nghĩ plugin này khá hay nó sẽ giúp cho dân designer tụi mình nâng cao tiều chuẩn design và nâng sao sự quan sát, tỉ mỉ và cẩn thận hơn rất nhiều</span><br><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_7c6513f53b.png"></span></p><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">Nhận thấy rằng những plugin tuy là một phần nhỏ giúp cho việc thiết kế của chúng ta trở nên đẹp mắt, hoàn hảo hơn rất nhiều. Nó góp phần giúp chúng ta giảm thiểu thời gian, công sức để làm nhiều thứ mới mẻ và lớn lao. Nhờ vào tính năng tự động hoá và các công cụ hỗ trợ đắc lực, các designer có thể tập trung vào việc tạo ra các sản phẩm đáp ứng yêu cầu của khách hàng và thị trường.</span></p><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">Trên đây, là một số plugin mà mình tự tìm tòi được trong quá trình học hỏi để trở thành designer. Mình sẽ chia sẻ những kiến thức mà mình khám phá được trong quá trình học. Hi vọng sẽ giúp ích được cho các bạn.&nbsp;</span></p><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">Cảm ơn các bạn đã đọc đến đây!!!!</span></p><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">Hẹn các bạn ở blog tiếp theo nhé và mình là Tuyền.&nbsp;</span></p><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">Bài viết được tạo bởi ChatGPT và đã được chỉnh sửa.</span></p>

Bản thân mình lại vô tình phát hiện những điều tuyệt vời hơn của một số plugin của Figma mang lại, cụ thể: anima, content reel, design lint.


Plugin in figma

<p>Với tư cách là một UI/UX designer, Hưng đã sử dụng nhiều công cụ khác nhau để giúp &nbsp;hoàn thành các dự án của mình. Tuy nhiên, khi mà mình biết đến ChatGPT, một trợ lý thông minh có thể hỗ trợ &nbsp;trong công việc UI/UX,mình đã thử nghiệm nó và phát hiện rằng nó rất hữu ích. Trong bài viết này, Hưng sẽ chia sẻ với trải nghiệm của bản thân khi sử dụng ChatGPT trong công việc thiết kế UI/UX.</p><h2>1. Giúp tìm kiếm thông tin</h2><p><br>Khi bắt đầu một dự án mới, mình thường phải tìm kiếm thông tin về khách hàng và ngành công nghiệp của họ. Với ChatGPT, mình có thể đặt câu hỏi về khách hàng và ChatGPT sẽ tìm kiếm và cung cấp cho tôi các thông tin liên quan. Điều này giúp tiết kiệm thời gian và nỗ lực tìm kiếm thông tin trên Internet.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Information_search_9a90bad60d.png" alt="Information search.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Information_search_9a90bad60d.png 234w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Information_search_9a90bad60d.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Information_search_9a90bad60d.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_Information_search_9a90bad60d.png 1000w," sizes="100vw"></p><h2>2. Đưa ra ý tưởng mới</h2><p>Khi thiết kế giao diện người dùng, mình luôn muốn đưa ra các ý tưởng mới để tạo sự khác biệt và tăng tính độc đáo cho sản phẩm của mình. ChatGPT có thể giúp đưa ra các ý tưởng mới bằng cách đưa ra các gợi ý và đưa ra các trang web liên quan đến chủ đề mình quan tâm. Mình cũng có thể đặt câu hỏi về xu hướng thiết kế mới nhất hoặc các phương pháp thiết kế tốt nhất để tạo ra một giao diện người dùng tốt hơn.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/idea_b9b5a13c1c.png" alt="idea.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_idea_b9b5a13c1c.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_idea_b9b5a13c1c.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_idea_b9b5a13c1c.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_idea_b9b5a13c1c.png 1000w," sizes="100vw"></p><h2>3. Hỗ trợ trong quá trình tạo nội dung</h2><p>Tạo nội dung cho một trang web hoặc ứng dụng là một phần quan trọng của công việc của tôi. ChatGPT có thể giúp tôi trong quá trình tạo nội dung bằng cách cung cấp cho tôi các từ khóa liên quan đến nội dung tôi muốn viết và đưa ra các lời khuyên về phong cách viết và cấu trúc câu.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/content_e8f0b796f3.png" alt="content.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_content_e8f0b796f3.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_content_e8f0b796f3.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_content_e8f0b796f3.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_content_e8f0b796f3.png 1000w," sizes="100vw"></p><h2>4. Trả lời các câu hỏi&nbsp;</h2><p>Khi gặp phải các thắc mắc trong quá trình thiết kế giao diện người dùng, mình có thể đặt câu hỏi cho ChatGPT và nó sẽ cung cấp các câu trả lời và giải pháp cho vấn đề của mình. Điều này giúp tiết kiệm thời gian và tăng tính hiệu quả trong công việc.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/answer_the_question_8e86d790cb.png" alt="answer the question.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_answer_the_question_8e86d790cb.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_answer_the_question_8e86d790cb.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_answer_the_question_8e86d790cb.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_answer_the_question_8e86d790cb.png 1000w," sizes="100vw"></p><h2>5. Kiểm tra chính tả và ngữ pháp</h2><p>Khi tạo nội dung hoặc viết các thông báo cho giao diện người dùng, mình luôn muốn đảm bảo rằng các từ và câu được viết đúng chính tả và ngữ pháp. ChatGPT có thể giúp kiểm tra chính tả và ngữ pháp của các từ và câu mình viết. Điều này giúp đảm bảo rằng các thông điệp mình &nbsp;truyền tải đến người dùng là rõ ràng và chính xác.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Check_spelling_and_grammar_8d72f77dc3.png" alt="Check spelling and grammar.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Check_spelling_and_grammar_8d72f77dc3.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Check_spelling_and_grammar_8d72f77dc3.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Check_spelling_and_grammar_8d72f77dc3.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_Check_spelling_and_grammar_8d72f77dc3.png 1000w," sizes="100vw"></p><h2>6. Hỗ trợ cho việc tối ưu hóa tìm kiếm</h2><p>Tối ưu hóa tìm kiếm là một phần quan trọng của công việc UI/UX. ChatGPT có thể giúp đưa ra các từ khóa liên quan đến sản phẩm của mình và cung cấp các gợi ý để tối ưu hóa nội dung của mình để thu hút được sự chú ý của các công cụ tìm kiếm.</p><p>Tổng kết lại ChatGPT đã giúp Hưng &nbsp;nâng cao hiệu quả làm việc của mình.Giúp mình tiết kiệm thời gian và nỗ lực trong quá trình tìm kiếm thông tin, đưa ra ý tưởng mới, hỗ trợ trong quá trình tạo nội dung và trả lời các câu hỏi. Ngoài ra, ChatGPT cũng giúp kiểm tra chính tả và ngữ pháp, hỗ trợ cho việc tối ưu hóa tìm kiếm và đưa ra các lời khuyên về phong cách viết và cấu trúc câu. Mình tin rằng ChatGPT sẽ là một công cụ hữu ích cho bất kỳ UI/UX designer nào muốn tăng cường hiệu quả làm việc của mình và đạt được kết quả tốt nhất cho sản phẩm của họ.<br>Một lần nữa mình là Hưng, cảm ơn theo dõi bài viết của mình!</p>

Với việc được xem là "bách khoa toàn thư" cùng xem chat GPT giúp ích gì cho công việc thiết kế UI/UX trở nên dễ dàng hơn nhé!

Tối Ưu Hóa Công Việc Thiết Kế UI/UX Với Chat GPT

<p>Xin chào !!&nbsp;<br>Mình là Hưng đến từ ABC Software Solutions Company.&nbsp;<br>Để tạo ra một trải nghiệm người dùng tốt nhất, thiết kế UX (user experience) đóng vai trò quan trọng. Tuy nhiên, nhiều người thiết kế đã rơi vào thói quen đặt quá nhiều thông tin và tính năng trong sản phẩm của họ. Điều này làm cho sản phẩm trở nên phức tạp và khó sử dụng, gây khó khăn cho người dùng. Trong bài viết này, cùng Hưng tìm hiểu về sự đơn giản hóa trong thiết kế UX và cách nó giúp tăng cường trải nghiệm người dùng.</p><h2>Đơn giản hóa là gì, có quan trọng trong thiết kế UX?<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/wrong_right_4e631e7a84.png" alt="wrong right.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_wrong_right_4e631e7a84.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_wrong_right_4e631e7a84.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_wrong_right_4e631e7a84.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_wrong_right_4e631e7a84.png 1000w," sizes="100vw"></h2><p>Đơn giản hóa là quá trình loại bỏ những yếu tố không cần thiết, giảm bớt sự phức tạp và tạo ra một sản phẩm đơn giản và dễ sử dụng hơn. Nó là một phương pháp thiết kế hữu ích trong việc tạo ra trải nghiệm người dùng tốt hơn.<br><br><strong>Vì sao đơn giản hóa là quan trọng trong thiết kế UX?</strong></p><h3><br><strong>1. Giúp người dùng dễ dàng sử dụng</strong></h3><p>Khi thiết kế sản phẩm, đơn giản hóa là cách tốt nhất để giúp người dùng sử dụng sản phẩm của bạn một cách dễ dàng và nhanh chóng. Khi sản phẩm có quá nhiều tính năng, người dùng sẽ khó khăn trong việc tìm ra các tính năng chính và thường sử dụng. Tuy nhiên, khi sản phẩm đơn giản hóa, người dùng sẽ dễ dàng tìm kiếm các tính năng và sử dụng sản phẩm một cách hiệu quả.</p><h3><br><strong>2. Giúp tăng tốc độ tải trang</strong></h3><p>Sử dụng quá nhiều tính năng và thông tin trên một trang web hoặc ứng dụng di động có thể làm cho tốc độ tải trang chậm. Nếu sản phẩm của bạn quá phức tạp, nó có thể ảnh hưởng đến tốc độ tải trang, gây ra sự chán nản cho người dùng. Đơn giản hóa sản phẩm của bạn sẽ giúp tăng tốc độ tải trang và tạo ra trải nghiệm người dùng tốt hơn.Sử dụng quá nhiều tính năng và thông tin trên một trang web hoặc ứng dụng di động có thể làm cho tốc độ tải trang chậm. Nếu sản phẩm của bạn quá phức tạp, nó có thể ảnh hưởng đến tốc độ tải trang, gây ra sự chán nản cho người dùng. Đơn giản hóa sản phẩm của bạn sẽ giúp tăng tốc độ tải trang và tạo ra trải nghiệm người dùng tốt hơn.</p><h3><strong>3. Tăng khả năng tương tác</strong></h3><p>Sản phẩm đơn giản hóa không chỉ giúp tăng cường trải nghiệm người dùng, mà còn giúp tăng khả năng tương tác giữa người dùng và sản phẩm. Với một giao diện đơn giản, người dùng sẽ dễ dàng tương tác với sản phẩm hơn. Nếu người dùng phải tìm kiếm quá nhiều để sử dụng một tính năng hoặc để tìm kiếm thông tin, họ sẽ cảm thấy khó chịu và có thể bỏ qua sản phẩm của bạn. Đơn giản hóa sản phẩm của bạn sẽ giúp tăng khả năng tương tác và giúp người dùng dễ dàng tìm kiếm thông tin và sử dụng các tính năng của sản phẩm.</p><h3><strong>4. Tăng độ tin cậy của sản phẩm</strong></h3><p>Một sản phẩm đơn giản hóa thường dễ dàng để sử dụng và hiểu hơn. Sản phẩm đơn giản hóa sẽ giúp người dùng có thể dễ dàng phân biệt các tính năng của sản phẩm và hiểu rõ hơn về sản phẩm của bạn. Điều này sẽ giúp tăng độ tin cậy của sản phẩm và giúp khách hàng có niềm tin hơn vào sản phẩm của bạn.</p><h2>Cách đơn giản hóa sản phẩm của bạn</h2><ul style="list-style-type:disc;"><li><strong>Tập trung vào tính năng quan trọng nhất</strong>: Khi thiết kế sản phẩm, hãy tập trung vào tính năng quan trọng nhất. Loại bỏ các tính năng không cần thiết và tập trung vào những tính năng quan trọng nhất sẽ giúp sản phẩm của bạn đơn giản hóa hơn.</li><li><strong>Giữ giao diện đơn giản</strong>: Giao diện đơn giản sẽ giúp người dùng dễ dàng tương tác và sử dụng sản phẩm của bạn. Hãy giữ giao diện đơn giản và tránh sử dụng quá nhiều hình ảnh hoặc màu sắc.</li><li><strong>Sử dụng ngôn ngữ đơn giản</strong>: Sử dụng ngôn ngữ đơn giản và tránh sử dụng các thuật ngữ phức tạp. Sử dụng ngôn ngữ dễ hiểu sẽ giúp sản phẩm của bạn dễ sử dụng hơn.</li><li><strong>Kiểm tra sản phẩm của bạn</strong>: Trước khi sản phẩm được đưa ra thị trường, hãy kiểm tra kỹ sản phẩm của bạn để đảm bảo rằng nó đơn giản và dễ sử dụng. Bạn có thể tìm kiếm ý kiến từ người dùng hoặc các chuyên gia UX để đánh giá sản phẩm của bạn.</li></ul><h2>Kết luận<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/experience_2daa89ca99.png" alt="experience.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_experience_2daa89ca99.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_experience_2daa89ca99.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_experience_2daa89ca99.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_experience_2daa89ca99.png 1000w," sizes="100vw"></h2><p>Sự đơn giản hóa trong thiết kế UX là cách tốt nhất để tạo ra một trải nghiệm người dùng tuyệt vời và tăng độ tin cậy của sản phẩm. Khi sản phẩm của bạn được đơn giản hóa, người dùng sẽ dễ dàng sử dụng sản phẩm hơn, tìm kiếm thông tin nhanh chóng hơn và tương tác với sản phẩm của bạn nhanh hơn. Điều này sẽ giúp tăng khả năng tương tác và giúp người dùng cảm thấy thoải mái hơn khi sử dụng sản phẩm của bạn.<br><br>Tuy nhiên, đơn giản hóa sản phẩm không phải là điều dễ dàng, nó đòi hỏi sự kiên trì và nỗ lực. Thiết kế sản phẩm đơn giản hóa có thể là một quá trình dài và đòi hỏi thử nghiệm liên tục để đạt được kết quả tốt nhất. Nhưng đối với các nhà thiết kế UX, sự đơn giản hóa trong thiết kế sản phẩm là một kỹ năng quan trọng để đảm bảo rằng sản phẩm của họ đáp ứng được yêu cầu của người dùng và tăng khả năng tương tác của sản phẩm.<br><br>Tóm lại, sự đơn giản hóa trong thiết kế UX là một phương pháp quan trọng để tạo ra trải nghiệm người dùng tốt và giúp sản phẩm của bạn tăng độ tin cậy. Với các bước đơn giản để đơn giản hóa sản phẩm của bạn, bạn có thể giúp người dùng tương tác với sản phẩm của bạn một cách dễ dàng và hiệu quả. Điều này sẽ giúp tăng sự hài lòng của khách hàng và giúp tăng doanh số bán hàng của bạn. Vì vậy, hãy đầu tư vào sự đơn giản hóa trong thiết kế UX để đạt được thành công trong kinh doanh của bạn.<br><br>Trên đây là những chia sẻ của mình về sự đơn giản hóa trong xây dựng thiết kế UX. Mình là Hưng cảm ơn đã theo dõi bài viết của mình!</p><p><br><br><br>&nbsp;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</p>

Sự đơn giản hóa trong thiết kế UX là tối giản hoá yếu tố phức tạp, tăng cường tính dễ sử dụng và hiệu quả của sản phẩm.

Sự đơn giản hóa trong thiết kế UX

<p>Xin chào !!&nbsp;<br>Mình là Hưng đến từ ABC Software Solutions Company.&nbsp;<br>Một trong những điểm nổi trội của Figma chính là các plugin. Figma có một thư viện plugin vô cùng phong phú, các plugin được tạo mới gần như hằng ngày. Plugin Figma đã giúp công việc thiết kế trở nên trơn tru hơn, cải thiện năng suất và tiết kiệm thời gian cho hàng tá công việc lặt vặt, nhờ đó designer có thêm nhiều thời gian để tập trung vào công việc chính. Ở bài viết này, Hưng sẽ giới thiệu đến bạn cách sử dụng một số plugin hữu ích trong công việc hàng ngày.</p><h2>Figma là gì?</h2><p>Figma là phần mềm chuyên dụng để thiết kế giao diện và xây dựng bản thử cho các ứng dụng và trang web. Ngoài nền tảng web và ứng dụng, Figma có khả năng tương thích trên mọi hệ điều hành. được xem là phần mềm tuyệt vời cho việc thiết kế UI/UX. Thêm vào đó, nó còn có các tính năng hỗ trợ làm việc nhóm trong suốt quá trình thiết kế.<br>Có thể nói, Figma là công cụ thiết kế giao diện hàng đầu trên thị trường hiện nay, bởi nó rất dễ sử dụng và mang đến trải nghiệm tốt cho người dùng. So với Adobe XD hoặc Sketch, Figma có khá nhiều ưu điểm nổi bật, chẳng hạn như có thể hoạt động trực tuyến và cho phép người dùng cộng tác với người khác trong thời gian thực.</p><h2>Những plugin mình hay sử dụng nhất</h2><h3>1. StyleList – Plugin Figma hiệu chỉnh màu và font chữ.</h3><p>Mỗi dự án sẽ có một bảng màu khác nhau, các màu trong bảng được chỉ định cường độ màu sắc dựa trên một màu chính. Figma có thể giúp designer quản lý màu sắc một cách dễ dàng. Chẳng hạn, khi chọn màu để sử dụng, designer có thể bỏ màu đó vào mục “Color Styles” nhằm đảm bảo chỉ sử dụng các màu đã được xác định từ ban đầu, thay cho việc sử dụng công cụ Eye dropper để chọn màu một cách thủ công.&nbsp;<br>Tương tự như màu sắc, phông chữ cũng nên được quản lý một cách gọn gàng. Designer sẽ cần chọn các kiểu phông chữ, và ghi chú lại chúng được sử dụng với mục đích gì rồi bỏ vào mục “Text Styles”. Ví dụ: tiêu đề H1, H2,…<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/img_style_list_5b826ea70d.png" alt="img-style-list.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_img_style_list_5b826ea70d.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_img_style_list_5b826ea70d.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_img_style_list_5b826ea70d.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_img_style_list_5b826ea70d.png 1000w," sizes="100vw"></p><p>Thông thường, khi bắt đầu thiết kế, thì các designer phải tạo ra bảng màu và font chữ trên bảng thiết kế của mình, rồi sau đó mới đặt tên và thêm thắt các hiệu ứng phụ. Làm như vậy sẽ mất rất nhiều thời gian, thay vào đó bạn có thể sử dụng plugin Figma là StyleList để tự động hoá quy trình trên bằng một cú nhấp chuột.</p><h4><strong>Cách tạo kiểu chữ trên StyleList:</strong></h4><ul><li>Nhập Base size</li><li>Chọn loại scale và font mong muốn</li><li>Chọn kích thước mong muốn</li><li>Nhấp vào nút “Create style”.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/create_style_list_dfc8ed0b63.png" alt="create-style-list.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_create_style_list_dfc8ed0b63.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_create_style_list_dfc8ed0b63.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_create_style_list_dfc8ed0b63.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_create_style_list_dfc8ed0b63.png 1000w," sizes="100vw"></li></ul><h3>2. Remove.bg – Xóa nền cho ảnh<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/remove_bg_435b120e46.png" alt="remove.bg.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_remove_bg_435b120e46.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_remove_bg_435b120e46.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_remove_bg_435b120e46.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_remove_bg_435b120e46.png 1000w," sizes="100vw"></h3><p>Đôi khi chúng ta tải những bức ảnh đẹp cho thiết kế của mình, chỉ để ý rằng nền của ảnh không phù hợp với thiết kế. Lúc này ta phải dùng các công cụ như AI, Photoshop như vậy sẽ rất mất thời gian. Biết được điều đó Figma đả bổ sung ứng dụng remove.bg vào bộ plugin của mình, giúp designer chỉ cần sử dụng các thao tác vô cùng đơn giản, tiết kiệm rất nhiều thời gian.&nbsp;<br>Lưu ý nhỏ bạn cần phải tạo tài khoản remove.bg trước khi có thể sử dụng plugin này.</p><h3>3. Lorem Ipsum – Tạo nội dung giả</h3><p>Lorem Ipsum là một loại văn bản giả được sử dụng trong thiết kế, kiểu chữ và in ấn. Plugin của nó cho phép các nhà thiết kế chèn các phần của nội dung giả để bắt chước giao diện của bản sao thật. Với công cụ này, bạn có thể dễ dàng tính ra các chi tiết như khoảng cách và vị trí, các từ trên mỗi dòng, khoảng cách giữa các chữ cái và kerning. Bạn không phải mất thời gian cố gắng phát triển các khối nội dung lấp đầy có thể không phù hợp với thiết kế kiểu chữ của bạn.</p><h3>4. Unsplash- Plugin cung cấp ảnh chất lượng</h3><p>Khi thiết kế, chúng ta luôn mong muốn tìm những hình ảnh có chất lượng cao, một phần để tăng tính chuyên nghiệp, một phần khác nhằm tạo cảm giác “nịnh mắt” cho người nhìn. Plugin Figma Unsplash là nguồn cung cấp ảnh chất lượng vì trang web sở hữu thư viện hình ảnh vô cùng phong phú, có bản quyền và hoàn toàn miễn phí. Người dùng có thể thoải mái sử dụng hình ảnh trên Unsplash cho mục đích cá nhân lẫn thương mại.<br>Ảnh trên Unsplash có chất lượng rất cao, vì vậy chúng được các designer ưu ái và áp dụng không chỉ trong UI/UX mà còn trong thiết kế đồ họa và nghành thiết kế khác.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/unsplash_d05b41e2e7.png" alt="unsplash.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_unsplash_d05b41e2e7.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_unsplash_d05b41e2e7.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_unsplash_d05b41e2e7.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_unsplash_d05b41e2e7.png 1000w," sizes="100vw"><strong>Cách sử dụng plugin Unsplash:</strong></p><ul><li>Chèn hình ảnh ngẫu nhiên: nhấn nút Insert random (Chèn ngẫu nhiên) trong bảng random (random panel)</li><li>Chèn một hình ảnh ngẫu nhiên theo một chủ đề: chọn một trong các chủ đề có trong Presets.</li><li>Tìm kiếm một hình ảnh cụ thể: sử dụng thanh tìm kiếm</li></ul><h3>5. Plugin Figma Iconify</h3><p>Iconify là thư viện tổng hợp các bộ icon phổ biến. Plugin Figma này cho phép người dùng thêm các icon từ các hệ thống thiết kế như Material Design Icons, FontAwesome, Jam Icons, EmojiOne, Twitter Emoji, và nhiều bộ icon khác (hơn 100 bộ icon với gần 100.000 icon). Điều hay ho ở Iconify là designer không cần phải vào những thư viện icon trên để download từng icon một cách thủ công. Thay vào đó, Iconify sẽ tổng hợp tất cả các icon này, designer chỉ cần mở plugin và kéo thả icon vào thiết kế. Thật là dễ dàng đúng không nào?<br>Không giống như những plugin khác đòi hỏi phải trả phí để sử dụng icon ở định dạng SVG, Iconify cho phép sử dụng hoàn toàn miễn phí. Ngoài ra, giao diện của Iconify cũng cực kỳ dễ sử dụng. Các developer của Iconify cho thấy sự thấu hiểu người dùng khi đưa vào tính năng ghi nhớ trang icon cuối cùng mà người dùng đã truy cập, giúp dễ dàng tiếp tục sử dụng các icon vừa được tìm kiếm.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/iconify_dafa494773.png" alt="iconify.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_iconify_dafa494773.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_iconify_dafa494773.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_iconify_dafa494773.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_iconify_dafa494773.png 1000w," sizes="100vw"><br><strong>Các bước sử dụng Plugin Figma Iconify:</strong></p><ul><li>Tìm kiếm icon</li><li>Chọn bất kỳ icon nào</li><li>Nhấp vào nút “Import Icon” hoặc kéo biểu tượng vào trang thiết kế Figma.</li><li>Các thẻ phía trên kết quả tìm kiếm sẽ hiển thị chủ đề của các bộ icon, trong mỗi thẻ sẽ có các icon liên quan đến nhau.</li><li>Nhấp vào bất kỳ thẻ nào, plugin sẽ chỉ hiển thị kết quả từ bộ icon đó</li></ul><p>Bạn có thể kéo và thả các icon trực tiếp từ kết quả tìm kiếm và họn màu cho icon, không khả dụng cho các icon có bảng mã cứng.Thay đổi kích thước icon, các developers có thể lấy mã code của iconThay thế icon đã nhập trước đó (chỉ khả dụng nếu layer của biểu tượng trước đó được chọn trong Figma).</p><h2>Cảm nhận của mình</h2><p>Sẽ rất khó khăn và mất thời gian cho các designer để xử lý các vấn đề trong thiết kế một cách thủ công, chính vì vậy designer hãy sử dụng các plugin để giải quyết chúng một cách nhanh chóng và chính xác nhất. Tuy nhiên, chúng ta cần chú ý khi sử dụng các plugin Figma, chẳng hạn như Find and Replace vì nếu không kiểm tra kỹ, tính năng này có thể thay thế nhầm văn bản. Suy cho cùng, khi lựa chọn sử dụng bất kỳ plugin nào, điều quan trọng vẫn là cân nhắc đến yêu cầu của sản phẩm.<br>Trên đây là những chia sẻ của mình về những plugin mình hay sử dụng cho những sản phẩm mình thiết kế. Còn có vô vàn các plugin khác vô cùng hay, cũng như hiệu quả hỗ trợ rất cao mà mình chưa đề cập đến. Hy vọng blog nhỏ của mình sẽ giúp các bạn đọc nhất là các bạn mới bắt đầu UI/UX sẽ dễ dàng tiếp cận Figma hơn.</p><p>Mình là Hưng cảm ơn đã theo dõi blog của mình!!!</p><p>&nbsp;</p><p>&nbsp;</p>

Blog nhỏ chia sẻ về những plugin mình hay sử dụng trong quá trình thiết kế 1 bản UI hoàn chỉnh.

 Những plugin Figma thông dụng dành cho thiết kế UI

<p>Xin chào!! Mình là Hưng đến từ ABC Software Solutions Company.&nbsp;</p>
<p>Áp dụng quy trình thiết kế UI-UX trong thiết kế website/app là một phương pháp hiệu quả để đảm bảo rằng bạn tạo ra sản phẩm có trải nghiệm tốt mang lại thành công cho doanh nghiệp. Vậy quy trình thiết kế UI-UX chuẩn là như thế nào? Và làm thế nào quy trình UX giúp tạo ra trải nghiệm tốt?&nbsp;</p>
<p>Hãy cùng mình tìm hiểu các bước của quy trình thiết kế UI-UX trong bài viết này để hiểu tại sao nó lại quan trọng và được các doanh nghiệp tin tưởng.&nbsp;</p>
<h2>Phân tích và lên ý tưởng <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/ideas_ab0559af00.png" alt="ideas.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_ideas_ab0559af00.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_ideas_ab0559af00.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_ideas_ab0559af00.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_ideas_ab0559af00.png 1000w," sizes="100vw"></h2>
<p>&nbsp;Mình tin rằng bất kỳ lĩnh vực hay ngành nghề hay công việc nào thì quá trình phân tích là không thể thiếu. Đặc biệt với hệ thống thông tin thì việc phân tích kỹ lưỡng số liệu, thói quen, tập quán… của người dùng và tạo ra một bản kế hoạch chi tiết cho dự án là vô cùng quan trọng. Điều này giúp Designer lẫn Developers nắm chắc được mục đích, nghiệp vụ, tính năng của phần mềm hay tính năng cần phát triển, từ đó tránh các sai sót, hiểu lầm không đáng có dẫn đến phải sửa chữa rất thời gian và công sức. Tại bước này Designer cần làm việc với BA (Business Analyst) khá nhiều. Lời khuyên cho các bạn là nên khảo sát các bên liên quan với doanh nghiệp, tìm hiểu và khảo sát những người dùng khác nhau thông qua User Personas, User Stories, Use cases và User flows.</p>
<p>&nbsp;Sau khi đã có bản kế hoạch chi tiết, nhiệm vụ của UI-UX Designer là lên ý tưởng thông qua việc tham khảo trang lưu trữ thiết kế như Behance, Dribble, Pinterest Freepik… Từ đó ấn định một cách nhất quán cho bản thiết kế các yếu tố như màu sắc, typography, hay phong cách thiết kế phù hợp nhất với người dùng sản phẩm.</p>
<p><h2>&nbsp;Vẽ Wireframes <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/wireframe_06d4916366.png" alt="wireframe.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_wireframe_06d4916366.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_wireframe_06d4916366.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_wireframe_06d4916366.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_wireframe_06d4916366.png 1000w," sizes="100vw"></h2><p>Tạo Wrireframes là bước lên kế hoạch chi tiết cho mỗi trang, với các chỉ báo trực quan như đường, lưới và hộp cho biết loại nội dung, hình ảnh và các phần tử khác sẽ dẫn dắt người dùng đi đến đâu. Wrireframe chỉ là bản kế hoạch, không phải là bản thiết kế cuối cùng, nó có thể có độ phân giải cao hoặc có thể có độ phân giải thấp tùy theo công cụ bạn sử dụng, điều này không quan trọng, quan trọng là wireframe cung cấp cho đội ngũ của bạn những thứ cần tuân theo khi bắt đầu thiết kế website chi tiết. Wrireframe hể hiện một cách rõ ràng và đơn giản việc tổ chức bố cục trang web. Wireframing cũng phục vụ một chức năng quan trọng khác và đó là giao tiếp. Cách làm phổ thông là đợi đến khi có bản thiết kế web chi tiết rồi mới thảo luận, điều chỉnh sửa. Nhưng cách làm như vậy khó đánh giá sự hiệu quả của bản thiết kế và có nguy cơ đập đi làm lại từ đầu, dẫn đến tốn thời gian, công sức.</p><p>&nbsp;Do đó, cách làm trong thiết kế UX là xây dựng wireframes nhanh chóng để tất cả mọi người trong team có một bản thiết kế thô để cùng thảo luận, thống nhất các thứ cần thiết trước khi đi thiết kế chính thức. Từ đó, biết cách phối hợp nhịp nhàng để thúc đẩy dự án hoàn thành.</p><h2>&nbsp;Design chi tiết <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/design_890f8c98a8.png" alt="design.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_design_890f8c98a8.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_design_890f8c98a8.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_design_890f8c98a8.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_design_890f8c98a8.png 1000w," sizes="100vw"></h2><p>Khác với Wireframe thì tại bước này chúng ta cần chú trọng vào UI. Bước này sẽ tạo ra một giao diện hoàn chỉnh cho phần mềm,website của chúng ta, việc tạo ra giao diện người dùng tốt hay không cũng sẽ ảnh hưởng tới trải nghiệm của người dùng (UX). Vậy nên mới nói là UI/UX luôn song hành và không thể tách rời. Tại bước này các component cũng sẽ được thiết kế đầy đủ các trạng thái. Ví dụ như button ở wireframe thì chỉ cần thể hiện dưới dạng 1 hình chữ nhật là được nhưng ở bản design chi tiết thì 1 button ngoài việc bao gồm các chỉ số như màu sắc, viền, độ bo góc, đổ bóng… thì nó còn được thể hiện dưới dạng button khi hover, button khi click, button sau khi click, button khi bị vô hiệu hóa…&nbsp;</p><h2>Prototyping và Mockups <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/prototyping_215d8d6cac.png" alt="prototyping.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_prototyping_215d8d6cac.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_prototyping_215d8d6cac.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_prototyping_215d8d6cac.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_prototyping_215d8d6cac.png 1000w," sizes="100vw"></h2><p>Một số người bị lẫn lộn giữa đâu là wireframe, mockup hoặc prototype (nguyên mẫu). Nhưng tất cả đều có thể có các mức chức năng khác nhau.</p><p>&nbsp;- Mockups: Là một bước trên wireframe, mockups lấy những gì đã được thiết lập với wireframe và trình bày trên bản thiết kế đồ họa, có thể có một số chức năng như điều hướng,sử dụng để xem thiết kế sẽ hiển thị như thế nào.&nbsp;</p><p>- Prototype: Hoạt động như một phiên bản thiết kế gần như được hiện thực hóa đầy đủ, điều hướng, tương tác và sử dụng tất cả các hình ảnh và khối nội dung chính. Không nhất thiết phải có mọi thành phần phải có đủ thứ để người dùng tương tác và trải nghiệm.</p><p>Prototype gần nhất với bản thiết kế web hoàn thiện, nó cho phép bạn nhận được phản hồi cần thiết và thực hiện các chỉnh sửa và chỉnh sửa trước khi chuyển sang code. Với Prototype, bạn vẫn có 2 loại: Tập trung vào chức năng hơn thiết kế và loại còn lại là thiết kế cho gần với phiên bản cuối cùng nhất.&nbsp;</p><h2>Kiểm tra <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/check_e81164c636.png" alt="check.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_check_e81164c636.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_check_e81164c636.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_check_e81164c636.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_check_e81164c636.png 1000w," sizes="100vw"></h2><p>&nbsp;Sau khi bạn có một nguyên mẫu, đã đến lúc thực hiện kiểm tra khả năng sử dụng. Điều này có nghĩa là bạn cần đưa cho một người chưa bao giờ nhìn thấy thiết kế trước đây và để họ thoải mái trải nghiệm nó, kiểm tra trực tiếp có thể cho phép bạn xem các phản ứng rõ ràng và chân thực khi mọi người trải nghiệm website. Hoặc các yêu cầu họ tìm kiếm đáp án cho các câu hỏi phổ biến người dùng có thể sẽ làm với website của bạn. Để từ đó quan sát xem mọi thứ còn có chỗ nào chưa ổn, xem mức độ dễ dàng trong việc điều hướng nội dung. Tất cả các dữ liệu trên sẽ cung cấp cho bạn thông tin về mức độ hiệu quả của thiết kế và các điểm cần thay đổi.&nbsp;</p><h2>Bàn giao <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/hand_over_0574b3b3b5.png" alt="hand over.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_hand_over_0574b3b3b5.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_hand_over_0574b3b3b5.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_hand_over_0574b3b3b5.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_hand_over_0574b3b3b5.png 1000w," sizes="100vw"></h2><p>Bước này là bàn giao bản thiết kế hoàn chỉnh sang cho đội Front-End Dev sao cho phải đảm bảo được Dev đã hiểu đúng, hiểu đủ về toàn bộ bản thiết kế. Bước này cực kỳ quan trọng vì nó sẽ quyết định xem sản phẩm thực tế có thực sự như mong muốn so với bản thiết kế UI/UX hay không. Tất nhiên khả năng của Front-end dev là điều cần được nhắc đến nhưng cũng nhiều trường hợp họ làm sai do chưa đọc hiểu đúng bản thiết kế. Giao đoạn này cần phối hợp nhịp nhàng giữa coder và designer.&nbsp;</p><p>Mong bài viết của mình sẽ giúp ích được phần nào cho các bạn, Hiện tại thì toàn bộ các bước để tạo ra 1 bản thiết kế Product như nêu ở trên, chúng ta đều có thể sử dụng công cụ Figma – Một công cụ thiết kế UI/UI chuyên nghiệp mà còn miễn phí nữa.&nbsp;</p><p>Một lần nữa mình là Hưng, cảm ơn các bạn đã quan tâm đến Blog của mình!!!</p></p><div id="md2html-converted" style="display:none"></div>

Để tạo ra một bản thiết kế UI-UX thì đòi hỏi các UI-UX Designer dành nhiều thời gian nghiên cứu và tuân thủ các quy trình, tiêu chuẩn nhất định. Sau đây là các bước cơ bản giúp bạn có thể tạo ra sản phẩm UI/UX hoàn chỉnh.

Một bản thiết kế UI-UX hoàn chỉnh cần qua các bước nào?

<p>Xin chào các bạn!!
Lại là mình Quốc Hưng UI-UX Designer đến từ ABC Software Solutions Company.</p>
<p>Hôm nay là một ngày trời rất đẹp, làm mình nhớ lại khoảnh khắc ngày đầu tiên mình bước chân vào học UI-UX với bao bỡ ngỡ. Nên nhân dịp này mình muốn chia sẻ cho các bạn mẩu chuyện về quá trình học UI-UX của mình và những khó khăn mình đã gặp phải, mong rằng mọi người sẽ thích câu chuyện nhỏ này của mình.</p>
<h2 id="tisaolichnuiux">Tại sao lại chọn UI-UX?</h2>
<p><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/why_chosse_UI_UX_011efdeded.png" alt="why chosse UI-UX.png" /></p>
<p>Với một người vừa mới tốt nghiệp đại học chuyên ngành công nghệ thông tin như mình tại sao lại chọn công việc thiết kế UI-UX? Yup, Đơn giản mình muốn thử sức với một lĩnh vực mới có liên quan đến lập trình. Mình rất may mắn khi được giới thiệu và làm việc tại <a href="https://abcsoftwarecompany.com/">ABC Software Solutions</a>, tại đây mình đã có khoảng thời gian vô cùng tuyệt vời khi được trải nghiệm cảm giác vừa học việc vừa làm dự án thực tế. Nhờ vậy khả năng design của mình dần cải thiện hơn rất nhiều.</p>
<p>UI-UX giúp mình gắn kết với mọi người trong team, ngoài ra mình còn có thể tạo ra những thiết kế thể hiện sự sáng tạo của cá nhân mình. Hầu hết các ngành nghề mảng công nghệ là kỹ thuật, sẽ làm các công việc lặp đi lặp lại mỗi ngày, chẳng hạn như coding. Vì mình không thích sự khô khan như thế nên UI-UX là “chân ái” với mình, tuy nhiên các thiết kế sáng tạo của mình vẫn phải đảm bảo tuân thủ các quy tắc thiết kế và lập trình.</p>
<h2 id="nhngkhkhn">Những khó khăn</h2>
<p><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/difficult_e497e545da.png" alt="difficult.png" /></p>
<p>Đầu tiên mình cứ nghĩ UI-UX là một nhưng hoàn toàn không phải như vậy đâu nha. UI-UX là hai phạm trù không thể tách rời, nhưng lại chính là những khái niệm hoàn toàn riêng biệt. Thật bất khả thi nếu như làm việc dựa trên trải nghiệm của người dùng mà không xem xét đến giao diện phù hợp với thẩm mỹ. Ngược lại, nếu giao diện rất bắt mắt nhưng lại xây dựng nội dung khó xem thì cũng là một bất lợi.</p>
<p>UI-UX tuy dễ mà khó? Khi mới bắt đầu thiết kế mình chỉ nghĩ làm sao cho giao diện đẹp và vừa mắt mình và mình cũng không tuân thủ một quy tắc thiết kế nào cả. Đó là điều rất sai lầm rất nghiêm trọng, mình đã mắc phải những lỗi vô cùng cơ bản do tính hấp tấp của mình, mình đã nhận được rất nhiều feedback từ các anh chị trong công ty, lúc đó mình cảm thấy vô cùng hoang mang, cảm giác như sản phẩm của mình không được đón nhận, lúc này mình mới vỡ lẽ ra là UI-UX không đơn giản như mình nghĩ.</p>
<p>Sau lần bị ngã đòn đó mình mới bắt đầu cẩn thận lại tìm hiểu về UI-UX một cách thận trọng hơn, mình dành nhiều thời gian để tham gia khóa học trên Udemy và đi tham khảo tập clone các thiết kế khác trên các cộng đồng UI-UX. Mình may mắn khi được chị Chi (Senior UI-UX Designer) đã luôn hỗ trợ mình từ xa, cụ thể đánh giá những thiết kế của mình, chỉ mình những tool, plugin… Chị còn là người feedback cho những sản phẩm sau này của mình, giúp mình tiến bộ lên. Mình rất biết ơn và vô cùng quý mến chị.</p>
<h2 id="kinhnghimmnhtriqua">Kinh nghiệm mình đã trải qua</h2>
<p><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/experience_going_through_e1279d9686.png" alt="experience going through.png" /></p>
<p>Trong quá trình làm việc với mọi người trong team, mình đã học hỏi được rất nhiều. Khi mới bắt đầu tất nhiên sẽ có một chút khó khăn, đơn giản như ví dụ như khi mà mình làm xong phần design, đưa cho coder thì bạn coder hay comment là design như thế này khó quá, không thể làm được và yêu cầu thay đổi design để code dễ hơn. Tuy nhiên, không phải cứ dễ code hơn là hay hơn. Vì bạn coder không hiểu về UI-UX nên không hiểu vì sao design nó cần như thế, gây ảnh hưởng đến sản phẩm cuối cùng. Đó cũng là một trải nghiệm đối với mình, bây giờ mình đã khắc phục được nhược điểm này, công việc trở nên nhịp nhàng hơn và sản phẩm ra lò vô cùng hoàn hảo.</p>
<p>Dưới đây là một số kinh nghiệm mà mình đã rút được sau quá trình học UI-UX của mình.</p>
<ul>
<li><strong>Nắm vững các kiến thức cơ bản nhất:</strong> Khi bắt đầu cái gì cũng nên đi từ dễ đến khó, cơ bản đến nâng cao, có một lộ trình phải rõ ràng. Thiết kế UI-UX là một nghề mới mẻ và đầy ắp cơ hội cho những ai muốn dấn thân vào. Chính vì lẽ đó, việc nắm bắt và sở hữu những kỹ năng, phẩm chất thiết yếu cho công việc này sẽ giúp ta dựng xây nền móng vững vàng, từ đó, nhanh chóng phát triển thành một UI/UX Designer chuyên nghiệp.</li>
<li><strong>Liên tục cập nhật kiến thức mới về UI-UX:</strong> UI-UX là một nghề cần tới sự cập nhật liên tục. Học các kỹ năng mới và nâng cao kỹ thuật là điều cần thiết để theo kịp thị trường. Các nguồn học đó có thể đến từ sách vở, hội nhóm cộng đồng, các khóa học…</li>
<li><strong>Khả năng tự học của bản thân:</strong> UI-UX rất cần sự đầu tư tìm hiểu, nên cần phân bố thời gian một cách chặt chẽ và hợp lý. Ngoài ra khi mà mình có một thiết kế mới nào đó có thể chia sẻ lên các nhóm học UI-UX để những người có kinh nghiệm feedback trực tiếp giúp ta tiến bộ nhanh hơn.</li>
<li><strong>Đặt cái tâm vào sản phẩm:</strong> Mỗi sản phẩm mình làm ra nên xem nó như đứa con của mình và dành cho nó những điều tốt đẹp nhất. Đâu có ai sinh con ra là xong đâu? Mình phải chăm chút từ lúc mang thai cho nó khỏe mạnh. Nó ra đời vẫn phải chăm sóc để nó nhìn sạch sẽ, cư xử với người khác lễ phép. Cũng giống như từ khâu code đã phải clean, làm ra sản phẩm phải có UI tốt, UX tốt, ít bug, ít crash.</li>
<li><strong>Tuân thủ nguyên tắc thiết kế UX-/UX:</strong> Khi thiết kế quan trọng nhất là tập trung vào người dùng, ngoài ra thiết kế phải đảm bảo sự nhất quán, đáp ứng bối cảnh, nội dung.</li>
<li><strong>Kỹ năng mềm:</strong> Kỹ năng mềm là một yếu tố quan trọng giúp ta trở thành designer giỏi. Cụ thể ta phải có khả năng giao tiếp, tư duy sáng tạo. Phải biết phản ứng linh hoạt, thấu hiểu người dùng. Yếu tố ngoại ngữ chính là phần quan trọng nhất, tốt ngoại ngữ ta sẽ có nhiều cơ hội và khả năng thăng tiến trong công việc.</li>
</ul>
<p>Thật ra thì mình thấy công việc nào cũng sẽ có những khó khăn, khi mà mình vượt qua khó khăn đó rồi thì mình sẽ nhận những thành quả vô cùng xứng đáng. Tính đến hiện tại UI-UX vẫn là thứ khiến đam mê và gắn bó nhất. Giờ mình chỉ muốn làm tốt công việc mình có, chấp nhận cả những phần việc sẽ không như mình mong, và tận hưởng khoảnh khắc mà mình có thể quên hết hòa vào công việc.</p>
<p>Chỉ thế, rồi buổi tối, cuối tuần đóng máy đi chill, không cần bận tâm nhiều quá, cuộc sống giữ ở mức cân bằng, rồi tìm thêm nhiều cách khác nhau làm mình hạnh phúc, chỉ thế thôi. ^^</p>
<p>“Có công mài sắt có ngày nên kim”. Hãy chăm chỉ rèn luyện và trang bị cho mình những kỹ năng, tố chất cần thiết để vững bước hơn trên con đường phát triển sự nghiệp của một UI-UX Designer, bạn nhé!</p>
<p>Mình là Hưng, cảm ơn các bạn đã quan tâm đến Blog của mình !!! </p><div id="md2html-converted" style="display:none"></div>

Mình muốn chia sẻ cho các bạn mẩu chuyện nhỏ về quá trình học UI-UX của mình và những khó khăn mình đã gặp phải.

Chia sẻ câu chuyện học UI-UX của mình

<p>Xin chào các bạn!</p>
<p>Lại là mình Quốc Hưng đến từ ABC Software Solutions Company.</p>
<p>Đa số các bạn beginner UI-UX khi bắt tay vào thiết kế một dự án mới thường rất băn khoăn không biết phải chọn font chữ nào, màu sắc bố cục hay các khoảng cách sao cho hợp lý để làm bản thiết kế của mình nổi bật hơn,… Để giúp trả lời câu hỏi đó trong bài viết này mình muốn chia sẻ đến các bạn thư viện rất hay đó là thư viện Material-UI trong Figma.</p>
<p>MUI (Material-UI) không phải là chủ đề mới nhưng nó vẫn rất hot. Khi nhắc đến Material-UI người ta sẽ nhớ đến React, đúng vậy những thư viện về MUI trên Figma cũng đa số tuân thủ theo quy tắc lập trình của React. Cụ thể thế nào cùng mình tìm hiểu sâu hơn về chủ đề thú vị cũng như vô cùng tuyệt vời này nhé.</p>
<h2 id="materialuilg">Material-UI là gì?</h2>
<p><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/mui_a8d388dc78.png" alt="mui.png" /></p>
<p>Khái niệm về Material-UI xuất phát điểm là một thư viện các React Component đã được tích hợp thêm cả Google's Material Design. Theo như giới thiệu trên trang chủ thì được xây dựng nhờ mối liên hệ chặt chẽ với React và Google's Material Design. </p>
<p>Material UI đem đến cho bạn và trang web của bạn một giao diện hoàn toàn mới, với những button, textfield, toggle… được design theo một phong cách mới lạ, thay vì việc nhà nhà người người dùng Bootstrap như hiện nay. Việc sử dụng Material-UI giúp người dùng tiết kiệm rất nhiều thời gian từ các Component có sẵn. Với trên 20 Components thì có lẽ là đủ cho trang web của bạn sinh động cũng như rất dễ dàng để bảo trì code.
Một số Components đáng chú ý:</p>
<ul>
<li><strong>Layout:</strong> Layout hay gọi là cách bố trí cho một trang web. Với phần này Material-UI đã xây dựng các Components rất tiện dụng cho chúng ta như : Box, Container, Grid, Hidden, Image List.</li>
<li><strong>Inputs:</strong> Inputs là những components được xây dựng để nhận dữ liệu, thao tác với form. Với các Components như: Button, Button Group, Checkbox, Floating Action Button, Date/Time, Radio, Select, Slider, Switch, Text Field, Transfer List.</li>
<li><strong>Navigations:</strong> Với các Components đã tích hợp sẵn phục vụ cho mục đích Navigate hay điều hướng ứng dụng. Quá tiện lợi và không kém phần chuyên nghiệp khi chúng ta sử dụng thư viện UI này. Framework đã tích hợp sẵn các Components như: BottomNavigations, BreadCrumbs, Drawer, Link, Menu, Stepper, Tabs.</li>
<li><strong>Surfaces:</strong> Material cũng đã tạo cho chúng ta khung chứa nội dung có sẵn, chúng ta có thể sử dụng các Component như: App Bar, Paper, Card, Accordition.</li>
<li><strong>Feedback:</strong> Chúng ta có các Components giúp disabled chức năng tùy chỉnh trên màn hình và chờ đợi phản hồi xong components đó thì mới có thể hoạt động lại các chức năng khác. Có một số components như: Progress, Dialog, Snackbar, Backdrop. Trong đó đơn giản như Cmponent Progress chúng ta có thể tạo hiệu ứng Loading xoay tròn đợi phản hồi từ phía backend rồi mới tắt Loading đi.</li>
<li><strong>Data Display:</strong> Material-UI đã hỗ trợ cho chúng ta những cách hiển thị dữ liệu cơ bản mà hầu như là có tất cả những thứ cần trên một ứng dụng với các Components: Avatar, Badge, Chip, Divider, Icons, List, Table, Tooltip, Typography định dạng cho chữ).</li>
</ul>
<p>Ngoài ra chúng ta còn có thể tận dụng rất nhiều Components khác giúp trang web chúng ta trở nên chuyên nghiệp hơn như: Modal, Poover, Transitions… mọi người có thể vào trong trang chủ để tham khảo thêm nhé.</p>
<h2 id="materialuitrongthitkfigma">Material-UI trong thiết kế Figma</h2>
<p>Để tạo ra một giao diện người dùng đẹp cần tuân thủ rất nhiều quy tắc trong thiết kế (Color, Typography, Contrast, Spacing, Grid,…) những quy tắc này đa phần sẽ rất nhiều và khó hiểu cho người mới bắt đầu học thiết kế Figma vì vậy Material-UI trong Figma đã ra đời, giúp các designer có cái nhìn trực quan và dễ dàng xây dựng thiết kế hơn.
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Mui_for_figma_0b6c981e76.png" alt="Mui-for-figma.png" /></p>
<p>Với Material-UI trong Figma chúng ta có thể tận dụng các thư viện được cái designer trên khắp thế giới chia sẻ trên cộng đồng Figma, hãy mở ngay thư viện Material-UI sẽ giải đáp hết thắc mắc của bạn. Giống như React Component thì Figma cũng có các Component để dùng chung, Component ở Figma có chức năng chính là giúp designer dễ dàng quản lý các layers cũng như giúp tạo và quản lý các thiết kế nhất quán trong các dự án.</p>
<p>Khi làm việc với nhóm lập trình bạn nên dùng thống nhất một bộ Material-UI sẽ giúp tiết kiệm thời gian cũng như đảm bảo sẽ không phát sinh lỗi lặt vặt trong xuyên suốt quá trình thực hiện dự án. Với vai trò là designer cá nhân mình sau khi nhận được sự hướng dẫn, giúp đỡ của anh Tin Trần (Developer với nhiều năm kinh nghiệm) đã cho ra đời bộ UI Kit theo phong cách chuẩn code Tailwind CSS. Với việc sử dụng tài nguyên sẵn có  của Tailwind CSS (color, Spacing, Typography, Borders, Effects, SVG,…) giờ đây khi bắt tay vào một dự án mới, chỉ cần sử dụng tài nguyên đã config sẵn rất tiện lợi.</p>
<h2 id="kincnhn">Ý kiến cá nhân</h2>
<p><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/ui_kit_ce692fd450.png" alt="ui-kit.png" /></p>
<p>Tất nhiên về cái đẹp thì tùy ý kiến cá nhân của mỗi người khác nhau, bạn có thể thấy các Material-UI trên cộng đồng Figma không được bắt mắt hay không đáp ứng được mục tiêu thiết kế của bạn. Hãy tự xây dựng cho mình một bộ UI Kit và chia sẻ cho mọi người nhé.</p>
<p>Còn về tính tiện lợi, rõ ràng Material UI đã cung cấp quá đủ cho một dự án, giúp quá trình làm việc cá nhân hoặc nhóm của chúng ta sẽ nhanh và hoàn hảo hơn. Ngoài ra các bạn cũng nên  tham khảo các thiết kế trên cộng đồng của Figma lưu lại những bản design ấn tượng, tích góp cho mình khả năng thiết kế và tư duy logic.</p>
<p>Qua bài viết này mình muốn giới thiệu qua về Material-UI React cũng như Material-UI trên Figma và những lợi ích tuyệt vời mang lại cho các designer. Hi vọng bài viết này giúp đỡ mọi người một phần nào đó trong cách lựa chọn phong cách thiết kế của các bạn. </p>
<p>Mình là Hưng, cảm ơn các bạn đã quan tâm đến Blog của mình!!!</p>
<div id="md2html-converted" style="display:none"></div><div id="md2html-converted" style="display:none"></div>

Đa số các bạn beginner UI-UX khi bắt tay vào thiết kế một dự án mới thường rất băn khoăn không biết phải chọn font chữ nào, màu sắc bố cục hay các khoảng cách sao cho hợp lý để làm bản thiết kế của mình nổi bật hơn,...Để giúp trả lời câu hỏi đó trong bài viết này mình muốn chia sẻ đến các bạn thư viện rất hay đó là thư viện Material-UI trong Figma.

Material-UI trong thiết kế Figma của bạn

<p>Xin chào!!</p>
<p>Mình là Hưng đến từ ABC Software Solutions Company.</p>
<p>Bài viết này mình muốn chia sẻ đến cho các bạn một số định hướng về thiết kế UI cho người mới bắt đầu, những nội dung dưới đây là quá trình mình tìm hiểu về UI, cũng như một số khó khăn gặp phải khi mới bắt đầu tập thiết kế. Vậy làm thế nào để trở thành 1 Designer tốt? hãy cùng mình đi sâu tìm hiểu nhé.</p>
<p>UI designer là một ngành mới nhưng rất “Hot” các công ty lớn về lập trình và thiết kế website, ứng dụng mobile có nhu cầu tuyển UI designer với mức lương cao khiến cho công việc này trở nên đầy hứa hẹn. Offer dành cho UI Designer cũng tăng mạnh theo từng năm. Tuy nhiên ngành này chưa có hệ thống đào tạo chính quy tại các trường Đại Học, vì vậy xảy ra tình trạng cung không đủ cầu. Nhất là các sinh viên chưa được tiếp xúc nhiều khi còn trên ghế giảng đường. Việc học Design UI rất khó khăn và không đi theo một quy trình.</p>
<p>Và sau đây là các bước để bạn bắt đầu học UI theo kinh nghiệm cá nhân của mình.</p>
<h2 id="thamgiacckhahcthitk">Tham gia các khóa học thiết kế</h2>
<p><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Rectangle_2_efd140ffbc.png" alt="Rectangle 2.png" /></p>
<p>Nếu bạn cảm thấy lượng thông tin trên mạng quá nhiều và lan man, bạn không biết cách để hệ thống hoá những thông tin đó thì mình khuyên bạn nên tìm hiểu và tham gia vào một khoá học thiết kế UI.</p>
<p>Khoá học thiết kế sẽ giúp bạn hệ thống hoá những kiến thức lan man kia thành một khối hợp nhất, hướng dẫn bạn cách làm việc hiệu quả như làm việc nhóm. Bên cạnh đó, bạn còn nhận được sự trợ giúp từ các giảng viên của khóa học – thường là những anh chị có kinh nghiệm lâu năm trong ngành.</p>
<p>Ngoài ra việc các bạn tìm hiểu từ sách, báo cũng rất là quan trọng.</p>
<h2 id="thamgiacccngngvthitkvtmhiuvdesignuiquaschbo">Tham gia các cộng đồng về thiết kế và tìm hiểu về design UI qua sách, báo</h2>
<p><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/62862fd2335ea321a6b0f76c_Mission_b6014b593a.png" alt="62862fd2335ea321a6b0f76c_Mission.png" /></p>
<p>Rất dễ dàng để bạn tham gia vào một cộng đồng thiết kế về UI, có thể qua FaceBook, Instagram, Dribbble,… Tham gia vào một cộng đồng thiết kế sẽ giúp bạn gặp gỡ, làm quen với nhiều bạn mới.</p>
<p>Chúng ta sẽ cùng chia sẻ những câu chuyện, vấn đề thường gặp trong công việc,… hoặc chia sẻ kiến thức. Ngoài ra bạn còn có thể tiếp cận nhiều hơn những cơ hội việc làm khi tham gia vào một cộng đồng.</p>
<h2 id="nmvngkinthccbnvthitk">Nắm vững kiến thức cơ bản về thiết kế</h2>
<p><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Graphic_design_basics_85fb8581c5.jpg" alt="Graphic-design-basics.jpg" /></p>
<p>Khi mình là một beginner chỉ nghĩ là thiết kế là chỉ cần đẹp, vừa mắt của mình, tất nhiên với một người tay ngang như mình thì bản thiết kế đó không tuân thủ một quy tắc nào cả và hoàn toàn sai.</p>
<p>User Interface (giao diện người dùng) là bộ mặt của sản phẩm, nó là nơi người dùng nhìn thấy và tương tác với sản phẩm của bạn.</p>
<p>Để đảm bảo một giao diện đủ tốt, bạn cần thành thạo những yếu tố cơ bản về:</p>
<p>Color: ý nghĩa của màu sắc và nguyên lý sử dụng màu.</p>
<p>Typography: các loại font chữ, các hệ font chữ cũng như quy tắc sử dụng typo trong thiết kế UI.</p>
<p>Contrast: độ tương phản, xây dựng phân cấp thông tin, tạo điểm nhấn.</p>
<p>Spacing: sử dụng khoảng trắng giúp phân tách hoặc gom nhóm những thông tin trên giao diện, giúp việc phân cấp thị giác rõ ràng hơn.</p>
<p>Grid: các thông tin trên giao diện được bố cục ngay ngắn và gọn gàng, giúp tăng tính đồng nhất cho giao diện của bạn.</p>
<h2 id="qutrnhthitk">Quá trình thiết kế</h2>
<p><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/1_33kh_N9zp_FCM_Wn_F8p_Lqe_VTQ_75ecc881ff.png" alt="1_33khN9zpFCMWnF8pLqeVTQ.png" /></p>
<p>Rất nhiều các bạn khi mới designer thường không quan tâm hình thức và các mục tiêu khách hàng hướng đến, thường tiến tới bước design ngay khi nhận được yêu cầu (mình cũng đã từng như thế).</p>
<p>Và chính mình nhận ra việc này không tốt một chút nào. Chúng ta nên phải có một bản thiết kế một cách có khoa học và có nghiên cứu.</p>
<p>Điều đầu tiên mình khuyên bạn nên tìm hiểu về quy trình thiết kế sản phẩm (Design Process). Có một vài quy trình bạn có thể tìm kiếm trên Google với từ khoá “design process”.</p>
<p>Một sản phẩm tốt là sản phẩm giải quyết được vấn đề của người dùng. Để làm được điều này, bạn cần biết mình làm sản phẩm cho ai, giải quyết vấn đề gì của họ, giải quyết bằng cách nào… Đây là nguyên lý cơ bản nhất trong ngành thiết kế, được sử dụng cho việc thiết kế sản phẩm từ vật lý đến công nghệ.</p>
<p>Tư duy thiết kế tốt sẽ giúp bạn trả lời những câu hỏi đó qua quy trình sau:
Empathize: Thấu cảm người dùng.</p>
<p>Define: Xác định vấn đề người dùng gặp phải.</p>
<p>Ideate: Lên ý tưởng.</p>
<p>Prototype: Thiết kế nguyên mẫu đầu tiên.</p>
<p>Test: Thử nghiệm thiết kế.</p>
<p><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/UI_UX_Design_b985bfbb7e.jpg" alt="UI-UX-Design.jpg" /></p>
<p>Dựa trên những những đúc kết tìm hiểu trên mình sẽ tóm tắt lại các hướng đi chính mà mọi người cần lưu ý như sau:</p>
<p>Tự học online bằng cách tham gia các khóa học nền tảng: Khoá học thiết kế Web online.</p>
<p>Đọc nhiều sách, tạp chí chuyên ngành</p>
<p>Tham gia những khóa học sử dụng phần mềm thiết kế bằng Figma.</p>
<p>Cập nhật những xu hướng thiết kế mới nhất trong và ngoài nước.</p>
<p>Tham gia các Group cộng đồng trên Facebook: Cùng học Figma.</p>
<p>Rèn luyện tư duy thiết kế bằng cách tự thực hiện những dự án cá nhân và tuân thủ thiết kế theo quy trình.</p>
<p>Xác định được thế mạnh và xây dựng profile: Mỗi cá nhân đều có điểm mạnh và điểm yếu riêng, ban đầu bạn có thể không nhận ra các điểm mạnh của mình, lĩnh vực mình thực sự phù hợp là gì.</p>
<p>Phân tích được thế mạnh của bản thân</p>
<p>Xây dựng kế hoạch phát triển thế mạnh và cải thiện điểm yếu</p>
<p>Xin đi thực tập tại các công ty để có thêm kinh nghiệm.</p>
<p>Tìm hiểu thị trường, quy trình tuyển dụng: Khi đã có trong tay kiến thức, kinh nghiệm, kỹ năng thì việc cuối cùng bạn cần làm là lựa chọn một công việc phù hợp.</p>
<p>Trên đây là toàn bộ chia sẻ cũng như những trải nghiệm của mình trong quá trình học design, mình biết mỗi người sẽ có các cách tiếp cận khác nhau, nhưng mình vẫn hi vọng bài viết này giúp đỡ mọi người một phần nào đó.</p>
<p>Một lần nữa mình là Hưng, cảm ơn các bạn đã quan tâm đến Blog của mình!!!</p><div id="md2html-converted" style="display:none"></div>

Bài viết này mình muốn chia sẻ đến cho các bạn một số định hướng về thiết kế UI cho người mới bắt đầu

UX-UI

Categories

Liên hệ