• Hotline: 028 3910 3811

extra_toc

Hãy cùng IDC khám phá 20 công cụ làm prototype đỉnh nhất năm 2018 để nâng cấp quy trình làm việc và tăng thêm nhiều lợi thế cho bản prototype của bạn.

Ngày nay, có rất nhiều công cụ có thể giúp bạn sản xuất những sản phẩm kỹ thuật số dễ dàng, đa dạng từ công cụ thiết kế, công cụ phát triển cho đến các công cụ tạo lập web. Những công cụ làm prototype là những công cụ có thể giúp bạn đẩy nhanh quá trình sản xuất hơn đồng thời cũng mang lại hiệu quả cao hơn. Prototype giúp thể hiện ý tưởng của bạn, và bên cạnh đó cũng giúp bạn thay đổi phương hướng thiết kế.

Khách hàng ngày nay chuộng nhiều hơn các dạng prototype tương tác. Những loại prototype này sẽ cho bạn tổng quan về thiết kế, tính tương tác và ý tưởng.

Sự lặp lại và khả năng chia sẻ thực sự là điều khiến cho prototype nổi bật hơn so với những thứ còn lại. Khả năng làm việc nhanh ở nhiều ý tưởng khác nhau và chia sẻ chúng với khách hàng hay các thành viên trong team rõ ràng rất hữu dụng.

Ở bài viết lần này, chúng ta sẽ cùng điểm qua 20 công cụ làm prototype được đính giá là đỉnh nhất năm 2018 tới đây dành cho những nhà thiết kế UI và UX thao tác nhanh hơn trong công việc.

Tùy theo chức năng, 20 công cụ prototype này sẽ được chia thành 3 nhóm, bao gồm:

Thiết kế

Invision studio (invisionapp.com)

Điểm mặt 20 công cụ làm prototype đỉnh nhất năm 2018

Mặc dù có đến hàng nghìn công cụ ngoài kia đang hướng đến việc giúp cho cuộc sống của những người designer chúng ta dễ thở hơn, nhưng InVision Studio tuyên bố là sẽ trở thành “đỉnh của đỉnh” và sẽ là công cụ duy nhất chinh phục mọi quy trình thiết kế sản phẩm và dẫn đầu vương quốc sáng tạo pixel của dân thiết kế.

Công cụ này sẽ giúp cho những nhà thiết kế tạo lập giao tiếp đồng đội tốt hơn, Wireframes và thiết kế high-end tốt hơn, những mẫu prototype cực nhanh với sự tương tác qua micro, cũng như giúp cho việc thết kế tay siêu hiệu quả.

Tôi không biết bạn nghĩ như thế nào, nhưng tôi cực kỳ hứng thú từ những ngày mà tôi bắt đầu làm việc với công cụ này.

Tương thích: Mọi người.

Giá thành: Miễn phí.

 

Sketch (sketchapp.com)

Điểm mặt 20 công cụ làm prototype đỉnh nhất năm 2018

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

Hãy nghĩ nó giống như là sự kết hợp giữa Photoshop và Illustrator, nhưng là một phần mềm nhỏ gọn hơn với những artboard không giới hạn.

Đã có hàng trăm bài viết về những tính năng của nó đã được viết ra, vì thế chúng ta sẽ không liệt kê tất cả những tính năng đó ra nữa. Tuy nhiên, một trong những tính năng mà tôi thích nhất là những ký hiệu được lồng ghép với nhau. Với tính năng này, bạn có thể thiết kế lại những yếu tố như nút, widgets, và thậm chí là những cơ chế chuyển hướng phức tạp hơn, sau đó sao chép thiết kế sang các artboards khác.

Một tính năng nữa chỉ vừa mới xuất hiện của Sketch là chức năng “export to code” của plugin Launchpad for Sketch sẽ giúp bạn chuyển đổi thiết kế sang dạng code chỉ trong vài giây. Điều này sẽ giúp cho việc phát triển thiết kế của bạn nhanh nhất có thể.

Tương thích: Chỉ dành cho người dùng Mac.

Giá thành: $99.

 

Zeplin (zeplin.io)

