Provider Application User Interface Guidelines. Page 1

Size: px
Start display at page:

Download "Provider Application User Interface Guidelines. Page 1"

Transcription

1 Provider Application User Interface Guidelines Page 1

2 Typography The Provider application includes one typeface: Lato ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz $%^&*()-?/Æ Lato Bold ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz $%^&*()-?/Æ Page 2 / Provider Application: User Interface Guidelines

3 Typography (Cont d) The Provider application includes the following type styles: Screen Headlines Labels Pie Chart Numbers Font-Family: Lato Bold 20px Letter-spacing: 0.25px Color: #31363D Text Align: Center Font-Family: Lato Letter-spacing: 0.25px Color: #545D66 Font-Family: Letter-spacing: Color: Lato 24px 0.25px #FFF SECTION HEADLINES Font-Family: Lato Bold Letter-spacing: 1px Color: #31363D Text Align: Center Text Transform: Uppercase Line & Bar Chart Numbers Font-Family: Lato 12px Letter-spacing: 0.25px Color: #545D66 Screen Summary Form Field Entry Font-Family: Lato 18px Letter-spacing: 0.25px Color: #545D66 Form Instructions Main Navigation Font-Family: Letter-spacing: Color: Text Align: Lato Bold 0.25px Varies depending on state Left Font-Family: Lato 16px Line 24px Letter-spacing: 0.25px Color: #545D66 Text Align: Center Font-Family: Lato Line 21px Letter-spacing: 0.25px Color: #545D66 Text Align: Left Page 3 / Provider Application: User Interface Guidelines

4 Color The Provider application includes the following colors: Type & UI Elements Color Palette #3136DD #545D66 #FFFFFF #86C300 #EBEBEB #91B4D2 #D7E4EF Text 1 Text 2 Text 3 Line w/white bg Line w/blue bg 2nd line Top Line Bottom line Chart Color Palette # #86C300 #C0C0C0 #20EBD1 #EB9D62 #CEA2E4 #FFCC00 #FA345E #0085AD # # #16A391 #E87722 #CC66FF #CCA300 #FB708E #99D6EA # # #0B5B51 #6E3408 #500B73 #FFD632 #FDADBE Page 4 / Provider Application: User Interface Guidelines

5 Button Color Palette #FFFFFF #86C300 # #74AA00 #347AB7 #2E6DA4 # Text Link Border Hover BG Link Border Hover BG Container Color Palette? #FFFFFF Text #CCCCCC Drop Shadow Table Color Palette # #1C4B7A #C9DAE9 #FFFFFF #E9E9E9 Header BG 2nd Header BG Icon Hover Text Color Table Striped Dropdown Color Palette #FFFFFF #545D66 #4F96FF #69A5FF #CCCCCC Hover Text Text 2 Selected Hover Not Available Page 5 / Provider Application: User Interface Guidelines

6 Tab Color Palette #DDDDDD #545D66 #FFFFFF Default Text 2 Selected BG Temperature Color Palette #C50012 #ED510A #ED6E0A #FA942D #F0A834 #E7BB05 #86C300 #F6F7FB Button Notification Badge #FFFFFF #86C300 #E87772 #3FC3C5 Text Top Nav Top Nav For Table Page 6 / Provider Application: User Interface Guidelines

7 Top Navigation Container Background Color: # px User Dropdown: font: font-size: font-color: Text-align: Hover-text-color: Hover-bg-color: Lato #347AB7 left #FFFFFF #69A5FF Font Text-transform: Letter-spacing Top_nav Icon Color: User Icon Arrow Button Bootstrap: Capitalize 0.25px 25px 25px #C9DAE9 36px 36px Top_nav_divider Border-right: #00162E Border-left: #003A7C glyphicon-chevron-down Green and Orange Notification Badge G_Background-color: #86C300 O_Background-color: #E87722 Font: LatoBold Font-size: 12px font-color: #FFFFFF Text-shadow: 0 1px 1px Spread:0 Text-align: Center Icon Dropdown Header: box-title-background: box-title-height: font-color: font: font-size: Text-transform: Panel-primary 50px #FFFFFF LatoBold Capitalize List-item-header: dot-circle: #86C300 font: LatoBold size: font-color: #347AB7 hover-color: # List-item-content: font: Lato size: font-color: #545D66 Divider: color: #EBEBEB thickness: 1px Dropdown Footer: height: 50px background-color: #EBEBEB font-color: #347AB7 hover-color: # text-align: Center Dropdown-container: Shadows: 0 2px 4px spread: 0 (no border outline) Page 7 / Provider Application: User Interface Guidelines

8 Side Navigation Sidebar 55px The Provider Application allows for non-linear, dynamic navigation through the Main Navigation located in the sidebar. The sidebar is displayed by default when the app is viewed on display devices with a horizontal resolution 1280px or higher. The sidebar can be collapsed by clicking the X icon. When viewed on display devices with a horizontal resolution of 1279px or smaller, the sidebar is collapsed by default and can be expanded when the user clicks or taps the menu icon. When collapsed by default, expanding the sidebar pushes the main content area off canvas (See Page 75-76). Nav-divider border-bottom: border-top: Collapse Button (< and > Icon): <.glyphicon-chevron-left >.glyphicon-chevron-right Icons: #00162E; #003A7C 20px 20px Container Background Color: # Screen Titles Icon Display Color: #CCD6E1 Icon Hover Color: #86C300 Title Display Color: #FFFFFF Title Hover Color: #86C300 Font: text-transform: text-align letter-spacing capitalize left.25px Secondary Navigation: Link Display Color: Link Hover Color: #FFFFFF #CCD6E1 Company Logo: 50px 100% Between Side Logo : Color: #99D6EA Thickness: 1px Dash: 2gap 4 Page 8 / Provider Application: User Interface Guidelines Halyard Logo: 100px

