HTML 5

CSS 3/Sass

jQuery

PHP

Isucare

Website Design & Development

Isucare is a high performance blood glucose monitoring device, sold by Salem laboratory. In order to promote the product, I was tasked with the design and development of a brochure website.

in_browser
img-project-center

A sketch of the website content hierarchy

img-project-center

A detail sketch of the website layout

01
Concept

Creating a template

As part of the design and development team, my task was to help create the first product website of Salem Laboratory's product lineup: Isucare, a blood glucose monitoring device.
Since the website was to be one of a series of other product websites, we decided that in order to create a homogeneous visual identity and facilitate the development process, Isucare would serve as a template for all of the other product websites.

02
Design

Planning the Website

When designing the website, one of the first things we did was decide upon the content. What are we trying to say with the website? Once we established the purpose of the website, we set out to find the most effective way to deliver the message.

It was clear that the client wanted a brochure website that outlined the product’s benefits, line-up, and provided the potential customer with an easy way to contact them. We decided to go with a one-page website divided into three parts, as seen in the site map above. Clicking on one link will slide the user down to the right section of the page.

img-project-center

03
Code

Putting it all together

The website was developed using HTML/CSS, JavaScript for the front-end and PHP for the back-end. I used the jQuery plug-in Fullpage.js to create the full page scrolling effect.