Hướng dẫn thiết kế web với Adobe XD cho người mới

ADOBE XD là gì?

Adobe đã đưa bí quyết thiết kế đồ họa huyền thoại của mình vào không gian UX, với thiết kế Adobe Experience Design hoàn toàn mới – được biết đến nhiều hơn với tên gọi Adobe XD.

Adobe XD
Adobe XD 1

ADOBE XD là gì?

Thiết kế web bằng Adobe XD và hướng dẫn sử dụng cho người mới bắt đầu 4 năm trước, UI UX hay Adobe XD là một khái niệm còn rất xa lạ, thì giờ là ngành có tốc độ phát triển chóng mặt trong thời đại số. Để hiểu được chính xác về Adobe XD là gì? Thiết kế web bằng adobe xd như thế nào? Hãy khám phá ngay bài viết này nhé.

ADOBE XD là gì? Là một ‘anh em’ với nhiều phần mềm khác trong ‘nhà Adobe’, Adobe XD là phần mềm chuyên hỗ trợ về thiết kế website và App. Adobe XD là tên gọi tắt của Adobe Experience Design, tập trung nâng cao trải nghiệm người dùng trên Web/App.

Bắt đầu với Adobe XD

Bạn sẽ thấy khi khởi chạy ứng dụng là màn hình khởi động. Là một người dùng mới của Adobe XD, bạn thực sự nên nhấp vào nút Begin Tutorial. Tại thời điểm đó, bạn sẽ được đưa đến một màn hình với các bảng giải thích quá trình làm việc với XD.

Thông tin nhanh chóng hướng dẫn bạn các nguyên tắc cơ bản của ứng dụng. Bạn sẽ tìm hiểu cách hoàn thành các tác vụ quan trọng như tạo artboard, nhập hình ảnh, sử dụng lưới lặp lại và cách liên kết các artboard với nhau để tạo nguyên mẫu. Nếu bạn là người dùng Creative Cloud, nhiều yếu tố sẽ dễ hiểu ngay lập tức.

ADOBE XD
ADOBE XD 2

Khi bạn đã xem xong phần hướng dẫn, đã đến lúc tạo một dự án mới. Bạn có thể làm điều này bằng cách chọn File > New. Thao tác này sẽ đưa bạn trở lại màn hình tương tự như Welcome Screen ban đầu. Tại đây, bạn có thể nhanh chóng chọn độ phân giải màn hình mục tiêu dựa trên thiết bị, kích thước trang web hoặc nhập giá trị cho kích thước tùy chỉnh.

Sau khi chọn kích thước cho dự án, bạn sẽ được đưa đến giao diện chính của Adobe XD. Giao diện chính của ứng dụng được chia thành 2 tab là Design và Prototype. Trong tab Design, bạn sẽ xây dựng tất cả các yếu tố trên artboard, với mỗi bản vẽ đại diện cho một màn hình khác nhau. XD cũng cung cấp một số công cụ vẽ để tạo khối hình cơ bản hoặc bạn có thể thêm artboard có sẵn vào ứng dụng.

Các tính năng mạnh mẽ

Adobe XD cung cấp nhiều tính năng mà bạn mong đợi trong một công cụ UX. Nhiều công cụ trong số này sẽ khá quen thuộc, còn một số khác đã được điều chỉnh lại để hỗ trợ thiết kế UX tốt nhất. Ví dụ, bạn sẽ tìm thấy các công cụ vẽ hoạt động giống như với các ứng dụng khác của Adobe XD. Mặt khác, các layer có một chút khác biệt, cũng để phù hợp với cách thiết kế UX hoạt động.

Adobe XD 3

Bạn sẽ nhận thấy rằng mỗi phần tử nằm trên một layer riêng của nó. Các layer chứa các biểu tượng cho biết loại nội dung nào nằm trên layer đó, cho dù đó là hình ảnh, hình dạng, thư mục, v.v… Bạn nhanh chóng hiểu được những gì tồn tại trong mỗi layer. Tất nhiên, bạn có thể kéo các layer để thay đổi thứ tự của chúng, và chuyển đổi chế độ hiển thị bằng cách nhấp vào biểu tượng con mắt.

Trả lời

Email của bạn sẽ không được hiển thị công khai.