9 Button Font: Lato Bold Font-size: Depends on Content Default Button Primary Button/Default (Background Green/Blue Green/Blue) Secondary Button/Default (Background #FFFFFF Green/Blue) Cancel Button (Light Background Text # Dark Background Text #FFFFFF) Special Button (Background #347AB7 Text #FFFFFF) Link Button (ex. Resent, Show more, Cancel) Cancel Secondary Primary Cancel Secondary Primary Cancel Secondary Primary Cancel Secondary Primary NOTE: Button size should not be bigger than content text Button order starts from right to left 10px between Primary and secondary button Padding-right 10px on Cancel Start from default button (btn-md) Special button uses blue color Page 9 / Provider Application: User Interface Guidelines

10 Table Header Font: Text-transform: Table Header Green Dot LatoBold Capitalize 34px 10px by 10px Patient Name Invited Date Surgeon Surgery Date Anesthesiologist Enrollment Status On-Q* User Action Smith, Jeremy 29 Sept 2017 Pence, Chris 29 Oct 2017 Megan, Smith Closed-OptOut Yes Smith, Jane 02 Sept 2017 Pence, Chris 29 Oct 2017 Megan, Smith Closed-Cancelled Yes Harold, Joe 27 Jan 2017 Pence, Chris 28 Feb 2017 Megan, Smith Closed-Cancelled Yes Content Font: Text-transform: Action: Table-striped Table Color Palette: Header BG # Lato Capitalize glyphicon glyphicon-pencil F9F9F9 Icon/Text Color #FFFFFF 03 Aug nd Header BG #1C4B7A Table Body Header Text Color #31363D Body Text #545D66 Table Striped Color #F9F9F9 Icon/Text Hover Color #C9DAE9 Link #347AB7 Hover Color # Badges #3FC3C5 Green Dot #86C300 Page 10 / Provider Application: User Interface Guidelines

11 Popup Message Container Background Color: Border Radius: #FFFFFF 5px 400px (Depends on content) Chart Format Change Password One chart per page Are you sure you want to change your password? Panel Heading Color: Font: Font Font-Color: Text-transform: 40px Panel Panel-Primary LatoBold #FFFFFF Capitalize Two charts per page Confirma0on Download Message Sent Cancel OK Close Btn Color: #FFFFFF You have unsaved changes. Are you sure you want to leave this page? Thank you for contac<ng us. Your submission has been received. Font Font: Lato Color: #545D66 Text-transform: Capitalize Leave Stay OK Page 11 / Provider Application: User Interface Guidelines

12 Tabs The provider application divides content into sections enclosed whithin visual containers that are styled as follow Pain, Opioid Consumption and Side Effects Satisfaction Filters Tab Font: LatoBold Text-transform: Capitalize Radius: 4px 4px 0 0 Padding-right: 5px Tab Color Palette: Default Color Tab #DDDDDD Text Color #545D66 Selected Tab Color #FFFFFF Filters Tab #C9DAE9 Calendar dropdown Background #9dbad5 Calendar Active Color #4F96FF Page 12 / Provider Application: User Interface Guidelines

13 Slide In Panel Slide in Panel Background Color: Panel Heading Color: Close Btn Color: Font Text-transform: #FFFFFF 520px X:0 Y:2 Blur:4 Spread:0 55px panel panel-primary #FFFFFF Capitalize Form Label Color: #31363D Form Control Color: #545D66 Horizontal Line Border-bottom: Color: Bootstrap Alert-info 1px #EBEBEB 455px Page 13 / Provider Application: User Interface Guidelines

14 Icon Top Nav Color: 23px 23px #C9DAE9 Top 23px by 23px Table (width) Icon 120pxby 120px Side Nav 21px 21px Color: #C9DAE9 Hover Color: #86C300 Side 21px by 21px Asset 48px x 48px Table (Reminder) Color: Hover Color: Color: Hover Color: Assets (MP4 and PDF) #FFFFFF (Dark BG) #C9DAE9 (Dark BG) #347AB7 (White BG) # (White BG) 48px 48px Icon (Clician, Patient, Threshold Selections) 120px 120px Color: #86C300 Hover: #B8E986 Glow: x0 y0 Bur 3 Spread 6 Bootstrap Icon Home, Camera, , Tel, View Details, Edit, Plus, Minus and Arrows Font Awesome Icon Calendar Page 14 / Provider Application: User Interface Guidelines

15 Reminder Style Guide Font Text-transform: Capitalize Orange-dot: 10px by 10px Color Palette: Date #9B9B9B Header #31363D Content #545D66 This Month Color #E87722 Future Months #4F96FF Past Months Color # Background color #FFF2EC Border Color #FFD6C3 Link Color #347AB7 Link Hover # Page 15 / Provider Application: User Interface Guidelines

16 Control Elements The Patient Web Survey includes the following control element styles: Radio Button: 16px 16px Selected Color: #86C300 Text Fields: Border-color: Background-color: Border: Radius: #CCCCCC #FFFFFF 1px 5px 539.5px 34px Checkbox: Radius: Border: Text: Checkbox: Radius: Margin-right: 80px (40px) 33px 3px #CCC #FFFFFF #C0C0C0 16px 16px 3px 10px Invalid Fields: Invalid Border: #E87722 Background Color: #FFF2EC Asterisk Color: #DC3545 Invalid-feedback: 80% Margin-top:.25rem Color Palette: Asterisk (*) Red Header #31363D Content #545D66 Warning Color #E87722 #86C300 Page 16 / Provider Application: User Interface Guidelines

17 Containers The Provider Application divides content into sections enclosed within visual containers that are styled as follows: Background Color: #FFFFFF Rounded Corner Radius: 5px Drop Shadow Offset-X: 0 Drop Shadow Offset-Y: 0 Drop Shadow Blur: 5px Drop Shadow Color: #CCCCCC Page 17 / Provider Application: User Interface Guidelines

18 Provider Application Desktop Screens Page 18

19 Main Navigation (Expanded) Page 19 / Provider Application: Desktop Screens

20 Invite New Patient: Patient Information Page 20 / Provider Application: Desktop Screens

21 Invite New Patient: Error Message Field Page 21 / Provider Application: Desktop Screens

22 Notifications Dropdown Page 22 / Provider Application: Desktop Screens

23 Threshold Notifications (Grouped) Page 23 / Provider Application: Desktop Screens

24 Notification Delivery Page 24 / Provider Application: Desktop Screens

25 Slide in Panel: Create Reminder Page 25 / Provider Application: Desktop Screens

26 Slide in Panel: Edit Reminder Page 26 / Provider Application: Desktop Screens

27 User Management: Survey Management Page 27 / Provider Application: Desktop Screens

28 Thank you!

ENGINEERING DATA HUB VISUAL DESIGN SPECIFICATIONS VERSION 3. Created: 2/10/2017

ENGINEERING DATA HUB VISUAL DESIGN SPECIFICATIONS VERSION 3. Created: 2/10/2017 ENGINEERING DATA HUB VISUAL DESIGN SPECIFICATIONS VERSION 3 Created: 2/10/2017 Table of Contents ENGINEERING DATA HUB... 1 DESKTOP VIEW... 3 HEADER... 4 Logo... 5 Main Title... 6 User Menu... 7 Global

More information

Web Style Guide. Version 2.0

Web Style Guide. Version 2.0 Web Style Guide Version 2.0 Document Overview Reflecting Ryerson s new visual identity, Ryerson's Web Style Guide is a tool to create visual consistency and simplicity across all Ryerson websites. This

More information

UX Style Guide. Color palette MAIN COLORS

UX Style Guide. Color palette MAIN COLORS UX Style Guide 1 Color palette 1.1 MAIN COLORS 1.2 NEUTRAL COLORS 1.3 UTILITY COLORS 2 Icons 2.1 EXCEPTIONS 3 Typography 4 Content and Language 4.1 CAPITALIZATION & PUNCTUATION 4.2 DATA FORMATS 4.3 LANGUAGE

More information

MUSE Web Style Guide DRAFT v3

MUSE Web Style Guide DRAFT v3 MUSE Web Style Guide 2016 DRAFT v3 STYLE GUIDE CONTENTS STYLE GUIDE PURPOSE COLOR PALETTE TYPOGRAPHY MOOD BOARD IMAGERY FOR CONCEPTUALIZING HEADER, FOOTER, NAVIGATION HOMEPAGE and DROP DOWN NAVIGATION

More information

CONSUMER CART STYLE GUIDE V2.1

CONSUMER CART STYLE GUIDE V2.1 CONSUMER CART STYLE GUIDE V2.1 TABLE OF CONTENTS Price Points, Package Description Text, Interactive Elements ABOUT General GUI Typography, Icons, General Specifications... 2 Package Cards Price points,

More information

WEBSITE REDESIGN: STYLESHEET & MEASUREMENTS

WEBSITE REDESIGN: STYLESHEET & MEASUREMENTS WEBSITE REDESIGN: STYLESHEET & MEASUREMENTS WEB COLORS 1.0 PRIMARY COLOR PALETTE HEX #f0b323 HEX #d22730 HEX #004c97 HEX #00a9e0 HEX #059949 HEX #f45712 SECONDARY COLOR PALETTE HEX #f4c24f HEX #d84f57

More information

Brand core & brand promise. Mission. Values. Positioning. Content Briefing. We are defined by

Brand core & brand promise. Mission. Values. Positioning. Content Briefing. We are defined by Style Guide Content Briefing Brand core & brand promise We want to provide high-end services that allow our clients to do business in any country on earth simply, efficiently, and digitally. Mission We

More information

Oskari UX Guide Cybercom Finland Oy

Oskari UX Guide Cybercom Finland Oy Oskari UX Guide 18.11.2015 Cybercom Finland Oy Contents Principles of User Interface Design 3 General Layout 4 Main Navigation Layout 5 Map View Layout 6 Layouts of Different Box Types 7 Form Layout 8

More information

Website Development with HTML5, CSS and Bootstrap

Website Development with HTML5, CSS and Bootstrap Contact Us 978.250.4983 Website Development with HTML5, CSS and Bootstrap Duration: 28 hours Prerequisites: Basic personal computer skills and basic Internet knowledge. Course Description: This hands on

More information

Additional catalogs display. Customize text size and colors.

Additional catalogs display. Customize text size and colors. Collapsible Skin The collapsible skin option displays the catalogs and categories in a collapsible format enabling enhanced navigation on Qnet. Categories can be expanded to view all of the sub categories

More information

Font: 48px/3.0 em #510C76 Trueno Semibold ; Line-height: 34px; Margin: 20px 0 20px 0;

Font: 48px/3.0 em #510C76 Trueno Semibold ; Line-height: 34px; Margin: 20px 0 20px 0; TYPOGRAPHY Trueno webfont is being used. CSS is provided for additional info. Trueno Font Family Headline 1 Headline 2 Headline 3 Headline 4 Headline 5 Headline 6 Paragragh Active Color CSS Font: 48px/3.0

More information

SMS Reminder Settings Setting Up Reminders in Demographics Custom Text Reminders... 38

SMS Reminder Settings Setting Up Reminders in Demographics Custom Text Reminders... 38 Table of Contents Activating Patient Portal... 1 Patient Portal... 3 Premium Patient Portal Admin Function... 3 Set Up... 3 How to Make Changes to the Portal Landing Page... 5 Premium Patient Portal Features...

More information

General Reproduction and Usage Guidelines Bizrate Insights Updated 13 Aug, 2018

General Reproduction and Usage Guidelines Bizrate Insights Updated 13 Aug, 2018 General Reproduction and Usage Guidelines Bizrate Insights Updated 13 Aug, 2018 Table of Contents Introduction Logo Fonts Color Geometry Web -Responsive -Navigation -Buttons -Contact Forms -Footer 3 4

More information

Nielsen Answers User Interface Standards. Version 4.0 4/27/09

Nielsen Answers User Interface Standards. Version 4.0 4/27/09 Nielsen Answers User Interface Standards Version 4.0 4/27/09 Contents How to Use This Guide Contents INTRODUCTION... 1 HOW TO USE THIS GUIDE... 1 CAN T FIND THE STANDARD YOU NEED?... 1 APPLICATION TYPES...

More information

The Deerbrook Web Style Guide

The Deerbrook Web Style Guide The Deerbrook Web Style Guide Table of Contents Introduction Agency Dashboard 2 Customer Data Window 3 Creative Brief Page Structure Agency Dashboard 5 Customer Data Window 7 Typography Color Photography

More information

KSB Online-Styleguide

KSB Online-Styleguide KSB Online-Styleguide Guide Stand Version November August 204 203 Design guidelines for online presence 2 In addition to print media, KSB also has an online presence. This style guide documents the main

More information

Checkbox 5 - Style Guide

Checkbox 5 - Style Guide Checkbox 5 - Style Guide Survey Styles are style templates that can be applied to surveys and reports. This guide will show you how to create a new Survey Style and apply it (and other appearance configurations)

More information

CAFEMOM MOBILE STYLE GUIDE

CAFEMOM MOBILE STYLE GUIDE AUGUST 13, 2012 COLORS d4e4a3 77a208 f5fce0 e7f2c5 ffcc66 a98130 f0e7d8 faf8ef 444444 666666 999999 cccccc 29b6bf c6e9ed ff6c64 d13e3e ffffff fbeeee FONTS ASAP BOLD Arial Bold Arial Regular PATTERN SPACERS

More information

DESIGNING A WEBSITE LAYOUT IN PHOTOSHOP CS4. Step 1

DESIGNING A WEBSITE LAYOUT IN PHOTOSHOP CS4. Step 1 DESIGNING A WEBSITE LAYOUT IN PHOTOSHOP CS4 Step 1 We ll be using the 960s Grid System (download here) to keep everything aligned. Once you have it, open the included Photoshop document called: 960_grid_24_col.psd.

More information

WEBSITE PROJECT 2 PURPOSE: INSTRUCTIONS: REQUIREMENTS:

WEBSITE PROJECT 2 PURPOSE: INSTRUCTIONS: REQUIREMENTS: WEBSITE PROJECT 2 PURPOSE: The purpose of this project is to begin incorporating color, graphics, and other visual elements in your webpages by implementing the HTML5 and CSS3 code discussed in chapters

More information

June InSight Graphical User Interface Design Guidelines

June InSight Graphical User Interface Design Guidelines June 2001 InSight Graphical User Interface Design Guidelines Index 1.0 Introduction 1 1.1 - Dimension Information 1 2.0 General Guidelines 1 2.1 - The Display Grid 1 3.0 - Color 2 3.1 - Primary Colors

More information

General Reproduction and Usage Guidelines Bizrate Insights Updated 23 Oct, 2017

General Reproduction and Usage Guidelines Bizrate Insights Updated 23 Oct, 2017 General Reproduction and Usage Guidelines Bizrate Insights Updated 23 Oct, 2017 Table of Contents Introduction Logo Fonts Color Geometry Web -Responsive -Navigation -Buttons -Contact Forms -Footer 3 4

More information

Moore Stephens digital guidelines

Moore Stephens digital guidelines Moore Stephens International PRECISE. PROVEN. PERFORMANCE. Contents Introduction 1 Typography 2 Colour palette 3 Logo and mast 4 Buttons, icons & tags 5 Images 7 Navigation 8 Rolling banner 10 Widgets

More information

Content Elements. Contents. Row

Content Elements. Contents. Row Content Elements Created by Raitis S, last modified on Feb 09, 2016 This is a list of 40+ available content elements that can be placed on the working canvas or inside of the columns. Think of them as

More information

Guidelines for doing the short exercises

Guidelines for doing the short exercises 1 Short exercises for Murach s HTML5 and CSS Guidelines for doing the short exercises Do the exercise steps in sequence. That way, you will work from the most important tasks to the least important. Feel

More information

AURUM Metro Navigation

AURUM Metro Navigation AURUM Metro Navigation End User Document Version 1.0 Oct 2016 Table of Contents 1. Introduction... 3 2. Initialization... 4 2.1 Create Metro Navigation List... 4 2.1.1 Adding the Metro Navigation Web part...

More information

Desktop Studio: Charts. Version: 7.3

Desktop Studio: Charts. Version: 7.3 Desktop Studio: Charts Version: 7.3 Copyright 2015 Intellicus Technologies This document and its content is copyrighted material of Intellicus Technologies. The content may not be copied or derived from,

More information

Brand Central. User Guide. Polycom, Inc. All rights reserved.

Brand Central. User Guide. Polycom, Inc. All rights reserved. Brand Central User Guide Polycom, Inc. All rights reserved. In This Guide This user guide is designed to walk you through the basic functionality of the new Brand Central. Topics include: Searching for

More information

Benefits Web UX/UI Style Guide

Benefits Web UX/UI Style Guide Introduction This style guideline provides a visual framework to ensure future developments of Benefits Web / Life @ Work Core portals are consistent across all clients. TOC 1. Layout Template Sizes &

More information

Demo User Interface and Graphic Guidelines

Demo User Interface and Graphic Guidelines Demo User Interface and Graphic Guidelines Typography & Colours Titillium Regular Titillium Semibold Titillium Bold The font used in Qt Demos is the company font Titillium. Fonts weights used: regular,

More information

Getting Started with. Office 2008

Getting Started with. Office 2008 Getting Started with Office 2008 Copyright 2010 - Information Technology Services Kennesaw State University This document may be downloaded, printed, or copied, for educational use, without further permission

More information

2018 Brand Guidelines

2018 Brand Guidelines 2018 Brand Guidelines Logo Final Logo Our logo mark is the benchmark of our brand and one of our most valuable assets. Logo Versions Full Version - Linear A. Full Color The preferred way to use the Kinesics

More information

GIMP WEB 2.0 ICONS. GIMP is all about IT (Images and Text) OPEN GIMP

GIMP WEB 2.0 ICONS. GIMP is all about IT (Images and Text) OPEN GIMP GIMP WEB 2.0 ICONS Web 2.0 Banners: Download E-Book WEB 2.0 ICONS: DOWNLOAD E-BOOK OPEN GIMP GIMP is all about IT (Images and Text) Step 1: To begin a new GIMP project, from the Menu Bar, select File New.

More information

TABLE OF CONTENTS. NAVIGATION & USABILITY 8 Navigation 9 Links 10 Buttons 10 Tabs 10 Search Boxes 11 Log Ins

TABLE OF CONTENTS. NAVIGATION & USABILITY 8 Navigation 9 Links 10 Buttons 10 Tabs 10 Search Boxes 11 Log Ins the rockefeller university hospital CENTER FOR CLINICAL AND TRANSLATIONAL SCIENCE Web graphic standards manual INTRODUCTION The Rockefeller University Hospital s visual identity was created in early 2012

More information

Digital Media, UX-UI Design > Website Principles

Digital Media, UX-UI Design > Website Principles Contents At a glance: Page layout header To ensure the correct appearance of our brands in a broad spectrum of applications with a web front end, uniform treatment of design elements is an absolute necessity.

More information

GIMP WEB 2.0 BADGES. GIMP is all about IT (Images and Text) OPEN GIMP

GIMP WEB 2.0 BADGES. GIMP is all about IT (Images and Text) OPEN GIMP GIMP WEB 2.0 BADGES and Badges: Circle with Flap Completed Project WEB 2.0 BADGES: CIRCLE WITH FLAP GIMP is all about IT (Images and Text) OPEN GIMP Step 1: To begin a new GIMP project, from the Menu Bar,

More information

SoftChalk-Style Builder

SoftChalk-Style Builder SoftChalk-Style Builder This feature is used to create a personal style for a lesson. It also can be used to import a style that has been created for your institution or department. This type of style

More information

User Guide. Web Intelligence Rich Client. Business Objects 4.1

User Guide. Web Intelligence Rich Client. Business Objects 4.1 User Guide Web Intelligence Rich Client Business Objects 4.1 2 P a g e Web Intelligence 4.1 User Guide Web Intelligence 4.1 User Guide Contents Getting Started in Web Intelligence 4.1... 5 Log into EDDIE...

More information

Using New Google Sites

Using New Google Sites Using New Google Sites With the New Google Sites, building websites is easy. Just drag content where you need it. Create a onestop destination for all important information, including videos, images, calendars,

More information

Desktop Studio: Charts

Desktop Studio: Charts Desktop Studio: Charts Intellicus Enterprise Reporting and BI Platform Intellicus Technologies info@intellicus.com www.intellicus.com Working with Charts i Copyright 2011 Intellicus Technologies This document

More information

ADDITIONAL GUIDES Customer SAP Enable Now Customization. Customer SAP SE or an SAP affiliate company. All rights reserved.

ADDITIONAL GUIDES Customer SAP Enable Now Customization. Customer SAP SE or an SAP affiliate company. All rights reserved. ADDITIONAL GUIDES Customer 1811 2018-11-01 Customer 2018 SAP SE or an SAP affiliate company. All rights reserved. Table of Contents 1 Introduction... 4 1.1 Workarea Resources... 4 1.2 Customization Editors...

More information

API GUIDELINES DRAFT

API GUIDELINES DRAFT API GUIDELINES DRAFT..05 API GUIDELINES TABLE OF CONTENTS API Introduction 3 Tracking via SMS Tracking - Real time Requirements 4 Messaging & Usage 5 Implementing for Mobile 3 Introduction 6 Overview 4

More information

McMaster Brand Standard for Websites

McMaster Brand Standard for Websites McMaster University s policy calls for all university websites to follow its brand standard. McMaster websites share common elements, presentation and behavior and a consistent design, enabling visitors

More information

Building Page Layouts

Building Page Layouts Building Page Layouts HTML & CSS From Scratch Slides 3.1 Topics Display Box Model Box Aesthetics Float Positioning Element Display working example at: h9ps://;nker.io/3a2bf Source: unknown. Please contact

More information

Session 1 Navigation & Administration

Session 1 Navigation & Administration Session 1 Navigation & Administration Agenda Launching ACPM from AC AC/ACPM Integration Basic Navigation Tips in ACPM Administration Overview ACPM Help Launching ACPM from AC Amazing Charts Practice Management

More information

Issue 1: February MetLife s Pattern Library Spec Sheets

Issue 1: February MetLife s Pattern Library Spec Sheets MetLife s Pattern Library Spec Sheets Contents 1. Buttons Links Text Fields Forms Drop Down 2. Examples Lead Form Login Get a Quote Find a Service Provider Comparison Table Validation & Messaging Radio

More information

The HOME Tab: Cut Copy Vertical Alignments

The HOME Tab: Cut Copy Vertical Alignments The HOME Tab: Cut Copy Vertical Alignments Text Direction Wrap Text Paste Format Painter Borders Cell Color Text Color Horizontal Alignments Merge and Center Highlighting a cell, a column, a row, or the

More information

Adding CSS to your HTML

Adding CSS to your HTML Adding CSS to your HTML Lecture 3 CGS 3066 Fall 2016 September 27, 2016 Making your document pretty CSS is used to add presentation to the HTML document. We have seen 3 ways of adding CSS. In this lecture,

More information

While editing a page, a menu bar will appear at the top with the following options:

While editing a page, a menu bar will appear at the top with the following options: Page Editor ===> Page Editor How Can I Use the Page Editor? The Page Editor will be your primary way of editing your website. Page Editor Basics While editing a page, you will see that hovering your mouse

More information

Creating Accessible Word Documents

Creating Accessible Word Documents Creating Accessible Word Documents 1 of 11 Creating Accessible Word Documents Contents 1. General principles... 1 2. Styles/ Headings... 2 3. Table of Contents... 3 Updating a Table of Contents... 5 4.

More information

How to lay out a web page with CSS

How to lay out a web page with CSS Activity 2.6 guide How to lay out a web page with CSS You can use table design features in Adobe Dreamweaver CS4 to create a simple page layout. However, a more powerful technique is to use Cascading Style

More information

Microsoft Excel 2002 M O D U L E 2

Microsoft Excel 2002 M O D U L E 2 THE COMPLETE Excel 2002 M O D U L E 2 CompleteVISUAL TM Step-by-step Series Computer Training Manual www.computertrainingmanual.com Copyright Notice Copyright 2002 EBook Publishing. All rights reserved.

More information

UNSW Global Website Branding Guidelines. Website Brand Guidelines

UNSW Global Website Branding Guidelines. Website Brand Guidelines Website Brand Guidelines I Contents 1 Introduction... 1 2 Website Structure... 1 2.1 Page structure overview... 1 2.2 Home page structure... 1 2.3 Secondary page structure... 4 3 Page elements... 6 3.1

More information

GIMP WEB 2.0 BADGES. and. Badges: Circle with Striped Border Completed Project

GIMP WEB 2.0 BADGES. and. Badges: Circle with Striped Border Completed Project GIMP WEB 2.0 BADGES and Badges: Circle with Striped Border Completed Project WEB 2.0 BADGES: CIRCLE WITH STRIPED BORDER GIMP is all about IT (Images and Text) The GIMP application is installed with a number

More information

GIMP WEB 2.0 ICONS. GIMP is all about IT (Images and Text) OPEN GIMP

GIMP WEB 2.0 ICONS. GIMP is all about IT (Images and Text) OPEN GIMP GIMP WEB 2.0 ICONS or WEB 2.0 ICONS: MEMO Web 2.0 Icons: Memo GIMP is all about IT (Images and Text) OPEN GIMP Step 1: To begin a new GIMP project, from the Menu Bar, select File New. At the Create a New

More information

Brand Guidelines 2012

Brand Guidelines 2012 Brand Guidelines 2012 Contents Introduction 3 General Guidelines 4 Proportions 5 Variations of the SendGrid logo 6 Protected Area 8 Minimum Size 9 Unacceptable Usage 10 Primary Corporate Colors 12 Secondary

More information

Focus University Training Document

Focus University Training Document Focus University Training Document FOCUS Training: Nurses/Health Training Agenda Basic Navigation of SIS Searching for Students More Search Options Student Record and Sub menus o General Demographics o

More information

Brand Guidelines. version

Brand Guidelines. version Brand Guidelines version 2017.1 Primary Logo The OPSWAT logo is a universal signature spanning all of our communications. Because it is such a recognizable and highly visible asset, it s important that

More information

Third Party Identity Guidelines

Third Party Identity Guidelines Third Party Identity Guidelines Introduction Introduction This document has been developed to provide anyone using The Wolfson Foundation logotype with clear guidelines on how the brand identity can be

More information

HTML5, CSS3, JQUERY SYLLABUS

HTML5, CSS3, JQUERY SYLLABUS HTML5, CSS3, JQUERY SYLLABUS AAvhdvchdvchdvhdh HTML HTML - Introduction HTML - Elements HTML - Tags HTML - Text HTML - Formatting HTML - Pre HTML - Attributes HTML - Font HTML - Text Links HTML - Comments

More information

Lab 1: Introducing HTML5 and CSS3

Lab 1: Introducing HTML5 and CSS3 CS220 Human- Computer Interaction Spring 2015 Lab 1: Introducing HTML5 and CSS3 In this lab we will cover some basic HTML5 and CSS, as well as ways to make your web app look and feel like a native app.

More information

HTML5. HTML5 Introduction. Form Input Types. Semantic Elements. Form Attributes. Form Elements. Month Number Range Search Tel Url Time Week

HTML5. HTML5 Introduction. Form Input Types. Semantic Elements. Form Attributes. Form Elements. Month Number Range Search Tel Url Time Week WEB DESIGNING HTML HTML - Introduction HTML - Elements HTML - Tags HTML - Text HTML - Formatting HTML - Pre HTML - Attributes HTML - Font HTML - Text Links HTML - Comments HTML - Lists HTML - Images HTML

More information

MARMOL BRAND GUIDELINES APRIL Powered by TECKpert.com

MARMOL BRAND GUIDELINES APRIL Powered by TECKpert.com MARMOL BRAND GUIDELINES Powered by TECKpert.com 2 3 4 5 6 7 8 9 10 11 CONTENTS LOGO ICON CLEAR SPACE PROPORTION MINIMUM SIZE DON TS BACKGROUND COLOR COLOR TYPOGRAPHY 2 LOGO This is the primary Marmol logo.

More information

BRAND GUIDELINES January 2017 leanconstruction.org

BRAND GUIDELINES January 2017 leanconstruction.org BRAND GUIDELINES January 2017 leanconstruction.org The Lean Construction Institute (LCI) is a non-profit organization, founded in 1997. The Institute operates as a catalyst to transform the industry through

More information

GoSquared Equally Rounded Corners Equally Rounded Corners -webkit-border-radius -moz-border-radius border-radius Box Shadow Box Shadow -webkit-box-shadow x-offset, y-offset, blur, color Webkit Firefox

More information

Layout with Layers and CSS

Layout with Layers and CSS Layout with Layers and CSS Today we're going to make a Web site layout. Preparatory Step 1. Inside your folder create a new folder and name it layout. 2. Inside the layout folder create a new folder and

More information

Blue Form Builder extension for Magento 2

Blue Form Builder extension for Magento 2 Blue Form Builder extension for Magento 2 User Guide Version 1.0 Table of Contents I) Introduction......5 II) General Configurations....6 1) General Settings.....7 2) ReCaptcha... 8 III) Manage Forms......

