10 công cụ miễn phí để tạo Wireframe

Wireframe là một bước rất quan trọng trong việc thiết kế và lập trình web và ứng dụng, kể cả ứng dụng trên điện thoại, máy tính bảng... Nó cho phép nhanh chóng tạo ra được prototype và giúp có cái nhìn cơ bản về sản phẩm.
Ngoài ra nó còn giúp dễ dàng truyền đạt ý tưởng, giảm thiểu việc giao tiếp không tốt, giảm cả chi phí cho dự án.
Bài viết sẽ giới thiệu đến bạn 10 tools miễn phí trong việc tạo ra wireframe (bằng application, web và add on vào browser).


1. Mockingbird

Mockingbird là một ứng dụng web dựa trên framework Cappuccino để tạo, link đến nhau, xem trước và chia sẻ wireframe website hoặc ứng dụng của bạn.

Chương trình có giao diện rất rõ ràng và thân thiện với người dùng bằng cách kéo thả, tích hợp với link trang, việc thay đổi kích cỡ của text và khả năng dễ dàng tạo các ví dụng với khách hàng hoặc đồng nghiệp. 

Bởi vì dựa trên nền tảng web, bạn có thể tạo và chia sẻ các ví dụ từ bất cứ đâu.

2. Lovely Charts

Lovely Charts là một ứng dụng vẽ diagram online cho phép bạn tạo flowchart, sitemaps, tổ chức các biểu đồ và wireframe.

Một trong các tính năng chính của chương trình là khả năng sử dụng dựa trên các kiểu diagram mà bạn vẽ. Tính năng quản lý History cũng rất hữu dụng, lưu đến 20 diagram trong bộ nhớ để phòng trường hợp bạn muốn quay lại phiên bản trước đó và chỉnh sửa.

Ngoài ra còn có một tập hợp các tool rất mạnh được cung cấp cùng với các thư viện symbol phù hợp với hầu hết requirement.

3. Cacoo

Cacoo là một chương trình thân thiện với người dùng khác dùng để vẽ các biểu đồ, sitemap, wireframe và biểu đồ trực tuyến.

Việc tạo giao diện bằng cách kéo thả rất dễ dàng, ngoài ra còn có nhiều công cụ để bạn có thể làm việc hiệu quả hơn. Khả năng quay lại không giới hạn cũng là một tính năng đáng nói khác với khả năng lưu tất cả các lần chỉnh sửa, bạn sẽ có thể yên tâm quay lại bất cứ khi nào bạn muốn.

Nhiều người dùng cũng có thể làm việc và hoàn thành cùng lúc nhiều diagram với các ứng dụng hỗ trợ thời gian thực.

4. Gliffy

Gliffy là một chương trình dựa trên nền tảng web khác cho phép bạn tạo flow diagrams, org charts, floor plan, các bước thực hiện, network diagrams, bản vẽ kỹ thuật, wireframe, và hơn thế nữa... Cũng với giao diện kéo thả để thêm vào các boxes, buttons, và line từ thư viện nét vẽ sẽ khiến bạn dễ dàng tạo text và các khung wireframe rõ ràng.

Bạn có thể truy cập vào thư viện hoàn chỉnh các hình vẽ và có thể import chính hình của bạn, như logos và background, để hoàn thành diagrams. Bạn có thể chia sẽ và đóng góp với mọi người, trên bất kỳ nền tảng nào, trong bất kỳ khu vực nào trong khi vẫn có khả năng bảo vệ và theo dõi các thay đổi.

Các hàm API của Gliffy cũng giúp các lập trình viên tích hợp các tính năng của Gliffy vào chính ứng dụng web của họ dựa trên việc sử dụng framework.

5. Lumzy

Lumzy là một công cụ tạo prototype cho website và applications. Bạn có thể thêm vào các controls, thay đổi control ngay trong chương trình và giả lập dự án của bạn một cách dễ dàng.