Điểm mặt 20 công cụ làm prototype đỉnh nhất năm 2018

Làm việc với Sketch sẽ trở nên rất tuyệt vời khi bạn sử dụng cùng với plugin này. Plugin này là một trong những plugin hữu dụng nhất. Nó giúp những 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.

Bên cạnh đó, Zeplin còn cho phép download trực tiếp từ artboard. Công cụ sẽ xuất các file giao diện sang định dạng CSS, giúp tiết kiệm rất nhiều thời gian cho những nhà phát triển front-end.

Tương thích: Chỉ dành cho người dùng Mac

Giá thành: Miễn phí cho 1 project ($17/tháng cho 3 project và $26/tháng cho 12 project)

 

FIGMA (figma.com)

Điểm mặt 20 công cụ làm prototype đỉnh nhất năm 2018

Figma là một công cụ tương đối mới, với giao diện gần giống như Sketch. Đây thực sự là một công cụ sáng tạo vì nó cho phép đội thiết kế có thể cộng tác và đưa ra ý kiến về một mẫu thiết kế ngay trong thời gian thực.

Bạn không nghe lầm đâu. Figma thực sự có thể giúp bạn thực hiện quy trình thiết kế một cách đồng bộ nhất cùng team. Quá thú vị khi mà team sản xuất, team thiết kế và team phát triển ý tưởng có thể cùng đồng hành với nhau trong quy trình. Cùng với Slach, toàn bộ team có thẻ kết nối với nhau và quy trình sản xuất sẽ được tiến hành thuận lợi với hiệu quả cao chưa từng có.

Tương thích: người dùng Mac và Windows.

Giá thành: Miễn phí cho 3 project ($12/tháng cho phiên bản không giới hạn)

 

Wireframing

Mockflow (mockflow.com)

Điểm mặt 20 công cụ làm prototype đỉnh nhất năm 2018

Mockflow là một phần mềm UX trực tuyến dành cho các nhà thiết kế sáng tạo và kỹ sư chuyên dụng. Đây là một công cụ rất dễ sử dụng để tạo wireframe và paper prototyping.

Tương thích: Người dùng Mac và Windows

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

 

Balsamiq (balsamiq.com)

Điểm mặt 20 công cụ làm prototype đỉnh nhất năm 2018

Balsamiq là một công cụ đồ họa được tạo ra để 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 cho việc kéo và định vị các thành phần được dễ dàng hơn.

Balsamiq mô phỏng kinh nghiệm viết trên bảng, nhưng sử dụng dưới dạng một phần mềm. Hầu hết mọi mẫu thiết kế thành công đều bắt đầu từ giấy và bút, và Balsamiq có thể thay đổi chính xác điều đó.

Tương thích: Người dùng Mac và Windows

Giá thành: $89 cho người dùng đơn.

 

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

Webflow (webflow.com)

Điểm mặt 20 công cụ làm prototype đỉnh nhất năm 2018

Công cụ này được khởi chạy vào năm 2013 bởi 2 anh em nhằm giúp cho những nhà thiết kế có thể tạo ra trang web mà không cần biết về code.

Webflow cho phép nhà thiết kế tạo ra nhiều trang web trong thời gian ngắn khi sử dụng một giao diện tương đối giống với Photoshop. Mặc dù bạn không cần phải biết về code để làm việc trên công cụ này, nhưng bạn vẫn có thể xuất và thay đổi mã nguồn html và css của trang web tùy thuộc vào nhu cầu của khách hàng.

Bạn có thể tìm thấy 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 mẫu thiết kế.

Cũng cần lưu ý rằng Webflow hoạt động rất tốt với những trang tĩnh đơn giản. Nếu cấu trúc cảu trang có phần phức tạp hơn, bạn cần phải tìm kiếm và thử một số phương thức khác.

Tương thích: người dùng Mac và Windows

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

 

Flinto (flinto.com)

Điểm mặt 20 công cụ làm prototype đỉnh nhất năm 2018

Đây là một trong những công cụ prototype yêu thích nhất của tôi khi làm việc với Sketch. Finto cho phép người thiết kế tạo ra những prototype tương tác cho di động, máy tính hay bất kỳ ứng dụng web nào. Bên cạnh đó, công cụ còn giúp tạo ra những tương tác vi mô phức tạp hơn trên đầu của mỗi layer mà bạn xuất bản từ Sketch.