More information

BRAND & STYLE GUIDELINES

BRAND & STYLE GUIDELINES BRAND & STYLE GUIDELINES OCTOBER 2018 VERSION 1.0 CREATING BRAND IDENTITY This guide is developed to help establish our new brand identity and ensure we communicate a consistent message to our audience.

More information

Table Basics. The structure of an table

Table Basics. The structure of an table TABLE -FRAMESET Table Basics A table is a grid of rows and columns that intersect to form cells. Two different types of cells exist: Table cell that contains data, is created with the A cell that

More information

USING JOOMLA LEVEL 3 (BACK END) OVERVIEW AUDIENCE LEVEL 3 USERS

USING JOOMLA LEVEL 3 (BACK END) OVERVIEW AUDIENCE LEVEL 3 USERS USING JOOMLA LEVEL 3 (BACK END) OVERVIEW This document is designed to provide guidance and training for incorporating your department s content into to the Joomla Content Management System (CMS). Each

More information

Brand Guidelines for web

Brand Guidelines for web Brand Guidelines for web website and applications 1 Logo concept The primary logotype Overview The primary CasinoCoin logotype is composed of the chip symbol with spades symbol inside and the name of brand

More information

Shortcodes. Design a new short codes flow that eases the support team from hand-holding customers throughout the 8-week process.

