top of page

Visual Mockups

Homepage

This is the visual mockup of the Homepage. The colours blue and pink are chosen as the colour theme as blue facilitates sleep. This colour also brings calmness, relaxation and raise sleepiness to the audience. However, this might cause users to feel sleepy and bored when scrolling along with the site. So, the colour pink is used to avoid these negative considerations. Pink has a psychological meaning of passion, excitement and happiness which can solve these possible problems and at the same time can raise the interest of the audience. The Recent Stories section shows the latest articles and links users to the Article Page or the particular clicked article. The advertisement at the bottom of the page link people to the App Page once they clicked the Sleep Pathfinder or the Read More. It also comprises buttons of the Google Play and App Store as well as QR code which allows users to download its mobile app. 

Articles Page

This is the visual mockup of the Articles Page. This page consists of a search toolbar and articles. It also possesses a Back to top button to allow users to back to the top of the page. Once the user clicks an article, it will bring the user to the particular selected essay.

App Page

This is the visual mockup of the App Page. Each section of this page introduces the specific page and function of the mobile app. Each section includes a Download Now button that links people to its app's Google Play or App Store. At the bottom of this page is an advertisement of this mobile app attached with the button of Google Play and App Store as well as the QR code.

About Page

This is the visual mockup of the About Page. This page shares the story of this website. This page also lists the member of this website, the website manager, the sleep experts and the writers of this organisation. It also consists of a Read More button at the bottom of each member's description to link to their own profile which contains detailed information about themselves and their contacts.

Microsite Page

This is the visual mockup of the Microsite Page. This website allows users to know what the Sleep Pathfinder website is. The first section of this page link user to the Homepage of the Sleep Pathfinder website. This page displays thumbnails of articles that attract users and brings them to visit the site. This page also consists of the mobile app image, the Google Play download button, App Store download button and QR code which allows users to download the mobile app directly. There is also a Sign Up or Sign In form which enables the user to register an account or log in.  It possesses massive and noticeable Visit Now buttons to allude users to click and visit

the site.

bottom of page