Tương thích: Người dùng Mac và Windows

Giá thành:  Phần mềm Flinto: $99.

                   Flinto Lite: Miễn phí dùng thử ($20/tháng cho bản không giới hạn project)

 

Framer (framer.com)

Điểm mặt 20 công cụ làm prototype đỉnh nhất năm 2018

Điều duy nhất hơi bất tiện ở Framer đó là bạn phải mã hóa nó với CoffeeScript. Tuy nhiên, khi bạn đã quen dần với việc đó thì đây quả thực là một công cụ kgoon giới hạn về số lượng tùy chọn.

Về cơ bạn, bạn có thể làm tất cả mọi thứ cần có trên 1 trang web, như là sử dụng dữ liệu trực tiếp, hoặc tạo ra 100 project độc đáo khác nhau trong 100 ngày. Framer có những công cụ thiết kế của riêng nosnhuwng cũng có thể tương tác tốt với Sketch.

Kể cả khi bạn không rành lắm về Framer, tôi cũng muốn khuyên bạn hãy xem qua nó. Giao diện đẹp và dễ dàng sử dụng là một trong những lợi điểm của ứng dụng này.

Tương thích: Chỉ dành cho người dùng Mac.

Giá thành: Miễn phí dùng thử (bản pro giá $15/tháng và bản quyền chính thức giá $159/năm)

 

RapidUI (rapidui.io)

Điểm mặt 20 công cụ làm prototype đỉnh nhất năm 2018

Công cụ mới mẻ này sẽ giúp bạn chuyển đổi tài liệu Photoshop thành những trang web sống động mà không cần phải viết code.

Kéo và thả những file PSD của bạn vào dashboard và chỉ sau vài phút, file PSD của bạn sẽ được chuyển sang HTML và CSS. Cũng trong công cụ này, bạn có thể tạo ra mẫu thiết kế với đầy đủ chức năng tương tác với những slide trình chiếu, video, bản đồ, nút và bất kỳ thứ gì mà bạn muốn chỉ với vài cú click.

Ngoài ra, mã code luôn luôn có thể truy cập và đồng bộ với thiết kế của bạn, cho phép kết nối hoàn toàn với những nhà lập trình nếu cần.

Tương thích: Người dùng Mac và Windows

Giá thành: Miễn phí (bản beta)

 

Hype 3 (tumult.com/hype/)

Điểm mặt 20 công cụ làm prototype đỉnh nhất năm 2018

Với Hype, bạn hoàn toàn có thể hoạt hình hóa nội dung như là khi bạn làm việc với After Effects và sáng tạo hoạt hình với keyframes. Công cụ này ghi nhớ những sản phẩm hoạt hình bạn tạo ra và tự động xuất chúng thành HTML5.

Điểm đặc biệt của công cụ này là bạn không cần phải biết về code và nó cũng có thể hoạt động trên nhiều thiết bị khác nhau như di động, máy tính hay máy tính bảng.

Tương thích: Chỉ dành cho người dùng Mac

Giá thành: Miễn phí bản dùng thử (Bản tiêu chuẩn giá $49 và $99 là giá của bản full)

 

Principle (principleformac.com)

Điểm mặt 20 công cụ làm prototype đỉnh nhất năm 2018

Với Principle bạn có thể dễ dàng thiết kế giao diện chuẩn tương tác dành cho người dùng. Bất kể là bạn đang thiết kế một dòng chảy của một ứng dụng đa màn hình hay các tương tác và ảnh động mới, công cụ này cũng cho phép bạn tạo ra những mẫu thiết kế cực kỳ ấn tượng.

Tương thích:  Chỉ dành cho người dùng Mac.

Giá thành:  Miễn phí bản dùng thử (mua trọn gói với giá $129)

 

Adobe XD (adobe.com/products/xd.html)

Điểm mặt 20 công cụ làm prototype đỉnh nhất năm 2018

