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

Transcription

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

2 Table of Contents ENGINEERING DATA HUB... 1 DESKTOP VIEW... 3 HEADER... 4 Logo... 5 Main Title... 6 User Menu... 7 Global Navigation... 8 Navigation Flyout Menu... 9 Breadcrumbs WELCOME PAGE Welcome Message Data Products Search Message Content Browse Data Products Business Units Data Products Table SEARCH LIST VIEW Header Message Search & Filters Search Results Search Results Icons Actions Icons DATA ACCESS LAYER CATALOG ASSET DETAILS MODAL Modal Header Modal Details Modal Editing SEARCH CARDS VIEW PAGE Header Message & Search Inputs Filters Search Results Cards Search Results Cards ADD DATA ACCESS LAYER CATALOG ASSET PAGE... 50

3 DESKTOP VIEW The Engineering Data Hub (EDH) will only have a desktop view. The website will be using the Bootstrap framework for its HTML structure and CSS. However the CSS can be overridden to help customize the UI look and feel. Desktop Width 1200px with 15px padding on the left and right sides. Within that overall container the content will use the 12- column grid system of Bootstrap. The span of columns will be determined by the content. Background Color RGB: 255, 255, 255; #ffffff

4 HEADER Notes The header for the website should be fixed. When a user scrolls the content of the page should flow under the header. Therefore the header needs to have its own background color applied so the content is not visible as it scrolls under the header.

5 Logo File Size Padding Bottom Padding Right Padding Top Notes datahubicon.png W: 50px X H: 50px 15px 5px

6 Main Title Engineering Data Hub Color RGB: 52, 61, 71; #343d47 Font Helvetica Neue, Helvetica, Arial, sans serif Font- Size 36px Padding Bottom Padding Top Notes Try to middle- align the main title to the middle of the DMH logo.

7 User Menu USERNAME Case UPPERCASE Color RGB: 119, 119, 119; # Hover Color RGB: 51, 122, 183; #337ab7 Font Helvetica Neue, Helvetica, Arial, sans serif Font- Size 20px Padding Bottom Padding Top Notes I decided to move the User Menu to the upper right hand corner to match the pattern already established on the. Cox Automotive Service Now website. Also this allows the link to not run into the global navigation, as the text of this is variable because of the user s name.

8 Global Navigation DATA ASSETS REPORTING QUICK LINKS Case UPPERCASE Color RGB: 119, 119, 119; # Hover Color RGB: 51, 122, 183; #337ab7 Font Helvetica Neue, Helvetica, Arial, sans serif Font- Size 20px Navigation Item Text Padding Right Padding Bottom Padding Top Notes On hover the links should not underline. The Navigation Item Text Padding Right attribute refers to the space between each global navigation item.

9 Navigation Flyout Menu Border 1px; solid; RGB: 119, 119, 119; # Color RGB: 119, 119, 119; # Hover Color RGB: 51, 122, 183; #337ab7 Font Helvetica Neue, Helvetica, Arial, sans serif Font- Size 18px Padding Bottom 5px Padding Top 5px Sub- Flyout Link Indent 5px Notes On hover the links should not underline.

10 Breadcrumbs Home Color RGB: 52, 61, 71; #343d47 Link Color RGB: 51, 122, 183; #337ab7 Font Helvetica Neue, Helvetica, Arial, sans serif Font- Size 14px Padding Bottom Padding Top Notes The last item in the breadcrumb trail is not a link. All other previous breadcrumbs should be a link to the page the text is referencing.

11 WELCOME PAGE

12 Background Image Background Image Size White Background Box Color White Background Box Corners White Background Box Border White Background Box Padding Notes background1.jpg 1170pxWx885pxH rgba(255, 255, 255, 0.9) 8px radius 1px solid # px The Welcome page is the first page a user comes to when they browse to the EDH website. On the Welcome page the user can search for a specific Data Access Layer Catalog Asset by using the search field. If the user isn t sure of what they re looking for they can click the Browse Data Access Layer Catalog link and see all of the Data Access Layer Catalog Assets and then filter the results. Finally the user can see the number of Data Access Layer Catalog Assets across the different business units. A user can click on a specific row to return all of the Data Access Layer Catalog Assets for a specific business unit

13 Welcome Message Font Helvetica Neue, Helvetica, Arial, sans serif Font Color # Header Font- Size 36px Header Margin Bottom Header Margin Top Message Font- Size 18px Notes For the 2 lines of the welcome message I would suggest putting them into separate paragraphs to get the spacing between them.

