Planning và communication là hai yếu tố then chốt trong sự phát triển của bất kỳ trang web hay ứng dụng nào. Và đó chính xác là những gì mà wireframing process mang tới: một phương pháp nhanh chóng và đơn giản để lên lên kế hoach thiết kế layout, chi phí-hiệu quả, công cụ tiết kiệm thời gian, dễ dàng truyền đạt ý tưởng của bạn tới người khác. Wireframe typically thường có các yếu tố cơ bản của một trang web: header, footer, sidebar, thậm chí có một số nội dung được tạo ra, mang đến cho bạn, cho khách hàng và đồng nghiệp của bạn một layout được định hướng một cách trực quan đơn giản.Bài viết này tập trung vào các công cụ wireframing hiện tại và các ứng dụng độc lập, cũng như các nguồn tài liệu mà bạn sẽ cần để xây dựng wireframe của riêng bạn:wireframing kits, browser windows, form elements, grids, Mac OS X elements, mobile elements, mà bạn sẽ dùng trong bất kỳ typical graphics editor nào như Photoshop hay Illustrator. … Hoặc bạn cũng có thể sử dụng bút và giấy.
Wireframing Toolkits
Quommunnication Stencil KitMột tập tin PSD với các yếu tố thiết kế phổ biến cho sketching và wireframing: form elements, RSS feed icons, colors, Advertising units, browser windows và grids.
Mac OS X Interface Stencil Kit
Leopardy interface stencil kit lợi dụng các table cho sự linh hoạt tối đa trong khi vẫn duy trì độ chính xác pixel.
Facebook Applications Stencil Kit
Một bộ sưu tập khá lớn của Facebook về các yếu tố có thể sử dụng trong việc tạo ra wireframes cho các ứng dụng Facebook.
Flex Stencil Kit
Bao gồm tất cả các thành phần Flex từ Flex 3 Style Guide: panels, data grid, buttons, fields, links, toggle, menu, scrolls, accordion, tabs, list, data picker, tool tip, errors.
Eclipse Stencil Kit
Stencil này cho phép bạn prototype một cách dễ dàng các hộp thoại Eclipse (wizard) với OmniGraffle (TM).
Massive Web UI & Button Set
Bộ này gồm các thành phần UI trong ba phong cách khác biệt: glossy, satin/light gradient và one-color. Bộ satin/light gradient có sẵn với 7 màu sắc khác nhau (mà bạn sẽ tìm thấy tất cả trong tập tin PSD). Các button control có sẵn gồm các mũi tên và các ký hiệu cơ bản, info và các text boxes, breadcrubs, buttons và các yếu tố navigation khác, drop-down và collapsible box styles, speech bubbles, search forms và loading elements.
Yahoo! Design Stencils – Design Pattern Library
Bạn sẽ rất khó tìm ra nguồn tài liệu nào về wireframing tốt hơn tài liệu này. The Yahoo! Design Stencil Kit có sẵn cho hầu hết mọi ứng dụng: OmniGraffle, Visio (XML), Adobe Illustrator (PDF và SVG) và Adobe Photoshop. Thư viện khổng lồ này bao gồm các yếu tố sau (về cơ bản, tất cả mọi thứ): ad units, calendars, carousels, charts and tables, UI controls, form elements, grids, menus and buttons, mobile (general), mobile (iPhone), navigation and pagination, OS elements, placeholder text, screen resolutions, tabs, windows và containers.
Free Sketching & Wireframing Kit
The Sketching & Wireframing Kit là một bộ các yếu tố miễn phí cho sketching and wireframing. Nó bao gồm các form elements, icons, indicators, feedback messages, tool tips, navigation elements, image placeholders, embedded videos, sliders và common ad banners. The Kit được đưa vào trong hai định dạng vector, một dành cho Adobe Illustrator và một trong SVG, mà có thể dễ dàng sửa đổi. Nó cũng có thể được download trong các định dạng PDF và EPS.
The Sketching & Wireframing Kit là một bộ các yếu tố miễn phí cho sketching and wireframing. Nó bao gồm các form elements, icons, indicators, feedback messages, tool tips, navigation elements, image placeholders, embedded videos, sliders và common ad banners. The Kit được đưa vào trong hai định dạng vector, một dành cho Adobe Illustrator và một trong SVG, mà có thể dễ dàng sửa đổi. Nó cũng có thể được download trong các định dạng PDF và EPS.
EightShapes Unify
EightShapes Unify là một bộ sưu tập các template, các thư viện và những vật dụng có ích khác cho phép các nhà thiết kế tạo ra sự phân phối nhất quán hơn và hiệu quả nhanh hơn. Hệ thống này sử dụng Adobe Creative Suite đối với các sản phẩm; Adobe InDesign là công cụ cài đặt chủ yếu.
Wireframe Symbols
Download này gồm wireframe symbol library và Adobe Illustrator file đầy đủ. Để cài đặt thư viện này chỉ cần drag và drop các tập tin có tên Wireframe Symbols.ai vào thư mục “Symbols” Adobe Illustrator của bạn. Khi bạn mở Illustrator, vào Symbols Palette và load bộ sưu tập này.
OmniGraffle Wireframe Stencils
Bộ các shape này dùng để tạo các wireframes trong phiên bản 5.x OmniGraffle (Mac OS X).
OmniGraffle UX Template
Đây là một template OmniGraffle Pro để thiết kế giao diện bao gồm các layer được dùng chung cho UX document cơ bản, cần thiết; ví dụ: Tiêu đề trang, wireframes, storyboards.
Web Page Elements
Sử dụng open-source “Bitstream Vera” bộ phông chữ và các icon miễn phí từ FamFamFam, bạn sẽ có phần lớn các yếu tố để thiết kế trang web bao gồm: headings, form elements, content management function, image placeholders…
Web Browser Templates
Photoshop Browser Templates – Web Designer ToolkitPhotoshop browser templates có các kích cỡ 1024 × 768 và 800 × 600 pixel và gần như được sử dụng trong tất cả các trình duyệt (Firefox, IE, Safari, Camino, ngay cả Netscape).
Browser Templates for the Website
Photoshop browser templates này dành cho Internet Explorer, Firefox cho Mac và Firefox cho Windows được thử nghiệm trong các kích thước sau: 800 × 600, 1024 × 768 và 1280 × 1024 pixel.
Photoshop browser templates này dành cho Internet Explorer, Firefox cho Mac và Firefox cho Windows được thử nghiệm trong các kích thước sau: 800 × 600, 1024 × 768 và 1280 × 1024 pixel.
Photoshop Browser Templates
Layered PSD file này gồm ba độ phân giải trình duyệt khác nhau, tất cả đều có thể chỉnh sửa tiêu đề , address bars, scroll bars và faviconsmột cách dễ dàng. Chỉ cần mở PSD này và đặt các layer trên đầu trang thiết kế mà bạn đang làm việc.
Web-Safe Area Templates for Photoshop
Toàn bộ Web-safe area browser PSD templates được liệt kê dưới đây có thể được download cá nhân bằng cách chọn các độ phân giải sau đây: 640 × 480, 800 × 600, 1024 × 768, 1280 × 960 và 1600 × 1200 pixel.Windows Vista IE Web-Safe Area
Web Form Elements
Best Practice UX Forms StencilĐây là một bản phát hành toàn diện của stencil kit. Nó cung cấp ba cách bố trí các form khác nhau, mỗi cái đều có các benefit. Phiên bản này cũng cung cấp các button khác nhau: layouts, a progress indicator, captcha code input field, labels…
Photoshop Form Element Templates
Photoshop files này gồm các screenshots của tất cả các form element phổ biến khi được hiển thị trong hệ điều hành được lựa chọn của bạn (Mac Classic, Mac OS X, Win XP và Win cổ điển). Các form element được chia thành các lớp riêng biệt để bạn có thể dễ dàng lựa chọn, điều chỉnh hoặc chuyển đổi chúng như bạn thích.
Browser Form Elements PSD
bao gồm trong file PSD này là các form element cho Mac Firefox 3 và một cho Vista IE7.
Web Form Elements Volume 1
Volume 1 gồm một sự lựa chọn các yếu tố Web user interace cho các form trong định dạng Photoshop.
Web Form Elements Vol.2
Đây là Volume 2 của Web Form UI Elements nêu trên và đã được thiết kế theo một phong cách khác biệt.
Photoshop Button Templates
Photoshop button templates này đã được phân chia vào các layer riêng để dễ dàng lựa chọn. Bạn có thể chọn các màu sắc sau sau đây: dark blue, light blue, dark green, light green, yellow, orange, red và purple…
Web Browser Elements
Bạn có thể select the element you need từ bất cứ hệ điều hành và trình duyệt nào mà bạn đang sử dụng, và download từng cái một.Windows Vista IE Form Elements
Grid Templates
960px Photoshop Grid TemplateTemplate này có một hướng dẫn về một thiết kế khoảng trắng với ba cột 20-pixel, với các layer màu nhạt để hiển thị hóa cả hai cột nhằm mục đích điều khiển cột thứ ba. Thêm vào đó, nó được chia nhỏ vào sáu cột 20-pixel của các khoảng trắng.
Illustrator Template for Blueprint CSS Comps
Tài liệu Adobe Illustrator này mô tả những nét nổi bật của khung lưới 24 cột dành cho các CSS frameworks như Blueprint. Nó bao gồm các rãnh dẫn hướng tuân theo khung lưới 24 cột có kích thước 30 pixels của Blueprint, các khoảng trắng có chiều rộng 10-pixel và thanh ngang có chiều rộng là 950 pixel. Các rãnh dẫn hướng theo chiều ngang 18 pixel hay một 1.5 em line-height cho một phông chữ cơ bản 12-pixel.
Photoshop Template for Blueprint CSS Comps
Tài liệu Adobe Illustrator này mô tả những nét nổi bật của khung lưới 24 cột dành cho các CSS frameworks như Blueprint. Nó bao gồm các rãnh dẫn hướng tuân theo khung lưới 24 cột có kích thước 30 pixels của Blueprint, các khoảng trắng có chiều rộng 10-pixel và thanh ngang có chiều rộng là 950 pixel. Các rãnh dẫn hướng theo chiều ngang 18 pixel hay một 1.5 em line-height cho một phông chữ cơ bản 12-pixel.
Mobile App Development Resources
iPad GUI PSDCác PSD được xây dựng bằng cách sử dụng các vector, vì vậy hoàn toàn có thể chỉnh sửa và mở rộng. Bạn sẽ nhận thấy có một vài UI element mới khi được so sánhvới giao diện iPhone. Việc thiết kế workable screen được định dạng tới 768 × 1024 như vậy bạn có thể thiết kế bất cứ cái gì trong tập tin Photoshop này và có thể dễ dàng được mang qua SDK.
Ultimate iPhone Stencil – Graffletopia
Omnigraffe iPhone stencil kit này gồm backgrounds, title bars, buttons, selectors và toàn bộ các yếu tố iPhone UI khác. Nó có thể dễ dàng thay đổi kích thước theo chiều ngang vì tách nhóm, thay đổi kích thước các yếu tố ở chính giữa và sau đó tập hợp các yếu tố này vào một button duy nhất.
iPhone 3G Stencil
Bao gồm các thành phần giao diện tiêu chuẩn cho iPhone 3G: buttons, fields, map elements, keyboards, icons. Tất cả các thành phần trên background trong suốt và nên thay đổi lại kích thước một cách độc đáo.
iPhone GUI PSD 3.0
Với phát hành chính thức của Apple về iPhone 3.0 mới đã trở thành một số yếu tố GUI mới. Một số thay đổi và bổ sung đã được bao gồm trong GUI này: bản đồ và các yếu tố bản đồ bao gồm curl, copy và paste các yếu tố; timeline bar editor; horizontal iPhone và horizontal panel bars và keyboards.
iPhone PSD Vector Kit
IPhone starter kit này đi kèm với một vài các yếu tố button cũng như sáu option iPhone interface khác nhau.
iPhone GUI as Rich Symbols for Fireworks
iPhone kit này đã được thiết kế bằng cách sử dụng Adobe Fireworks. Nó có một vài combination, các button, các background, vv Nó cũng có một số dòng mã (lines of code) để chuyển đổi các vector symbols đơn giản thành các symbol phong phú với một vài biến đổi (Trong lập trình máy tính, đây là một vùng có tên trong bộ nhớ dùng để chứa một giá trị hoặc một chuỗi ký tự được gán cho biến đó.)
Google Android GUI Application Mockup PSD
File Photoshop này gồm tất cả các yếu tố cơ bản của Android 1.5, hệ điều hành di động của Google.
Palm Pre GUI PSD
Palm Pre GUI PSD này đã được xây dựng với các vector để chỉnh sửa và scaling một cách dễ dàng, và nó bao gồm hầu hết các yếu tố của Pre GUI.
Optional Wireframe Extras
Interactive Sketch NotationÝ tưởng chung đằng sau ký hiệu này là mong muốn hiển thị hóa các tình trạng của giao diện người dùng cũng như các hành động của người dùng một cách rõ ràng và nhanh chóng.
Standard Web Banners
Bạn có thể download các Web banners tiêu chuẩn này hoặc quảng cáo cá nhân (468 × 60 pixels, 768 × 60, 125 × 125, vv). Ngoài ra còn có các template có các kích thước phổ biến nhưng không phải là banner tiêu chuẩn (120 × 30, 230 × 33, 728 × 210, vv).
Wireframe Icons, Royalty-Free EPS and PNG
Bộ icon này bao gồm các phiên bản EPS VÀ PNG của bộ icon Konigi Wireframe bản gốc và nó phù hợp để sử dụng trong các ứng dụng vector drawing như Adobe Illustrator và Microsoft Visio.
WEB UI Treasure Chest
PSD layered file này, hầu hết toàn bộ các file này có thể được chỉnh sửa một cách đầy đủ, gồm hơn 100 yếu tố cho thiết kế website.
Webdesigner kit
Photoshop download này gồm registration fields, menus, checkboxes, radio buttons và cursors.
Printable Sketching Paper
A4 and A3 Sketching Grid PaperGrid rộng có thể download và in ấn này có kích thước 960 pixel có thể tạo ra một cách dễ dàng: 3 cột (320 pixel), 4 cột (240 pixel), 5 cột (192 pixel), hoặc 6 cột (160 pixel) làm cho nó dễ dàng để tạo một ba cột (320 pixel), Grid này đặt trên một tờ giấy (sheet of paper)t. Bạn có hai kích cỡ để lựa chọn, A4 và A3.
iPhone Application Sketch Template
Các ô vuông dạng khung lưới để trên tấm giấy vẽ này bằng khoảng10 pixels. Các dấu hiệu đánh dấu chỉ ra chiều cao của status bar, nav bar, keyboard, tab bar và toolbar. Để được kết quả tốt nhất, hãy in trên giấy A4 (borderless paper).
iPhone Wireframe Templates for Sketching
Hai layout có sẵn, cả hai trong định dạng PDF và Visio (VSD) dành cho quick iPhone mockups.
iPhone App Wireframe Template
Hai phiên bản có sẵn, một cái trong landscape (phong cảnh) và một cái trong portrait (chân dung). Mỗi phiên bản gồm ba trang: Trang 1 có màn hình dọc và cột ghi chú; Trang 2 có màn hình nằm ngang và cột ghi chú; trang 3 có 3 screen layout rất lý tưởng cho việc soạn thảo thiết kế.
Printable Wireframe and Notes
Dưới đây là graph paper 8.5 x 11-inch được làm để dành cho các visual designers, interaction designer và information architect. Bạn sẽ tìm thấy các phong cách cho wireframing user interfaces, storyboarding interaction và plotting values trên một dạng lưới 2 × 2. Hơn nữa, bạn sẽ có một dạng lưới cơ bản để soạn thảo site maps hoặc bất cứ điều gì khác mà bạn muốn đưa lên.Wireframe with Notes
Wireframe grid này được chia thành 24 cột, với khoảng trắng giữa các cột. Khung lưới được thiết kế đặc biệt hữu ích cho các nhà thiết kế làm việc trong một CSS framework như Blueprint.
Wireframe (Landscape)
Wireframe (Portrait)
Storyboard
Đây là một storyboard với bốn ngăn. Mỗi ngăn chứa một lưới điện đơn giản.
Đây là một storyboard với bốn ngăn. Mỗi ngăn chứa một lưới điện đơn giản.
Storyboard with Notes
Đây là một storyboard với 4 ngăn. Mỗi ngăn chứa một dạng khung lưới đơn giản. Phạm vi bên dưới mỗi ô được dành để ghi chú.
Đây là một storyboard với 4 ngăn. Mỗi ngăn chứa một dạng khung lưới đơn giản. Phạm vi bên dưới mỗi ô được dành để ghi chú.
Basic Paper
Đây là một grid box cơ bản. Sử dụng nó cho khái niệm, diagrams, site maps, spectrums, tables và bất cứ cái gì mà bạn muốn phác thảo.
Đây là một grid box cơ bản. Sử dụng nó cho khái niệm, diagrams, site maps, spectrums, tables và bất cứ cái gì mà bạn muốn phác thảo.
Wireframe Magnets (DIY Kit)
DIY magnet template này được dựa trên Konigi wireframe stencils và bao gồm ba sheets of elements có thể hữu ích cho whiteboard prototyping. Download và in PDFs lên trên các tấm từ (magnet sheets) đơn giản, và có thể cắt chúng ra.Form Elements
Further Resources And Some Wireframing Inspiration
web.without.wordsMột sân chơi trực quan, nơi các nhà thiết kế làm cho các trang web trở nên phổ biến và tái tạo lại chúng trong một wireframe.
Graffletopia
Graffletopia là một nguồn tài liệu rất lớn về các stencils miễn phí dành cho OmniGraffle (Mac-only, sadly). Với OmniGraffle, bạn có thể nhanh chóng tạo ra các wireframes, flowcharts và các diagrams chất lượng cao khác.
Mockups To Go
Mockups To Go là một bộ sưu tập về các cấu tạo UI và các mẫu thiết kế có sẵn để sử dụng do người dung đóng góp, tất cả đã được xây dựng bằng cách sử dụng Balsamiq Mockups. Bạn có thể download tất cả các cấu tạo và các mẫu thiết kế để sử dụng trong mockups của bạn.
Wireframes Magazine
Wireframes Magazine đã dành riêng tất cả mọi thứ cho wireframing và prototyping. Nó có một thư viện khổng lồ của các template, các sample và các công cụ UI được download xuống…
I {heart} wireframes
I {heart} wireframes là một nguồn cảm hứng và các tài liệu tuyệt vời về wireframing.Và thật vậy, tất cả chúng tôi đều yêu wireframes!
Không có nhận xét nào:
Đăng nhận xét