Các công cụ dành cho UI/UX

Hiện nay có nhều công cụ hỗ trợ cho việc thiết kế, phát triển và cho đến công cụ tạo lập web. Các công cụ làm prototype sẽ giúp bạn cũng làm việc hiệu quả hơn khi thể hiện ý tưởng của mình một cách trực quan và có thể tương tác cho khách hàng trải nghiệm trực tiếp. Bên cạnh đó, khả năng chia sẻ bản thiết kế cho các thành viên trong team và khách hàng lại khiến các công cụ sau hấp dẫn đối với những người thiết kế.

Với mong muốn đưa ra những gợi ý cho các bạn team thiết kế UI/UX, BAC sẽ gửi đến bạn đọc một số công cụ hữu ích sau, phù hợp với nhiều mục đích thiết kế.

Tùy theo chức năng, các công cụ prototype sau chia làm 3 loại:

• Thiết kế,
• Wireframing,
• Thiết kế và phát triển.

1. Thiết kế

• Invision studio

Link truy cập: https://www.invisionapp.com/

Đây là một công cụ đứng top đầu cho mọi quy trình thiết kế sản phẩm sáng tạo theo hướng pixel. Invision cũng sẽ giúp các thành viên trong team design giao tiếp tốt hơn, những mẫu prototype cực nhanh với sự tương tác qua micro, Wireframes và thiết kế high-end tốt hơn.

Mức độ tương thích: Mac/Window

Giá thành: Miễn phí

• Sketch

Link truy cập: https://www.sketchapp.com/

Là công cụ thiết kế dựa trên vector giúp bạn thiết kế các giao diện toàn diện và nhanh chóng hơn.

Có thể nói đây là một phần mềm nhỏ gọn hơn vowisnhuwnxg artboard không giới hạn khi có có đủ những tính năng tương tự của Photoshop và Illustrator. Đặc biệt, chức năng “export to code” của plugin Launchpad for Sketch sẽ giúp các bạn có thể chuyển đổi thiết kế sang dạng code chỉ trong tích tắc.

Tương thích: Mac

Giá thành: $99.

• Zeplin

Một plugin tuyệt với khác bạn cũng nên cân nhắc để sử dụng nếu bạn là một người dùng của Sketch, dó là plugin Zeplin. Nó cho phép các nhà phát triển dễ dàng kiểm tra kích cỡ, font chữ, màu sắc và kích thước của giao diện.

Link truy cập: https://zeplin.io/

Bên cạnh đó, bạn cũng có thể download trực tiếp từ artboard và công cụ sẽ xuất ra các file giao diện dưới dạng CSS. Nó sẽ giúp các dev front-end tiết kiệm đáng kể thời gian của mình.

• Figma

Link truy cập: https://www.figma.com/

Tuy Figma ra đời chậm hơn những công cụ khác, nhưng đây lại là một công cụ sáng tạo vì nó cho phép team design có thể cộng tác và đưa ra kiến về một mẫu thiết kế ngay trên online và trong thời gian thực.

Mức độ tương thích cao: MA/Windows

Giá thành: Miễn phí cho 3 dự án (tương đương $12/tháng cho phiên)

2. Wireframing

• Mockflow

Link truy cập: https://www.mockflow.com/

Được cho là một phần mềm UX trực tuyến đơn giản dành cho cá nhà thiết kế sáng tạo và kỹ sư chuyên dụng dùng để tạo wirefram và paper prototyping.

Tương thích dễ dàng với Mac/ Windows

Giá thành: Miễn phí cho dự án đầu tiên, (tính $14/tháng cho bản không giới hạn và %29/tháng để dùng cho cả team)

• Balsamiq

Link truy cập: https://balsamiq.com/

Là một công cụ đồ họa, Balsamiq cho phép bạn vẽ giao diện người dùng, trang web, và những ứng dụng trên di động và máy tính. Công cụ giúp bạn thao tác nhanh hơn vì chức năng kéo thả các đối tượng. Ngoài ra, Balsamiq cũng có chức năng liên kết giữa các đối tượng, các giao diện với nhau giúp tăng tính trực quan cho mẫu thiết kế.

