Provider Application User Interface Guidelines. Page 1
|
|
- Darrell Watts
- 6 years ago
- Views:
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 Table of Contents ENGINEERING DATA HUB... 1 DESKTOP VIEW... 3 HEADER... 4 Logo... 5 Main Title... 6 User Menu... 7 Global
More informationWeb 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 informationUX 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 informationMUSE 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 informationCONSUMER 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 informationWEBSITE 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 informationBrand 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 informationOskari 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 informationWebsite 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 informationAdditional 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 informationFont: 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 informationSMS 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 informationGeneral 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 informationNielsen 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 informationThe 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 informationKSB 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 informationCheckbox 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 informationCAFEMOM 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 informationDESIGNING 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 informationWEBSITE 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 informationJune 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 informationGeneral 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 informationMoore 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 informationContent 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 informationGuidelines 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 informationAURUM 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 informationDesktop 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 informationBrand 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 informationBenefits 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 informationDemo 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 informationGetting 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 information2018 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 informationGIMP 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 informationTABLE 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 informationDigital 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 informationGIMP 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 informationSoftChalk-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 informationUser 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 informationUsing 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 informationDesktop 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 informationADDITIONAL 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 informationAPI 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 informationMcMaster 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 informationBuilding 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 informationSession 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 informationIssue 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 informationThe 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 informationAdding 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 informationWhile 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 informationCreating 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 informationHow 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 informationMicrosoft 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 informationUNSW 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 informationGIMP 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 informationGIMP 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 informationBrand 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 informationFocus 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 informationBrand 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 informationThird 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 informationHTML5, 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 informationLab 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 informationHTML5. 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 informationMARMOL 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 informationBRAND 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 informationGoSquared 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 informationLayout 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 informationBlue 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 informationBRAND & 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 informationTable 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 informationUSING 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 informationBrand 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 informationShortcodes. 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 informationTable 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 informationRadioplayer. 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 informationOracle 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 informationTaking 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 informationP3e 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 informationLOGO 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 informationREIF. 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 informationInstitutional 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 informationPhoenix 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 informationWelcome 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 informationStyle 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 informationCampaign 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 informationIntroduction 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 informationIntroduction 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 informationCLASS 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 informationLesson 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 informationWord 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 informationIntro 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 informationUsing 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 informationPUBLISHER 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 informationSharePoint 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 informationPROFILE 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 informationIntroduction 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 informationPalisades 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 informationMeijer.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 informationQuick 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 informationMark 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 informationSchoolDesk 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