Introducing wireframes
When working on commercial projects, it is common for web page designs to be provided to web developers in the form of a wireframe. A wireframe is a low-fidelity design that provides enough information about a page for the developer to start coding. Usually, they will not include much visual design information and are focused on the main structure of a page.
The following figure is an example of a wireframe for a new home page:
Figure 2.12: Example of a wireframe
Activity 2.01 – video store home page
Suppose you are a frontend developer working for a tech start-up. You have been asked to build a home page for the online video store. You have been given the following wireframe from the UX designer:
Figure 2.13: Wireframe as per the UX designer’s expectation
Using your newly acquired HTML5 knowledge, you can start to convert the wireframe into working HTML code. At this stage, you...