14 Data Products Search Font Helvetica Neue, Helvetica, Arial, sans serif Font Color # Header Font- Size 32px Header Margin Top Header Margin Bottom Message Font- Size 22px Drop Down List This dropdown contains the different fields the user can search on in the Data Access Layer Catalog. Currently the search only works for the Name field but it is being proposed that other fields like Description get added to the dropdown list Drop Down List Font- Size 16px Drop Down List Margin Right Search Input This text field is where the use enters the words they want to search the Data Access Layer Catalog for Search Input Font- Size 16px Search Input Margin Right 5px Search Icon This icon when clicked starts the search for the user and will take the user to the Data Access Layer Catalog Assets search results. This icon could be an icon image OR because I believe this site is built using bootstrap I believe there is a font icon

15 Notes library the developer can use to display a search character. The height of the icon should match the height of the input fields to its left

16 Message Content Font Helvetica Neue, Helvetica, Arial, sans serif Font Color # OR Font- Size 32px OR Font- Weight Bold OR Margin Bottom 20px OR Margin Top 15px Message Font- Size 18px Message Margin Bottom 15px Notes

17 Browse Data Products Font Helvetica Neue, Helvetica, Arial, sans serif Header Link Color RGB: 51, 122, 183; #337ab7 Header Link Font- Size 30px Header Link Margin Bottom 15px Message Font Color # Message Font- Size 18px Message Font Margin Bottom 15px Notes

18 Business Units Data Products Table Font Table Width Link Color Link Font- Size Search Icon Notes Helvetica Neue, Helvetica, Arial, sans serif 400px RGB: 51, 122, 183; #337ab7 18px This icon when clicked starts the search for the user and will take the user to the data products search results. This icon could be an icon image OR because I believe this site is built using bootstrap I believe there is a font icon library the developer can use to display a search character. The height of the icon should match the height of the input fields to its left

19 SEARCH LIST VIEW

20 Notes The Search List View page displays the Data Access Layer Catalog Assets search results in a table list view. If a user is on the Welcome page and the click the Browse All Data Access Layer Catalog they are brought to the search page with the list view selected and no search or filter criteria selected. EVERYTHING in the Data Access Layer Catalog is returned. The results table loads as the user scrolls down the page. The user can also reduce the results set by using the filters on the left hand side of the page. NOTE: At this time all of the filters have not been determined BUT they will all follow the same pattern as the Business Units filters shown in the design

21 Header Message Font Helvetica Neue, Helvetica, Arial, sans serif Header Font- Size 32px Header Font Color # Header Margin Bottom Header Margin Top Horizontal Line/Rule Size 1170pxWx1pxH Horizontal Line/Rule Color # Notes

22 Search & Filters

23 Overall Filter Width 250pxW Font Helvetica Neue, Helvetica, Arial, sans serif Search Cell Border None Search Cell Padding Left Search Cell Padding Top, Right, Bottom 5px Search Font- Size 16px Search Font Color # Search Dropdown List This is currently not implemented but will be at some point and contains the field names in the data that the search text will be applied to Search Textbox The search textbox is where a user can (currently) enter the name or part of the name of a Data Access Layer Catalog Asset to search on. Ex salesforce will return all Data Access Layer Catalog Assets with salesforce in their name. Filter Cell Size 250pxWx40pxH Filter Cell Border Top 1px solid # Filter Cell Padding Left Filter Cell Padding Top, Right, Bottom 5px Filter Font- Size 16px Filter Font Color # Filter only Link The only link shows only when a user hovers over the cell that its checkbox is in. If a user clicks on the only link then the checkbox in that row is selected and ALL other checkboxes for that filter group become unchecked Filter only Link Font- Size 14px Filter only Link Font Color #dadada Vertical Line/Rule Color #666666

24 Notes The filter sections are accordions that expand and collapse when a user clicks on the header of the section.

25 Search Results Table Width Font 875pxW Helvetica Neue, Helvetica, Arial, sans serif

26 Header Title Font- Size 24px Header Title Font Color # Header Title Margin Bottom Table Header Background Color Table Header Font Size Table Header Font Color Table Row Odd Background Color Table Row Even Background Color #2563ab 20px #ffffff #ffffff #dadada Table Cell Font Size 14px Table Cell Font Color # Table Cell Height 30pxH Notes The screenshot has the left side of the table over the right edge of the 3 rd column in bootstrap. It is ok to move the table over so that the columns would be col- lg- 3 and col- lg- 9 As the user scrolls the system should display more results in the table

27 Search Results Icons Download All Icon Size Download All Icon Padding Right 40pxWx40pxH 20px View Icons Size 40pxWx40pxH View Icon Unselected Background Color #ffffff View Icon Font Color # View Icon Selected Background Color #2563ab View Icon Selected Font Color #ffffff View Icon Cards Margin Right 5px View Icon Lists Margin Right 20px (but should right align with the table below) Notes The search results icons will most likely be the bootstrap font- awesome icons