3. Thiết kế và phát triển

• Webflow

Link truy cập: https://webflow.com/

Nếu bạn không biết gì hoặc biết không nhiều về code thì đây là một công cụ đắc lực dành cho bạn. Thời gian tạo trang web ngắn và có giao diện tương tự Photoshop sẽ giúp công việc của bạn hiệu quả hơn nhiều. Bên cạnh đó, bạn cũng có thể xuất, hoặc thay đổi mã nguồn HTML và CSS của trang web nếu khách hàng có nhu cầu.

Chưa hết, Webflow cũng cung cấp bản tích hợp đầy đủ với Google font, CMS, quyền truy cập code, bộ nhớ và xuất bản code của bản thiết kế, tùy vào mục đích sử dụng của bạn.

Mức độ tương thích cao: Mac và Windows

Giá thành: Miễn phí 2 projects (tính $16/tháng đối với bản 10 projects và #35/tháng đối với bản không giới hạn)

• Flinto

Link truy cập: https://www.flinto.com/

Với Flinto, bạn có thể thiết kế ra những prototype tương tác cho di động, máy tính hay bất kì ứng dụn web nào. Ngoài ra, công cụ cũng giúp tạo ra những tương tác vi mô phức tạp hơn trên mỗi layer mà bạn xuất ra từ Sketch

Tương thích: Mac/ Windows

Giá thành: Mua phần mềm: $99.  Sử dụng Flinto Lite: miễn phí dùng thử và tính $20 cho phiên bản không giới hạn project.

• Adobe XD

Link truy cập: https://www.adobe.com/sea/products/xd.html

Có thể bạn sẽ nghe quen với Adobe là bới Photoshop và Illustrator. Tuy nhiên Adobe mới đây đã cho ra mắt công cụ UX protptype mới chính là Adobe Experience Design CC (trước đây được gọi là Project Comet)

Với công cụ này, nó tập trung vào 2 chức năng chính là thiết kế và Prototype. Thiết kế có các công cụ vector và văn bản cơ bản. Còn đối vói prototype thì sử dụng cho việc review và chia sẻ mẫu thiết kế cho các thành viên trong team.

Mức độ tương thích: Mac /Windows

Giá thành: Miễn phí (đang trong giai đoạn Beta)

• Axure RP

Link truy cập: https://www.axure.com/

Được mệnh danh như một công cụ prototype toàn diện nhất về mặt chức năng hiện nay, Axure cho phép tạp ra các wireframs, luồng người dùng, sitemap và những mẫu protptype tương tự khác.

Ngoài ra, trên Axure cho phép bạn thêm các tương tác, tạo trang chính và sử dụng các thành phần được làm sắn từ thư viện Widget. Nếu bạn đã có kiến thức về lập trình, thì đây sẽ là một điểm cộng giúp bạn có thể thiết kế những mấu prototype phức tạp hơn.

Công cụ này sẽ phát huy tối ưu thế mạnh của mình để hỗ trợ người dùng khi sử dụng trên laptop thay vì di động.

Tương thích cho cả Mac và Windows

Giá thành: Bản dùng thử miễn phí. Tính #29/tháng/1 người và $49/tháng cho toàn team.

Trên đây là một số công cụ hữu ích dành cho các team thiết kế UI/UX đang được sử dụng nhiều hiện nay. BAC hi vọng bạn sẽ chọn được một công cụ phù hợp với nhu cầu sử dụng của các bạn.

Nguồn tham khảo: idc.edu.vn

Nhu cầu đào tạo doanh nghiệp

BAC là đơn vị đào tạo BA đầu tiên tại Việt Nam. Đối tác chính thức của IIBA quốc tế. Ngoài các khóa học public, BAC còn có các khóa học in house dành riêng cho từng doanh nghiệp. Chương trình được thiết kế riêng theo yêu cầu của doanh nghiệp, giúp doanh nghiệp giải quyết những khó khăn và tư vấn phát triển.