Tập hợp nguồn hỗ trợ sketch wireframes dạng lưới tốt nhất

77

Quy trình thiết kế 1 interface luôn bắt đầu với sản xuất ý tưởng, gồm trực quan hóa, research các trang web khác và tạo mẫu nhanh (rapid prototyping). Giai đoạn ý tưởng ban đầu này rất quan trọng vì nó sẽ giúp bạn hiểu được layout và trải nghiệm người dùng mà mình đang định xây dựng. Vậy, làm cách nào để bạn thực sự thực hiện công việc wireframing trong dự án mới?

Tôi là fan của các công cụ sử dụng giấy & bút chì. Nhưng wireframing kĩ thuật số lại rất rộng và là lựa chọn khả thi dành cho những designers hiện đại. Trong bài viết này, tôi sẽ chia sẻ những nguồn tốt nhất giúp bạn tạo được wireframes UI grid-based của mình dựa trên cả 2 phương thức

Khái niệm hóa UI/UX khởi đầu

Hãy bắt đầu với những điểm khác biệt giữa wireframeprototype. Hai từ này thường được sử dụng thay thế cho nhau vì chúng liên quan đến cùng 1 quy trình.

Một wireframe là 1 static sketch đơn của UI trong 1 web page hoặc 1 ứng dụng. Wireframe có thể sở hữu những callouts để giải thích nội dung button, margins, kích thước của yếu tố hoặc thậm chí là animations. Nhưng các wireframes chỉ là bản draft thô cho các pages cá nhân.

Tương tự, 1 prototype giống như 1 flowchart (sơ đồ) thể hiện cách các pages khác nhau liên kết với nhau. Vì vậy, 1 prototype sẽ kết nối các wireframes để chứng minh được buttons hoặc links khác nhau dẫn đến các pages khác như thế nào.

Những định nghĩa này vẫn còn thay đổi và 1 số designers có thể có định nghĩa riêng của mình, và không tán thành với cách định nghĩa của tôi. Nhưng bài viết này là những định nghĩa phổ biến, giúpcác designers hiểu được các thuật ngữ 1 cách tốt nhất.

Notebook Sketching Dots Grid

Tóm tại, bạn cần phải làm những gì với những concepts này? Chúng có thực sự cần thiết với bạn hay không? Với tôi, prototyping tuy không quá quan trọng, nhưng nếu bạn đang lập trình các ứng dụng với các tương tác phức tạp thì đây là 1 ý tưởng hay.

Nhưng wireframing luôn là ý tưởng tuyệt vời cho mọi dự án mới. Nó giúp bạn tập trung vào bức tranh toàn cảnh mà không cần phải lo lắng về những chi tiết. Bạn sẽ cảm nhận được toàn bộ page được sắp xếp như thế nào, việc này thực sự vô giá khi bạn đang thiết kế 1 layout cụ thể.

Mục tiêu của Wireframing

Mỗi lần bắt đầu 1 dự án mới, bạn nên “thưởng ngoạn” những gì mà bạn đang cố giải quyết. Mỗi trang được xây dựng với 1 mục tiêu riêng. Nhiều trang thậm chí có nhiều mục tiêu và 1 số mục tiêu quan trọng hơn các mục tiêu khác.

Wireframing hướng dẫn bạn có được chiến lược tốt nhất để nắm bắt (những) mục tiêu của 1 website. Điều này khả năng sẽ không xảy ra trong wireframe đầu tiên, nên hãy chuẩn bị tinh thần sketch rất nhiều ý tưởng.

Grid Notebook Sketching Wireframe

Hãy xem những website tương tự và viết xuống những tính năng tốt nhất. Phân tích cách sắp xếp nội dung và cách di chuyển qua mỗi page.

Hãy xem xét wireframes từ góc độ có tính tương tác. Chúng không chỉ là những bức tranh đẹp, mà là đại diện cho interfaces kĩ thuật số khiến bạn muốn sketch ý tưởng của mình với nó.

Tài nguyên dạng lưới đang có, dù ở dạng giấy hay dạng kĩ thuật số thì vẫn hỗ trợ bạn sketch rất nhanh. Dưới đây là những nguồn liệu để tạo wireframes tốt nhất.

Grid Sketchpads

Bạn luôn có thể bắt đầu với các thumbnail sketches cơ bản trên giấy in và phác thảo những ý tưởng thô. Riêng với tôi, tôi thực sự bắt đầu làm việc trên giấy in, bởi vì với cách này tôi ít lo lắng về các grids (lưới hơn) và tập trung hơn vào sản xuất các ý tưởng.

Nếu muốn làm rõ 1 ý tưởng và cấu trúc nó tốt hơn, bạn nên sử dụng dot grid sketchpads. Grids (lưới) hỗ trợ bạn ước lượng khoảng cách giữa các đối tượng trên page và tạo tính cân xứng trong wireframe.

Mobile App UI Wireframe Sketch

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

Một sản phẩm tùy biến, thú vị nữa là Dotgrid. Tất cả các đối tượng của Dotgrid đắt tiền hơn những quyển sách của Rhodia, nhưng quyển Dotgrid lại có nhiều thiết kế cover tùy biến và nguyên liệu hơn.

Dotgrid Toy Cover Sketchbook

Dotgrid còn cho phép các order biết nói, giúp bạn thiết kế sketchpad tùy biến riêng của mình. Mỗi quyển sách khoảng 100 sheet trở xuống, gồm cả trang trước & sau thì vào khoảng 200 trang grid sketching.