Shortcodes. Design a new short codes flow that eases the support team from hand-holding customers throughout the 8-week process. Shortcodes Design a new short codes flow that eases the support team from hand-holding customers throughout the 8-week process. This design led to Twilio selling over 80% of the short codes in the United

More information

Table of Contents MicroEdge, LLC. All rights reserved.

Table of Contents MicroEdge, LLC. All rights reserved. Table of Contents 2 DonorCentral Site Setup and User Guide 1 Copyright Information 7 Contacting Support 8 Welcome to DonorCentral 9 Logging into DonorCentral 9 Forget Your Password? 12 Register for DonorCentral

More information

Radioplayer. Style Guide Version 1.1. Radioplayer November 2010

Radioplayer. Style Guide Version 1.1. Radioplayer November 2010 Radioplayer Style Guide Version. Contents 00. Introduction Page 3 0. Core design Page 4 0. Use of logos Page 5 03. Background Page 8 04. Errors Page 9 05. Overlays Page 06. Controls Page 07. Fuctionality

More information

Oracle Banking Digital Experience. Reference User Interface Style Guide Release

Oracle Banking Digital Experience. Reference User Interface Style Guide Release Oracle Banking Digital Experience Reference User Interface Style Guide Release 17.2.0.0.0 Part No. E88573-01 July 2017 Reference User Interface Style Guide July 2017 Oracle Financial Services Software

