The Importance of Wireframing

The Importance of Wireframing

HashFlare

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’.

Basics:
• 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.

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

profilewireframe

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
–https://en.wikipedia.org/wiki/Website_wireframe

Course&Certificate/课程&认证:

UI/UX Design

why is it important?
http://45royale.com/blog/importance-wireframing/

• The Future of Wireframes

Time to re-assess and understand how to make good use of Wireframes:
https://madebymany.com/blog/the-future-of-wireframes

• Wireframing Is Not a Religion

Wireframing is an important design method, a digital design board, you can amend or wipe out anytime
http://52weeksofux.com/post/866406780/wireframing-is-not-a-religion

• Five Commandments for Wireframing

Paul Boag is a fan of Wireframing, he believes that it is one necessity part of design
https://boagworld.com/design/wireframing-rules/

• 20 Steps to Better Wireframing

Possibly the biggest mistake in any development project is failure to plan.
http://blog.teamtreehouse.com/20-steps-to-better-wireframing

Some Resources and Round-Ups
• Tools

Opensource: http://pencil.evolus.vn/Default.html

COTS: viso, etc.

• I Love Wireframing
 http://wireframes.tumblr.com/
 一个tumblog专注于线框,原型,实物设计。
• Wireframe Showcase
 http://www.wireframeshowcase.com/
 在这个网站可以查看一些基于线框设计的网站,可分析学习设计人员是如何将实体模型转化为设计的。因为线框和设计都是由设计者自己上传的,每个线框设计都包含了一个简短的说明。大部分的网站原来是数字实物模型,有容易修改和重新设计的优势。起结果是令人愉快的线框设计。
• Standard Screen Patterns for Web Interface Design

http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns
一些互动设计的原则和模式

• 50 Free UI and Web Design Wireframing Kits and Resources

https://www.smashingmagazine.com/2010/02/50-free-ui-and-web-design-wireframing-kits-resources-and-source-files/
这篇文章关注一些线框工具和独立的应用程序,包括一些你可以用来制作自己线框图的一些工具:线框工具集,浏览器窗口,表单元素,网格,Mac OS X元素和手机元素,你可以在任何图形编辑器中使用他们,PS,AI,甚至纸笔工具。

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

http://www.geekchix.org/blog/2010/01/03/a-collection-of-printable-sketch-templates-and-sketch-books-for-wireframing/
20个资源,用于应用程序开发的草图阶段。

• A Collection of Printable Web Browser Sketching and Wireframe Templates

https://speckyboy.com/a-collection-of-printable-web-browser-sketching-and-wireframe-templates/
这些可打印的草图模板都是特意为web设计人员设计的。附加有浏览器的版本说明(Safari,Chrome甚至Firefox)

• Useful(Offline) Utensils and Tookits for Designers

http://www.hongkiat.com/blog/useful-offline-utensils-and-toolkits-for-designers/

Free Wireframing Kits, UI Design Kits, PDFs and Resources – Smashing Magazine_files
当你可以使用一个预制指南来节省时间,更好的发挥你的创造力,为什么还要从头开始设计呢?在这篇文章中,你将得到很多很棒的免费工具,一个笔记集合以及一些要购买的产品来帮助你线下设计。

友荐云推荐