From Wikipedia, the free encyclopedia Website wireframe
Website wireframe
different screen templates of a website. An iterative
process, creating wireframes is an effective way to make
rapid prototypes of pages, while measuring the practi-
cality of a design concept. Wireframing typically begins
between “high-level structural work—like flowcharts or
site maps—and screen designs.”[3] Within the process of
building a website, wireframing is where thinking be-
comes tangible.[6]
Aside from websites, wireframes are utilized for the
prototyping of mobile sites, computer applications, or
other screen-based products that involve human-com-
puter interaction.[7] Future technologies and media will
force wireframes to adapt and evolve.
Uses of wireframes
Wireframes may be utilized by different disciplines.
Developers use wireframes to get a more tangible grasp
of the site’s functionality, while designers use them to
push the user interface (UI) process. User experience de-
A wireframe document for a person profile view created using signers and information architects use wireframes to
Balsamiq. show navigation paths between pages. Business stake-
holders use wireframes to ensure that requirements and
A website wireframe also known as a page schematic
wireframe, objectives are met through the design.[3] Other profes-
or screen blueprint, is a visual guide that represents the sionals who create wireframes include business analysts,
skeletal framework of a website.[1] The wireframe depicts information architects, interaction designers, user expe-
the page layout or arrangement of the website’s content, rience designers, graphic designers, programmers, and
including interface elements and navigational systems, product managers.[7]
and how they work together.[2] The wireframe usually Working with wireframes may be a collaborative ef-
lacks typographic style, color, or graphics, since the main fort since it bridges the information architecture to the
focus lies in functionality, behavior, and priority of con- visual design. Due to overlaps in these professional roles,
tent.[3] In other words, it focuses on “what a screen does, conflicts may occur, making wireframing a controversial
not what it looks like.”[4] Wireframes can be pencil draw- part of the design process.[6] Since wireframes signify a
ings or sketches on a whiteboard, or produced by means “bare bones” aesthetic, it is difficult for designers to as-
of a broad array of free or commercial software applica- sess how closely the wireframe needs to depict actual
tions. screen layouts.[4] Another difficulty with wireframes is
Wireframes focus on that they don’t effectively display interactive details.
• The kinds of information displayed Modern UI design incorporates various devices such as
• The range of functions available expanding panels, hover effects, and carousels that pose
• The relative priorities of the information and a challenge for 2-D diagrams.[8]
functions Wireframes may have multiple levels of detail and
• The rules for displaying certain kinds of can be broken up into two categories in terms of fidelity,
information or how closely they resemble the end product.
• The effect of different scenarios on the Low-fidelity Resembling a rough sketch or a quick
display[5] mock-up, low-fidelity wireframes have less detail and are
quick to produce. These wireframes help a project team
The website wireframe connects the underlying concep- collaborate more effectively since they are more ab-
tual structure, or information architecture, to the sur- stract, using rectangles and labeling to represent con-
face, or visual design of the website.[2] Wireframes help tent.[9] Dummy content, Latin filler text (lorem ipsum),
establish functionality, and the relationships between
1
From Wikipedia, the free encyclopedia Website wireframe
sample or symbolic content are used to represent data
when real content is not available.[10]
See also
High-fidelity High-fidelity wireframes are often used • Comprehensive layout
for documenting because they incorporate a level of de- • Graphic Design
tail that more closely matches the design of the actual • Information architecture
webpage, thus taking longer to create.[9] • User experience design
For simple or low-fidelity drawings, paper prototyp- • User interface design
ing is a common technique. Since these sketches are just • Web design
representations, annotations—adjacent notes to explain
behavior–are useful.[11] For more complex projects, ren-
dering wireframes using computer software is popular.
Notes
Some tools allow the incorporation of interactivity in- [1] Brown 2011, p. 166
cluding Flash animation, and front-end web technologies [2] ^ Garrett 2010, p. 131
such as, HTML, CSS, and JavaScript. [3] ^ Brown 2011, p. 167
[4] ^ Brown 2011, p. 168
[5] Brown (2011), p. 169
Elements of wireframes [6] ^ Wodtke, Govella 2009, p. 186
The skeleton plan of a website can be broken down into [7] ^ Konigi.com 2011
three components: information design, navigation de- [8] Brown 2011, p. 169
sign, and interface design. Page layout is where these [9] ^ Wodtke, Govella 2009, p. 185
components come together, while wireframing is what [10] Brown 2011, p. 175
depicts the relationship between these components.[2] [11] Brown 2011, p. 194
[12] Garrett 2010, p. 126
Information design [13] Garrett 2010, p. 120-122
Information design is the presentation—placement and [14] Garrett 2010, p. 30
prioritization of information in a way that facilitates un-
derstanding. Information design is an area of graphic de- References
sign, meant to display information effectively for clear
• Brown, Dan M. (2011). Communicating Design:
communication. For websites, information elements
Developing Web Site Documentation for Design and
should be arranged in a way that reflects the goals and
Planning, Second Edition. New Riders.
tasks of the user.[12]
ISBN 978-0-13-138539-9.
• Garrett, Jesse James (2010). The Elements of User
Navigation design
Experience: User-Centered Design for the Web and Beyond.
The navigation system provides a set of screen elements New Riders. ISBN 978-0-321-68865-1.
that allow the user to move page to page through a web- • "Konigi Wiki – Wireframes". http://konigi.com/
site. The navigation design should communicate the re- node/1819. Retrieved 2011-03-25.
lationship between the links it contains so that users un- • Wodtke, Christina; Govella, Austin (2009). Information
derstand the options they have for navigating the site. Architecture: Blueprints for the Web, Second Edition. New
Often, websites contain multiple navigation systems such Riders. ISBN 978-0-321-59199-9.
as a global navigation, local navigation, supplementary
navigation, contextual navigation, and courtesy naviga-
tion.[13]
Interface design
User interface design includes selecting and arranging
interface elements to enable users to interact with the
functionality of the system.[14] The goal is to facilitate us-
ability and efficiency as much as possible. Common ele-
ments found in interface design are action buttons, text
fields, check boxes, radio buttons and drop-down menus.
Retrieved from "http://en.wikipedia.org/w/index.php?title=Website_wireframe&oldid=474195020"
Categories:
• Web design
2
From Wikipedia, the free encyclopedia Website wireframe
This page was last modified on 31 January 2012 at 11:25. Text is available under the Creative Commons Attribution-
ShareAlike License; additional terms may apply. See Terms of use for details. Wikipedia® is a registered trademark of
the Wikimedia Foundation, Inc., a non-profit organization.Contact us
Privacy policy About Wikipedia Disclaimers
3