More information

Taking Fireworks Template and Applying it to Dreamweaver

Taking Fireworks Template and Applying it to Dreamweaver Taking Fireworks Template and Applying it to Dreamweaver Part 1: Define a New Site in Dreamweaver The first step to creating a site in Dreamweaver CS4 is to Define a New Site. The object is to recreate

More information

P3e REPORT WRITER CREATING A BLANK REPORT

P3e REPORT WRITER CREATING A BLANK REPORT P3e REPORT WRITER CREATING A BLANK REPORT 1. On the Reports window, select a report, then click Copy. 2. Click Paste. 3. Click Modify. 4. Click the New Report icon. The report will look like the following

More information

LOGO AND COLOR STANDARDS

LOGO AND COLOR STANDARDS LOGO AND COLOR STANDARDS DWFI LOGO OPTIONS Spot or 4 - C Process Logo (Main Logo) HORIZONTAL VERTICAL DO NOT Restack type Resposition droplet Change typeface Add effect to logo Distort logo Add Drop Shadow

More information

REIF. Presentation Guidelines

REIF. Presentation Guidelines REIF Presentation Guidelines INTRODUCTION These guidelines were established to maximize consistency and legibility in all future REIF presentations. Important aspects to consider when building your presentation

More information

Institutional Reporting and Analysis (IRA) For help, blitz "Financial Reports", or

Institutional Reporting and Analysis (IRA) For help, blitz Financial Reports, or Institutional Reporting and Analysis (IRA) 1 Training Agenda Introduction to the IRA Reporting Tool Logging onto the system (4-5) Navigating the Dashboard (6-10) Running Reports (11-12) Working with Reports

More information

Phoenix Style Guide. QuadraMed. Team Members. Michael Breland Faron Niles Meredith Haddock. Donna Eichenberger Allen Saffy Heath Hartung

Phoenix Style Guide. QuadraMed. Team Members. Michael Breland Faron Niles Meredith Haddock. Donna Eichenberger Allen Saffy Heath Hartung QuadraMed Phoenix Style Guide Team Members Michael Breland Faron Niles Meredith Haddock Donna Eichenberger Allen Saffy Heath Hartung 7/20/2015 Property of QuadraMed 1 Font type, color and sizes TYPOGRAPHY

More information

Welcome to the advanced customization tutorial for the student template.

Welcome to the advanced customization tutorial for the student template. Table of Contents Changing Backgrounds... 2 Modifying Slide Content... 8 Customizing Font... 9 Chat Function... 12 Editing a Page Tab... 13 Digication Menu... 14 Copy or Delete an eportfolio... 15 1 Welcome

More information

Style guide for all online applications of Hannover Re. 0.0 Introduction