Các đóng góp theo thời gian thực cũng là một tính năng góp phần làm nên thành công của ứng dụng này, với các công cụ cho phép chỉnh sửa theo nhóm, một chương trình chat để giúp thiết kế và chia phiên bản sản phẩm. Lumzy cũng là sản phẩm duy nhất cho phép chỉnh sửa hình ngay trong sản phẩm, dễ dàng cắt sửa bất cứ tấm hình nào từ ổ cứng và chỉnh sửa nó, thay đổi màu sắc, độ sáng, độ tương phải... sau đó thêm vào project của bạn.

Phiên bản Pro với nhãn trắng và có thể được tích hợp vào các plaform có sẵn hoặc chuyển lên server và dùng để làm tài liệu chung cho công ty.

6. Mockflow

Mockflow là một ứng dụng web dựa trên nền Adobe Flash. Nó mang theo giao diện rõ ràng, tối ưu, được sắp xếp hợn lý và bộ công cụ chỉnh sửa rất hữu dụng.

Bạn kéo thả các component để tạo sản phẩm wireframe với khả năng thêm trang và tạo thành cấu trúc site. Các component tích hợp rất hữu ích, từ charts và quảng cáo đến menu và dropdown. Khả năng upload hình ảnh để dùng, cũng như các lựa chọn từ các sticker cũng như các yếu tố thông dụng, và hệ thống hình ảnh mạng xã hội...

Bạn cũng có thể quan tâm đến việc chat và mời những người khác xem sản phẩm của bạn, cho phép tham gia thiết kế...

7. Pencil Project

Pencil Project là một công cụ mã nguồn mở khác cho việc tạo diagram và prototype mà mọi người đều có thể sử dụng. Nó gồm 2 bản: một là add-on dùng cho Firefox và một là chương trình riêng biệt (tích hợp cả Linux và Windows). Với bản dành cho Firefox bạn có thể mặc sức dùng chính trình duyệt Firefox để vẽ, lưu và load các canvas....

Một điểm thú vị là Stencil Generator cho phép bạn tạo chính collection các hình vẽ của bạn bằng cách tạo ra một folder các hình đó. Tool Clipart cho phép bạn tìm các thư viện tại openclipart.org và trực tiếp kéo hình ảnh vào Pencil. Pencil cũng hỗ trợ việc sử dụng các object khác cả raster và vector.

Cuối cùng prototype được tạo ra có thể xuất dưới dạng PNG, web, file OpenOffice, PDF hoặc file Doc. Nếu bạn là người yêu thích Firefox, thì Pencil sẽ là tool đặc biệt cho việc thể hiện các ý tưởng của bạn. Nó cũng đã đoạ giải "Best New Add-On" năm 2008.

8. SimpleDiagrams

SimpleDiagrams là một ứng dụng desktop nhỏ gọn giúp bạn thể hiện ý tưởng một cách nhanh chóng và đơn giản với đủ các chứ năng để trình bày. Được xây dựng từ nền tảng Adobe AIR nên SimpleDiagrams chạy trơn tru trên cả Mac, Windows và Linux.

Bạn có thể kéo thả, thay đổi kích thước symbol từ thư viện, thêm hình ảnh, chú thích và xuất ra file PNG.

9. Denim

Denim là một chương trình hỗ trợ đa nền tảng và cho phép thiết kế ở nhiều mức độ khác nhau. Nó là một công cụ hiệu quả để brainstorm và lên wireframe.

Hai tính năng chính của Denim là Components, cho phép bạn tạo widgets có thể tái sử dụng và Conditionals, cho phép bạn tạo chuyển động giữa các trang tuỳ thuộc theo action bạn đặt ra để tạo thê sự thu hút.

10. Website Wireframe

Website Wireframe là một tool dựa trên nền tảng web rất đơn giản cho việc xây dựng wirefream trong thời gian ngắn. Một lick để xem wireframe có thể được gửi bằng email, chat, hay điện thoại và sau đó wireframe có thể dễ dàng cập nhật theo các ý kiến phản hồi, các thảo luận...

Chương trình dễ sử dụng, cho cả việc tạo và chia sẻ wireframe. Nó miễn phí và dễ dàng sử dụng ở bất kỳ trình duyệt nào.

Nguồn: mashable.com



Our Sponsor

BMW 320i * BMW 520i * BMW 720i