Henry Schein / Card UI

Henry Schein Global Page Redesign
Current page: http://www.henryschein.com/

Goal

Primary goal of this redesign is to convey the grand scale of Henry Schein and it’s services through better information architecture. To achieve that goal I used a concept I call content promotion/expiration. Which basically means promoting a piece to content to homepage like leadership carousel in my redesign. Which is currently a static page with twenty bios.

Secondary goal is of this redesign is trendy UI and UX. Which I achieved through mostly flat design and by creating UI elements that engage the user like carousel and video.

Card/Widget Layout

The Card/Widget layout is extremely efficient, flexible and can be easily molded into responsive. Total Width to this page is 1500px with 16px base font and 24px line-height. Height of this page can grow or shrink with content promotion and expiration.

Using a custom column grid with CSS classes of 25%, 50%, 75%, 100%, 1/3 and 2/3 and many combination can created and overtime new cards/widgets with better UI can be introduced. Possibilities are endless…

Highlights

  • Custom Graphics
  • Custom Grid
  • Flat Design (Mostly)
  • Card/widget Layout
  • Carousel
  • Mega Menu

Branding

#084f9f#031933#cee0f5#fe0000#bf0000#800000#f4f4f4

Fonts

Open Sans

Arc Graph

On Github

https://github.com/SalmanMunawar/graph

Code


/**
 * Created by Salman Munawar on 1/4/2015.
 */
(function () {

    "use strict";

    var draw = {

        circle: function (params) {

            //Canvas Api:
            //arc(cx, y, radius, startAngle, endAngle, direction)

            /*
             Circle Function API
             draw.circle({

                     canvas: DOM Element,
                     size: Canvas size,
                     radius: Circle Size,
                     color: Circle color
             });
             */

            if (params.canvas) {

                var
                    canvas = params.canvas,
                    size = parseInt(params.size, 10) || 128,
                    radius = parseInt(params.radius, 10) || 64,
                    color = params.color || "#eeeeee",

                    xCoord = size / 2,
                    yCoord = size / 2,

                    ctx = canvas.getContext("2d");

                ctx.beginPath();
                ctx.arc(xCoord, yCoord, radius, 0, Math.PI * 2);
                ctx.fillStyle = color;
                ctx.fill();
                ctx.closePath();

            } else {

                console.error("Please select canvas");

            }

        },
        arc: function (params) {

            //Canvas Api:
            //arc(cx, y, radius, startAngle, endAngle, direction)

            /*
             Arc Function API
             draw.arc({
                     canvas: DOM element,
                     size: Canvas size,
                     radius: Arc Size,
                     color: Arc color,
                     percentage: Arc percentage,
                     width: Thickness of arc
             });
             */

            if (params.canvas) {

                var
                    canvas = params.canvas,
                    size = parseInt(params.size, 10) || 128,
                    radius = parseInt(params.radius, 10) || 64,
                    color = params.color || "#eeeeee",
                    width= params.width || 8,
                    percentage = params.percentage ? Math.PI * 2 * parseInt(params.percentage, 10) / 100 : 75,

                    xCoord = size / 2,
                    yCoord = size / 2,

                    ctx = canvas.getContext("2d");

                ctx.rotate(-Math.PI / 2);

                ctx.beginPath();
                ctx.arc(-xCoord, yCoord, radius, 0, percentage);
                ctx.strokeStyle = color;
                ctx.lineWidth = width;
                ctx.stroke();
                ctx.closePath();

            } else {

                console.error("Please select canvas");

            }//End if

        },
        score: function (element) {
            /*
             Score Function API

            Usage:
             JS
                draw.score(DOM Element);
             */

            if (element) {

                var paper = document.querySelector(element),
                    graphSize = parseInt(paper.width, 10),
                    radius = graphSize / 2;

                //Draw graph background
                this.circle({
                    canvas: paper,
                    size: graphSize,
                    radius: radius,
                    color: paper.getAttribute('data-background-color')
                });

                //Draw inner circle
                this.circle({
                    canvas: paper,
                    size: graphSize,
                    radius: radius * .75,
                    color: paper.getAttribute('data-core-color')
                });

                ////Draw arc
                this.arc({

                    canvas: paper,
                    size: graphSize,
                    percentage: paper.getAttribute('data-percentage'),
                    radius: (graphSize / 2) * .875,
                    width: (graphSize / 2) * .25,
                    color: paper.getAttribute('data-arc-color')

                });

            } else {

                console.error("Please select canvas");

            }//End if

        }//End Score

    }; //End Draw

    //Call draw.score function which will draw.circle twice and draw.arc once
    draw.score(".score");

}());

So many screen resolutions

So many screen resolutions. I have spent a good amount of time looking for device resolutions but can never seem to remember that one website where I found that information last time. Well here is another one but hopefully you will remember this tip.

* Open Chrome -> inspect element and click the smart phone icon and choose from a large variety of devices.

Very helpful for designing and developing responsive website and apps.