Tạo mockup website với chế độ xem điện thoại và máy tính
Công cụ tạo mockup website
Tạo mockup website miễn phí: wireframe và khung thiết bị | We.Inc
Lên kế hoạch trang bằng wireframe xem trên máy tính và điện thoại, hoặc đặt ảnh chụp vào khung trình duyệt, laptop hay điện thoại. Xuất PNG hoặc in PDF miễn phí ngay trong trình duyệt.
Hai công cụ trong một. Chế độ wireframe giúp lên kế hoạch trang: chọn các phần, sắp xếp thứ tự và so sánh bố cục trên máy tính và điện thoại. Chế độ khung thiết bị trình bày thiết kế hoàn chỉnh: tải ảnh chụp lên rồi đặt vào khung trình duyệt hoặc điện thoại để làm đề xuất hay bài đăng mạng xã hội. Cả hai đều xuất PNG và chạy trong trình duyệt. Ảnh chụp không bao giờ được tải lên.
Chế độ wireframe: chọn các phần cần có trên trang, sắp xếp thứ tự và chuyển giữa chế độ máy tính, điện thoại. Trên điện thoại, các cột xếp chồng như hầu hết website đáp ứng.
Xuất wireframe thành PNG hoặc in rồi chọn Lưu dưới dạng PDF.
Chế độ khung thiết bị: tải ảnh chụp PNG, JPG hoặc WebP (tối đa 15 MB và 8,000 pixel mỗi cạnh). Chọn khung trình duyệt hoặc điện thoại, màu nền và nhãn thanh địa chỉ nếu muốn.
Ảnh được vẽ lên canvas trong trình duyệt và xuất thành PNG ở độ phân giải gấp đôi màn hình.
Khi cấu trúc đã đúng, gửi sơ đồ các phần đến công cụ dựng We.Inc làm bản tóm tắt khởi đầu.
Bắt đầu bằng phần ảnh chính: nói rõ bạn làm gì và phục vụ ai trong một dòng.
Đặt bằng chứng (đánh giá, logo, ví dụ) gần nút đầu tiên, nơi khách quyết định có tin bạn không.
Kiểm tra wireframe điện thoại trước. Phần lớn khách truy cập website doanh nghiệp nhỏ bằng điện thoại.
Với khung thiết bị, chụp màn hình ở chiều rộng tương ứng: khoảng 1440 pixel cho trình duyệt và 390 cho điện thoại.
Khi chia sẻ, ghi rõ mockup chỉ là bản mô phỏng để không ai nhầm với website đang hoạt động.
Câu hỏi thường gặp
Wireframe khác mockup thế nào?
Wireframe là bản phác thảo khung xám cho biết nội dung nằm ở đâu. Mockup thể hiện giao diện hoàn chỉnh, thường đặt trong khung thiết bị. Công cụ này có cả hai chế độ riêng và ghi nhãn cho từng tệp xuất.
Ảnh chụp của tôi có được tải lên không?
Không. Ảnh được trình duyệt đọc và vẽ cục bộ. Không có gì được gửi cho We.Inc hay bất kỳ ai khác.
Tôi có thể chụp ảnh website đang hoạt động ngay tại đây không?
Không. Chụp website khác cần máy chủ chạy trình duyệt, điều công cụ miễn phí này không có. Hãy tự chụp màn hình (công cụ nhà phát triển trình duyệt có thể chụp toàn trang) rồi tải lên.
Tôi có thể xuất PDF không?
Có. Dùng In và chọn Lưu dưới dạng PDF làm máy in. Tùy chọn PNG tạo tệp ảnh.
Công cụ tạo mockup website có miễn phí không?
Có. Không cần đăng ký, không hình mờ và không giới hạn.
Lên kế hoạch trên điện thoại, trình bày trên máy tính
Bố cục cân đối trên màn hình rộng thường trở thành trang cuộn dài trên điện thoại: ba cột tính năng xếp thành ba khối, bảng giá đẩy biểu mẫu liên hệ xuống thấp. Chuyển wireframe sang chế độ điện thoại sẽ cho thấy vấn đề sớm, khi việc chuyển phần chỉ tốn một lần nhấp.
Khung thiết bị dùng ở bước khác: cho khách hàng hoặc người xem mạng xã hội thấy giao diện trang hoàn chỉnh. Ảnh chụp đơn giản trong khung gọn gàng thường là đủ.