Adobe chủ yếu được biết đến nhiều và nổi tiếng bởi Photoshop và Illustrator. Tuy nhiên, vào năm ngoái, Adobe vừa ra mắt một công cụ UX prototype mới chính là Adobe Experience Design CC (trước dây được gọi là Project Comet)

Adobe XD tập trung quanh hai mục: Thiết kế và Prototype. Mục Thiết kế có các công cụ vector và văn bản đơn giản và được sử dụng để tạo nên các mẫu thiết kế của bạn. Mục Prototype sử dụng cho việc xem lại và chia sẻ mẫu thiết kế. Với Adobe, bạn có thể xây dựng các mẫu prototypes với độ trung thực cao  kể cả trên PC.

Tương thích: Người dùng Mac và Windows.

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

 

Origami (origami.design)

Điểm mặt 20 công cụ làm prototype đỉnh nhất năm 2018

 Đây là một công cụ được mang đến cho dân thiết kế bởi đội ngũ thiết kế của Facebook. Với công cụ này, bạn có thể trải nghiệm những ý tưởng mới của mình trong quá trình xây dựng sản phẩm kỹ thuật số, rất thích hợp trong việc thiết kế prototypes cho các giao diện hiện đại.

Tương thích:  Chỉ dành cho người dùng Mac.

Giá thành: Miễn phí.

 

Invision (invisionapp.com)

Điểm mặt 20 công cụ làm prototype đỉnh nhất năm 2018

Trong số những công cụ sản xuất prototype phổ biến, Invision là công cụ có thể tích hợp thường xuyên với Sketch. Đây là một sản phẩm của Webbly, sẽ giúp những nhà thiết kế đồ họa tự do sáng tạo, tự do xem lại, chỉnh sửa và chia sẻ kết quả với những nhà phát triển hay các thành viên khác trong nhóm.

Lợi thế nổi bật nhất của sản phẩm này là các tính năng kết nối team cùng dự án, giúp tất cả người dùng có thể cùng đưa ra nhận xét, ghi chú và nhìn thấy sản phẩm thay đổi thế nào trong thời gian thực.

Invision cũng cung cấp một dịch vụ hoàng hảo trong việc xây dựng prototype dùng cho điện thoại, thông qua đó giúp mô phỏng sự linh hoạt của các sản phẩm kỹ thuật số và tính ứng dụng của nó trên điện thoại.

Tương thích:  Dành cho người dùng Mac va Windows.

Giá thành:  Miễn phí cho 1 project ($15 cho 3 project, $25/tháng cho bản không giới hạn và $99/tháng cho sử dụng nhóm)

 

Axure RP (axure.com)

Điểm mặt 20 công cụ làm prototype đỉnh nhất năm 2018

Axure RP là một công cụ khá nổi tiếng trong thiết kế UX. Đây là một trong những công cụ prototype toàn diện nhất (về mặt chức năng). Những nhà thiết kế web và người dùng lão luyện thường sử dụng Axure RP để tạo ra các wireframes, luồng người dùng, sitemap hay những mẫu prototype tương tác.

Công cụ 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 là một nhà thiết kế chuyên nghiệp, bạn có thể sử dụng Axure RP để xây dựng những mẫu prototype tương tác phức tạp hơn, nhưng bạn cũng cần 1 thời gian để nắm vững kiến thức cơ bản về lập trình.

Công cụ không được khuyến khích cho trong việc thiết kế các bản prototype dùng cho di động vì nó không thân thiện với di động và khá tốn thời gian.

Tương thích:  Người dùng Mac và Windows.

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

 

Proto.io (proto.io)

Điểm mặt 20 công cụ làm prototype đỉnh nhất năm 2018

Proto.io là một ứng dụng web mạnh mẽ đáng kinh ngạc với quá nhiều chức năng. TUy nhiên, mọi thứ đều hoạt động theo cơ chế kéo – thả, nút click và lựa chọn giá trị từ danh sách nên đôi khi nó sẽ khiến bạn cảm thây bối rối một chút để chọn được mẫu cài đặt bạn cần.

Đây là một công cụ tạo prototype tiên tiến hơn để thêm các tương tác phúc tạp nhưng nó lại cực kỳ dễ sử dụng.

