Website wireframe

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

[3]: 131  The wireframe usually lacks typographic style, color, or graphics, since the main focus lies in functionality, behavior, and priority of content.

[1]: 168 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.

An iterative process, creating wireframes is an effective way to make rapid prototypes of pages, while measuring the practicality of a design concept.

[4]: 186 Wireframes are also utilized for the prototyping of mobile sites, computer applications, or other screen-based products that involve human-computer interaction.

Due to overlaps in these professional roles, conflicts may occur, making wireframing a controversial part of the design process.

[1]: 168 To avoid conflicts it is recommended that business analysts who understand the user requirements, create a basic wire frame and then work with designers to further improve the wireframes.

Modern UI design incorporates various devices such as expanding panels, hover effects, and carousels that pose a challenge for 2-D diagrams.

[6][7] High-fidelity wireframes are often used for documenting because they incorporate a level of detail that more closely matches the design of the actual webpage, thus taking longer to create.

Some tools allow the incorporation of interactivity including Flash animation, and front-end web technologies such as, HTML, CSS, and JavaScript.

High fidelity wireframes include more real content, specific typography choices, and information on image dimensions.