Tài nguyên tốt nhất để phác thảo khung lưới dựa trên lưới

Quá trình thiết kế giao diện luôn luôn bắt đầu với thế hệ ý tưởng. Điều này bao gồm trực quan hóa, nghiên cứu các trang web khác và tạo mẫu nhanh. Giai đoạn ý tưởng sớm này rất quan trọng đối với hiểu cách bố trí và trải nghiệm người dùng bạn định xây dựng. Vì vậy, làm thế nào bạn thực sự nên thực hiện công việc khung lưới trên một dự án mới?

Tôi là một fan hâm mộ của giấy và bút chì truyền thống với các công cụ bổ sung khi cần thiết. Nhưng khung dây kỹ thuật số cũng lớn, và đó là một lựa chọn khả thi cho các nhà thiết kế hiện đại. Trong bài viết này, tôi muốn chia sẻ các tài nguyên tốt nhất cho cả hai kỹ thuật để giúp bạn tạo tài nguyên của riêng mình khung lưới UI dựa trên lưới.

Khái niệm UI / UX sớm

Hãy bắt đầu bằng cách làm rõ sự khác biệt giữa một khung dây và một nguyên mẫu. Hai từ này thường được sử dụng thay thế cho nhau vì chúng liên quan đến cùng một quá trình.

Một khung dây là một phác thảo tĩnh của giao diện người dùng của trang web hoặc ứng dụng. Nó có thể có chú thích để giải thích văn bản nút, lề, kích thước phần tử hoặc thậm chí hình động. Nhưng khung lưới chỉ là dự thảo thô cho các trang cá nhân.

Tương tự, một nguyên mẫu giống như một lưu đồ cho thấy các trang khác nhau liên kết với nhau như thế nào. Vì vậy, một nguyên mẫu kết nối các khung lưới để chứng minh các nút hoặc liên kết khác nhau sẽ dẫn đến các trang khác như thế nào.

Các định nghĩa này không được khắc trên đá, một số nhà thiết kế có thể có thuật ngữ riêng và có thể không đồng ý với từ ngữ chính xác của tôi. Nhưng đây là cách tôi thường thấy họ mô tả và đó là cách nhiều nhà thiết kế hiểu các thuật ngữ này tốt nhất.

Vì vậy, những gì bạn phải làm chính xác với những mảnh khái niệm ban đầu? Họ có thực sự cần thiết? Tôi muốn nói rằng việc tạo mẫu không phải lúc nào cũng cần thiết, nhưng đó là một ý tưởng rất tốt, đặc biệt là để thiết kế các ứng dụng có tương tác phức tạp.

Nhưng khung lưới luôn luôn là một ý tưởng tốt cho mọi dự án mới. Nó giúp bạn tập trung vào bức tranh lớn mà không phải lo lắng về chi tiết. Bạn có cảm giác về cách trang tổng thể được bố trí và điều này là vô giá khi bạn đang thiết kế một bố cục cụ thể.

Mục tiêu cho việc tạo khung

Mỗi khi bạn bắt đầu một dự án mới, bạn nên suy ngẫm những gì bạn đang cố gắng giải quyết. Mỗi trang web được xây dựng với một mục tiêu cụ thể trong tâm trí. Nhiều trang web thậm chí có nhiều mục tiêu trong đó một số mục tiêu quan trọng hơn các mục tiêu khác.

Sử dụng cấu trúc khung làm hướng dẫn để giúp bạn tìm chiến lược tốt nhất cho nắm bắt mục tiêu của một trang web. Điều này có lẽ sẽ không xảy ra trên khung dây đầu tiên, vì vậy hãy chuẩn bị phác họa rất nhiều ý tưởng khác nhau.

Tra cứu các trang web tương tự khác, và viết ra các tính năng tốt nhất của chúng. Phân tích cách tổ chức nội dung và cách bạn di chuyển qua từng trang.

Hãy nghĩ về khung lưới từ một quan điểm tương tác. Đây không chỉ là những hình ảnh đẹp. Chúng là đại diện của giao diện kỹ thuật số và bạn muốn phác thảo ý tưởng của mình với ý tưởng đó.

Có tài nguyên dựa trên lưới trong tay, cho dù chúng được làm bằng giấy hoặc chúng là kỹ thuật số, có thể giúp ích rất nhiều trong việc phác thảo nhanh chóng. Bây giờ, hãy kiểm tra các tài nguyên tốt nhất để tạo khung lưới.