Tương thích: Người dùng Mac và Windows

Giá thành: Bản dùng thử miễn phí ($24/tháng cho 5 project, $40/tháng cho 10 project, $80/tháng cho 15 project và $160/tháng cho 30 project)

 

Atomic (atomic.io)

Điểm mặt 20 công cụ làm prototype đỉnh nhất năm 2018

Một công cụ cho phép giải quyết các vấn đề phức tạp trong quá trình xây dựng sản phẩm. Tầm nhìn của Atomic là toàn bộ các phần của prototype, từ đầu đến cuối sẽ được diễn ra trên nền tảng của họ. Tuy nhiên, những gì thường xảy ra là nhà thiết kế sẽ thiết kế thông qua các công cụ vector như Sketch hay Illustrator và sau đó xuất sang Atomic.

Điều quan trọng cần lưu ý là có một sự tương đồng không thể phân biệt được giữa giao diện của Atomic và giao diện của Sketch như là xây dựng cột, artboard, lớp hay các phím tắt.

Nếu bạn đã từng sử dụng Sketch, bạn chắc chắn sẽ cảm thấy rất thân thuộc khi sử dụng Atomic.

Tương thích: Người dùng Mac và Windows

Giá thành: Miễn phí cho 1 project ($19/tháng cho bản không giới hạn, $39/tháng cho team và $59/tháng cho toàn hệ thống)

 

UXPin (uxpin.com)

Điểm mặt 20 công cụ làm prototype đỉnh nhất năm 2018

UXPin cho phép nhà thiết kế dễ dàng chuyển tiếp giữa từng giai đoạn trong quá trình thiết kế, trong cùng một tài liệu. Paper sketch, wireframe, mockup, prototype hay youbất kỳ sự kết hợp độc đáo mà bạn có thể nghĩ tới. Ví dụ, bạn có thể xây một wireframe tương tác nhanh chóng chỉ tỏng vài phút và bắt đầu kiểm tra ý tưởng của bạn ngay lập tức. Sau đó bạn có thể xây dựng trên cùng tập tin, kết hợp với kết quả từ lần kiểm tra trước đó.

Tạo một mô hình điểm ảnh hoàn hảo trong Sketch hoặc Photoshop, sau đó tải trực tiếp lên cùng một tài liệu để tạo ra mẫu prototype có độ trung thực cao từ các bố cục wireframe ban đầu.

Tương thích: Người dùng Mac hoặc Windows

Giá thành: Bản dùng thử miễn phí ($29/tháng cho 25 project và $49/tháng cho 50 project)

 

ProtoPie (protopie.io)

Điểm mặt 20 công cụ làm prototype đỉnh nhất năm 2018

Đây là một công cụ tương đối mới và dễ học, cho phép tạo ra những tương tác vi mo tinh vi khi tạo các các prototype cho sản phẩm. Công cụ cũng dễ dàng đồng bộ với Photoshop và Sketch.

Ngoài ra, ProtoPie cho phép bạn kiểm tra tính năng của prototype bằng cách quét mã vạch.

Tương thích: Người dùng Mac và Windows

Giá thành: Bản dùng thử miễn phí (mua với $99)

 

Wow, quá nhiều công cụ để lựa chọn phải không nào?

Hãy thử trải nghiệm qua từng công cụ, bạn sẽ cảm thấy chugns tuyệt vời như thế nào. Tự trải nghiệm và cho IDC biết về cảm nhận của bạn qua từng công cụ nhé.

Đừng quên là để sử dụng thành thạo các công cụ prototype trên đây, bạn cũng cần một vài kỹ năng về thiết kế đồ họa và các công cụ hỗ trợ đi kèm nhé. Xêm thêm các khóa học về thiết kế đồ họa tại đây để xem IDc có giúp được gì cho các bạn không nào.

Thông tin liên hệ:

Trung tâm Thời Đại Mới IDC: số 40, Đinh Tiên Hoàng, P.Đa Kao, Quận 1, TPHCM
ĐT: (028) 3910 3811 – (028) 3500 4500
Website: www.idc.edu.vn
Hotline tư vấn: (028) 3910 3811

Bài viết mới