Wireframes
Homepage
This is the wireframe of the Homepage. The Serif typeface, Masqualero is chosen for heading while the Sans Serif typeface, Acumin Pro is selected for the body. Serif type is chosen for heading to add interest and decorate the pages while Sans Serif type is selected for the body to allow the legibility. It consists of a section that shows the recent articles and links the visitor to the Articles Page. Another section introduces its mobile app, Sleep Pathfinder and links to its App Page as well.
Articles Page
This is the wireframe for Articles Page. It contains the search toolbar which allows users to search for their interest topics. It also includes the Recent Stories section, which displays its recent articles and the Featured Stories section, which shows the featured articles chosen by the team. It has a Back to top button which send the user back to the top of this page once clicked.
App Page
This is the wireframe of the App Page. The App Page introduces the mobile version of Sleep Pathfinder to the audience. It possesses a few sections that introduce the particular page and function of the mobile app.
About Page
This is the wireframe of the About Page. This page tells the story of this website and team. The Our story section describes the background and history of the Sleep Pathfinder website while the Our team section lists and introduces the employees of Sleep Pathfinder. It also consists of Read More buttons which links to the particular page of the team member.
Microsite Page
This is the wireframe of the Microsite Page. This Microsite Page promotes the Sleep Pathfinder website. This page also let the audience know what this website is about and links them to the Home Page, Articles Page and App Page.