Cùng khám phá các công cụ bạn nên thử để làm cho prototype của mình trở nên ấn tượng nhất.
1. Atomic
Atomic là một ứng dụng web chỉ hoạt động trên Google Chrome
Giá: Bản dùng thử miễn phí (Starter: $15/tháng – Pro: $25/tháng).
Với giao diện người dùng đẹp, timeline animation dễ sử dụng và trực quan, Atomic đã ghi điểm trong mắt người dùng. Atomic là một ứng dụng web hoạt động trên Google Chrome, điều này có thể là trở ngại cho các designer dùng Safari, Firefox hoặc các trình duyệt của Windows. Và nó cũng không có app riêng cho máy tính.
Nếu bạn đã sử dụng After Effects để tạo prototype cho các animation thì bạn sẽ cảm thấy thân thuộc như ở nhà với timeline animation của Atomic. Điều này cho bạn sự linh hoạt và quyền kiểm soát bạn cần để tinh chỉnh tương tác của mình: chỉ cần nhấn nút play để xem các thay đổi và animation đang diễn ra.
Khi bạn hài lòng với thiết kế của mình rồi, bạn có thể chia sẻ nó với dạng URL xem trước trên bất cứ thiết bị nào. Bạn cũng có thể nhận được các feedback từ khách hàng và đội của mình qua các comment ngay trong đó.
Tính năng ưa thích của tôi trong công cụ này là tùy chọn lịch sử, cho phép bạn trở về trước để xem các phiên làm việc trước và tạo những phiên bản mới từ bất cứ thời điểm nào. Với những người thiết kế cho iOS, Atomic đã ra mắt bộ kit iOS vơi một thư viện của các tài nguyên thiết kế iOS để kích hoạch tạo prototype nhanh chóng.
Cuối cùng, bạn có thể thêm CSS tùy biến trực tiếp vào Atomic. Việc xuất CSS cũng dễ dàng nên bạn chỉ cần copy và paste chúng vào project của mình.
2. Easee
Easee là một trong những công cụ tạo prototype ấn tượng nhât
Giá: Bản cơ bản miễn phí (bản không giới hạn: $10/tháng).
Khi bạn coi sản phẩm này là một dự án đầy tâm huyết và đam mê của Steven Fabre thì Easee là một trong những công cụ tạo prototype ấn tượng nhất. Trong bài viết về Medium của ông ấy, Fabre nói rằng mục đích của Easee là để giúp các designer xây dựng những animation đẹp cho website mà không cần phải viết code.
Với Easee, bạn có thể kéo thả các layer từ Sketch và Photoshop rồi bắt đầu animate. Easee sẽ lấy những animation mượt mà được tạo ra trong ứng dụng và xuất nó thành CSS để bạn có thể đưa nó vào dự án web của mình. Bạn cũng có thể xem trước animation của mình trực tiếp ngay trên web.
Bạn có thể bắt đầu Easee với phiên bản cơ bản và nâng cấp lên bản không giới hạn với giá 10$/tháng. Nó cung cấp cho bạn các project animation không giới hạn và cách xuất CSS.
Rõ ràng là Easee được tạo ra bởi designer cần đáp ứng nhu cầu đơn giản và nó thực sự làm tốt điều đó. Công cụ này giữ mọi thứ đơn giản và dễ dùng với việc bỏ đi những tính năng không cần thiết nên bạn có thể tập trung xây dựng những animation và tương tác tốt nhất cho project thiết kế của mình. Tôi khuyến khích bạn hãy thử Easee đi và hỗ trợ cho các developer freelance.
3. InVision
InVision là công cụ tạo prototype phổ biến nhất gây tranh cãi trên thế giới
Giá: Miễn phí.
InVision là một công cụ tạo prototype phổ biến nhất gây tranh cãi trên thế giới. Đội ngũ của nó liên tục thêm vào những tính năng mới giúp các designer tạo ra những prototype hiệu quả hơn. Tính năng tốt nhất của InVision có lẽ là khả năng quản lý các feedback về project. Khách hàng và đội thiết kế có thể trao đổi trực tiếp một cách vô cùng tiện lợi về prototype. Chúng được đối chiếu trong một địa điểm thuận lợi mà bạn không bao giờ mất dấu những feedback này.
Giao tiếp về tình trạng của project giữa khách hàng và đội ngũ thì cực kì quan trọng. Với trang quản lý project của InVision, bạn có thể sắp xếp các thành phần thiết kế thành một trạng thái chuỗi các công việc. Bạn có thể thiết lập các cột cho danh sách To-Do, đang tiến hành, cần xem lại, đã chấp thuận và kéo thả thành phần thiết kế của bạn vào các cột phù hợp.
Ví dụ nếu bạn dự định làm trên trang chủ, bạn có thể kéo các thành phần thiết kế vào cột đang tiến hành. Bây giờ khi khách hàng hoặc đội của bạn xem qua bảng trạng thái, họ sẽ ngay lập tức biết được cái gì đang được thực hiện. Nếu bạn từng sử dụng Trello trong môi trường phát triển linh động thì điều này cũng tương tự.
InVision luôn luôn thông báo những tính năng mới và gần đây nó đã ra mắt một cái mới gọi là Boards là ngôi nhà nơi project của bạn có thể sống trong đó. Nó cũng có thể được sử dụng như là một công cụ thuyết trình, là một người quản lý tài nguyên cho dự án và là một nơi để tạo ra các moodboard hoặc các thư viện. Bạn thậm chí có thể chia sẻ các moodboard hoặc thư viện này với khách hàng và team thiết kế để họ có thể đưa ra các feedback trực tiếp.
InVision có rất nhiều tính năng tiện lợi như: bạn có thể import file thiết kế từ Sketch hoặc Photoshop, animate các tài nguyên thiết kế, liên kết các trang để kích thích các trang web ngoài đời thực và xem trước các prototype trên các thiết bị di động. Nó cũng có một phiên bản với lịch sử vô hạn, kiểm tra người dùng miễn phí vô hạn và tích hợp với ứng dụng như Slack, Dropboxm Box và nhiều cái nữa. InVision vẫn là một kẻ thay đổi cuộc chơi trong không gian này và nó vẫn chưa có dấu hiệu chững lại.
4. Adobe Comp
Với Adobe Comp, bạn có thể tạo ra các layout cho di động, web và bản in hoàn toàn được tích hợp với Photoshop, Illustrator và InDesign
Giá: Miễn phí.
Phiên bản gần đây của iPad Pro nói cho chúng ta biết về nhiều nhà sáng tạo đang sử dụng các tablet để phát triển các project. Adobe Comp cung cấp các công cụ bạn cần để chuyển đổi thao tác vẽ tự nhiên thành đồ họa máy tính.
Với Adobe Comp, bạn có thể tạo ra các layout cho di động, web và bản in mà hoàn toàn tích hợp với Photoshop, Illustrator và InDesign. Nếu bạn sử dụng những tài nguyên liên kết thì khi bạn thay đổi trong một chương trình này thì ở những nơi khác chúng cũng sẽ được cập nhật những thay đổi đó.
Comp hoạt động với Adobe Stock và Typekit vậy nên nó cũng cung cấp cho bạn những hình ảnh, đồ họa và hàng trăm font chữ dễ dàng được tích hợp khi bạn thiết kế một prototype. Đây là tính năng ưa thích nhất của tôi bởi vì nó có nghĩa hầu như bất cứ đồ họa hoặc font nào cũng sẽ nằm trong tầm tay của bạn.
Adobe Comp mang đến một cách mới để phát triển và thiết kế các prototype nhưng do thiết kế thân thiện với người dùng của nó, hầu như sẽ không có rào cản nào gây khó khăn cho bạn. Tuy nhiên Adobe vẫn cung cấp vài bài hướng dẫn để giúp bạn bắt đầu làm quen nếu bạn cần.
Nếu bạn muốn chia sẻ các prototype với nhóm hoặc khách hàng của mình, bạn có thể sử dụng mạng lưới Behance của Adobe để nhận feedback. Một bước đi thông minh của Adobe để tận dụng tối đa khả năng tiếp cận khổng lồ có sẵn của mình.
5. Principle
Principle cùng với ứng dụng iOS để phát (mirror) những prototype trực tiếp
Giá: Bản dùng thử miễn phí (bản không giới hạn là $129).
Principle được xây dựng bởi cựu kĩ sư của Apple cho OS X và cùng với ứng dụng iOS để mirror những prototypes trực tiếp. Principle có một tính năng đáng giá là có thể xuất các prototype thành video hoặc ảnh động GIF và chúng có thể được chia sẻ trên Dribbble, Twitter hoặc bất cứ đâu bạn muốn.
Principle chỉ dành cho Mac và nếu bạn từng sử dụng Sketch thì giao diện của Principle cũng trông tương tự. Principle sử dụng các artboard để animate các yếu tố giữa các giai đoạn vì khi bạn làm việc trên prototype của mình, bạn có thể xem trước trực tiếp các thiết kế của mình ở phía bên tay phải cửa sổ. Hoặc bạn có thể mirror thiết kế của mình trên một thiết bị iOS.
Trong khi Principle không bao gồm một công cụ tích hợp, điểm trừ này có khả năng bị lờ đi bởi khả năng làm việc offline của nó. , Vì bạn không dựa vào một kết nối chậm hoặc không đáng tin, sự linh hoạt trong việc hoạt động offline đáng chú ý hơn bởi khi đó tốc độ được gia tăng đáng kể.
Kết luận
Chúng ta vừa nhìn vào top 10 công cụ tạo prototype và như bạn thấy là có rất nhiều sự lựa chọn nên sẽ khó để chọn ra một cái. Tôi khuyên bạn nên thử hết những cái khơi dậy sự tò mò của bạn và xem thử cái nào tốt nhất dành cho bạn, cho khách hàng và nhóm của bạn. Mục đích cuối cùng là để concept của bạn thành hình và thiết kế của bạn là tâm điểm chú ý, vậy nên hãy thử hết các công cụ khác nhau và kiểm tra cập nhật, chúng có thể cho bạn những gì bạn đang tìm đấy. Với nhiều lựa chọn tuyệt vời như thế, bạn sẽ sớm tìm được công cụ tạo prototype phù hợp giúp thổi hồn vào những ý tưởng của bạn.
ST. CREATIVEBLOQ/NGUYEN MINH
