1. Website Wireframes

2. Definition:
A website wireframe also known as screen
blueprint, is a visual guide that represents the
framework of a website also allows designers
and developers to present proposed
functions, graphic elements, structure, and
content of a website with simple line
drawings.

3. Wireframe typically contain:
• Navigation
• Placeholders for branding elements
• General layout locations of key elements like
header, footer, content columns, navigation
• Placeholder images and content
• Site map that shows where different pages
might live on the site
• Additional pages to show how interior pages
might change
• Simple workflow for interactive elements

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

5. Simple Wireframes

7. Complicated Wireframes

8. Uses of wireframes:
• Designers:
Provides the base which helps the designers
to initiate the designing process by providing
the components for each page

9. Uses of wireframes:
• Clients:
It helps them making clear idea about which
features need to be highlighted from their
business point of view.

10. Uses of wireframes:
• Projects team:
Use wireframes to ensure that requirements
and objectives are met through the design,
also use wireframes as a base to build their
SRS according to it.

11. Uses of wireframes:
• Developers:
Use wireframes to identify the functional and
technical requirements of a site beside the
SRS and the HTMLs templates.

12. Thank you