Wireframe trong thiết kế sản phẩm (Phần 3): Mẫu thiết kế
design
30
wireframe
4
White

Võ Hoài Nam viết ngày 22/07/2018

Lời người dịch

Tiếp tục loạt bài lược dịch của cuốn "". Ở phần này có một số mình không tìm được nghĩa tiếng Việt tương tự nên sẽ để nguyên bản tiếng Anh.

Riêng phần này, có một số resources đã không còn nên mình có bổ sung thêm một vài resources theo xu thế hiện nay (năm 2018).

Danh sách bài viết trong loạt bài:

Dẫn nhập

Trong thiết kế, có những lúc chúng ta sẽ lặp đi lặp lại một công việc nhiều lần. Do đó, những mẫu có sẵn sẽ giúp ta tiết kiệm được thời gian và công sức. Phần này, chúng ta sẽ nói về mẫu thiết kế và những thư viện có sẵn.

The design pattern and wireframe libraries guide

Cho dù bạn mới bắt đầu làm việc với wireframe hay prototype trong vài năm hoặc trong một thời gian dài, bạn sẽ thấy điều này hữu ích do luôn cập nhật các xu hướng thiết kế mới nhất dành cho web và di động. Bạn có thể tự do sáng tạo thêm, hoặc tìm cảm hứng cho sản phẩm và gắn trực tiếp vào các công cụ thiết kế như Sketch, Balsamiq,...

Bạn có thể tham khảo thêm các mẫu thiết kế mới nhất tại UXPin như .

Importable Libraries

Từ này mình không biết dịch thế nào nên để nguyên. Đại khái là các mẫu thiết kế có sẵn, mình có thể import trực tiếp vào công cụ thiết kế để tiết kiệm thời gian.

Wireframes To Go

Địa chỉ:

Có rất nhiều mẫu thiết kế do cộng đồng đóng góp. Tại đây, bạn có thể tìm thấy vô số UI Component hoặc wireframe cho toàn bộ trang web. Lưu ý, các mẫu thiết kế tại trang này chỉ hỗ trợ cho Balsamiq Mockups.

Wireframes To Go

Sketch App Resources

Địa chỉ:

Có lẽ bạn đã biết nhiều về Sketch, một công cụ thiết kế phổ biến hiện nay và chỉ chạy trên Mac OS. Trang này có nhiều mẫu dành cho Web, Mobile, Wearable và icon.

Sketch App Resources

Figma Resources

Địa chỉ:

Figma là đàn em của Sketch. Về chức năng thì tương tự và có một số điểm hay hơn Sketch, hỗ trợ đa nền tảng như Mac OS, Windows và Web. Trang này cũng tương tự như Sketch App Resources.

Figma Resources

Standalone Libraries

Những mẫu thiết kế ở phần này không thể gắn vào các công cụ thiết kế. Nó có thể là hình ảnh, các mẫu dưới dạng giấy,...

I Love Wireframes

Địa chỉ:

Nhiều mẫu thiết kế được cộng đồng đóng góp vào một group trên Flick.

I Love Wireframes

Wireframe Showcase

Địa chỉ:

Trang này vô số wireframe hoàn chỉnh của một trang web hoặc một phần trong một trang web, bao gồm wireframe và hình ảnh cuối cùng sau khi hoàn thiện.

Wireframe Showcase

Web Without Words

Địa chỉ:

Một trang web khá thú vị, loại bỏ tất cả hình ảnh và chữ, trừu tượng các thành phần bằng các kí hiệu dùng trong wireframe.

Web Without Words

Một số trang khác

Ngoài ra, bạn có thể tham khảo bài viết của Creative Tim, nơi có các template đơn giản nhưng đẹp đẽ từ UI đến Code. Bài viết "Why you should start using an UI Kit?" nói về tại sao bạn nên sử dụng UI Kit khi bắt đầu một dự án mới.

Standalone Libraries

Web Only

Mobile Only

Tham khảo

Nguồn: My blog - https://vhnam.github.io/tutorials/wireframe-trong-thiet-ke-san-pham-phan-3/

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Võ Hoài Nam

7 bài viết.
43 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
36 7
"Quy tắc ngón tay cái" mà mình đề cập trong bài viết này chính là thói quen sử dụng ngón tay cái trên mobile. Viết rõ ràng như vậy để tránh mấy bài...
Võ Hoài Nam viết hơn 2 năm trước
36 7
White
14 6
Sẵn dịp đọc cuốn (Link) nên mình lược dịch và thêm thắt một số chỗ để có thêm tài liệu tham khảo bằng tiếng Việt. Mình sẽ chia cuốn sách ra làm nhi...
Võ Hoài Nam viết hơn 2 năm trước
14 6
White
11 3
Trong một bài test của mình, có một câu là hãy thực hiện (Link) giống của (Link). Cách sử dụng là khi bạn nhập một ký tự thì sẽ gởi một request lên...
Võ Hoài Nam viết gần 3 năm trước
11 3
Bài viết liên quan
White
62 5
Đây là phần cuối của một series chuyên về thiết kế UI. Bạn nên đọc (Link) trước khi bắt đầu đọc phần này. Luật số 7: "Ăn trộm" như là một nghệ sỹ...
Vu Nhat Minh viết 3 năm trước
62 5
White
9 1
Đón đọc những bài viết đặc sắc ở blog https://giaosucan.blogspot.com (Ảnh) Dựa trên một câu chuyện có thật, tuy nhiên tên nhân vật đã được thay đ...
Giaosucan viết hơn 1 năm trước
9 1
White
11 0
Bản quyền thuộc Fsoft Potato Tech Mag Đón đọc những bài viết đặc sắc ở blog https://giaosucan.blogspot.com Khi tham gia một dự án, chắc chắn ai c...
Giaosucan viết hơn 1 năm trước
11 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
7 bài viết.
43 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!