Thư Viện Dành Cho Thiết Kế Wireframe và Giao Diện

Để mô tả giao diện sử dụng của website, phần mềm hay những sản phẩm khác, bạn sẽ phải cần một số thành phần giao diện cơ bản. Và đây là tập hợp những dụng cụ rất có ích cho việc thiết kế Wireframe và giao diện người dùng. Khi bạn muốn tạo ra mô tả đơn giản nhưng có tính chân thực cho dự án của mình, bạn có thể sử dụng những bộ dụng cụ dưới đây để mô tả ý tưởng của mình, giữ cho nó sự trừu tượng nhưng không làm mất đi những chi tiết quan trọng của bạn. Trong bài viết này, chúng tôi đã tập hợp những bộ dụng cụ hữu ích cho thiết kế giao diện web và mobile, những phải PDF tiện dụng và tài nguyên để bạn có thể sử dụng cho dự án của mình. Chúng tôi đã rất cẩn thận để lựa cho những gì hữu ích nhất để giúp bạn trong giai đoạn đầu của dự án.

Giao Diện Mobile Miễn Phí PSD

Android GUI PSD Đây là giao diện dành cho Andoid 1.5 và chúng được tạo ra để giúp cho những dự án liên quan đến cộng đồng với những ứng dụng của Android. Phần lớn những thành phần và hình minh họa điện thoại được tạo ra và lưu dưới dạngvector nên rất dễ chỉnh sửa kích thước. RIM Blackberry PSD Một file PSD hoàn chỉnh với nhiều mẫu layer, nó có chứa 135 layers trong Photoshop. Android Sketch Stencil Version 1.0 OmniGraffle là một phác thảo dành cho Android. Mục đích của những phác thảo wireframe này là giúp giảm bớt sự tưởng tượng dành cho thiết kế trực quan và khuyến khích người thực hiện chú tâm nhiều hơn và chức năng, cách sử dụng và thao tác. Tất cả các yếu tố để thiết kế giao diện cho Maemo 5 dạng PSD Bộ download PSD này có chứa những thành phần giao diện dành cho những ứng dụng dựa trên nền tảng Maemo. Đây là những mẫu không thể thiếu nếu bạn muốn thiết kế giao diện ứng dụng chạy trên các thiết bị Maemo. iPhone 4 GUI PSD (Retina Display) Đây là công cụ dành cho những người muốn thiết kế cho retina display (640×960). File này rất nặng (62.7MB) và độ phân giải (4074×2986). Bộ Thiết kế dành cho iPad trong PSD Phiên bản này cung cấp giao diện chuẩn của Ipad là 768×1024, Ngoài ra các định dạng tại đây dưới dạng Vertor cho phép bạn có thể thiết kế ở độ phân giải cao hơn. Phiên bản này được trình bày trong các Layer Photoshop, nó giúp bạn dễ dàng trình bày với khách hàng. Android 1.6 Wireframe stencil for Omnigraffle Google Android GUI PSD Đây là giao diện cho Android, thiết kế dạng vectors. iPad GUI PSD KitGói này chứa đầy đủ các kích thước đồ họa như 256, 128 và 64 pixel cho icon. Gói này còn chứa 4 kích thước cho ipad trong các định dạng PSD, PNG và Mac ICNS. Google Android PSD A stencil set for Google Android prototyping. Fireworks template for Android Trong đây là những những template Firewok, đồ họa dành cho Android và được vẽ dạng vector. Trong thư mục, những thành phần được dán nhãn theo từ vựng Android. Sexy Vector Cell Phone Chiếc điện thoại này có thể co dãn tùy ý. Dể dàng đưa vào trong hình ảnh của bạn. Tất cả các chủ thể đều được sắp xếp, gom nhóm và dán nhãn cho tiện sử dụng. iPad Stencil for Omnigraffle Bao gồm hình nền, title bars, buttons, selectors và những thành phần giao diện dành cho Iphone. Contains backgrounds, title bars, buttons, selectors and other iPhone UI elements. Các văn bản trong list, title bar, button và scroll wheels có thể chỉnh sửa được. iPhone App Wireframe Template Mobile – iPhone iPhone GUI Elements Some beautiful iPhone elements. All graphics are layered Photoshop files. iPad and iPhone Design Thiết kế dành cho các ứng dụng Iphone, Ipod Touch và Ipad của bạn. Tất cả các thành phần trong iphone được tạo bằng tay và có thể nhóm, kéo dãn và xuất ra các định dạng vector khác trong Graffle. Design Stencil for iPhone and iPad Phát triển cho các ứng dụng OS trong iPhone, iPod Touch và iPad. Những thiết kế tập trung dành cho nhà phát triển của IUKit. Apple iPad fully editable PSD Một định dạng PSD đẩy đủ và có thể chỉnh sửa dành cho iPad. Từng thành phần ở đây đểu có thể chỉnh sửa dễ dàng. Palm Pre GUI PSD This set contains a PSD to help designers pitch and develop polished concepts using Photoshop. iPhone UI Vector Elements Most visuals for applications start out as vector mock-ups in Adobe Illustrator. So, here are some cool iPhone UI vector elements. And there are even a few good Photoshop resources and even a nice OmniGraffle iPhone UI file or two in there. iPad Vector GUI Elements: tabs buttons menus icons This set contains almost all of the iPad UI elements, including buttons, tabs, menus, keyboard and balloons. Useful for designers and developers, it includes scalable and totally editable vector versions (AI).