Một cặp dot grid sketchbooks khác mà tôi muốn đề cập là Behance Dot Grid bìa cứng và gáy lò xo, dù chỉ gồm 50 trang giấy.

Quyển Responsive Design Sketchbook là 1 trong những tài nguyên hay dành cho các web designers. Các product designer sẽ không cần 1 responsive design sketchbook, nhưng các web designers sẽ đượctự do để sản sinh ra những ý tưởng để thay đổi độ rộng của thiết bị trên 1 grid layout.

Những responsive design pads này cũng có 50 trang đến 100 trang tổng cộng, nhưng mỗi trang lại có 4 responsive grids khác nhau, thể hiện những điểm dừng khác nhau trong thiết kế responsive: desktop, laptop, tablet và smartphone.

Sketchbook Responsive Design Page

Mặc dù thiết kế trơn được so sánh với các quyển Dotgrid, không có ai khác lại cân nhắc responsive sketchbooks cho các web designers. Nếu bạn quan tâm thì có để đặt hàng 1 quyển để test thử.

Nếu bạn muốn những tài liệu handmade và không muốn chi tiền, bạn có thể in những trang grid của riêng mình với Interface Sketch. Website miễn phí này có các templates grid khác nhau mà bạn có thể sử dụng để tự vẽ tay các wireframe.

Grid dạng A4 và cỡ chữ US với nhiều phong cách giấy in khác nhau. Bạn có thể chọn từ nhiều lựa chọn như các templates cho trình duyệt web full-length hoặc các màn hình iPhone khác nhau.

Interface Sketch Web App

Tất cả những lựa chọn này đều rất tuyệt và xứng đáng để bạn khám phá nếu bạn quan tâm đến pencil sketching. Giấy là 1 trong những công cụ phác thảo ý tưởng dễ dàng và nhanh chóng nên đây là lựa chọn được các UI designers ưu tiên.

Các công cụ Digital và các ứng dụng Web

Có rất nhiều chương trình wireframing ngoài kia nên rất khó để phân tích 1 cách chuyên sâu, vì vậy bài viết này chỉ tập trung vào những lựa chọn wireframing dạng lưới tốt nhất.

Đầ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 wireframes riêng. Đây không phải là 1 phần trong workflow của mọi người và Illustrator chắc chắn là không kiễn phí. Nhưng nếu bạn đã làm việc với Adobe Creative Cloud, bạn có thể bắt đầu từ đây.

1. Moqups

Moqups là 1 trong những công cụ online tốt nhất để wireframing. Bạn làm việc với visual editor và có 1 thư viện các tài nguyên để kéo và thả trên toàn trang.

Mỗi dự án Moqups mới đều có 1 grid được định trước, và sử dụng các đường line tím sáng hỗ trợ chụp các yếu tố thành 1 hàng ngay ngắn. Đây là công cụ web hay, giúp việc thiết kế với 1 grid dễ dàng hơn.

Trang web vận hành mặc định với plan miễn phí, giới hạn người dùng trong khoảng 300 đối tượng. Trang web cũng có những lựa chọn tính phí, nhưng khi phải trả chi phí hằng tháng sẽ rất bực bội so với chỉ sử dụng Adobe hoặc thanh toán Sketch 1 lần.

Moqups Web App Screen

2. Grid Papr

Ứng dụng web Grid Papr hoàn toàn miễn phí, đảm bảo wireframes có các tài khoản công khai và riêng tư. Bạn tạo 1 cái tên cho dự án của mình và lấy 1 URL duy nhất cho wireframe mà bạn có thể chỉnh sửa từ bất kì máy tính nào.

Mỗi wireframe mới đi kèm với 1 grid, cho phép bạn thực hiện thao tác snap-to-grid trên tất cả các yếu tố. Các tính năng trong ứng dụng web này đơn giản nhưng đủ để bạn tạo 1 lo-fi wireframe trong vài phút. Chỉ cần kéo những gì bạn muốn vào trang và theo dõi grid để tạo 1 stellar wireframe.

Grid Papr Web App

3. Wireframe.cc

Wireframe.cc là 1 trong những công cụ đơn giản và tinh gọn nhất để wireframing. Nó nhấn mạnh interface gọn gàng với grid có sẵntoolbars đã được tổ chức tốt. Bạn chỉ cần click và thả để tạo các yếu tố trên canvas. Bạn có cũng có thể lưu và chia sẻ công việc của mình.

Đây cũng là công cụ miễn phí khác với các kế hoạch tính phí tùy chọn. Mỗi kế hoạch được tính theo tháng, và tương tự như Moqups về cấu trúc giá. Công cụ miễn phí này có thể sử dụng được ở bất kì máy tính nào mà không cần tài khoản.

Wireframe CC Home Page

4. Mockingbird

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

Mockingbird có một thư viện không giới hạn các yếu tố giao diện người dùng như các tab, accordions, các menu thả xuống, chơi video, và các liên kết văn bản đơn giản. Các lưới mặc định sử dụng hệ thống grid 960gs, nhưng bạn có thể chọn từ 12, 16, và 24 cột.

Mockingbird Wireframing Tool

Lời kết

Dù bạn chọn wireframing truyền thống hoặc kỹ thuật số, nguồn tài nguyên trên vẫn luôn đảm bảo chất lượng đầu ra. Hãy tìm bất cứ công cụ mà bạn cảm thấy thoải mái nhất.

Cách tốt nhất là bắt đầu wireframing. Các tài nguyên trong bài viết này không chỉ giúp bạn bắt đầu với Wireframing giao diện kỹ thuật số riêng mà còn cung cấp nhiều hơn thế nữa.

Nguồn: IDE Academy via Hongkiat