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

Advertisements

WIP: Mega Menu

My current project is to create a Multi-Course menu, which will allow students to switch between their courses. This is the desktop version of new IINLC menu. Next step is to make this menu responsive. Stay tuned…

White Board: Wire-frame (Rough)

menu-rough-wireframe

Working with product owner to create a quick wire-frame

Photoshop: Mock-up

menu3

After initial wire-frame and gathering requirements created high fidelity PS mock-up

Starting Responsive

1st Break Point: 1040px or 65em

Menu-Close

Menu-Open

On Github

Turned mock-up into working HTML, CSS and JavaScript. Mega Menu

See in Action

Go…

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");

}());

IIN Learning Center

My project at IIN. Started in April 2013 version 1 launched in May 2014. I was responsible for coding the front-end and design as well.

Highlights

  • Mockups Designed in Photoshop
  • Front-end Built with AngularJs
  • Powered by Drupal RESTFUL Api

Code Sample


//String Format
dashboard.filter('strFormat', function () {
/*
  //String library
  vm.text = '$1 of $2';

  //Controller
  vm.data.s1 = 3;
  vm.data.s2 = 10;

  //Template
  ng-bind-html="vm.text | 
  strFormat:{$1: vm.data.s1, $2: vm.data.s2}"

*/

 return function (input, replacements) {

   angular.forEach(replacements, 
   
   function (val, ind) {

        input = input.replace(ind, val);

    });

    return input;
  }

 });
//End String Format

Using Meta and Link Tags for OS Integration

Key Meta and links can help Integrate your application or website into any OS. Which gives a professional prospective to your product. It makes it easier for the client to access your application/site as would access any native app.

Below are some tags I use to create “Add to Homescreen” icons. These meta and links are easy to implement but high impact on a product.

Windows 8

<meta name="application-name" content="iWebDraft"/>
<meta name="msapplication-tooltip" content="Salman Munawar / Web Design / Development" />
<meta name="msapplication-TileColor" content="#0f5cbf"/>
<meta name="msapplication-wide310x150logo" content="img/win-logo.jpg"/>
<meta name="msapplication-square150x150logo" content="img/ie150x150.jpg">
<meta name="msapplication-square70x70logo" content="img/ie70x70.jpg">

For more comprehensive list for windows 8 please visit: Pinned Sites

Andriod

For Android little more work is required. In addition to link tags you have to create a manifest file listing a supported size and application name.

<link rel="shortcut icon" sizes="196x196" href="img/touch-icon-196x196.jpg">
<link rel="manifest" href="manifest.json">

For more details please visit: Add to Homescreen

IOS

<link rel="apple-touch-startup-image" href="img/splash.jpg" sizes="640x1096">
<link href="img/ico/apple-touch-icon-57-precomposed.png" sizes="57x57" rel="apple-touch-icon">
<link href="img/ico/apple-touch-icon-114-precomposed.png" sizes="114x114" rel="apple-touch-icon">
<link href="img/ico/apple-touch-icon-72-precomposed.png" sizes="72x72" rel="apple-touch-icon">
<link href="img/ico/apple-touch-icon-144-precomposed.png" sizes="144x144" rel="apple-touch-icon">

For more details please visit: Add to Homescreen