The Importance of Wireframing

The Importance of Wireframing


Although this Articles simply collects and gathers links for all front-end developer’s or designer’s reference, but it’s really important to introduce or remind us about ‘Wireframing’.

• What's Wireframes and why is it important

A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website.

网站的线框 ,也被称作页面蓝图或页面原理图,是展现网站页面的结构的可视化指导。
Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose. The purpose is usually being informed by a business objective and a creative idea.

The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together.


The wireframe usually lacks typographic style, color, or graphics, since the main focus lies in functionality, behavior, and priority of content.In other words, it focuses on what a screen does, not what it looks like.

Wireframes can be pencil drawings or sketches on a whiteboard, or they can be produced by means of a broad array of free or commercial software applications. Wireframes are generally created by business analysts, user experience designers, developers, visual designers and other roles with expertise in interaction design, information architecture and user research.

线框可以是白板上的铅笔画或草图,或者可以通过广泛的免费或商业软件等应用程序制作生成。 线框通常由业务分析师,用户体验设计师,开发人员,视觉设计师和其他在交互设计,信息架构和用户研究方面具有专长的人员创建。


Wireframes focus on:

The range of functions available
The relative priorities of the information and functions
The rules for displaying certain kinds of information
The effect of different scenarios on the display
The website wireframe connects the underlying conceptual structure, or information architecture, to the surface, or visual design of the website.
Wireframes help establish functionality, and the relationships between different screen templates of a website. An iterative process, creating wireframes is an effective way to make rapid prototypes of pages, while measuring the practicality of a design concept. Wireframing typically begins between “high-level structural work—like flowcharts or site maps—and screen designs.”
Within the process of building a website, wireframing is where thinking becomes tangible


UI/UX Design

why is it important?

• The Future of Wireframes

Time to re-assess and understand how to make good use of Wireframes:

• Wireframing Is Not a Religion

Wireframing is an important design method, a digital design board, you can amend or wipe out anytime

• Five Commandments for Wireframing

Paul Boag is a fan of Wireframing, he believes that it is one necessity part of design

• 20 Steps to Better Wireframing

Possibly the biggest mistake in any development project is failure to plan.

Some Resources and Round-Ups
• Tools


COTS: viso, etc.

• I Love Wireframing
• Wireframe Showcase
• Standard Screen Patterns for Web Interface Design

• 50 Free UI and Web Design Wireframing Kits and Resources
这篇文章关注一些线框工具和独立的应用程序,包括一些你可以用来制作自己线框图的一些工具:线框工具集,浏览器窗口,表单元素,网格,Mac OS X元素和手机元素,你可以在任何图形编辑器中使用他们,PS,AI,甚至纸笔工具。

• A Collection of Printable Sketch Templates and Sketch Books for Wireframing

• A Collection of Printable Web Browser Sketching and Wireframe Templates

• Useful(Offline) Utensils and Tookits for Designers

Free Wireframing Kits, UI Design Kits, PDFs and Resources – Smashing Magazine_files