Bảng vẽ phác thảo

Bạn luôn có thể bắt đầu với các bản phác thảo hình thu nhỏ cơ bản trên giấy máy in chỉ để vạch ra những ý tưởng thô. Cá nhân, tôi thường bắt đầu làm việc trên giấy máy in, vì cách này tôi ít quan tâm đến lưới và nhiều hơn về tạo ra ý tưởng.

Bảng vẽ phác thảo lưới là cách tốt nhất để đi nếu bạn muốn làm sạch một ý tưởng, và cho nó nhiều cấu trúc hơn. Lưới giúp bạn ước tính khoảng cách giữa các mục trên trang và tạo một loại đối xứng trong khung dây.

Có rất nhiều sản phẩm tuyệt vời ngoài kia nếu bạn muốn bắt đầu khung lưới trên giấy, ví dụ, Rhodia Dot Pad có nhiều kích cỡ khác nhau để sử dụng hàng ngày. Nó chỉ có 80 trang nhưng điều này khá điển hình trong hầu hết các quyển phác thảo lưới.

Một sản phẩm rất hay và tùy biến khác là Dotgrid. Tất cả các vật phẩm của Dotgrid đều đắt hơn sách Rhodia, nhưng chúng đi kèm với nhiều vật liệu và thiết kế bìa tùy chỉnh.

Dotgrid thậm chí chấp nhận các đơn đặt hàng bespoke cho phép bạn thiết kế bảng vẽ tùy chỉnh của riêng bạn. Mỗi cuốn sách chỉ chứa dưới 100 tờ, vì vậy bao gồm cả mặt trước và mặt sau bạn có khoảng 200 trang để phác thảo lưới.

Một vài quyển phác thảo lưới chấm khác mà tôi muốn đề cập bao gồm Behance Dot Grid có bìa cứng và xoắn ốc, mặc dù nó chỉ chứa 50 tờ giấy.

Sổ tay thiết kế Responsive là một trong những tài nguyên tốt nhất cho các nhà thiết kế web. Không có nhà thiết kế sản phẩm nào khác cần một quyển phác thảo thiết kế đáp ứng, nhưng các nhà thiết kế web được hưởng lợi rất nhiều từ sự tự do để tạo ý tưởng ở độ rộng thiết bị khác nhau trên cùng của một bố trí lưới.

Những bảng thiết kế đáp ứng này cũng có 50 tờ tổng cộng 100 trang, nhưng mỗi trang có bốn lưới đáp ứng khác nhau đại diện cho các điểm dừng khác nhau trong thiết kế đáp ứng: máy tính để bàn, máy tính xách tay, máy tính bảng và điện thoại thông minh.

Mặc dù thiết kế nhạt nhẽo so với các cuốn sách Dotgrid, nhưng không ai khác đã xem xét các bản phác thảo đáp ứng cho các nhà thiết kế web. Nếu bạn thích điều đó thì đáng để đặt hàng cho một lần lái thử.

Nếu bạn thực sự thích đồ handmade và không muốn chi bất kỳ khoản tiền nào, bạn cũng có thể in các trang lưới của riêng bạn với Giao diện Phác thảo. Trang web miễn phí này cung cấp mẫu lưới khác nhau mà bạn có thể in và sử dụng cho các khung lưới vẽ tay.

Các lưới có kích cỡ chữ A4 và US cho các kiểu giấy in khác nhau. Bạn có thể chọn từ nhiều tùy chọn, chẳng hạn như các mẫu cho trình duyệt web có độ dài đầy đủ hoặc các màn hình iPhone khác nhau.

Tất cả các tùy chọn này đều tuyệt vời và rất đáng để khám phá nếu bạn tham gia phác thảo bút chì. Giấy là một trong những phương tiện dễ dàng nhất để nhanh chóng đưa ra ý tưởng mới, do đó, nó thường là lựa chọn ưa thích ngay cả với các nhà thiết kế UI.

Công cụ kỹ thuật số và ứng dụng web

Có rất nhiều chương trình tạo khung dây tuyệt vời ngoài kia mà chúng khó có thể được bảo hiểm mà không có nguy cơ làm tê liệt phân tích, vì vậy bây giờ hãy tập trung vào một số tùy chọn tốt nhất cho khung lưới dựa trên lưới.

