A wireframe is a low fidelity representation of a web page that shows the basic elements of the page. They are not interactive, and do not show much detail, but create a simple design that guides the project. Once it starts becoming interactive, it becomes a prototype.
What to Include in a Wireframe?
Think about general elements when you plan every webpage: header, footer, sidebar and content areas. Then, think of additional elements: navigation bars, widgets, buttons. Once you have an idea of the elements, you can now start creating your wireframe.
All elements in the wireframe are usually displayed and organised to consider the following:
- What will exactly be displayed in this page?
- How will the elements of this page be put together?
- How will these elements be displayed in positioning, labelling and size?
- How will these elements work together?
- How does these elements interact with the user?
Types of Wireframes:
- Sketchy
- Digital
After completing this stage and being convinced .. We start the implementation and build pages with HTML
HTML (Hypertext Markup Language) is the code that is used to structure a web page and its content. For example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables.
The HTML element is everything from the start tag to the end tag:
