Issue 1: February MetLife s Pattern Library Spec Sheets
|
|
|
- Kathleen Norton
- 5 years ago
- Views:
Transcription
1 MetLife s Pattern Library Spec Sheets
2 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 Buttons Check Marks
3 1. Buttons Links Text Fields Forms Drop Down Validation & Messaging Radio Buttons Check Marks
4 Buttons
5 Issue 1: August 2017 Buttons Overview Light Background Primary Button Secondary Button On Load Rollover/Press On Focus Dark Background Primary Button Secondary Button On Load Rollover/Press On Focus
6 Primary Button Light Background On Load Background: #007ABC Text Color: #ffffff Font: Noto Sans 14px Text Style: Bold Letter Spacing:.5px Rollover/Press Background:#0061a0 Text Color: #ffffff Font: Noto Sans 14px Text Style: Bold, Underline *(representation of thickness not accurate, will be thinner in development) Letter Spacing:.5px On Focus Background: #007ABC Text Color: #ffffff Font: Noto Sans 14px Text Style: Bold Letter Spacing:.5px Shadow: #333333, Blur 4px, Spread 1px 20px Notes * Text is in All Caps Character limit (not to exceed 80% button size) 12px 12px 40px
7 Primary Button Dark Background On Load Background:#a4ce4e Text Color: # Font: Noto Sans14px Text Style: Bold Letter Spacing:.5px Rollover/Press Background:#B7DD58 Text Color: # Font: Noto Sans14px Text Style: Bold, Underline*(representation of thickness not accurate, will be thinner in development) Letter Spacing:.5px On Focus Background:#a4ce4e Text Color: # Font: Noto Sans 14px Text Style: Bold Letter Spacing:.5px Shadow: #333333, Blur 4px, Spread 1px Notes 20px * Text is in All Caps 40px
8 Secondary Button Light Background On Load Border Color: 2px, #007ABC Text Color: #007ABC Font: Noto Sans 14px Text Style: Bold Letter Spacing:.5px Rollover/Press Background: #007ABC Text Color: #ffffff Font: Noto Sans 14px Text Style: Bold, Underline*(representation of thickness not accurate, will be thinner in development) Letter Spacing:.5px On Focus Border Color: 2px, #007ABC Text Color: #007ABC Font: Noto Sans 14px Text Style: Bold Letter Spacing:.5px Shadow: #333333, Blur 4px, Spread 1px 20px Notes * Text is in All Caps 40px
9 Secondary Button Dark Background On Load Border Color: 2px, #FFFFFF Text Color: #FFFFFF Font: Noto Sans 14px Text Style: Bold Letter Spacing:.5px Rollover/Press Background:#FFFFFF Text Color: #007ABC Font: Noto Sans 14px Text Style: Bold, Underline*(representation of thickness not accurate, will be thinner in development) Letter Spacing:.5px On Focus Border Color: 2px, #FFFFFF Text Color: #FFFFFF Font: Noto Sans14px Text Style: Bold Letter Spacing:.5px Shadow: #333333, Blur 4px, Spread 1px Notes 20px * Text is in All Caps 40px
10 Button Sizes Desktop A minimum button and maximum button size (with padding constraints). At maximum size, content can overflow onto 2 lines. Min size Max size GO GET MORE INFORMATION Rule for copy that exceeds maximum width gets pulled out of button and CTA becomes shorter 20px Get more information about this insurance policy VIEW
11 Links
12 Primary Text Link Light Background On Load View More Text Color: #007ABC Font: Noto Sans 14px Text Style: Bold, Underline, Titlecase Rollover/Press View More Text Color: #0061A0 Font: Noto Sans 14px Text Style: Bold, Titlecase On Focus View More Text Color: #007ABC Font: Noto Sans14px Text Style: Bold, Underline, Titlecase Shadow: #333333, Blur 4px, Spread 1px Notes *Representation of underline thickness not accurate, will be thinner in development View More
13 Primary Text Link Dark Background On Load View More Text Color: #FFFFFF Font: Noto Sans 14px Text Style: Bold, Underline, Titlecase Rollover/Press View More Text Color: #FFFFFF Font: Noto Sans 14px Text Style: Bold, Titlecase On Focus View More Text Color: #FFFFFF Font: Noto Sans 14px Text Style: Bold, Underline, Titlecase Shadow: #333333, Blur 4px, Spread 1px Notes *Representation of underline thickness not accurate, will be thinner in development View More
14 Text Fields
15 Text Field Simple Field Form Field On Load First Name Field Border Color: #AAA9AA Field Label Text: Noto Sans13px # Form Field Selected State First Name Field Border Color: #007ABC Field Label Text: Noto Sans 12px Bold # Hint Text: Noto Sans 13px, # First Name John Field Border Color: #AAA9AA Field Label Text: Noto Sans 12px # Text: Noto Sans 13px # Notes Hint text: When user types, the field turns into a blank and auto jumps to next entry when format is completed. 20px First Name First Name John
16 Text Field With Hint Text Form Field On Load Field Border Color: #AAA9AA Field Label Text: Noto Sans 13px # Form Field Selected State Social Security Number XXX-XX-XXXX Social Security Number XXXX Field Border Color: #007ABC Field Label Text: Noto Sans 12px Bold # Hint Text: Arial 13px, # Field Border Color: #AAA9AA Field Label Text: Noto Sans 12px # Text: Noto Sans 13px # Notes Hint text: When user types, the field turns into a blank and auto jumps to next entry when format is completed. 20px Social Security Number XXX-XX-XXXX
17 Text Field With View Icon Form Field On Load Field Border Color: #AAA9AA Field Label Text: Noto Sans13px # Show/Hide Icon Form Field Selected State XXX-XX-XXXX Field Border Color: #007ABC Field Label Text: Noto Sans 12px Bold # Text: Noto Sans 13px # Hint Text: Noto Sans 12px, # View/Hide Selected & Unselected Field Border Color: #AAA9AA Field Label Text: Noto Sans 12px # Text: Noto Sans 13px # Notes Hint text: When user types, the field turns into a blank and auto jumps to next entry when format is completed. 20px Vertically centered
18 Text Field Option Single Line On Load On Click/Press Active State On Release On Release ### - ## - #### ## - #### Error # must contain 9 characters Notes *The Floating Label text will be against the light red background, there should not be white behind it. This will look appropriate in development.
19 Forms
20 Form Basic Form Form Field On Load Zip Code Field Border Color: #AAA9AA Field Label Text: Noto Sans13px # BUTTON Background:#007ABC Text Color: #ffffff Font: Noto Sans14px Text Style: Bold Notes Simple forms with variations of multiple fields 30px Zip Code 20px Username BUTTON 30px Password BUTTON
21 Drop Down
22 Drop Down Single Line Drop Down On Load I want to... Field Border Color: #AAA9AA Heading Text Color: # Field Label Font: Noto Sans13px Drop Down On Click (Selected) I want to... View Online Activity View Payment History View Field Border Color: #007ABC Field Label: Noto Sans 13px # Bold Text: Noto Sans 13px # Hover Background: #007ABC Hover Text: 13px #FFFFFF, Bold Automatic Payment Drop Down Rollout I want to... View Automatic Payment Field Border Color: #AAA9AA Field Label Font: Noto Sans 13px # Notes After user clicks to make a selection from within the list of options shown, apply selected state as shown below. It is at this point when the floating field style is applied. I want to... View Online Activity View Payment History View Automatic Payment
23 Drop down Double/Multiple Lines Drop Down On Load Accounts/Policies Field Border Color: #AAA9AA Heading Text Color: # Field Label Font: Noto Sans 13px Drop Down On Click (Selected) Accounts/Policies Life Insurance - Whole Life Select Policy # Auto Insurance - NJ Motorcycle Policy #899812XYZ Field Border Color: #007ABC Field Label: Noto Sans 13px # Bold Text: Noto Sans 13pt # Hover Background: #007ABC Hover Text: 13px #FFFFFF, Bold Drop Down Rollout Accounts/Policies Auto Insurance - NJ Motor... Field Border Color: #AAA9AA Field Label Font: Noto Sans 13px # Notes Dropdowns maximum of 3 lines of text. Accounts/Policies Life Insurance - Whole Life Select Policy # Auto Insurance - NJ Motorcycle Policy #899812XYZ Notes When the dropdown is being used in a scenario where user is asked a more complex question, the question should appear above the dropdown field and used together with a simpler label within the dropdown. How do you want to be paid? Payment Method Check Credit Card Direct Deposite
24 Validation & Messaging
25 Text Field Validation Text Tooltip for Text Fields On Load Mobile Phone (optional) What s this? Clicking Link Mobile Phone (optional) What s this? Information tool tip information to go here lorem ipsum dolor sit amet lorem ipsum dolor sit amet. Clicking Link on Click/Press State Mobile Phone ### - ### - #### (optional) What s this? Information tool tip information to go here lorem ipsum dolor sit amet lorem ipsum dolor sit amet. Clicking Link on Error State Mobile Phone 123 Mobile Phone number must contain 10 characters What s this? (optional) All messages from Field Text Link show below Error message. Mobile Phone 123 (optional) Mobile Phone number must contain 10 characters What s this? Information tool tip information to go here lorem ipsum dolor sit amet lorem ipsum dolor sit amet.
26 Text Field Validation Text Tooltip & Show/Hide Link Form Field On Load Field Stroke: 1px Field Border Color: #AAA9AA Field Label Text: Noto Sans 13px # Error Invoked What s this? must contain 9 characters Field Specific Text Link: Noto Sans 12px, Underline, #007ABC Messaging Background: #F2F2F2 Messaging Text: Noto Sans13px # Notes On click, text field label moves to the top of field and specification for text change see notes above 5px What s this? 5px must contain 9 characters
27 Text Field Validation Combination of Text Tooltip & Show/Hide Link On Load What s this? Show/Hide icon is the only icon that sits within field. On Click/Press ### - ## - #### Active State What s this? ## - #### All Field specific text links, ie. What s this?, Info, Calciulate, etc. sit below field. What s this? On Release What s this? On Release - - What s this? Error # must contain 9 characters What s this? must contain 9 characters All messages from Field Text Link show below Error message.
28 Issue 1: January 2017 Text Field Validation Examples Text Tooltip Text Tool tip and Show/Hide Form with Multiple Errors Mobile Phone (optional) Date of Birth First Name What s this? Please enter your first name. Date of Birth What s this? Last Name Address Address Please enter your last name. When Text Field Link is clicked, message expands and pushes fields below. When link is clicked, message expands and pushes fields below. Date of Birth MM-DD-YYYY Please enter your date of birth. Date of Birth Mobile Phone (optional) XXX-XX-XXXX What s this? # Please enter your SSN. Information tool tip information to go here lorem ipsum dolor sit amet lorem ipsum dolor sit amet. must contain 9 characters Confirm XXX-XX-XXXX What s this? Please enter your SSN. Date of Birth must contain 9 characters Address Address Date of Birth Confirm Extra space added after combinatiin of Error message and Text Field Link message so user is not confused as to which field the information belongs. Address Mobile Phone (Optional) Extra space added after combinatiin of Error message and Text Field Link message so user is not confused as to which field the information belongs. What s this?
29 Dropdown Validation Dropdown Error Messaging Form Field Error I Am Interested In Field Stroke: 1px Field Border Color: #AAA9AA Field Label Font: Noto Sans 13px # Error Invoked I Am Interested In Please make a selection Field Label Text: Noto Sans, 13px, Bold, # Alert Field Border Color: #DB1818 Alert Field Background: #FDE8E8 Field Stroke: 1px Alert Text: Noto Sans 13px #DB1818 I Am Interested In 5px Please make a selection
30 Radio Buttons
31 Radio Button Basic Button Field On Load Time Frame 60 Days 90 Days Heading Text Color: # Heading Font: Noto Sans 14px Heading Text Style: Bold Field Border Color: #AAA9AA Font: Noto Sans 14pt Button Field Selected Time Frame 60 Days 90 Days Heading Text Color: # Heading Font: Noto Sans 14px Heading Text Style: Bold Circle Color: #007ABC Field Border Color: #007ABC Font: Noto Sans 14pt Notes *Text is center-aligned to radio button Time Frame 60 Days 90 Days 5px
32 Check Marks
33 Checked Fields Basic Checkbox On Load Lorem ipsum dolar sien amit vivamus diem dolar Text Color: # Form Border Color: #AAA9AA Font: Noto Sans 14px Checkbox Selected Lorem ipsum dolar sien amit vivamus diem dolar Text Color: # Check Mark Color: #007ABC Form Border Color: #007ABC Font: Noto Sans 14px Notes *Text is center-aligned to radio button 5px Lorem ipsum dolar sien amit vivamus diem dolar
34 2. Examples Lead Form Login Get a Quote Find a Service Provider Comparison Table
35 Examples Contact Form Contact MetLife All fields are required First name Last name Address City State Zip code Phone number In reference to... SUBMIT By clicking Submit, you agree that we* may contact you at the number you've provided, possibly using automated technology or a prerecorded voice, to talk about our products and services. If you don't want to give this permission, you can still get a quote or make a purchase by calling us directly at *A MetLife company or third party acting on MetLife's behalf. Call METLIFE All Other Contact Options
36 Examples Login With Drop Down Log in for Individuals Username Password Forgot Username or Password? LOGIN CREATE A NEW ACCOUNT
37 Examples Quote Tool Steps Options I want to get a quote I want to get a quote I want to get a quote Insurance Type Term Life Insurance Term Life Insurance GET MY QUOTE Florida Florida Female Female Coverage Amount Calculate $100,000 Calculate GET MY QUOTE Term Length Tobacco/Nicotine Use Your Health What s this? GET MY QUOTE
38 Examples Find a Provider With Drop Down Find a Dentist Zip Code Find a Dentist Dentist Zip Code Vision Provider Clicking on the default link will behave like Drop downs. Select Your Network Don t know your plan? SUBMIT
39 Examples Comparison Table Desktop Simplified Issue Term Level Term Guaranteed Acceptance Whole Universal Whole $4.75/mo.* $16.00/mo.* $35.50/mo.* $45.30/mo.* $99.90/mo.* for $10,000 of coverage (30 year old female) for $250,000 of coverage (10 year term, best class) for $10,000 of coverage (45 year old female) for $100,000 of coverage (best class) for $100,000 of coverage (best class) Coverage Lasts Coverage Lasts Coverage Lasts Coverage Lasts Coverage Lasts To age years Lifetime To age 95 Lifetime Available Online Available Online Available Online Available Online Available Online Yes Yes Yes No No Build Cash Value Build Cash Value Build Cash Value Build Cash Value Build Cash Value Nominally No No Some Products Yes Medical Exam Required Medical Exam Required Medical Exam Required Medical Exam Required Medical Exam Required No Yes No Yes Yes Coverage Amounts Coverage Amounts Coverage Amounts Coverage Amounts Coverage Amounts $5,000 - $100,000 $100,000+ $2,500 - $50,000 $50,000+ $10,000+ LEARN MORE LEARN MORE LEARN MORE LEARN MORE LEARN MORE Apply Online Apply Online Apply Online Contact Rep Contact Rep *Sample monthly rates are based on a 30 year old female except where noted. Rates are current as of June 2015 and are not guaranteed. Coverage and rates may be subject to understanding.
40 Examples Comparison Table Tablet Mobile Universal Whole Universal $45.30/mo.* for $100,000 of coverage (best class) $99.90/mo.* for $100,000 of coverage (best class) $45.30/mo.* for $100,000 of coverage (best class) Coverage Lasts Coverage Lasts Coverage Lasts To age 95 Lifetime To age 95 Available Online No Available Online No Available Online No Build Cash Value Some Products Build Cash Value Yes Build Cash Value Some Products Medical Exam Required Yes Medical Exam Required Yes Medical Exam Required Yes Coverage Amounts Coverage Amounts Coverage Amounts $50,000+ $10,000+ $50,000+ LEARN MORE LEARN MORE LEARN MORE Contact Rep Contact Rep Contact Rep
41 Thank you.
Customer Account Center User Manual
Customer Account Center User Manual 1 P age Customer Account Center User Manual Contents Creating an Account & Signing In... 3 Navigating the Customer Account Center Dashboard... 7 Account Information...
Enter Background Check Request
DFPS Enter Background Check Request A step-by-step guide for Designated ABCS Representatives Department of Family and Protective Services 1/29/2015 Enter Background Check in ABCS This tip sheet will show
GTL E-App. User Guide. Available on any device!
GTL E-App User Guide Available on any device! Step-by-Step User Guide Welcome to Guarantee Trust Life s E-App! It s always our goal to help develop new and innovative ways for you, our valued agent, to
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,
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
Form Design Standards and Guidelines. SCC Form Services (12/17)
Form Design Standards and Guidelines SCC Form Services (12/17) Table of contents Anatomy of a form............... 4 How to build a header section.......... 6 How to build a basic body section.........
Your mymeritain Personalized Member Website
Your mymeritain Personalized Member Website 2008 Meritain Health, Inc. Last Updated 5.23.2008 Your mymeritain Member Website The mymeritain Member Website offers Members a user-friendly web experience,
Provider Application User Interface Guidelines. Page 1
Provider Application User Interface Guidelines Page 1 Typography The Provider application includes one typeface: Lato ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@ $%^&*()-?/Æ Lato
Creating Forms. Starting the Page. another way of applying a template to a page.
Creating Forms Chapter 9 Forms allow information to be obtained from users of a web site. The ability for someone to purchase items over the internet or receive information from internet users has become
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,
HTML and CSS a further introduction
HTML and CSS a further introduction By now you should be familiar with HTML and CSS and what they are, HTML dictates the structure of a page, CSS dictates how it looks. This tutorial will teach you a few
STEP -BY-STEP REGISTRATION PROCESS
STEP -BY-STEP REGISTRATION PROCESS 1. To fill out the online application, go to: https://www.onlinemerchantapp.com/webchannel/girlscoutseasternmass and click Get Started. CLICK HERE! Select Choose Plan
Retrieving Username and/or Resetting Password/ Quick Reference Guide Version: 1.0 Last updated: 01/11/2018
Retrieving Username and/or Resetting Password/E-mail Quick Reference Guide Version: 1.0 Last updated: 01/11/2018 With the aim of making it easier for you to retrieve your username and reset your password
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
Benefit Enrollment User Guide
Benefit Enrollment User Guide Table of Contents Page First Time User Registration 2 4 Enrollment Instructions 5 17 Need Help? 18 1 First Time User - Step 1 Your Benefits Are Mobile Your benefit information
Event Manager. Online Registration for Camps, Classes, and Events. Creating an Event: Log in. Click Event Manager in the left navigation to begin
2015 Event Manager Online Registration for Camps, Classes, and Events. Creating an Event: Log in Click Event Manager in the left navigation to begin 1 P a g e Click Create A blank event page will open
Tenant Portal Guide PURPOSE. Page 1. The purpose of this document is to review the features associated with the Tenant Portal.
Tenant Portal Guide Page 1 PURPOSE The purpose of this document is to review the features associated with the Tenant Portal. Page 2 Table of Contents Tenant Portal... 3 Logging into the Tenant Portal...
2005 WebGUI Users Conference
Cascading Style Sheets 2005 WebGUI Users Conference Style Sheet Types 3 Options Inline Embedded Linked Inline Use an inline style sheet to modify a single element one time in a page.
Responsive Grid. Grid Variations. Built with responsive 12 column grid, layouts and components. LOGO HEADER IMAGE SECONDARY NAVIGATION FOOTER
WEB STYLE GUIDE School of Medicine Styleguide LAYOUT Responsive Grid Built with responsive 12 column grid, layouts and components. Grid Variations One Column LOGO HEADER IMAGE SECONDARY NAVIGATION FOOTER
COMING SOON. A new on-the-go banking experience. Important information about upcoming system upgrades at Bank Midwest happening April 24.
COMING SOON A new on-the-go banking experience Important information about upcoming system upgrades at Bank Midwest happening April 24. BankMidwest.com Member FDIC We re changing to a new, state-of-the-art
How to Navigate the AHIP Medicare Course. Subject Page #
How to Navigate the AHIP Medicare Course Table of Contents Subject Page # Introduction 2 AHIP Registration Process 3 AHIP Login Process 8 Course Parts 14 Final Exam 17 Certificate and Transmit Score to
UNIVERSITI TEKNOLOGI MALAYSIA TEST 1 SEMESTER II 2012/2013
UNIVERSITI TEKNOLOGI MALAYSIA TEST 1 SEMESTER II 2012/2013 SUBJECT CODE : SCSV1223 (Section 05) SUBJECT NAME : WEB PROGRAMMING YEAR/COURSE : 1SCSV TIME : 2.00 4.00 PM DATE : 18 APRIL 2013 VENUE : KPU 10
How to Enroll into Health Benefits via Employee Self Service: New Hire Event Employee Self Service (ESS):
Employee Self Service (ESS): Online New Hire Benefits Enrollment allows fast and convenient processing of your New Hire Benefits Enrollment elections through Employee Self Service (ESS). ESS is an online
To Start the Online Process
Directions for 2018-2019 Online Registration Online registration must be done for each student. Fees can be paid as one transaction. There is NO transaction fee for paying online when registering between
RETAIL PRODUCER PORTAL
RETAIL PRODUCER PORTAL This presentation is a high-level summary and for general informational purposes only. The information in this presentation is not comprehensive and does not constitute legal, tax,
Spreadsheet Basics by Dick Evans, (updated )
Spreadsheet Basics by Dick Evans, (updated 2-27-2017) www.rwevans.com What is a spreadsheet? It is a group of values and other data organized into rows and columns much like the columnar pads or ledgers
The Newsletter will contain a Title for the newsletter, a regular border, columns, Page numbers, Header and Footer and two images.
Creating the Newsletter Overview: You will be creating a cover page and a newsletter. The Cover page will include Your Name, Your Teacher's Name, the Title of the Newsletter, the Date, Period Number, an
Step 1: Registration 1. ABOUT ME Once all fields are complete, you must press CONTINUE to move on.
Our web portal allows you access to many conveniences such as checking order status, ordering and refilling prescriptions, viewing order history, managing dependents and online payments. There are five
Introduction to Multimedia. MMP100 Spring 2016 thiserichagan.com/mmp100
Introduction to Multimedia MMP100 Spring 2016 profehagan@gmail.com thiserichagan.com/mmp100 Troubleshooting Check your tags! Do you have a start AND end tags? Does everything match? Check your syntax!
Disabled American Veterans Membership System User Manual for Members
Disabled American Veterans Membership System User Manual for Members Disabled American Veterans 2 2/9/2012 Table of Contents Contents Basic Web Application Usage... 4 Member Login... 8 Change Password...
Quick Start Guide Skim first for content and, then, use as necessary
Quick Start Guide Skim first for content and, then, use as necessary Big Picture: Not unlike accounting software, you need to enter certain information into Solo in order to perform COBRA administration.
AlwaysAssist User Guide Vision Care Provider Portal Page 0
AlwaysAssist User Guide Vision Care Provider Portal Page 0 AlwaysAssist User Guide Vision Care Provider Portal Table of Contents Entering the Site... 2 Provider Login... 2 Password Change... 3 Password
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
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
ezbusiness Credit Card Management User s Guide
ezbusiness Credit Card Management User s Guide This document provides an overview of the different options available within your Internet-based ezbusiness Card Management website. TABLE OF CONTENTS (click
Concur Expense Management System
GETTING STARTED IN CONCUR Concur Expense Management System User Guide: Getting Started in Concur Printed copies of this User Guide should not be regarded as the current version. For the latest User Guides:
DRX Platform Manager DRX Platform Manager
DRX Platform Manager 1 P a g e Table of Contents DRX Platform Manager... 1 Introduction to the DRX Platform Manager... 4 Getting Started... 4 Login... 4 Platform Manager... 4 DRX Application Configuration
Cardholder Document Commonwealth of Virginia Employee Paid (Individual Liability) Card setup
Cardholder Document Commonwealth of Virginia Employee Paid (Individual Liability) Card setup Creating a Password To access the application, a Program Administrator must first create a user profile for
QUICK START GUIDE FOR CLUB WEBSITES
QUICK START GUIDE FOR CLUB WEBSITES Introduction Quick Start Guide for Club Websites For more than 100 years, Rotary has united leaders committed to applying their expertise to better their communities.
Web Site Design and Development Lecture 6
Web Site Design and Development Lecture 6 CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM Inheritance Before we talk about font properties, it needs to be known that font properties are inherited by the descendants
Peach Pass GO! Mobile App User Guide
Peach Pass GO! Mobile App User Guide Welcome to the Peach Pass GO! Mobile App User Guide! New Look, New Functionality Improved Usability and More Features! The newly designed Peach Pass GO! Mobile App
Meritain Connect User Manual. for Employees. 1 Meritain Connect User Guide for Employees
Meritain Connect User Manual for Employees 1 Meritain Connect User Guide for Employees Contents Introduction... 4 Accessing Meritain Connect... 5 Logging In... 5 Forgot Password... 6 Registration Process...
Forms/Distribution Acrobat X Professional. Using the Forms Wizard
Forms/Distribution Acrobat X Professional Acrobat is becoming a standard tool for people and businesses to use in order to replicate forms and have them available electronically. If a form is converted
Provider User Guides
Provider User Guides Table of Contents What's New... 1 Overview of Changes:... 1 User Interface Changes... 2 Data Model Changes... 2 First Time Logging In... 5 SmartCare Basics... 9 Open a Client... 13
New Client Setup Form
Audio Response and Online Banking New Client Setup Form October 20, 2017 Includes Text-to-Speech features for Audio Response! This form should be filled out electronically and emailed to your Conversion
Wanted! Introduction. Step 1: Styling your poster. Activity Checklist. In this project, you ll learn how to make your own poster.
Wanted! Introduction In this project, you ll learn how to make your own poster. Step 1: Styling your poster Let s start by editing the CSS code for the poster. Activity Checklist Open this trinket: jumpto.cc/web-wanted.
WCB Online User Guide for Workers
WCB Online User Guide for Workers WCB Online User Guide for WORKERS A Nova Scotians safe and secure from workplace injury Table of Contents WCB Online 1 Create an Account Profile 1 WCB Online Navigation
User Guide. Customer Self Service (CSS) Web Application Progress Software Corporation. All rights reserved.
User Guide Customer Self Service (CSS) Web Application 1993-2017 Progress Software Corporation. Version 2.1 March 2017 Table of Contents Welcome... 3 Accessing the Customer Self Service (CSS) Web Application...
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
2 Corporation Way Suite 150 Peabody, MA
2 Corporation Way Suite 150 Peabody, MA 01960 888-746-3463 www.locateplus.com Table of Contents Page 3 18 Free Searches and Reports VIP Customer Service & Site Walk-Through s Selecting a GLB Use for Searches
Memorial Hermann ecredentialing Portal & Application Frequently Asked Questions
Memorial Hermann ecredentialing Portal & Application Frequently Asked Questions Implementation & Go-Live What platform does Memorial Hermann s electronic application use? Memorial Hermann Health System
UpdateMyRecords.com Medical Forms
UpdateMyRecords.com Medical Forms I UpdateMyRecords.com - Envision Cloud Medspa Forms Table of Contents Part I UpdateMyRecords.com 1 1 Logging In... 1 2 Create / Edit Templates... 3 Create A New Template...
ASMP Website Design Specifications
Page 1 ASMP Website Design Specifications Page 2 All Pages 130 pixels (background = #ffffff) 100 pixels (background = #000000) Header Bar Use logo provided in PSD file. Match size and placement. AMERICAN
ORACLE ESS INSTRUCTIONS Oracle Employee Self Service (ESS) is accessible via the Landry s Employee Portal from anywhere with an internet access.
ORACLE ESS INSTRUCTIONS Oracle Employee Self Service (ESS) is accessible via the Landry s Employee Portal from anywhere with an internet access. Step 1. To log in via the Landry s Employee Portal, go to
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...
Note: The screenshots in this document were taken on Windows in Firefox, which may differ from your system.
CSCI 366 (Database and Web Dev) Dr. Schwartz Lab 5: HTML and CSS (Adapted from Web Programming Step by Step) Due Monday, March 26 th at 11:59pm 100 pts total (69 pts Autolab) Introduction This assignment
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
Using Home Access Center. Attendance Month View Page. Calendar Page. Career Plan Page. Classwork Page. Course Requests Page.
Using Home Access Center Home Access Center Menu View another student Attendance Month View Page Change months View attendance details Subscribe to attendance email alerts Calendar Page Customize calendar
Disabled American Veterans Membership System User Manual for National Service Officers and Transition Service Officers
Disabled American Veterans Membership System User Manual for National Service Officers and Transition Service Officers Disabled American Veterans 2 12/21/2005 Table of Contents Basic Web Application Usage...
Professional Development
Contents Profile Creation... 2 Forgot My Password?... 4 Forgot My Email?... 5 Dashboards... 6 Transcript & Content... 7 Workshop Search... 7 Registration... 8 Workshop Creation... 8 Global Reports... 12
Welcome to Consentz. Click the Consentz App icon on your ipad to proceed. Consentz Login. Enter your username and password to continue
Welcome to Consentz Click the Consentz App icon on your ipad to proceed If you have not already done so, please click here to create your account. Consentz Login Enter your username and password to continue
Your NetCare Provider Website
Your NetCare Provider Website Your NetCare Provider Website The NetCare Provider Website offers Providers a user-friendly web experience, including account information and various other tools in a secure
Creating Digital Coupons for Your SMS Campaigns
Coupons Creating Digital Coupons for Your SMS Campaigns Your system's Coupons section allows you to create digital coupons that you can use in your SMS campaigns. This is a very powerful feature which
KNOWLEDGE CENTER SERVICE. Customization Guide
KNOWLEDGE CENTER SERVICE Customization Guide TABLE OF CONTENTS PAGE Homepage Overview 1 Homepage Customization Options 1. Header 3 2. Engagement Tools 5 3. Search Box 8 4. Search Results 13 5. Footer 20
What is New in MyChart? My Medical Record Health Preferences Settings Appointments and Visits Visits Schedule an Appointment Update Information
What is New in MyChart? On August 26th, we will be upgrading and changing the look and feel to our MyChart patient portal site. We would like to make you aware of a few differences that you will see, when
Registering for Courses Online How To Guide
Registering for Courses Online How To Guide My Login Information: Email Address: Password: 2 1. Go to burlington.ca/play 2. Click on Login, Browse & Register Recreation 2 1 2 1. Login to Your Account using
mycoresource.com Member User Guide
mycoresource.com Member User Guide January 2017 i Table of Contents Portal Overview... 1 Create Account - Member... 2 Sign In... 8 Forgot Password or Username... 10 Home Page... 13 View My Expenses...
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
Welcome to Your. Online Banking Experience
Welcome to Your Online Banking Experience Take your Orlando Federal accounts with you where ever you go - Access your account information with online banking and mobile banking. Check balances, pay bills,
OneView tm COORDINATOR QUICK TIP GUIDE
OneView tm COORDINATOR QUICK TIP GUIDE OneView TM Credential management for your entire team. All in one place. Getting Started 1. Visit our website at: www.modiohealth.com. 2. On the top right hand corner,
Complete On-Demand Clone Documentation
Complete On-Demand Clone Documentation Table of Contents 1. How Complete On-Demand Clone works...4 2. Primary Pages of App...8 A. App...8 B. Auth....10 C. Sell...11 D. Business...12 E. Driver...12 F. Admin/Dashboard...13
STYLE GUIDE L I B ER A L DE M O C R A T S VISUAL IDE NTITY. Style guide Liberal Democrats - Page 1
STYLE GUIDE L I B ER A L DE M O C R A T S VISUAL IDE NTITY Style guide Liberal Democrats - Page 1 V.1.2 - Liberal Democrats styleguide - 2017 - By Simone van Beek and Michael Wilkinson Style guide Liberal
WordPress Manual First Year Experience
WordPress Manual First Year Experience May 18, 2015 Table of Contents Who should use this manual... 3 Signing into WordPress... 3 The WordPress Dashboard and Left-Hand Navigation Menu... 4 The Home Page
iphone Basic Set-Up Guide Wolf Creek Public Schools
iphone Basic Set-Up Guide Wolf Creek Public Schools Please note the following: 1. The iphone Set-Up guide is detailed in order to provide you with information on how to connect set up your phone for use
2 December NCFE Corporate Guidelines. Introduction
Introduction Introduction How we connect with people through our brand is essential to who we are, and plays a big part in the NCFE experience. We created this document (which is simpler than it looks)
SUMMARY OF DESIGN CHOICES
SUMMARY OF DESIGN CHOICES Company Name The name is a Hawaiian word that means to go, move. As a new start up application development company, the name fit as Tech designs applications for people on the
Why have branding guidelines?
Branding Guidelines This This identity identity and brand brand system system has been has been created created to help to help you you present present GÉANT GÉANT in a consistent in a consistent and and
Nottingham Trent University Project Reboot Digital Style Guide. Icons. Version 01
Nottingham Trent University Project Reboot Digital Style Guide Icons Version 01 Icons Control Sheet (1) VERSION: 01 DATE: 31/03/16 Details: based on Version 14 of style guide New additions throught, eg.
Online Banking User Guide
Online Banking User Guide If you need assistance, please call 315.477.2200 or 800.462.5000 M-F 7:30am - 6:00pm Sat 9:00am - 1:00pm empowerfcu.com 315.477.2200 800.462.5000 Table of Contents Online Banking
PANDA Building Department Application. User Guide
PANDA Building Department Application User Guide Created By: City of Port St Lucie MIS Department 10/4/2013 PANDA is a new application created to replace PITS and AIRS. The new application looks different
CREATING KINROSS REGIONAL WEBSITES STYLE GUIDE
CREATING KINROSS REGIONAL WEBSITES STYLE GUIDE USING THIS GUIDE Review this guide before developing or updating Kinross regional websites. The accompanying Photoshop (.PSD) templates and website fonts
CONSUMER PORTAL QUICKSTART GUIDE
CONSUMER PORTAL QUICKSTART GUIDE Welcome to your 121 Benefits Consumer Portal. This one-stop portal gives you 24/7 access to view information and manage your Health Care Expense Account, Dependent Care
template guidelines. 1. Visual identity 2. How to build an
Email template guidelines 1. Visual identity 2. How to build an email 1. Visual identity There are four main elements of an email s visual identity: University logo Typography Colour Imagery University
INTRODUCTION MICHIGAN STATE UNIVERSITY WEB RESOURCES: WEB STYLE GUIDE V1.4 DECEMBER 5, 2011 PAGE 1 OF 13
PAGE 1 OF 13 INTRODUCTION The experience of browsing content, accessing information, and using Web-based services and tools on Michigan State University Web pages affects a visitor s perception of our
Provider Secure Portal User Manual
Provider Secure Portal User Manual Copyright 2011 Centene Corporation. All rights reserved. Operational Training 2 August 2011 Table of Contents Provider Secure Portal... 5 Registration... 6 Provider -
Attorney Registration System User Guide
Attorney Registration System User Guide June 1, 2018 Administrative Office of Pennsylvania Courts http://ujsportal.pacourts.us Contents Section 1: Introduction... 1 Section 2: UJS Web Portal Access Accounts...
Style Guide BOVANET. An Internet based service information network. 6 December, Version 1
Style Guide BOVANET An Internet based service information network 6 December, 2016 Version 1 Peter Marijnissen Eindhoven University of Technology IPO, Center for User-System Interaction TUE-IPO / BOVA
University of New Mexico
University of New Mexico First Time Guide for Online Benefits Enrollment Open the online portal site at: https://standard.benselect.com/unm Your user name is your Banner ID. When you first log in, your
Premium POS Pizza Order Entry Module. Introduction and Tutorial
Premium POS Pizza Order Entry Module Introduction and Tutorial Overview The premium POS Pizza module is a replacement for the standard order-entry module. The standard module will still continue to be
ATHLETES NEW TO ALL STAR
ATHLETES NEW TO ALL STAR Go to USASF.net Hover over the MEMBERSHIP INFO menu item A drop down menu will open. From the drop down menu, under the ATHLETES heading click on SIGNUP/RENEW 1 You will be taken
esupplier Connection
esupplier Connection Manual Supply Management October 2016 Rev. 04 1 Table of Contents I. esupplier Connection Overview... 3 II. Work Instructions... 3 A. Getting Started... 3 1. Log In... 3 B. Navigating
Goldfish 4. Quick Start Tutorial
Goldfish 4 Quick Start Tutorial A Big Thank You to Tobias Schilpp 2018 Fishbeam Software Text, Graphics: Yves Pellot Proofread, Photos: Tobias Schilpp Publish Code: #180926 www.fishbeam.com Get to know
Portal Guide (Certificate Owner)
Portal Guide (Certificate Owner) Link to the Portal The web portal provides certificate owners with access to their certificate information once the certificate(s) have been issued. To access the portal
Register for a HCQIS Access Roles and Profile (HARP) Account
Register for a HCQIS Access Roles and Profile (HARP) Account Table of Contents Introduction Register for a HARP Account: Instructions and Screenshots Navigate to HARP HARP Account Registration o o o o
How to Navigate the AHIP Medicare Course
How to Navigate the AHIP Medicare Course This document is for reference only. It is a guide provided to help answer any questions you may have about the AHIP site and its coursework. It is provided as
First Diploma Unit 10 Client Side Web. Week 4 -The CSS Box model
First Diploma Unit 10 Client Side Web Week 4 -The CSS Box model Last Session CSS Basics Fonts Real world site This Session CSS box model Concept of identity -id The CSS box model represents every element
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
Connecting YOUR Quick Base and QuickBooks
Connecting YOUR Quick Base and QuickBooks 1 Table of Contents Q2QConnect Configuration... 3 Connection Setup... 4 Quick Base Section... 4 QuickBooks Section... 5 Connecting the Database... 7 Mapping the
RB Connect User Guide Table of contents
RB Connect User Guide Table of contents Program Basics Jobs Tasks in Progress Turn In Account Activity Pay Statement Repository Master Word List Availability Firms Support Tickets Personal Sitemap RB Connect
Excel 2016: Part 1. Updated January 2017 Copy cost: $1.50
Excel 2016: Part 1 Updated January 2017 Copy cost: $1.50 Getting Started Please note that you are required to have some basic computer skills for this class. Also, any experience with Microsoft Word is