28 Actions Icons Actions Hover When a user hovers over the ellipsis ( ) the pop- up shows the action icons: Create Data Access Layer Catalog Asset from this Data Access Layer Catalog Asset, More Information, Download this Data Access Layer Catalog Asset ACTIONS Icons Size 40pxWx40pxH ACTIONS Icons Margin Left ACTIONS Icons Margin Right Create Data Access Layer Catalog Asset from this Data Access #DEAD26 Layer Catalog Asset Icon Color More Information Icon Color # Download Data Access Layer Catalog Asset Icon Color #68BC36

29 Notes Create Data Access Layer Catalog Asset from this Data Access Layer Catalog Asset Icon click takes the user to the Add Data Asset page with information filled in from the clicked on Data Access Layer Catalog Asset. This allows the user to enter less information to create a new Data Access Layer Catalog Asset. More Information Icon click opens the more information modal for the user. Download Data Access Layer Catalog Asset Icon click downloads the selected Data Access Layer Catalog Asset in a CSV (currently the delimiter may change)

30 DATA ACCESS LAYER CATALOG ASSET DETAILS MODAL

31 Modal Width Centered and 875pxW Modal Background Color #ffffff Modal Corners Radius 8px radius Modal Border 1px solid # Modal Padding 15px Notes The Data Access Layer Catalog Asset Details Modal can be opened on the Data Access Layer Catalog Asset search results (click on the more button) and browse Data Access Layer Catalog Asset catalog (click on the Data Access Layer Catalog Asset row) pages.

32 Modal Header Font Helvetica Neue, Helvetica, Arial, sans serif Header Title Font- Size 16px Header Title Font Color # Header Title Font Weight Bold Header Title Margin Bottom Horizontal Line/Rule 1px solid # % width Description Font Size 16px Description Font Color # Description Margin Bottom 20px Notes

33 Modal Details

34 Font Helvetica Neue, Helvetica, Arial, sans serif Tab Font Size 14px Active Tab Background Color #2563ab Active Tab Font Color #ffffff Active Tab Corners 4px Inactive Tab Background Color #ffffff Inactive Tab Font Color # Cell Font Size 16px Cell Font Color # Cell Height 45pxH Cell Border Bottom 1px solid # Notes The details as to what information will be displayed on the Technical Information, General Information, and Comments tabs has yet to be determined

35 Modal Editing

36 Edit All Font Helvetica Neue, Helvetica, Arial, sans serif Edit All Font Size 16px Edit All Case UPPERCASE Edit All Font Color #0000 Edit All Icon Bootstrap font- awesome icon Edit All Icon Size 30pxWx30pxH Edit All Icon Color #DEAD26 Inactive Tab Font Color # Edit Cell Icon Edit Cell Icon Size Edit Cell Icon Color Save/Cancel Buttons Width Save Button Margin Right Cancel Button Margin Right Notes Bootstrap font- awesome icon 25pxWx25pxH #DEAD26 60px 5px 5px The modal editing tools are only available to users who have the Admin role EDIT ALL ICON click: Places all of the fields in the modal into edit mode Data Cell Hover: When a user hovers over a data cell, if they have the Admin role the Edit Icon appears and if the user clicks that icon they are able to edit and save that individual piece of data.

37 SEARCH CARDS VIEW PAGE

38 Notes The Search Card View page is where a user will go to when enter search information on the welcome page. Currently users can enter all or part of the Data Access Layer Catalog Asset name to search on. Eventually the search will be expanded to other fields (ex. Description) and the user will be able to select a specific field to search on from the dropdown list. NOTE: At this time all of the filters have not been determined BUT they will all follow the same pattern as the Business Units filters shown in the design

39 Header Message & Search Inputs Font Helvetica Neue, Helvetica, Arial, sans serif Header Font- Size 32px Header Font Color # Header Margin Bottom Header Margin Top Drop Down List This dropdown contains the different fields the user can search on in the Data Products Catalog. Currently the search only works for the Name field but it is being proposed that other fields like Description get added to the dropdown list Drop Down List Font- Size 16px Drop Down List Margin Right Search Input This text field is where the use enters the words they want to search the data products catalog for Search Input Font- Size 16px Search Input Margin Right 5px Search Icon This icon when clicked starts the search for the user and will take the user to the data products search results. This icon could be an icon image OR because I believe this site is built using bootstrap I believe there is a font icon library the developer can use to display a search character. The height of the icon should match the height of the input fields to its left

40 Horizontal Line/Rule Size 1170pxWx1pxH Horizontal Line/Rule Color # Notes

41 Filters

