How visual designers work with wireframe

Website wireframe - Website wireframe

A wireframe document for a person profile view

A Website wireframe , also as Page scheme or Designated screen , is a visual guide that shows the basic structure of a website. Wireframes are created to arrange elements so that they best serve a specific purpose. This discipline is created by L. te Pas. A former Harvard student (1982). The purpose is usually determined by a business goal and creative idea. The wireframe shows the page layout, or the arrangement of the website's content, including the interface elements and navigation systems, and how they work together. Wireframe typically lacks typographic style, color, or graphics because of the emphasis on functionality, behavior, and priority of the content. In other words, it focuses on what a screen does, not what it looks like. Wireframe can be pencil drawings or sketches on a whiteboard, or they can be created using a wide variety of free or commercial software applications. Wireframes are generally created by business analysts, user experience designers, developers, visual designers, and people with expertise in interaction design, information architecture, and user research.

Wireframes focus on:

  • The range of functions
  • The relative priorities of the information and functions
  • The rules for displaying certain types of information
  • The effect of different scenarios on the display

The website wireframe connects the underlying conceptual structure or information architecture with the surface or visual design of the website. Wireframes allow you to establish the functionality and relationships between different screen templates on a website. An iterative process of creating wireframes is an effective way to quickly prototype pages while measuring the practicality of a design concept. Wireframing usually begins between "high-level structural work - such as flowcharts or sitemaps - and screen designs". When creating a website, wireframing makes thinking tangible.

In addition to websites, wireframes are used for prototyping mobile websites, computer applications or other screen-based products that involve human-computer interaction.

Use of wire mesh

Wireframes can be used by different disciplines. Developers use wireframes to better understand the functionality of the site while designers use them to drive the user interface process. User experience designers and information architects use wireframe models to show navigation paths between pages. Business analysts use wireframes to visually support the business rules and interaction requirements for a screen. Business prospects review wireframes to ensure requirements and goals are met by the design. Professionals who create wireframes include business analysts, information architects, interaction designers, user experience designers, graphic designers, programmers, and product managers.

Working with wireframe can be a collaborative effort as it connects the information architecture with the visual design. Because of the overlap in these professional roles, conflicts can arise that make wireframing a controversial part of the design process. Because wireframe is a "bare bones" aesthetic, it is difficult for designers to assess how precisely the wireframe will be needed to represent the actual screen layouts. To avoid conflict, it is recommended that business analysts who understand user needs create a basic wireframe and then work with designers to further improve the wireframe. Another difficulty with wireframe is that because it is static, it does not display interactive detail effectively. The modern UI design includes various devices such as expansion boxes, hover effects, and carousels that pose a challenge to 2D diagrams.

Wireframes can have different levels of detail and can be divided into two categories based on fidelity or similarity to the final product.

Low fidelity

Low-fidelity wireframe that resembles a rough sketch or quick model can be made quickly. These wireframes help a project team communicate ideas and work together more effectively because they are more abstract and use rectangles and labels to represent content. Dummy content, Latin filler text (lorem ipsum), sample or symbolic content are used to represent data when real content is not available. For example, a placeholder rectangle can be used instead of actual images.

Low fidelity wireframes can be used to facilitate team communication in a project and are used in the early stages of a project.


High fidelity wireframes are often used for documentation because they have a level of detail that better matches the design of the actual web page, so it takes longer to create.

For simple drawings or drawings with poor fidelity, prototyping paper is a common technique. Since these sketches are only representations, comments - the notes on the left to explain the behavior - are helpful. For more complex projects, rendering wireframe using computer software is popular. Some tools enable the integration of interactivity, including Flash animation and front-end web technologies such as HTML, CSS, and JavaScript.

High fidelity wireframes contain more realistic content, specific typography selections and information about image dimensions. Unlike low fidelity wireframes, high fidelity wireframes can contain actual images. Color selection is not included, but different color values ​​can be displayed in grayscale.

Elements of wire mesh

The floor plan of a website can be broken down into three components: information design, navigation design, and interface design. These components come together in the page layout, while wireframing represents the relationship between these components.

Information design

Information design is the presentation - placing and prioritizing information in a way that is easy to understand. Information design is an area of ​​user experience design in which information is to be displayed effectively for clear communication. For websites, elements of information should be arranged in such a way that they reflect the goals and tasks of the user.

Navigation design

The navigation system provides a number of screen elements that the user can use to navigate through the website page by page. The navigation design should communicate the relationship between the links it contains so that users can understand the options they have for navigating the site. Often, websites contain multiple navigation systems, e.g. B. global navigation, local navigation, additional navigation, contextual navigation and free navigation.

Interface design

User interface design involves selecting and arranging interface elements so that users can interact with the functionality of the system. The aim is to improve usability and efficiency as much as possible. Common elements in the interface design are action buttons, text fields, check boxes, radio buttons, and drop-down menus.

See also