branded environment

Download Branded Environment

Post on 16-Oct-2015

23 views

Category:

Documents

0 download

Embed Size (px)

DESCRIPTION

Updates to site

TRANSCRIPT

  • CONFIDENTIAL

    IBMAlmaden Research Center Environment Branding and 2013 Investor Day Demo Guidance03/12/2013 PRESENTED BY

    VSA Partners

  • 1

    Material Brushed aluminum with die-cut 8-bar and grey vinyl lettering

    Dimensions84" x 40"

    ALMADEN BRANDING

    Reception Desk IBM Signage

    Before After

  • 2

    Material Plexi Panels Crystal ice direct print and white vinyl for backing

    DimensionsMap Panel: 55.8" x 59"Individual Panels: 22.4" x 59"Entire Execution: 167.8" x 59"

    Quantity6 panels

    ALMADEN BRANDING

    Lobby Wall Research Map and Stories

    Before After

  • 3

    ALMADEN BRANDING

    Lobby Wall Research Map and Stories

  • 4

    Material Crystal Ice with vinyl application

    Dimensions96" x 48"

    ALMADEN BRANDING

    Lobby Wall Quote Panel

    Before After

  • 5

    ALMADEN BRANDING

    Lobby Wall Quote Panel

  • 6

    Material Plexi P95 with digital printing and white vinyl backing

    DimensionsIntro Panel: 18" x 36" Icon Panels: 60" x 36"

    Quantity26 panels

    ALMADEN BRANDING

    Library Hallway Icons of Progress Panels

    Before After

  • 7

    ALMADEN BRANDING

    Library Hallway Icons of Progress Panels

  • 8

    Material White vinyl lettering

    Dimensions21" x 10.5"

    ALMADEN BRANDING

    Accelerated Discovery Lab Directional Signage

    Before After

  • 9

    IBM / ALMADEN RESEARCH CENTER GUIDANCE FOR DEMOS / VSA PARTNERS / CONFIDENTIAL 2

    Double header bannerNavigation in bottom banner

    W_W_

    W_ W_W_

    W_

    W_

    W_

    W_

    Widget and tab builds w3 resource:

    http://uxd.torolab.ibm.com/uxd/uxd_ oneui.jsp?site=ibmoneui&top=x1&left= y122&vsub=*&hsub=*&options= M&openpanes=001110110000

    Page gridREFERENCE ACCOMPANYING PSD FILE

    Example grid size 1280x800

    live area: 1132px margins: 70px gutter: 20px

    Left hand navigation/widget Whenever possible try to keep left

    hand nav in a standard and consistent positiona 3 or 4 column width fixed to the left side of the browser chrome.

    w3 resource: http://uxd.torolab.ibm.com/uxd/uxd_ oneui.jsp?site=ibmoneui&top=x1&left= y220&vsub=*&hsub=*&options= M&openpanes=111110100000

    Color palette and datavis categorizationPlease refer to the One UI guidelines for approved color usage. w3 resource:

    http://uxd.torolab.ibm.com/uxd/uxd_ oneui.jsp?site=ibmoneui&top=x1&left= y1110&vsub=*&hsub=*&options= M&openpanes=001111111111

    Basic controlsREFERENCE ACCOMPANYING PSD FILE

    Button design w3 resource:

    http://uxd.torolab.ibm.com/uxd/uxd_ oneui.jsp?site=ibmoneui&top=x1&left= y310&vsub=*&hsub=*&options= M&openpanes=111111100000

    Show/hide design w3 resource:

    http://pokgsa.ibm.com/%7Euxguy/ public/Standards/Site/v17_Cov_Draft_ WS/Page%20elements/Show_hide/ show_hide.htm#

    Nested tabs w3 resource:

    http://uxd.torolab.ibm.com/uxd/uxd_ oneui.jsp?site=ibmoneui&top=x1&left= y122&vsub=*&hsub=*&options=M& openpanes=001110110000

    HeaderREFERENCE ACCOMPANYING PSD FILE

    Banner Fonts Product / app / demo title:

    Helvetica / Arial Bold13px, #fff Contextual description:

    Helvetica / Arial Light13px, #fff

    Navigation Primary nav / secondary nav:

    Helvetica / Arial bold12px, off: #fff, on: #000

    Banner background color Top banner & footer background:

    top: #333, bottom: #111 Bottom banner (where applicable):

    top: #1288C3, #0A6299 w3 resource:

    http://uxd.torolab.ibm.com/uxd/uxd_ oneui.jsp?site=ibmoneui&top=x1& left=y210

    Page bodyWidget type styles Widget title bar:

    Helvetica / Arial Regular14px, #000 Title bar background:

    top: #fff, bottom: #EEE Widget content headers:

    Helvetica / Arial Bold12px, #000 Widget content body:

    Helvetica / Arial Regular12px, #0003 COL4 COL

    IBM / ALMADEN RESEARCH CENTER GUIDANCE FOR DEMOS / VSA PARTNERS / CONFIDENTIAL 3

    Single header bannerNavigation in top banner

    Widget and tab builds w3 resource:

    http://uxd.torolab.ibm.com/uxd/uxd_ oneui.jsp?site=ibmoneui&top=x1&left= y122&vsub=*&hsub=*&options= M&openpanes=001110110000

    Page gridREFERENCE ACCOMPANYING PSD FILE

    Example grid size 1280x800

    live area: 1132px margins: 70px gutter: 20px

    Left hand navigation/widget Whenever possible try to keep left

    hand nav in a standard and consistent positiona 3 or 4 column width fixed to the left side of the browser chrome.

    w3 resource: http://uxd.torolab.ibm.com/uxd/uxd_ oneui.jsp?site=ibmoneui&top=x1&left= y220&vsub=*&hsub=*&options= M&openpanes=111110100000

    Color palette and datavis categorizationPlease refer to the One UI guidelines for approved color usage. w3 resource:

    http://uxd.torolab.ibm.com/uxd/uxd_ oneui.jsp?site=ibmoneui&top=x1&left= y1110&vsub=*&hsub=*&options= M&openpanes=001111111111

    Basic controlsREFERENCE ACCOMPANYING PSD FILE

    Button design w3 resource:

    http://uxd.torolab.ibm.com/uxd/uxd_ oneui.jsp?site=ibmoneui&top=x1&left= y310&vsub=*&hsub=*&options= M&openpanes=111111100000

    Show/hide design w3 resource:

    http://pokgsa.ibm.com/%7Euxguy/ public/Standards/Site/v17_Cov_Draft_ WS/Page%20elements/Show_hide/ show_hide.htm#

    HeaderREFERENCE ACCOMPANYING PSD FILE

    Banner Fonts Product / app / demo title:

    Helvetica / Arial Bold13px, #fff Contextual description:

    Helvetica / Arial Light13px, #fff

    Navigation Primary nav:

    Helvetica / Arial bold12px, off: #ddd, on: #000

    Banner background BTN color BTN on state background:

    top: #565656, bottom: #161616 Top banner and footer background:

    top: #333, #111 w3 resource:

    http://uxd.torolab.ibm.com/uxd/uxd_ oneui.jsp?site=ibmoneui&top=x1& left=y210

    Page bodyWidget type styles Widget title bar:

    Helvetica / Arial Regular14px, #000 Title bar background:

    top: #fff, bottom: #EEE Widget content headers:

    Helvetica / Arial Bold12px, #000 Widget content body:

    Helvetica / Arial Regular12px, #0003 COL4 COL

    W_

    W_

    W_

    W_ W_ W_ W_W_W_

    W_

    IBM / ALMADEN RESEARCH CENTER GUIDANCE FOR DEMOS / VSA PARTNERS / CONFIDENTIAL 4

    Single header bannerNo banner navigation

    W_

    Widget and tab builds w3 resource:

    http://uxd.torolab.ibm.com/uxd/uxd_ oneui.jsp?site=ibmoneui&top=x1&left= y122&vsub=*&hsub=*&options= M&openpanes=001110110000

    Page gridREFERENCE ACCOMPANYING PSD FILE

    Example grid size 1280x800

    live area: 1132px margins: 70px gutter: 20px

    Left hand navigation/widget Whenever possible try to keep left

    hand nav in a standard and consistent positiona 3 or 4 column width fixed to the left side of the browser chrome.

    w3 resource: http://uxd.torolab.ibm.com/uxd/uxd_ oneui.jsp?site=ibmoneui&top=x1&left= y220&vsub=*&hsub=*&options= M&openpanes=111110100000

    Color palette and datavis categorizationPlease refer to the One UI guidelines for approved color usage. w3 resource:

    http://uxd.torolab.ibm.com/uxd/uxd_ oneui.jsp?site=ibmoneui&top=x1&left= y1110&vsub=*&hsub=*&options= M&openpanes=001111111111

    Basic controlsREFERENCE ACCOMPANYING PSD FILE

    Button design w3 resource:

    http://uxd.torolab.ibm.com/uxd/uxd_ oneui.jsp?site=ibmoneui&top=x1&left= y310&vsub=*&hsub=*&options= M&openpanes=111111100000

    Show/hide design w3 resource:

    http://pokgsa.ibm.com/%7Euxguy/ public/Standards/Site/v17_Cov_Draft_ WS/Page%20elements/Show_hide/ show_hide.htm#

    Nested tabs w3 resource:

    http://uxd.torolab.ibm.com/uxd/uxd_ oneui.jsp?site=ibmoneui&top=x1&left= y122&vsub=*&hsub=*&options=M& openpanes=001110110000

    HeaderREFERENCE ACCOMPANYING PSD FILE

    Banner Fonts Product / app / demo title:

    Helvetica / Arial Bold13px, #fff Contextual description:

    Helvetica / Arial Light13px, #fff Primary nav / Secondary nav:

    Helvetica / Arial Bold12px, of: #fff, on: #000

    Navigation Primary nav / secondary nav:

    Helvetica / Arial bold12px, off: #fff, on: #000

    Banner background color Top banner & footer background:

    top: #333, bottom: #111 w3 resource:

    http://uxd.torolab.ibm.com/uxd/uxd_ oneui.jsp?site=ibmoneui&top=x1& left=y210

    Page bodyWidget type styles Widget title bar:

    Helvetica / Arial Regular14px, #000 Title bar background:

    top: #fff, bottom: #EEE Widget content headers:

    Helvetica / Arial Bold12px, #000 Widget content body:

    Helvetica / Arial Regular12px, #000 3 COL4 COL

    W_

    W_

    W_W_

    W_

    ALMADEN BRANDING

    Accelerated Discovery Lab Demos

    Demo guidelines

  • 10

    Creative computational cooking

    Right data, Right Insight, Right Now

    Medical Sieve Image Analytics

    Software Defined Environment Console

    Medical Sieve Image Analytics

    Software Defined Environment Console

    ALMADEN BRANDING

    Accelerated Discovery Lab Demos

  • 11

    Material Cut and printed vinyl

    Dimensions DoorB3-249: 10.65" x 6.1"D1-235: 10.55" x 2.5"D1-253: 9.75" x 2.85"

    Dimensions WallB3-249: 14" x 26.5"D1-235: 14" x 24"D1-253: 14" x 25"

    ALMADEN BRANDING

    Lab Tours Directional Signage

    Before After

  • 12

    ALMADEN BRANDING

    Lab Tours Directional Signage

  • 13

    ALMADEN BRAND