Wireframe

website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website.[1] The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together.[2] The wireframe usually lacks typographic style, color, or graphics, since the main focus lies in functionality, behavior, and priority of content.[3] In other words, it focuses on “what a screen does, not what it looks like.”[4] Wireframes can be pencil drawings or sketches on a whiteboard, or produced by means of a broad array of free or commercial software applications.

Wireframes focus on

  • The kinds of information displayed
  • 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[5]

The website wireframe connects the underlying conceptual structure, or information architecture, to the surface, or visual design of the website.[2] 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.”[3] Within the process of building a website, wireframing is where thinking becomes tangible.[6]

Aside from websites, wireframes are utilized for the prototyping of mobile sites, computer applications, or other screen-based products that involve human-computer interaction.[7] Future technologies and media will force wireframes to adapt and evolve.

Reference: http://en.wikipedia.org/wiki/Website_wireframe

Advertisements
This entry was posted in Wireframes and tagged . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s