Đầu tiên, tôi muốn đề cập rằng bạn có thể sử dụng các công cụ Adobe như Illustrator để tạo khung lưới của riêng bạn. Đây không phải là một phần trong quy trình làm việc của mọi người và Illustrator chắc chắn không miễn phí. Nhưng nếu bạn đã làm việc với Adobe Creative Cloud thì đó có thể là một nơi tốt để bắt đầu.

1. Moqups

Moqups là một trong những công cụ trực tuyến tốt nhất cho cấu trúc dây. Bạn làm việc với trình chỉnh sửa trực quan và thư viện tài sản để kéo và thả toàn bộ trang.

Mỗi dự án Moqups mới có một lưới được xác định trước, và sử dụng các đường màu tím sáng để giúp bạn gắn các yếu tố vào căn chỉnh. Đây là một công cụ web tuyệt vời giúp thiết kế với lưới dễ dàng hơn nhiều.

Trang web hoạt động theo mặc định trên một gói miễn phí giới hạn người dùng ở 300 đối tượng trang. Trang web có các tùy chọn cao cấp nhưng việc trả phí hàng tháng có thể gây khó chịu hơn là chỉ sử dụng các công cụ Adobe hoặc mua Phác thảo một lần.

2. Lưới Papr

Ứng dụng web Grid Papr hoàn toàn miễn phí và cung cấp cả tài khoản công khai và riêng tư cho khung lưới của bạn. Bạn tạo một tên cho dự án của bạn và nhận URL duy nhất của riêng bạn cho khung dây mà bạn có thể chỉnh sửa từ bất kỳ máy tính nào.

Mỗi khung dây mới đi kèm với lưới cho phép bạn thực hiện snap-to-lưới trên tất cả các yếu tố. Các tính năng rất đơn giản, nhưng chúng đủ để tạo một khung dây lo-fi trong vài phút. Chỉ cần kéo bất cứ thứ gì bạn muốn lên trang và theo lưới để tạo khung dây sao.

3. Wireframe.cc

Wireframe.cc là một trong những công cụ đơn giản và tối thiểu nhất bạn có thể sử dụng để tạo khung. Nó có một giao diện không lộn xộn với một lưới dựng sẵn và thanh công cụ có tổ chức. Bạn chỉ cần nhấp và kéo để tạo các yếu tố mới trên khung vẽ. Bạn cũng có thể lưu và chia sẻ công việc của bạn.

Đây là một công cụ khác được cung cấp miễn phí với các gói cao cấp tùy chọn. Mỗi gói được lập hóa đơn hàng tháng, do đó, nó rất giống với Moqups trong cấu trúc giá. Công cụ miễn phí có thể sử dụng được từ bất kỳ máy tính nào không có tài khoản.

4. Chim nhại

Mockingbird là một tùy chọn tuyệt vời khác, cung cấp nhiều tính năng hơn so với hầu hết các công cụ tạo khung. Bạn có thể bắt đầu miễn phí nhưng bản dùng thử giới hạn trong 7 ngày. Điều này có thể gây khó chịu cho một số người dùng, nhưng công cụ này thực sự đáng kinh ngạc và chạy trong tất cả các trình duyệt.

Mockingbird có một thư viện vô tận các thành phần UI như tab, accordion, menu thả xuống, trình phát video và liên kết văn bản đơn giản. Lưới mặc định sử dụng hệ thống lưới 960ss, nhưng bạn có thể chọn từ 12, 16 và 24 cột.

Từ cuối cùng

Bất kể bạn chọn phương thức truyền hình kỹ thuật số truyền thống hay kỹ thuật số, luôn luôn là về chất lượng đầu ra. Có rất nhiều điều để học khi làm loại công việc này, vì vậy hãy tìm bất kỳ công cụ nào cảm thấy thoải mái nhất với bạn.

Tiến về phía trước điều tốt nhất để làm là chỉ bắt đầu khung lưới. Hãy cảm nhận bất cứ điều gì bạn thích nhất (giấy hoặc kỹ thuật số), và biến nó thành của riêng bạn. Các tài nguyên trong bài viết này sẽ cung cấp cho bạn quá đủ để bắt đầu với việc tạo khung cho giao diện kỹ thuật số của riêng bạn.

(Ảnh bìa của Oykun Yilmaz)