Sử dụng Firefox để tạo Mockup đơn giản

Bút chì là một công cụ tạo khung mà chúng ta có thể sử dụng để phác họa một giao diện người dùng của ứng dụng. Điều tuyệt vời của Pencil là nó rất nhẹ, dễ sử dụng và được tích hợp chặt chẽ với Firefox. Trên hết, đây là một ứng dụng nguồn mở miễn phí! Cuối bài viết, chúng tôi sẽ cung cấp cho bạn một bản demo đơn giản về cách sử dụng Bút chì để tạo ra một khung hình giống như Brizzly.

Tại sao chúng ta tạo khung dây ?

Một khung dây là một bản phác thảo ý tưởng bố cục trang. Một khung dây tập trung vào thiết kế thông tin của một trang để đảm bảo rằng thiết kế phù hợp với những gì người dùng cần. Một khung dây thường bao gồm các hình dạng khác nhau (như hộp, hình bầu dục và kim cương) để thể hiện các yếu tố nội dung, chức năng và điều hướng. Những hình này hiển thị vị trí của chúng trên trang.

Lúc đầu, nó có vẻ như lãng phí thời gian để tạo ra các bản phác thảo thô của một trang. Khung dây rất quan trọng để khiến người dùng của bạn tập trung vào yếu tố quan trọng trên trang của bạn. Tạo một bản phác thảo thô của một trang, không có các yếu tố trực quan lạ mắt, chuyển sự chú ý của người dùng sang các yếu tố quan trọng như kích thước, bố cục và vị trí của các thành phần trang của bạn. Chúng tôi sẽ bắt đầu hiểu rõ hơn về những gì khách hàng thực sự muốn và cần từ phần mềm khi người dùng bắt đầu tập trung vào các yếu tố quan trọng của một trang. Tạo khung dây cho phép bạn và người dùng của bạn cộng tác hiệu quả và sớm xác định sự cố thiết kế tiềm năng.

Bắt đầu với Bút chì

Tải về Pencil từ trang add ons của Pencil. Khi bạn cài đặt Bút chì, có thể truy cập từ 'Công cụ'> 'Phác thảo bút chì'.

Đây là những gì Brizzly trông giống như. Đây là một ứng dụng web khá hay, tổng hợp Facebook và Twitter của bạn trong một trang.

Đây là kết quả cuối cùng của khung dây. Các hình dạng chính trong khung dây này là, hình chữ nhật, hộp văn bản và tab. Phần tiếp theo của bài viết sẽ đưa ra một ví dụ đơn giản về cách tạo từng hình dạng.

Tạo một hình chữ nhật

Bước đầu tiên của việc tạo hình dạng khung dây là kéo hình dạng từ menu 'Bộ sưu tập hình dạng' vào khung vẽ.

Thay đổi kích thước hình chữ nhật thành chiều rộng và chiều cao phù hợp.

Chúng ta có thể tùy chỉnh văn bản, đường viền và màu nền của bất kỳ hình dạng nào trong Bút chì. Nhấp chuột phải vào hình chữ nhật và chọn 'Thuộc tính' để mở cửa sổ Thuộc tính. Đây là màn hình thuộc tính nền. Đặt màu nền Hình chữ nhật thành màu trắng (#FFFFFF).

Nhấp vào tab 'Border' và điều chỉnh các thuộc tính viền. Đặt màu đường viền thành màu đen (# 000000) và thay đổi trọng lượng đường viền thành 1.

Màn hình thuộc tính văn bản cho phép chúng tôi tùy chỉnh loại phông chữ, kích thước, kiểu dáng, trọng lượng, màu sắc, độ sáng và độ mờ của văn bản.

Tạo Tab

Các tab nhà, bản nháp, hình ảnh là ba tab được xếp chồng lên nhau. Kéo ba 'Bảng điều khiển' vào hình chữ nhật. Thay đổi kích thước mỗi tab để mỗi tab hiển thị cạnh nhau.

Mở màn hình thuộc tính văn bản để điều chỉnh màu phông chữ của tab 'Ảnh' và 'Bản nháp'. Đặt nó thành màu xám (# 989898).

Tạo văn bản

Kéo hình dạng 'Văn bản' trên khung vẽ để tạo từng menu. Chúng ta có thể điều chỉnh giao diện văn bản bằng cách truy cập cửa sổ thuộc tính văn bản.

Lời khuyên hữu ích cho việc thay đổi màu sắc

Màu sắc là một trong những phần thiết yếu nhất trong việc cung cấp một khung dây dễ chịu. Cách chính xác nhất để thay đổi màu sắc của hình dạng là chỉ định mã HTML của màu. Tìm ra mã HTML cho một màu cụ thể có thể khó khăn. Chúng tôi có thể sử dụng bảng cheat màu HTML từ w3cschools.com để tìm mã HTML phù hợp cho một màu cụ thể.

Chúng tôi cũng thích sử dụng colorzilla để chọn màu từ màn hình và sử dụng nó trong Bút chì. Nhấp vào biểu tượng ống nhỏ giọt ở góc dưới bên trái của Firefox để chọn màu trên màn hình. Chúng tôi cũng có thể mở công cụ chọn màu của ColorZilla bằng cách nhấp đúp vào biểu tượng thả mắt. Chỉ cần sao chép dán mã Hex vào mã HTML màu của Bút chì.

Phần kết luận

Bút chì là công cụ dễ dàng sử dụng khung lưới. Tích hợp bút chì với Firefox giúp chúng tôi có thể sử dụng plugin Firefox khác để giúp tạo ra một khung dây tốt hơn

Liên kết
Tải về Bút chì
Tải xuống Colorzilla
Bảng màu gian lận HTML W3C