Style guide for all online applications of Hannover Re. 0.0 Introduction Style guide for all online applications of Hannover Re Last update 08.06.2018 0.0 Introduction Hannover Re uses a reduced and unpretentious design which gives the user rapid guidance and facilitates recognition.

More information

Campaign page templates

Campaign page templates Campaign Page Campaign page templates The campaign page templates have been built for marketing campaigns which require a landing experience that cannot be supported by the Product Detail Page templates

More information

Introduction to Microsoft Word 2010

Introduction to Microsoft Word 2010 Introduction to Microsoft Word 2010 Microsoft Word is a word processing program you can use to write letters, resumes, reports, and more. Anything you can create with a typewriter, you can create with

More information

Introduction to Microsoft Word 2010

Introduction to Microsoft Word 2010 Introduction to Microsoft Word 2010 Microsoft Word is a word processing program you can use to write letters, resumes, reports, and more. Anything you can create with a typewriter, you can create with

More information

CLASS 9 Chapter 7 Word Processing Tool: OpenOffice Writer

CLASS 9 Chapter 7 Word Processing Tool: OpenOffice Writer CLASS 9 Chapter 7 Word Processing Tool: OpenOffice Writer I. Word Search Find and circle ten terms related to this chapter. II. Who am I? Q K A R W E T Y U M I D S Z S S U E O V B N A A K T Y A U N P N