Giao Diện Miễn Phí Dành Cho Các Mạng Xã Hội (PSD)

Free Full-Layered Facebook GUI PSD Kit Ý tưởng đằng sau bộ sản phẩm này là giúp tiết kiệm thời gian trong việc hình dung và mô tả trang fan pages trong Facebook, bạn có thể chỉnh sửa mọi thứ và sử dụng miễn phí cho tất các các dự án và không có sự hạn chế nào. Facebook GUI Free PSD Resource Một giao diện người dùng trên Facebook dạng Photoshop, giúp cho công việc của bạn dễ dàng hơn Facebook Applications A sizable collection of elements for creating wireframes for Facebook applications. Omnigraffle Twitter Widget Stencil Bộ này bao gồm những dạng widget và badge trong Twitter

Công Cụ Thiết Kế Wireframe

Best Practice UX Forms Stencil v1.1 Mộ ứng dụng hoàn hảo cho bất kỳ một dạng thiết kế nào, nó cung cấp 3 cách khác nhau để tổ chức forms. Version hiện tạo cung cấp các dạng button khác nhau, quy trình, Captcha code, nhản và nhiều thứ khác.  Form Elements UI Kit Form elements stencil from the Design Stencil kit in the Yahoo! Design Pattern Library. Wireframe Shapes Here is a set of shapes for making wireframes in OmniGraffle version 5.x ( forMac OS X). It consists of most of the basic elements you’ll need to create user interface specifications. Wireframe kit for UI DesignersA set of various wireframes, such as product details, list of items, front page, mobile phone. MBTI sketching paper for ideation A4 sketching paper Giấy phác thảo này có thể sử dụng sau khi tổng hợp ý tưởng về tính năng. Thiết kế màn hình sơ bộ dựa trên những ý tưởng bạn đưa ra. Wireframe Magnets (DIY Kit) Mẫu này dữa trên Konigi wireframe stencils, nó bao gồm ba sheet khác nhau của các thành phần, nó có thể hữu dụng cho whiteboard prototyping. Đơn giản là tải về, in các file PSD lên một Mẫu này DIY nam châm là dựa trên các giấy nến wireframe Konigi, và nó bao gồm ba tờ của các yếu tố có thể có ích cho prototyping Bảng. Đơn giản chỉ cần tải về và in các file PDF lên một tấm từ (magnet sheets) đơn giản, và sau đó cắt chúng ra. Paper wireframe templates The finished product include seven variations, as well as PSDs. Wireframe template A useful print-and-sketch template available for downloading. iPad Idea Sheet Scenario, Taskflow and Grid Sketch Sheets Free Photoshop browser template Need a clean browser screenshot for a design presentation? Look no further. These free professional Photoshop browser templates come in 1024×768 and 800×600 pixel sizes and all kinds of flavors. Interactive Sketching Notation 0.1 Ý tưởng đằng sau thiết kế này là sự nhận dạng các trạng thái giao diện người dùng cũng như các hành động tiếp theo một cách rõ ràng và nhanh chóng. MobileMe Full iPhone GUI Android Wireframe Templates (PDF) Free Keynote UX Stencils Advertising Stencil Kit A set of very useful advertising stencils. Dragnet website wireframes kit v 0.9 Kéo thả những thành phần cần thiết trong thiết kế web như scrollbars, button, menu và bảng thông báo.  User Interface Design Framework Bộ sưu tập này rất đẹp và toàn diện, chúng có chứa hàng trăm các thành phần dạng vector dành cho những thiết kế giao diện. Có hơn 260 vector icon và thư viện với hơn 200 dạng cho Illustrator. Browser Form Elements PSD Bao gồm bộ sản phẩm cho Firefox 3 và Mac, ngoài ra còn cho IE7. Sketching and Wireframing Kit Đây là một bộ miễn phí dành cho phác thảo và làm wireframe. Nó tập hợp các dạng form, icon, indicators, feedback messages, tooltips, navigation elements, image placeholders, embedded videos, sliders và common ad banners. Photoshop Form Element Templates This set includes all common form fields and mouse and link pointers, optimized for ease of use.  Web Browser Elements Rất tuyệt vời và chứa những thành phẩn hữu ích như pull-down menus, input fields, radio buttons, check boxes, buttons, text fields và scroll bars, tất cả đểu có thể dễ dàng chỉnh sửa trong Photoshop. UI Design Kit Wireframe Symbols  Web UI Element Pack Wireframe Kit for Google Drawings OmniGraffle Stencil for Ext JS v3.0 Flex 3 Stencil Aqua GUI Flex Darkskin PSD UI  Web Wireframe Kit  UI Buttons and Icons Quommunication Stencil Kit  Mac OS X Interface 2 OmniGraffle UX Template Template for Blueprint CSS Comps Apple Elements for OmniGraffle DeviantART ID PSD Kit Browser Screens and Website Elements 960 Grid Template for OmniGraffle Control of different browsers for designers (download link)