Ngày hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu những công cụ phát triển UX/UI phổ biến được các bạn desgin và lập trình sử dụng trong thiết kế và phát triển web nhé!
Công Cụ Figma
Figma là nền tảng tập hợp nhiều tính năng mạnh mẽ dành cho thiết kế đồng thời làm tăng hiệu suất suất làm việc cho các bạn designer. Nó giúp bạn dễ dàng tạo ra thiết kế mẫu cho trang web thông qua việc cung cấp nhiều công cụ hữu ích như là cho phép ra các UI mà người dùng có thể tương tác, tạo các hiệu ứng chuyển động cho UI, thêm các hiệu ứng khi người dùng hover hay nhấn vào phần tử trong trang web, tự động tối ưu hóa mẫu thiết kế web trên màn hình điện thoại...
Ngoài ra còn có một số điểm mà mình cảm thấy rất thích ở công cụ design này là có thể chia sẻ ngay mẫu thiết kế web thông qua link chia sẻ, cho phép tạo các comment(bình luận) vào prototype(mẫu thiết kế web), có thể tích hợp với các công cụ thiết kế khác...
Đối với phiên bản miễn phí thì bạn có thể:
- Sử dụng cho 3 dự án thiết kế
- Cho phép 2 designer cùng sử dụng
- Không giới hạn lưu trữ
- không giới hạn số lần xem
Công Cụ AdobeXD
AdobeXD là một công cụ giúp các nhà thiết kế UX có thể dễ dàng tạo sự tương tác trải ngiệm người dùng cho trang web và app điện thoại. Nó cho phép bạn có thể chia mẫu thiết kế web ra nhiều thành phần nhỏ hơn để có thể sử dụng cho các dự án khác nhau (nhằm giảm sự lặp lại ). Ngoài ra nó còn cung cấp hơn 200 plugin để giúp bạn có thể tự động hóa thiết kế cũng như tăng hiệu suất làm việc lên gấp nhiều lần.
Một số điểm mạnh đáng chú ý của công cụ này là có thể kết hợp tốt với Photoshop, Illustrator, After Effects, cho phép tạo ra các component để áp dụng nhiều dự án khác nhau, tạo 3D transforms cho đối tượng, có thể kiểm tra và xem trước các mẫu prototype trên IOS và Android...
Đối với việc sử dụng cho cá nhân thì bạn có thể tải về hoàn toàn miễn phí cho máy tính hệ điều hành macOS và Windows. Tuy nhiên có một số điểm bất tiện là công cụ không hỗ trợ Tiếng Việt (bản mặc định sẽ là tiếng anh nhé), đối với hệ điều hành window thì phải là các phiên bản Windows 10 (64-bit) - Version 1803 (build 10.0.17134) trở về sau, đối với macOS là phiên bản macOS X v10.14 trở về sau nhé!
Công Cụ Lorem Picsum
Trong quá trình thiết kế web thì chúng ta hay sử dụng lorem ipsum như là một loại văn bản minh họa (thay thế cho nội dung chưa có ở trong trang web ) để xây dựng và hiển thị bố cục được tốt hơn.
Vậy đối với hình ảnh thì chúng ta có cách nào để sử dụng hình ảnh minh họa như lorem ipsum không?
Đó chính là công cụ Lorem Picsum. Với nhiệm vụ chính là giúp bạn có thể tạo ra hình ảnh minh họa ngẫu nhiên cho trang web bằng việc sử dụng đường dẫn:https://picsum.photos/200/300.
Ngoài ra nó còn có một số tính năng hữu ích khác như là chế độ blur, grayscale cho hình ảnh, cung cấp API về thông tin hình ảnh...
Công Cụ MockPlus
MockPlus là một công cụ giúp bạn có thể tạo ra prototype cho trang web một cách đơn giản, nhanh chóng và thông minh bao gồm nhiều tính năng như là:
- Các component và icon được tích hợp sẵn: Cung cấp hơn 200 mẫu component được thiết kế sẵn, hơn 3000 icon vector cho web, android, IOS giúp việc xây dựng mẫu thiết kế được nhanh chóng hơn.
- Dễ dàng thiết lập các thư viện UI component riêng của bạn. Ngoài ra bạn có thể tạo ra tương tác cho component thông qua việc sử dụng và chỉnh sửa một số component được tích hợp sẵn như là checkboxes, pop-up, scroll boxes…
- Đặt trạng thái thái cho các component như là hover, focus, active, click, selected…
- Luôn có thể xem trước mẫu thiết kế trang web của bạn khi đang design, có thể kiểm tra prototype trên nhiều thiết bị khác nhau như là iPhone, iPad và Android.
- Có thể export(xuất) file HTML với tất cả hiệu ứng dựa trên mẫu thiết kế web của bạn.
Công Cụ Webflow
Webflow là công cụ giúp các designer xây dựng và chỉnh sửa website một cách chuyên nghiệp thông qua trực quan hóa các tính năng của HTML, CSS3 và Javascript. Ngoài ra một điểm mạnh mà mình thích ở nó là cho phép tạo ra các hiệu ứng animation phức tạp với nhiều tính năng mà không cần phải quan tâm đến code. Cho phép bạn có thể thêm data(dữ liệu) vào trang web bằng cách thủ công thông thường, từ CSV hoặc API.
Với phiên bản miễn phí thì bạn có thể:
- Xây dựng 2 dự án
- Đầy đủ các thiết lập tính năng cho thiết kế web
- 100 giờ cho các khóa học online
- Có thể xuất bản trên webflow.io
Công Cụ Smartmockups
Thông thường khi bạn thiết kế xong một trang web thì việc làm sao để khách hàng thấy nó có thể responsive trên nhiều màn hình thiết bị khác nhau thật không phải dễ dàng. Do đó các bản mockup ra đời với nhiệm vụ chính là đưa hình ảnh của bản prototype web được hiển thị trên các màn hình thiết bị khác nhau.
Với công cụ Smartmockups thì Bạn chỉ cần tải hình ảnh của mẫu thiết kế web hoặc cung cấp địa chỉ URL của trang web thì ngay lập tức công cụ này sẽ tạo ra mockup dựa trên dữ liệu bạn cung cấp. Để hiểu rõ hơn bạn xem hình ảnh mockup phiên bản web của mình nhé:
Công Cụ Pixlr
Pixlr là một công cụ chỉnh sửa hình ảnh online miễn phí nhanh chóng và dễ dàng ở ngay trên trình duyệt. Ngoài ra nó còn cung cấp thêm nhiều công cụ AI giúp quá trình thiết kế và xử lý công việc của bạn được giảm đáng kể. Nó cũng hỗ trợ xuất nhiều file phổ biến hiện nay như là PSD, PXD, JPEG, PNG, Webp, SVG… Một số điểm nổi bật mà mình khá thích ở công cụ này là xóa background cho hình ảnh chỉ bằng một cú click chuột, có ngôn ngữ dành cho Tiếng Việt...
Công Cụ CleverBrush
CleverBrush là một công cụ online giúp bạn có thể chỉnh sửa vector một cách nhanh chóng dễ dàng ở ngay trên trình duyệt web. Nó cũng hỗ trợ cho hầu hết các browser như là Google Chrome, Firefox, Edge và Safari. Một điểm mình đặc biệt thích ở công cụ này đó là có các thư viện mẫu dành cho các bài viết trên mạng xã hội, lời chúc, thiệp mừng...
Công Cụ MindMup
MindMup giúp bạn tạo ra các sơ đồ tư duy (mind map) tuyệt vời đồng thời cũng làm gia tăng sự tập trung vào ý tưởng thiết kế, loại bỏ các thành phần phiền nhiều khác thông qua việc sử dụng giao diện tối giản của công cụ. Ngoài ra nó cũng có một số tính năng mà mình thấy khá hay và hữu ích là:
- Có nhiều phím tắt giúp tăng hiệu suất công việc
- Chuyển đổi dễ dàng sang các PDF, Powerpoint...
- Có thể lữu trữ trực tuyến trên Google Drive và quản lý bằng Google App.
- Có thể xuất bản và chia sẻ trực tuyến tới mọi người.
Công Cụ Gravit Designer
Gravit Designer là một công cụ miễn phí cung cấp đầy đủ tính năng dành cho thiết kế app và có thể hoạt động trên tất cả nền tảng hiện nay như là Mac OS, Windows, Linux, và Chrome OS. Theo mình thấy thì các tính năng của nó khá dễ học cho người mới bắt đầu và nó cũng cung cấp nhiều tài liệu online miễn phí để chúng ta dễ dàng tiếp cận hơn.
Điểm mình thấy thích nhất ở công cụ này là dịch vụ cho phép lưu trữ các dự án thiết kế ở trực tiếp trên cloud với khoảng 500Mb dành cho phiên bản miễn phí. Ngoài ra nó còn cho phép bạn có thể xuất dự án dưới nhiều định dạng như là PNG, JPG, PDF, SVG và PDF(72 tới 150 DPI).
Công Cụ Whimsical
Whimsical là công cụ giúp bạn có thể thiết kế website và app nhanh và tốt hơn thông qua việc cung cấp nhiều thư viện đi kèm để thiết lập phần tử trong trang web như là button, input, check box... Hỗ trợ xây dựng mẫu thiết kế trên nhiều màn hình thiết bị khác nhau(desktop, tablet, iPhone, Android), có thể thiết lập nhiều thành viên cùng làm trên một dự án và các chỉnh sửa sẽ được thay đổi theo thời gian thực. Ngoài ra nó cũng có một lượng icon khổng lồ để giúp bạn có thể dễ dàng lựa chọn phù hợp với dự án của trang web.
Đối với phiên bản miễn phí thì bạn sẽ được phép tạo 4 dự án, nếu bạn muốn tạo không giới hạn thì có thể đăng ký phiên bản cao cấp hơn với giá là 12$/tháng.
Công Cụ Zeplin
Zeplin là một công cụ giúp gia tăng sự hợp tác giữa lập trình viên (developer) và nhà thiết kế (designer) trong quá trình xây dựng phát triển website, app. Điểm mạnh của nó trong thiết kế là bạn có thể chuyển mẫu của website sang nhiều chương trình như Sketch, Figma, Adobe XD, Adobe Photoshop CC mà không cần thay đổi bất cứ điều gì trên mẫu thiết kế.
Còn đối với việc lập trình thì Zeplin sẽ tự động tạo ra các đoạn mã HTML, CSS tương ứng dựa trên mẫu thiết kế web, app được cung cấp. Điểm mình thích nhất ở nó là việc kết hợp được với nhiều công cụ phổ biến như là Slack, Trello, Jira...
Với phiên bản miễn phí thì bạn sẽ được tạo một dự án, còn nếu muốn nâng cấp thì bạn có thể cân nhắc phiên bản Starter với giá khoảng 17$/tháng.
Công Cụ Cloudconvert
Cloudconvert là một công cụ online giúp bạn có thể chuyển đổi định dạng của file một cách chóng và dễ dàng như là hình ảnh, video, audio, CAD, vector, document...
Với phiên bản sử dụng trực tiếp trên web thì hoàn toàn miễn phí, còn nếu bạn muốn áp dụng công cụ vào cho dự án web hoặc app thì có thể sử dụng API của nó với giá khoảng 8$/tháng.
Công Cụ Invision
Invision là một công cụ mạnh mẽ trong việc tạo các mẫu (prototype) dành cho website và app. Một số tính năng vượt trội của nó là cho phép bạn tạo hiệu ứng và tương tác với các component mà không cần phải thêm bất kỳ dòng code nào, có thể thu nhận phản hồi trực tiếp từ người dùng, xây dựng liên kết với các công cụ thiết kế khác...
Với phiên bản miễn phí thì bạn sẽ có thể tạo tối đa là 3 dự án với dung lượng public không giới hạn, nếu bạn muốn tạo thêm nhiều dự án thì có thể dùng gói pro với giá khoảng 7.95$/tháng.
Công Cụ Octopus
Octopus là một công cụ giúp bạn xây dựng cấu trúc website (sitemap) dưới dạng trực quan hóa giúp khách hàng có thể dễ dàng hiểu được luồng (flow) chạy trong trang web của bạn. Ngoài ra nó còn cung cấp tính năng export ra nhiều định dạng khác nhau như PDF, PNG, TXT, XML. Hỗ trợ việc chia sẻ file nhanh chóng cho khách hàng và các thành viên ở trong team.
Với phiên bản miễn phí thì bạn sẽ có thể tạo tối đa là 1 dự án , nếu bạn muốn tạo thêm nhiều dự án thì có thể dùng gói pro với giá khoảng 7$/tháng.
Nếu bạn muốn tham khảo thêm các công cụ online giúp bạn thiết kế web tốt hơn thì truy cập đường dẫn bên dưới nhé!
25 Thư Viện Và Công Cụ Giúp Bạn Thiết Kế Web Tốt Hơn Năm 2020
Nếu bạn muốn tham khảo thêm các công cụ thiết kế web thì truy cập đường dẫn bên dưới nhé!
Những Công Cụ Thiết Kế Web Online
Nếu bạn muốn tham khảo thêm các công cụ thiết kế online thì truy cập đường dẫn bên dưới nhé!
Công Cụ Cho Thiết Kế Website
Tổng kết:
Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những công cụ thiết kế UX/UIdành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!