More information

Lesson 1: Creating, Formatting, and Editing a Word Document with a Picture Microsoft Word 2016 IN THIS CHAPTER, YOU WILL LEARN HOW TO

Lesson 1: Creating, Formatting, and Editing a Word Document with a Picture Microsoft Word 2016 IN THIS CHAPTER, YOU WILL LEARN HOW TO Lesson 1: Creating, Formatting, and Editing a Word Document with a Picture Microsoft Word 2016 IN THIS CHAPTER, YOU WILL LEARN HOW TO Enter Text in a new document Enhance the Page with a border and Format

More information

Word Tips & Tricks. Status Bar. Add item to Status Bar To add an itme to the status bar, click on the item and a checkmark will display.

Word Tips & Tricks. Status Bar. Add item to Status Bar To add an itme to the status bar, click on the item and a checkmark will display. Status Bar The status bar is located on the bottom of the Microsoft Word window. The status bar displays information about the document such as the current page number, the word count in the document,

More information

Intro to Aeries.Net July 12, Terms Used in Aeries.Net. 2. Logon to Aeries.Net

Intro to Aeries.Net July 12, Terms Used in Aeries.Net. 2. Logon to Aeries.Net Intro to Aeries.Net July 12, 2013 1. Terms Used in Aeries.Net 2. Logon to Aeries.Net 3. Aeries.Net Home Page Current Version of Aeries.Net Utilizing the Navigation Tree Accessing Programs From the Navigation

More information

Using CSS for page layout

Using CSS for page layout Using CSS for page layout Advantages: Greater typographic control Style is separate from structure Potentially smaller documents Easier site maintenance Increased page layout control Increased accessibility

More information

PUBLISHER 2016 LINDA MUCHOW ALEXANDRIA TECHNICAL AND COMMUNITY COLLEGE 1601 JEFFERSON STREET, ALEXANDRIA, MN 56308

PUBLISHER 2016 LINDA MUCHOW ALEXANDRIA TECHNICAL AND COMMUNITY COLLEGE 1601 JEFFERSON STREET, ALEXANDRIA, MN 56308 PUBLISHER 2016 LINDA MUCHOW 320-762-4539 LINDAC@ALEXTECH.EDU ALEXANDRIA TECHNICAL AND COMMUNITY COLLEGE 1601 JEFFERSON STREET, ALEXANDRIA, MN 56308 Table of Contents Publisher Environment... 3 Rulers...

More information

SharePoint List Booster Features

SharePoint List Booster Features SharePoint List Booster Features Contents Overview... 5 Supported Environment... 5 User Interface... 5 Disabling List Booster, Hiding List Booster Menu and Disabling Cross Page Queries for specific List

More information

PROFILE DESIGN TUTORIAL KIT

PROFILE DESIGN TUTORIAL KIT PROFILE DESIGN TUTORIAL KIT NEW PROFILE With the help of feedback from our users and designers worldwide, we ve given our profiles a new look and feel. The new profile is designed to enhance yet simplify

More information

Introduction to Excel

Introduction to Excel Office Button, Tabs and Ribbons Office Button The File menu selection located in the upper left corner in previous versions of Excel has been replaced with the Office Button in Excel 2007. Clicking on

More information

Palisades School District PowerSchool Parent Portal Guide

Palisades School District PowerSchool Parent Portal Guide Palisades School District PowerSchool Parent Portal Guide Get Started To get started, you must create a parent account in the PowerSchool Parent Portal. Create a Parent Account Use this procedure to create

More information

Meijer.com Style Guide

Meijer.com Style Guide TABLE OF CONTENTS Meijer.com Style Guide John Green Information Architect November 14, 2011 1. LAYOUT... 2 1.1 PAGE LAYOUT... 2 1.1.1 Header... 2 1.1.2 Body / Content Area... 3 1.1.2.1 Top-Level Category

More information

Quick Guide to Using ileads Mobile App for iphone ipad and ipod touch

Quick Guide to Using ileads Mobile App for iphone ipad and ipod touch Please go to the App store to download the ileads app. Search under Bartizan Connects to locate the ileads app. Once you have downloaded the app, you can proceed with setting up the event. Please note

More information

Mark Scheme. Edexcel Level 2 Certificate in Digital Applications. Unit 5: Coding for the Web

Mark Scheme. Edexcel Level 2 Certificate in Digital Applications. Unit 5: Coding for the Web Mark Scheme Edexcel Certificate in Digital Applications Unit 5: Coding for the Web General marking guidance All candidates must receive the same treatment. Examiners must mark the first candidate in exactly

More information

SchoolDesk University

SchoolDesk University SchoolDesk University Forms, Surveys, and Polls Module 101 Guided Walk-through for the basic fields, terminology, and location of tools. What is the NEW SD7 Forms Module? The NEW SchoolDesk Forms Module,

More information