42 Overall Filter Width 250pxW Font Helvetica Neue, Helvetica, Arial, sans serif Search Cell Border None Search Cell Padding Left Search Cell Padding Top, Right, Bottom 5px Search Font- Size 16px Search Font Color # Search Dropdown List This is currently not implemented but will be at some point and contains the field names in the data that the search text will be applied to Search Textbox The search textbox is where a user can (currently) enter the name or part of the name of a Data Access Layer Catalog Asset to search on. Ex salesforce will return all Data Access Layer Catalog AssetS with salesforce in their name. Filter Cell Size 250pxWx40pxH Filter Cell Border Top 1px solid # Filter Cell Padding Left Filter Cell Padding Top, Right, Bottom 5px Filter Font- Size 16px Filter Font Color # Filter only Link The only link shows only when a user hovers over the cell that its checkbox is in. If a user clicks on the only link then the checkbox in that row is selected and ALL other checkboxes for that filter group become unchecked Filter only Link Font- Size 14px Filter only Link Font Color #dadada Vertical Line/Rule Color #666666

43 Notes The filter sections are accordions that expand and collapse when a user clicks on the header of the section.

44 Search Results Cards

45 Header Title Font- Size 24px Header Title Font Color # Header Title Margin Bottom Header Title Margin Left Download Search Results Link Download Search Results Link Font Size Download Search Results Link Font Color Download Search Results Link Alignment Download Search Results Link Margin Right Download Search Results Icon Download Search Results Icon Size Download Search Results Icon Alignment Download Search Results Icon Color This link when clicked downloads all of the data for the data product. 14px #2563ab Right 5px This icon when clicked downloads all of the data for the data product. This icon could be an icon image OR because I believe this site is built using bootstrap I believe there is a font icon library the developer can use to display a search character. 30pxWx30pxH Right #68BC36 Search Result Card Odd Background Color #ffffff Search Result Card Even Background Color #eeeeee Search Result Card Width 880px Search Result Card Border 1px solid #e5e5e5 Search Result Card Title Font- Size 20px Search Result Card Title Font Color # Search Result Card Title Margin Top

46 Search Result Card Title Margin Bottom Search Result Card Title Margin Left Search Result Card Description Font- Size 16px Search Result Card Description Font Color # Search Result Card Description Margin Bottom 20px Search Result Card Description Margin Left Search Result Card Download Icon Search Result Card Download Icon Size Search Result Card Download Icon Alignment Search Result Card Download Icon Margin Top Search Result Card Download Icon Margin Right Search Result Card Download Icon Color This icon when clicked downloads all of the data for the data product. This icon could be an icon image OR because I believe this site is built using bootstrap I believe there is a font icon library the developer can use to display a search character. 40pxWx40pxH Right #68BC36 Data items Margin Bottom Data items Margin Left Data Item Label Font Size 14px Data Item Label Font Color # Data Item Label Font Weight Bold Data Item Label Alignment Right Data Item Font Size 14px Data Item Font Color # Data Item Font Weight Normal

47 Data Item Alignment Left Notes As the user scrolls the system should display more results cards

48 Search Results Cards

49 Download All Icon Size Download All Icon Padding Right 40pxWx40pxH 20px View Icons Size 40pxWx40pxH View Icon Unselected Background Color #ffffff View Icon Font Color # View Icon Selected Background Color #2563ab View Icon Selected Font Color #ffffff View Icon Cards Margin Right 5px View Icon Lists Margin Right 20px (but should right align with the table below) Search Card Icons Size 40pxWx40pxH Search Card Icons Margin Left Search Card Icons Margin Right Create Data Access Layer Catalog Asset from this Data Access #DEAD26 Layer Catalog Asset Icon Color More Information Icon Color # Download Data Access Layer Catalog Asset Icon Color #68BC36 Notes The search results icons will most likely be the bootstrap font- awesome icons

50 ADD DATA ACCESS LAYER CATALOG ASSET PAGE

51 Notes The Add Data Asset page is where a user will go to create a new Data Access Layer Catalog Asset. The user can access this page only if they have the Admin role. A link in the global navigation under the Data Products menu item is displayed and the user can click on that to go to this page. Font Helvetica Neue, Helvetica, Arial, sans serif Tab Font Size 14px Active Tab Background Color #2563ab Active Tab Font Color #ffffff Active Tab Corners 4px Inactive Tab Background Color #ffffff Inactive Tab Font Color # Cell Font Size 16px Cell Font Color # Cell Height 45pxH Cell Border Bottom 1px solid # Save Button Size Save Button Margin Right Save Button Margin Bottom Save Message Margin Right Save Message Margin Bottom Notes 90pxWx40pxH 20px 20px 20px The Add Data Asset page s tabs are split into required and non- required tabs. We still need to determine what fields go on which tab. After that we need to figure out the best grouping of the data so that it is easier to understand for a

52 user. We also need to default as many fields as we can so the user has to enter as little data as possible.