diff --git a/2025R2/Discovery-quick-reference-for-tool-usage-25-R2/changelog.md b/2025R2/Discovery-quick-reference-for-tool-usage-25-R2/changelog.md new file mode 100644 index 0000000000..67aa55effb --- /dev/null +++ b/2025R2/Discovery-quick-reference-for-tool-usage-25-R2/changelog.md @@ -0,0 +1,5 @@ +# Changelog + +## Version 2025 R2 + +- Text changes for Discovery 2025R2. diff --git a/2025R2/Discovery-quick-reference-for-tool-usage-25-R2/docfx.json b/2025R2/Discovery-quick-reference-for-tool-usage-25-R2/docfx.json new file mode 100644 index 0000000000..53cd772db5 --- /dev/null +++ b/2025R2/Discovery-quick-reference-for-tool-usage-25-R2/docfx.json @@ -0,0 +1,13 @@ +{ + "build": { + "globalMetadata": { + "title": "Discovery quick reference for tool usage 2025 R2", + "summary": "", + "version": "2025 R2", + "product": "Discovery", + "programming language": "C#", + "product collection": "3D Design", + "physics": "3D Design" + } + } +} \ No newline at end of file diff --git a/2025R2/Discovery-quick-reference-for-tool-usage-25-R2/introduction.md b/2025R2/Discovery-quick-reference-for-tool-usage-25-R2/introduction.md new file mode 100644 index 0000000000..e7f8edb037 --- /dev/null +++ b/2025R2/Discovery-quick-reference-for-tool-usage-25-R2/introduction.md @@ -0,0 +1,3 @@ +# Introduction + +This document provides guidelines for tool usage and workflows in Discovery. diff --git a/2025R2/Discovery-quick-reference-for-tool-usage-25-R2/reference.md b/2025R2/Discovery-quick-reference-for-tool-usage-25-R2/reference.md new file mode 100644 index 0000000000..3c1a97e696 --- /dev/null +++ b/2025R2/Discovery-quick-reference-for-tool-usage-25-R2/reference.md @@ -0,0 +1,402 @@ +# Quick reference for tool usage + +These guidelines provide comprehensive coverage of several key topics to ensure a clear and thorough understanding of the processes involved. The topics addressed include: + + +- [About Tools](#about-tools) +- [Selection Paradigms for Tools](#selection-paradigms-for-tools) +- [Tool Workflows](#tool-workflows) + - [Immediate Action](#immediate-action) + - [Interactive](#interactive) + - [Auto Complete](#auto-complete) + - [Manual Complete](#manual-complete) + - [Find and Fix](#find-and-fix) + - [Review](#review) + - [Tools With Sub-Tools](#tools-with-sub-tools) + - [Wizard](#wizard) + - [Modify Properties](#modify-properties) + +## About Tools + +Tools are designed for performing simple actions. Refrain from combining different functionality inside a single tool unless the combination helps significantly with workflow optimization or not doing so would cause unwelcome repetition of steps/selections. + +An example of this paradigm is seen in the 3D modeling tools for splitting geometry. Different flavors of a Split tool exist because they are respectively optimized for the type of split and for the selection of one or many specific object types. + +- The Combine tool intersects or merges bodies. +- The Split Body tool splits a body using faces or planes. +- The Split tool splits a face using selected points on the face or using another face. + +The reason for this is to minimize the user choices (and attendant complexity) by using three tools instead of creating one huge splitting tool that could operate on anything with anything. + +## Selection Paradigms for Tools + +Two selection paradigms exist for tools: + +- Object-action: The user selects objects and then activates the tool. + - Objects in the current selection that are incompatible with the tool are rejected. +- Action-object: The user activates the tool and then makes selections. + - Object filtering within the tool ignores irrelevant objects in the current selection. + - The tool can adapt to the current selection to configure available options. + +In certain scenarios users may set up modifiers (buttons called tool guides or Alt+select) before selecting objects. + +When possible, tools should support both paradigms to give users freedom to work in whatever way suits them best. + +## Tool Workflows + +### Immediate Action + +**Description** + +An action is applied immediately to a selected object without any user interaction or options needing to be set. + +**When to Use** + +- When the user selects one object and applies a command. + - Selecting more than one object is permitted, but other workflows may be more appropriate in that case. +- Used for very simple and straightforward operations. + +**Selection** + +- Object-action +- No modifiers + +**Preview** + +Not required + +**Steps** + +1. Select an object in graphics or tree. +2. Activate the tool. + +**Examples** + +- Fill +- Plane +- Axis + +### Interactive + +**Description** + +The user clicks and drags an object to make a change, and the geometry is constantly updated as the user interacts with the object. + +**When to Use** + +When the user can drag an object to make a change. + +**Selection** + +- Object-action +- Action-object + - Filter to only allow selection of objects relevant to the active tool. +- Use modifiers (tool guide or Alt+select) for secondary object selection. + +**Preview** + +Real-time preview is required. + +**Steps** + +1. Activate the tool. +2. Select one or more objects as the primary selection. +3. (Optional) Use a tool guide or hold Alt to select secondary objects. + - Secondary objects can control direction, or they anchor the operation, or otherwise modify the base operation of the tool. +4. Select options in an Options panel. Drag the primary objects to make the change (or enter a specific value). + - Changes are seen in real-time preview. +5. Complete when the user finishes dragging and releases the mouse button. + +**Examples** + +- Pull +- Move +- Sketch tools + +### Auto Complete + +**Description** + +The user does not need to click a “complete” button (i.e., a check mark button). Undo must be supported so that the user can easily recover if they change their mind or make a mistake. + +There are two types of Auto Complete workflows: + +- Selection-based: Tool completes when all required selections have been made. +- Value-based: Tool completes when the user has entered a valid value. + +**When to Use** + +- When the change does not require dragging. +- It can be determined that the operation should be applied based on the user’s selection. +- The object to be created is defined by a location reference and one or more input values. + - For multiple inputs only one valid input value is needed to create the object. + - Additional inputs are given reasonable defaults. + - Allows for quickly creating multiple similar objects by simply selecting locations. + +**Selection** + +- Object-action +- Action-object + - Filter to only allow selection of objects relevant to the active tool. + +**Preview** + +Use preview when appropriate to display object properties, such as direction for vector objects. + +**Steps**: Selection-Based + +1. Activate the tool. +2. Select options in the Options panel, if relevant. +3. Select the objects required to perform the operation. +4. The change is automatically applied as soon as the correct objects are selected. + +**Steps**: Value-Based + +1. Activate the tool in the ribbon or halo. +2. Select an object to create. +3. Select a location reference. +4. Required input fields for the selected object appear in the HUD. +5. Type in a value. +6. Press Enter or click in empty space to create the object. + +**Examples** + +- Selection-based: + + - Mirror + - Combine + +- Value-based: + + - Force (Structural) + - Flow (Fluid Flow) + +### Manual Complete + +**Description** + +The user decides when to complete the operation by clicking a “complete” button (i.e., a check mark button). Some tools only need to be manually completed the first time an object is created. Once the object is created, subsequent changes to the object properties are automatically saved/committed. + +**When to Use** + +- When an indeterminate number of selections are needed. +- When the command does not require dragging. +- When there are inputs with preview and the user needs to confirm the inputs. + +**Selection** + +- Object-action +- Action-object + - Filter to only allow selection of objects relevant to the active tool. +- Use modifiers (tool guide or Alt+select) for secondary object selection. + +**Preview** + +Use preview when appropriate for user inputs. +- For example, preview pattern members based on number and spacing inputs. + +**Steps** + +1. Activate the tool. +2. Select objects to perform the action on. +3. Use a tool guide or hold Alt to select secondary objects. + - If needed to control direction or otherwise anchor the operation. +4. Select options in the Options panel (or using on-screen arrows or widgets) if relevant. +5. Specify any relevant inputs. + - Use preview if available to check if inputs are correct. +7. Click the “complete” button (or tool guide). + - Affected areas of the model are highlighted temporarily to show the change whenever possible. + +**Examples** + +- Midsurface +- Linear Pattern + +### Find and Fix + +**Description** + +Automatically searches for and gathers all objects based on one or more criteria (e.g., a tolerance value). The search is run immediately on invocation and the results are shown to the user. + +The user then chooses to: + +- Fix all areas found. +- Fix selected areas. +- Ignore selected areas. + +**When to Use** + +- Use to detect and repair problems. +- Use in any situation where the goal is to find objects and perform an action on them. + +**Selection** + +- Action-object + - Filter to only allow selection of objects relevant to the active tool. +- Box-selection available for fixing/ignoring areas. + +**Preview** + +Red orbs are placed on detected areas too small to simply highlight in red. + +**Steps** + +1. Activate the tool. +2. Detected “problem” areas are highlighted with red orbs. +3. (Optional) User selects areas to ignore. +4. Apply a “fix” as the user selects detected problem area(s). +5. (Optional) User clicks “complete” button to fix all areas. + +**Examples** + +- Split +- Edges +- Extra Edges +- Small Faces + +### Review + +**Description** + +Allows users to review information graphically in the model context and manage relationships that can be references for object creation. + +For example, face-to-face contacts may be used as locations for objects such as: + +- Bonded Contacts +- Hinges +- Welds + +Eliminates the need for relying on a long list that makes users go back and forth between the list and the model. + +**When to Use** + +- When there are, or could be, many similar objects that reference geometric entities in the model. +- When the user has a need to review and perform actions on similar objects. + +**Selection** + +- Action-object + - Filter to only allow selection of objects relevant to the active tool. + +**Preview** + +- Highlighting should be used to graphically describe the model references. +- Transparency and object dimming should be used to reduce clutter and focus the user on only references related to selected objects. + +**Steps** + +1. Activate the tool. +2. Detected areas of attention are highlighted visually. +3. Select one or more objects to indicate areas where the review will focus. +4. Click on buttons provided to perform actions on the specified areas. +5. Optionally adjust the settings in the Options panel to assist with further workflow optimization or access advanced settings. +6. If needed, reduce the scope of detection. + - Use tool guides to select primary and secondary bodies/faces. + - Only areas pertaining to the selected bodies/faces are highlighted. + +**Examples** + +Contact Review + +### Tools With Sub-Tools + +**Description** + +This is not so much a workflow as it is an organizational arrangement. There is no difference (at the command level) between a ribbon group of tools and a HUD tool group: Tools with Sub-Tools just provides a convenient consolidation of tools that have similar workflows and inputs and/or options. + +**When to Use** + +When several ribbon tools have similar + +- Purpose (e.g., structural boundary conditions) +- Workflow +- Inputs and/or options + +**Selection** + +- Action-object + - Filter to only allow selection of objects relevant to the active tool. +- Object-action +- Use modifiers (tool guide or Alt+select) for secondary object selection. + +**Preview** + +Use preview as appropriate to show model changes or object creation. + +**Steps** + +1. Activate the higher-level tool. +2. A default sub-tool is automatically activated. +3. Complete the tool operation once the user provides a set of required inputs such as location reference, value input, etc. + +**Examples** + +- Structural +- Fluid Flow +- Solid Thermal + +### Wizard + +**Description** + +A single tool walks users through a sequence of steps to complete a task. Often this involves simpler versions of more complex tools that make assumptions about tool inputs or about characteristics of the tool’s inputs/outputs. + +**When to Use** + +- When you want to offer users a streamlined workflow for a task that involves several steps. + - Assumptions and default values streamline the task. + +**Selection** + +- Action-object to start the wizard. +- Each step should filter selection to only objects relevant to the current step. + +**Preview** + +As needed per step to show model changes or object creation. + +**Steps** + +1. Activate the wizard. +2. The first step tool guide is activated. +3. Make selections for the first step. +4. Auto advance to the next step tool guide when required selection(s) are made. +5. When all steps have been completed, the wizard auto-completes. + +**Examples** + +- Internal Flow +- External Flow + + +### Modify Properties + +**Description** + +Upon selecting an object, the select tool displays the object’s properties for modification. + +**When to Use** + +- When users need to modify properties of objects such as + - Blocks in a diagram + - Objects in a geometry model + +**Selection** + + Object-action + +**Preview** + +As needed based on the property. + +**Steps** + +Select an object. The Select tool HUD displays the object’s properties. Use tool guides and options to modify the object (e.g., edit its inputs or change its material). + +**Examples** + +Modify properties by selecting one of the following objects: + +- Plane +- Midsurface +- Offset face (e.g., face of a shelled body) diff --git a/2025R2/Discovery-quick-reference-for-tool-usage-25-R2/toc.yml b/2025R2/Discovery-quick-reference-for-tool-usage-25-R2/toc.yml new file mode 100644 index 0000000000..80b9347d76 --- /dev/null +++ b/2025R2/Discovery-quick-reference-for-tool-usage-25-R2/toc.yml @@ -0,0 +1,6 @@ +- name: Introduction + href: introduction.md +- name: Quick reference for tool usage + href: reference.md +- name: Changelog + href: changelog.md \ No newline at end of file diff --git a/2025R2/Discovery-style-guide-25-r2/changelog.md b/2025R2/Discovery-style-guide-25-r2/changelog.md new file mode 100644 index 0000000000..10aa41fefb --- /dev/null +++ b/2025R2/Discovery-style-guide-25-r2/changelog.md @@ -0,0 +1,5 @@ +# Changelog + +## Version 2025 R2 + +- Discovery changes for 2025 R2. diff --git a/2025R2/Discovery-style-guide-25-r2/colors.md b/2025R2/Discovery-style-guide-25-r2/colors.md new file mode 100644 index 0000000000..533b89a00c --- /dev/null +++ b/2025R2/Discovery-style-guide-25-r2/colors.md @@ -0,0 +1,164 @@ +# Colors + +## Color palettes and their usage + +Details for all color palettes (including Hex and RGB info) are included in a separate Excel file ([Ansys Design Language Color Palettes](https://github.com/ansys/DevRelPublic/raw/main/Downloads/Discovery/2024R2/Ansys%20Design%20Language%20Color%20Palettes%20-%20Discovery.xlsx)). Guidelines for using the palettes are as follows: + +| **Application** | **Palette usage** | +|----------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| UI elements such as buttons panel backgrounds indicators of status and state NOT icons or cursors | Main UI Control Colors per Theme All UI Control Colors The “Main UI Control Colors per Theme” palette includes the main colors that are used in each theme and how they are used (see also Figures 1-4 below). If you need more colors, choose from the “All UI Control Colors” palette. For guidance on colors with specific meanings, see the semantic colors in Figure 5 below. | +| Icons and cursors | Theme-Dependent Icon Colors Additional Colors Use the “Theme-Dependent Icon Colors” palette for icon colors that should change with the theme, as described in [Theme-Dependent Coloring](#theme-dependent-coloring) If you need more colors, choose them from the “Additional Colors” palette. | +| Predefined colors the user can assign | User-Assignable Colors Additional Colors Use the “User-Assignable Colors” palette as the predefined colors in the color picker that appears in a product when a user has the option to choose a color explicitly (e.g., for a chart line). See [Assignable Colors](#_Assignable_Colors) for details. There is a vivid palette and a muted palette. If you need to include more colors for the user to choose from, use colors from the “Additional Colors” palette. | +| Colormaps and legends for data visualization | 3D Data Visualization Colors Default: Turbo, Alternate: Cool-warm | + +![](media/6aa7893d6f921ba3ebc73abe54fbb2cd.png) + +
Figure 1: Main Colors Used in the Dark Theme
+ +![](media/f39f861bc210d3f49b70f4112c94ab01.png) + +
Figure 2: Main Colors Used in the Light Theme
+ +![](media/bab162d004dcbfa748e2b2dab56708eb.png) + +
Figure 3: Semantic Colors Used in All Themes
+ +![](media/de7c121e5610da7df57d11f9933d1ee1.png) + +
Figure 4: Example of Color Usage in a Product UI (Dark Theme)
+ +![](media/ecc796e2c7281a7eb54f737058d5aea8.png) + +
Figure 5: Example of Color Usage in a Product UI (Light Theme)
+ +## Font colors + +- For the main UI font colors, see Figures 1 and 2 in [Color palettes and their usage](#color-palettes-and-their-usage). +- For console/scripting text, use the corresponding colors in the dark and light themes of Microsoft Visual Studio. +- For overlay help text, see Figures 1 and 4 in [Color palettes and their usage](#color-palettes-and-their-usage). + +## Icon and cursor colors + +### Icon colors + +Some of the colors used for icons are constant across themes, while others [change between themes](#theme-dependent-coloring) to better match the altered palette. Certain colors used in the icons have assigned meanings, which are discussed in detail in the [Icons section](#themes-and-icon-colors). See [Color palettes and their usage](#color-palettes-and-their-usage) for details about which colors are to be used in icons. + +![](media/2207d4cba54a3aa3cf51261e68c6654d.png) + +
Figure 6: Shades of Green and White as Examples of Icon Colors.
+ +### Cursor colors + +The cursor must always be visible, no matter the color of the UI element below it. Unlike stationary icons, cursors move about the screen and are designed to maintain good contrast against any possible background. + +In most cases, the cursor is white with a black outline. The white stands out strongly on dark backgrounds, while the black outline ensures that the cursor will remain visible in a light setting. In certain situations where there’s a need to distinguish between a pair of tools that are similar in functionality and use the same shape cursor (e.g., Pull and Move tools for geometry modeling), you can reverse the cursor color treatment, so the fill color is black, and the outline is white. This change to the cursor reminds the user of the tool they are using as they make their selection. + +Cursors can also have a thin outline of a static color that maintains the cursor’s shape against varying backgrounds or UI elements. The outline alone might not be visible against backgrounds of similar color, but the infill of a contrasting color makes the cursor visible. + +![Shape Description automatically generated](media/a825507d518f8a74b8946943909cc41a.png) + +
Figure 7: Cursor Outline Ensures Visibility on Different Backgrounds
+ +### Theme-dependent coloring + +An icon may need to use different colors based on the selected theme. To ensure that the icons are rendered appropriately in all themes, the designer must create a separate version of the icon for each theme. Based on the active theme, the appropriate version of the icon is used. + +The following example shows how the light and dark versions of an icon would look: + +![A picture containing application Description automatically generated](media/c862306d16b686dc308e84b077b4ae26.jpeg) + +
Figure 8: Example of Theme-Dependent Coloring in an Icon
+ +The theme-dependent colors for icons are shown below. + +![Graphical user interface, application Description automatically generated](media/9a75965ecd610c57cd32669e94be8628.jpeg) + +
Figure 9: Theme-Dependent Colors for Icons
+ +## Status colors + +These are colors that have been assigned meanings corresponding to the type of information being conveyed in a message or other UI element. As specified in the Main UI Control Colors per Theme palette described in [Color palettes and their usage](#color-palettes-and-their-usage): + +- blue for information +- green for good +- red for errors +- yellow for warnings + +Note that these colors reinforce a message, but they should not be the only cue conveying information since a portion of the population has some form of color vision deficiency. + +![Icon Description automatically generated](media/014f07a3587f599480b221185fb73bf0.png) + +
Figure 10: Red for Errors, Yellow for Warnings, Blue for Information
+ +## Background colors + +Background colors vary by theme (see [Color palettes and their usage](#color-palettes-and-their-usage)), and they may include transparency or gradient effects. They cover most of the UI and strongly influence the rest of the palette, as other elements must adjust to maintain proper contrast against the theme’s base colors. + +![](media/a295e07d070b846ac715fc30dee0b8ff.png) + +
Figure 11: Background Colors are Theme-Dependent
+ +## Assignable colors + +In most products, there are situations where the user can choose colors as part of their workflow. Examples include the colors of chart lines representing different data series and the colors of the bodies of a 3D geometric model. There are two color palettes offered for these situations: the user can choose from a vivid color palette or a muted color palette. See [Color palettes and their usage](#color-palettes-and-their-usage) for details. + +*![Chart, line chart Description automatically generated](media/5136fb65515bcab1baa1a912dc7af2fe.png)* + +
Figure 12: Chart Lines with Colors Assigned by the User
+ +Note that 3D geometry models also have colors assigned to their bodies based on their defined materials; the user can choose whether to view the material-based colors or the user-specified colors. In either case, colors on the 3D model change to indicate what the user has selected, as indicated in the Graphical Selection row of Figure 5. + +![](media/94f43b36a7f00ed6718bc7d12ab65cb4.png) + +
Figure 13: Body Colors Assigned by the User
+ +![](media/2ec880c77f6ee1a2d7513b5e62a76921.png) + +
Figure 14: Body Colors Based on Assigned Materials
+ +## 3D data visualization colors + +Colormaps are used to graphically represent numerical data, such as simulation results displayed using streamlines, contours, or vectors. Alternate colormap options are provided for users with different preferences and needs. These colormaps can be visualized as continuous or discrete rendering (see images below). + +Default colormap: Turbo +Alternate colormap: Cool-warm + +![A screenshot of a color chart Description automatically generated](media/39f5a04a07792db9bf8aa52aec5278d7.png) +
Figure 15: Default and alternate colormaps (see the Color Palettes Excel File for RGB values)
+ +![A computer generated image of a mechanical engine Description automatically generated](media/4b4f0ce0983159ce1a484c6647432700.png) + +
Figure 16: Turbo colormap: continuous rendering example
+ +![A computer screen shot of a machine Description automatically generated](media/a8078e01b621f9d735aa7d46b931e45e.png) + +
Figure 17: Cool-warm colormap: continuous rendering example
+ +![A computer generated image of a machine Description automatically generated](media/3d3d02ff83f3f0827340abb5dce28eee.png) + +
Figure 18: Turbo colormap: discrete rendering example
+ +![A computer screen shot of a machine Description automatically generated](media/7b6504754bc8a6cf7d1c03381b0c4800.png) + +
Figure 19: Cool-warm colormap: discrete rendering example
+ +## Lighting and gradients + +The shading of 3D icons and other 3D elements in the UI (including a 3D model, if relevant) are dictated by an imaginary light source placed at the top left. This position is based on the [historical convention](https://www.frontiersin.org/articles/10.3389/fpsyg.2018.00454/full) followed in Western art and [studies](https://pubmed.ncbi.nlm.nih.gov/15729910/) in human perception. + +The highlights are cast on the top and left-side features of the icons and shadows are cast on the bottom and right-side features of the icons. It is imperative to be consistent with the shading of 3D elements; otherwise, the user will be confused by the inconsistent visual perception of the scene. + +*![A picture containing icon Description automatically generated](media/74b6b0199c3813675c0ffb6dc1f505b8.png)* + +
Figure 20: Effect of Light Source on Highlights and Shadows
+ +*![A picture containing graphical user interface Description automatically generated](media/d110fbd34d81e58cc87561615f30f123.png)* + +
Figure 21: Consistent Highlight and Shadows Across a Group of Icons
+ +In a 3D model-based application, slight gradient background coloring should be used for the scene in order to provide the necessary depth for an immersive experience. In other types of applications, a flat background color that contrasts well with the foreground UI elements should be used. (See [Color palettes and their usage](#color-palettes-and-their-usage) for gradient and flat background colors.) + +![A picture containing text, electronics Description automatically generated](media/f1c477790250560acd6cb5603e05ffa9.png) + +
Figure 22: Gradient Background for 3D Model-Based Application
+ diff --git a/2025R2/Discovery-style-guide-25-r2/docfx.json b/2025R2/Discovery-style-guide-25-r2/docfx.json new file mode 100644 index 0000000000..6cfec2ff80 --- /dev/null +++ b/2025R2/Discovery-style-guide-25-r2/docfx.json @@ -0,0 +1,13 @@ +{ + "build": { + "globalMetadata": { + "title": "Discovery style guide 2025 R2", + "summary": "", + "version": "2025 R2", + "product": "Discovery", + "programming language": "C#", + "product collection": "3D Design", + "physics": "3D Design" + } + } +} \ No newline at end of file diff --git a/2025R2/Discovery-style-guide-25-r2/icons.md b/2025R2/Discovery-style-guide-25-r2/icons.md new file mode 100644 index 0000000000..77b5496fb3 --- /dev/null +++ b/2025R2/Discovery-style-guide-25-r2/icons.md @@ -0,0 +1,188 @@ +# Icons + +Icons are a powerful visual communication medium in the UI: using graphical elements, they convey the meaning of a button and its function; and the active and changed status of the application. Icons also contribute to conservation of screen real estate, making sure that every pixel counts. They also help users visually process concepts faster by making them recognize them, rather than recall. + +[Icon guideline cheat sheet](#cheat-sheet) + +## For Designers: Creating icons + +We approach icon design by understanding why the user will look for an icon in the application, what it should represent, where it will display in the interface, and how it will render in different themes. Through our icons, we aim for consistency, legibility, and clarity. + +Inspiration for icons may come from existing symbols and standards in simulation and physics software, mobile applications, games, and visual communication in the real world. + +The process of icon design involves stakeholders at every stage: + +1. Brainstorm ideas and create drafts as physical and/or digital sketches. +2. Select the best candidates and create mockups in different sizes and locations within the user interface. This helps us verify and validate our designs, in-context. +3. Use the in-context mockup to obtain feedback and iterate on the design until it satisfies stakeholder requirements. +4. Translate the final design to a vector-code format or image resource to be consumed by the product. + +While the following rules and guidelines cater to most icons, thoughtful exceptions are allowed if they solve unique problems in visual communication. + +To keep icons consistent, clear, flexible, and easily scalable, follow these rules, guidelines, and tips. + +### Rules, guidelines, and tips + +#### Rules + +- Icon content preparation + - All content must be within a square canvas of side 500px. + - The outer stroke must be 12px wide and the internal stroke 10px wide. + - Contents should touch at least two opposite edges of the bounding square canvas. + - Edge to edge allows the icons to be on the same scale and reduce variability in terms of different padding +- Shape and color + - The final icon must consist of only closed vector paths and shapes. + - A closed path is continuous and has no beginning or end; for example, a circle is a closed path. In contrast, an open path has a beginning point that is not the same as the endpoint; for example, a straight line is an open path. + - It is always advisable to close your paths when creating shapes so there will be no problems with the fill being misinterpreted as you export the icons to other applications. + - [Learn more](https://graphicdesign.stackexchange.com/questions/86468/open-path-outlines-and-closed-path-outlines-adobe-illustrator) about this topic. + - Colors used must be from the appropriate [palette](#_Color_Palettes_1). + - Icons must have a [semi-flat](#semi-flat-styling) (2.5D) look; use gradients only as appropriate (for example, to show result contours or curved surfaces). + - [Symbols](#using-symbology) must be used consistently across icons. + +#### Guidelines + +- Always design icons by keeping in mind the context of use, including whether it is important for an icon’s colors to be the same across themes (see [Themes and Icon Colors](#themes-and-icon-colors)). +- Use the minimum number of colors needed to get the meaning across. +- Constrain yourself to the smallest [size](#sizes) the icon will show up in the UI. It is always easy to scale up rather than down. +- Be mindful of negative space and overlap. +- Use a [design grid](#using-a-grid) for consistent sizing. +- Use [glow](#adding-glow) to enhance visibility against dark backgrounds. + +#### Tips + +- Try out the icons with exact/intended colors over samples of UI at the original button size using [pixel previewing](#pixel-pushing) in your design tool (e.g., the Pixel Preview feature in Adobe Illustrator). +- Save different versions and iterations of the icon as changes occur. + +### Additional information + +#### Semi-flat styling + +Icons have a semi-flat look, which means that while lighting and shadows make them appear somewhat 3D, they do not follow the rules of rendering like a real physical object. So, multiple elements in these icons do not cast shadows upon each other. The styling of these icons is inspired from [marker rendering](https://www.youtube.com/watch?v=MCIBxTDJIp0&t=1s) and painting techniques. + +![image](media/e0c90abc198943d5098f0f8fabb15132.png) + +Figure 30: Examples Showing Effect of Semi-Flat Styling on Multiple Elements + +#### Sizes + +These are the sizes to use for icons in a product UI: + +General sizes: **8px, 16px, 24px, 28px, 32px, 48px, 64px, 96px** + +Cursor sizes: **12px, 24px, 32px** + +#### Using a grid + +We use a grid (provided in the separate file named Grid for icon design.svg) for balance and visibility. But this is only to be used as a starting reference, and not as a strict outline for placing shapes within the square artboard. + +Deviating from the grid may be necessary for clarity and context. Sometimes the aesthetics override the structure of the grid: the contents of the icon itself might not fit properly with the grid. The interplay of different elements in the icon is also important, as in the example below where the change in thickness of an element “breaks” the grid. + +![Shape, polygon Description automatically generated](media/cc6f0519be993f730b0d16a12c2d0325.png) + +Figure 31: Example of Deviating from the Grid to Improve an Icon + +#### Themes and icon colors + +Theme-specific icons have some, or all, shapes that use different colors based on theme. (See [Theme-dependent coloring](./colors.md#theme-dependent-coloring) for details.) There are six theme-dependent colors (refer to the [cheat sheet](#cheat-sheet) for more information) to be used. + +![Shape, icon, rectangle Description automatically generated](media/e168d6163cee39e9e11d0d2ea60a8d73.png) + +Figure 32: Theme-Specific Versions of an Icon Shown in Dark Theme (Left) and Light Theme (Right) + +Static icons have shapes that must not change color based on theme. These icons must look consistent across the themes, just like branding icons. Static coloring is appropriate when the colors have some special significance in the product. In the example below, the magenta and orange colors are associated with different simulation modes. + +![Icon Description automatically generated](media/41a4d54b8e638a57db27433a327f8edd.png) + +Figure 33: Same Static Icon Shown in Dark Theme (Left) and Light Theme (Right) + +#### Adding glow + +Icons, particularly of small size, might have outlines with decreased visibility against dark backgrounds. + +To make the icon outline legible against the dark background, add an additional offset outline of white (\#FFFFFF) set at 75% opacity. This renders a small “glow” around the icon when placed on a dark background, creating a visual boundary between its outline and the similar-colored background. The glow is not noticeable in the light background. + +![A picture containing text, tape Description automatically generated](media/c3e51e29ba21ad281d5422dd6d26a594.png) + +Figure 34: Pixel-Level View of Adding Glow on Dark and Light Backgrounds + +![Graphical user interface Description automatically generated](media/643fb76f6f2745536a1abc828ac2517a.png) + +Figure 35: Dark Background: Icon with Glow Has a Visible Outline + +![Graphical user interface, application Description automatically generated](media/e731574edda96ef990aab44365628036.png) + +Figure 36: Light Background: Glow is Not Noticeable + +#### Pixel pushing + +Contents of some icons might not render correctly at a small size. This is usually caused by the individual pixels of the icon shapes not aligning to the display’s pixel grid. + +To address this problem, tweak the icon’s vector shapes while also checking how they render as pixels within a small size canvas (usually 16px). + +If the icon will be used in the UI only in one specific size, the design should primarily address that size, but it is good practice to design for all the possible sizes. The pixel pushing is most useful for small size icons; for larger size icons, this step is recommended but not required. + +Taking the example of a 12px icon, we can see that the one on the right has sharper details. + +![image](media/e939535659a00131f5d0df583dbdd01f.png) + +Figure 37: Icons without Pixel Pushing (Left) and with Pixel Pushing (Right) + +Looking at these icons closely, notice that the elements are different. The icon on the right renders more crisply in smaller sizes because the colors are not partially allotted to a pixel (which leads to blur and fuzziness). + +![image](media/4234c1b17de7ceffd2513f82448b4609.png) + +Figure 38: Zoomed-In View of Icons Shown Above + +![image](media/9f20b3422dfcfdac1a83b6a759cf2221.png) + +Figure 39: Pixel Grid Overlaid on Icons + +#### Using symbology + +To make specific actions intuitive, use a standard set of symbols and graphic elements across icons. These symbols should convey functional or domain-specific engineering simulation concepts, and they are typically held constant within and across icon category groupings. + +Examples: + +- Plus (+) symbols indicate a positive change in the application, like creating or adding something to a model or a physics condition. +- The "X" symbol is often colored red to indicate negative changes such as canceling a process or removing a component. +- Asterisks (\*) are often colored orange to indicate a reference or establish a relationship between processes or components in the application. + +Symbols can be placed on a scale that ranges from completely abstract to the exact representation of the idea itself. Examples are shown below. + +![image](media/6022f39e6ab76ffdb5a9e61202fd91ad.png) + +Figure 40: Custom Abstract Symbols + +![image](media/161eefb6faf0609a48cb91f260272bb1.png) + +Figure 41: Universally Understood Abstract Symbols + +![image](media/df7096d5a46b4c997f04129c8e22fd17.png)![image](media/0bc80168340a7f8e35f86747fdd30b11.png)![Logo Description automatically generated](media/77c13f0b6d37c230d6878a8c90d79d74.png) + +Figure 42: Brand Logos + +![image](media/b2a3551fe2fa2a55e31ba727460fc076.png) + +Figure 43: Representational Symbols of Objects + +![image](media/cf9bb71088c0b35345af0cf006a6032b.png)![image](media/47f9712752405acfb0b5df3997051601.png) + +Figure 44: Combining Symbols to Generate Meaning + +![image](media/e62bb3aeae6d3876a07789f14a4da670.png) + +Figure 45: Representations of Objects + +## Cheat sheet + +![Graphical user interface, application Description automatically generated](media/7929594f76c86c7d74118623a2fbc6ce.jpeg) + +Figure 46: Cheat Sheet for Icon Design + +## Revision history + +| **​Version** | **​Date** | **​Description of changes** | +|--------------|--------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| ​23R2 | ​July 2023 | ​Initial version | +| ​24R1 | ​January 2024 | Updated Figures 1-7 and Excel spreadsheet to reflect changes to color palettes in [Color palettes and their usage](./colors.md#color-palettes-and-their-usage) Moved and updated information about [Font colors](#font-colors) Updated the typefaces used by Discovery in [Typefaces](#typefaces) Clarified usage of small caps font treatment in [Small caps](#small-caps), and added guidance for other [Font treatments](#font-treatments) Updated information about [Main UI fonts](#main-ui-fonts) and [Help overlay fonts](#help-overlay-fonts) Reorganized [Capitalization](#capitalization) section, and updated to reflect changes to small caps usage | +| 24R2 | July 2024 | New row added in [Color palettes and their usage](./colors.md#color-palettes-and-their-usage) New section added for [3D data visualization colors](#3d-data-visualization-colors) | diff --git a/2025R2/Discovery-style-guide-25-r2/introduction.md b/2025R2/Discovery-style-guide-25-r2/introduction.md new file mode 100644 index 0000000000..0f55b8309a --- /dev/null +++ b/2025R2/Discovery-style-guide-25-r2/introduction.md @@ -0,0 +1,10 @@ +# Introduction + +This document provides guidelines for: + +- [Colors](colors.md) +- [Themes](themes.md) +- [Typography](typography.md) +- [Icons](icons.md) + +See the separate [Quick Reference for Tool Usage](https://developer.ansys.com/docs/discovery-quick-reference-for-tool-usage-2024-r2/introduction.md) for guidance on tool workflows and behavior. \ No newline at end of file diff --git a/2025R2/Discovery-style-guide-25-r2/media/014f07a3587f599480b221185fb73bf0.png b/2025R2/Discovery-style-guide-25-r2/media/014f07a3587f599480b221185fb73bf0.png new file mode 100644 index 0000000000..2c09dec6f5 Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/014f07a3587f599480b221185fb73bf0.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/0bc80168340a7f8e35f86747fdd30b11.png b/2025R2/Discovery-style-guide-25-r2/media/0bc80168340a7f8e35f86747fdd30b11.png new file mode 100644 index 0000000000..35251f9fba Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/0bc80168340a7f8e35f86747fdd30b11.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/161eefb6faf0609a48cb91f260272bb1.png b/2025R2/Discovery-style-guide-25-r2/media/161eefb6faf0609a48cb91f260272bb1.png new file mode 100644 index 0000000000..fc08450a79 Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/161eefb6faf0609a48cb91f260272bb1.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/1a8e16100bbd2f6d299675422101f81f.png b/2025R2/Discovery-style-guide-25-r2/media/1a8e16100bbd2f6d299675422101f81f.png new file mode 100644 index 0000000000..b5a99c43ae Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/1a8e16100bbd2f6d299675422101f81f.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/2207d4cba54a3aa3cf51261e68c6654d.png b/2025R2/Discovery-style-guide-25-r2/media/2207d4cba54a3aa3cf51261e68c6654d.png new file mode 100644 index 0000000000..b6ea488dda Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/2207d4cba54a3aa3cf51261e68c6654d.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/2ec880c77f6ee1a2d7513b5e62a76921.png b/2025R2/Discovery-style-guide-25-r2/media/2ec880c77f6ee1a2d7513b5e62a76921.png new file mode 100644 index 0000000000..d834acdec9 Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/2ec880c77f6ee1a2d7513b5e62a76921.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/39f5a04a07792db9bf8aa52aec5278d7.png b/2025R2/Discovery-style-guide-25-r2/media/39f5a04a07792db9bf8aa52aec5278d7.png new file mode 100644 index 0000000000..6a4efb03b6 Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/39f5a04a07792db9bf8aa52aec5278d7.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/3d3d02ff83f3f0827340abb5dce28eee.png b/2025R2/Discovery-style-guide-25-r2/media/3d3d02ff83f3f0827340abb5dce28eee.png new file mode 100644 index 0000000000..f504bf869e Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/3d3d02ff83f3f0827340abb5dce28eee.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/3f7a8b7a6774b7b5447e5a44a91f3ad2.png b/2025R2/Discovery-style-guide-25-r2/media/3f7a8b7a6774b7b5447e5a44a91f3ad2.png new file mode 100644 index 0000000000..075a258196 Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/3f7a8b7a6774b7b5447e5a44a91f3ad2.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/41a4d54b8e638a57db27433a327f8edd.png b/2025R2/Discovery-style-guide-25-r2/media/41a4d54b8e638a57db27433a327f8edd.png new file mode 100644 index 0000000000..a378286367 Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/41a4d54b8e638a57db27433a327f8edd.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/4234c1b17de7ceffd2513f82448b4609.png b/2025R2/Discovery-style-guide-25-r2/media/4234c1b17de7ceffd2513f82448b4609.png new file mode 100644 index 0000000000..fe59923023 Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/4234c1b17de7ceffd2513f82448b4609.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/47f9712752405acfb0b5df3997051601.png b/2025R2/Discovery-style-guide-25-r2/media/47f9712752405acfb0b5df3997051601.png new file mode 100644 index 0000000000..f4b2ffceb9 Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/47f9712752405acfb0b5df3997051601.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/4b4f0ce0983159ce1a484c6647432700.png b/2025R2/Discovery-style-guide-25-r2/media/4b4f0ce0983159ce1a484c6647432700.png new file mode 100644 index 0000000000..30930e94cd Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/4b4f0ce0983159ce1a484c6647432700.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/5136fb65515bcab1baa1a912dc7af2fe.png b/2025R2/Discovery-style-guide-25-r2/media/5136fb65515bcab1baa1a912dc7af2fe.png new file mode 100644 index 0000000000..be330ed8b7 Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/5136fb65515bcab1baa1a912dc7af2fe.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/5f8edc9a5ef72144018abe6bd9ba6cde.png b/2025R2/Discovery-style-guide-25-r2/media/5f8edc9a5ef72144018abe6bd9ba6cde.png new file mode 100644 index 0000000000..6e68a2524f Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/5f8edc9a5ef72144018abe6bd9ba6cde.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/6022f39e6ab76ffdb5a9e61202fd91ad.png b/2025R2/Discovery-style-guide-25-r2/media/6022f39e6ab76ffdb5a9e61202fd91ad.png new file mode 100644 index 0000000000..95785d9f07 Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/6022f39e6ab76ffdb5a9e61202fd91ad.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/613487a93e056ec6dfc5d6805022f8bd.png b/2025R2/Discovery-style-guide-25-r2/media/613487a93e056ec6dfc5d6805022f8bd.png new file mode 100644 index 0000000000..bc6585514e Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/613487a93e056ec6dfc5d6805022f8bd.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/643fb76f6f2745536a1abc828ac2517a.png b/2025R2/Discovery-style-guide-25-r2/media/643fb76f6f2745536a1abc828ac2517a.png new file mode 100644 index 0000000000..5a2d4a1ae6 Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/643fb76f6f2745536a1abc828ac2517a.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/67fac04e713c938d2a8b99f1948f789a.png b/2025R2/Discovery-style-guide-25-r2/media/67fac04e713c938d2a8b99f1948f789a.png new file mode 100644 index 0000000000..21d23a503a Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/67fac04e713c938d2a8b99f1948f789a.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/6aa7893d6f921ba3ebc73abe54fbb2cd.png b/2025R2/Discovery-style-guide-25-r2/media/6aa7893d6f921ba3ebc73abe54fbb2cd.png new file mode 100644 index 0000000000..9f9a0693ff Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/6aa7893d6f921ba3ebc73abe54fbb2cd.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/6f4f6d0cd52ab2b0771b9a60e30e7dc6.jpg b/2025R2/Discovery-style-guide-25-r2/media/6f4f6d0cd52ab2b0771b9a60e30e7dc6.jpg new file mode 100644 index 0000000000..1916b31013 Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/6f4f6d0cd52ab2b0771b9a60e30e7dc6.jpg differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/725993b2638194397e37d2646459b84a.png b/2025R2/Discovery-style-guide-25-r2/media/725993b2638194397e37d2646459b84a.png new file mode 100644 index 0000000000..a0b946ed8a Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/725993b2638194397e37d2646459b84a.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/74b6b0199c3813675c0ffb6dc1f505b8.png b/2025R2/Discovery-style-guide-25-r2/media/74b6b0199c3813675c0ffb6dc1f505b8.png new file mode 100644 index 0000000000..61554c06ad Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/74b6b0199c3813675c0ffb6dc1f505b8.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/76ecd05ae70ddd5ae2a3d139e6a9492c.png b/2025R2/Discovery-style-guide-25-r2/media/76ecd05ae70ddd5ae2a3d139e6a9492c.png new file mode 100644 index 0000000000..e57481fe06 Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/76ecd05ae70ddd5ae2a3d139e6a9492c.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/77c13f0b6d37c230d6878a8c90d79d74.png b/2025R2/Discovery-style-guide-25-r2/media/77c13f0b6d37c230d6878a8c90d79d74.png new file mode 100644 index 0000000000..aa5f03a7d4 Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/77c13f0b6d37c230d6878a8c90d79d74.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/7929594f76c86c7d74118623a2fbc6ce.jpeg b/2025R2/Discovery-style-guide-25-r2/media/7929594f76c86c7d74118623a2fbc6ce.jpeg new file mode 100644 index 0000000000..a257d13b8f Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/7929594f76c86c7d74118623a2fbc6ce.jpeg differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/7b6504754bc8a6cf7d1c03381b0c4800.png b/2025R2/Discovery-style-guide-25-r2/media/7b6504754bc8a6cf7d1c03381b0c4800.png new file mode 100644 index 0000000000..1421344747 Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/7b6504754bc8a6cf7d1c03381b0c4800.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/83cc1d6f1c29e52380a3d6c535f487d8.png b/2025R2/Discovery-style-guide-25-r2/media/83cc1d6f1c29e52380a3d6c535f487d8.png new file mode 100644 index 0000000000..5e91ce4d78 Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/83cc1d6f1c29e52380a3d6c535f487d8.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/8afd5d381d49a73c7747f475cba6194d.png b/2025R2/Discovery-style-guide-25-r2/media/8afd5d381d49a73c7747f475cba6194d.png new file mode 100644 index 0000000000..f891c1f9d3 Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/8afd5d381d49a73c7747f475cba6194d.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/94f43b36a7f00ed6718bc7d12ab65cb4.png b/2025R2/Discovery-style-guide-25-r2/media/94f43b36a7f00ed6718bc7d12ab65cb4.png new file mode 100644 index 0000000000..cfea59bc49 Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/94f43b36a7f00ed6718bc7d12ab65cb4.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/9a75965ecd610c57cd32669e94be8628.jpeg b/2025R2/Discovery-style-guide-25-r2/media/9a75965ecd610c57cd32669e94be8628.jpeg new file mode 100644 index 0000000000..7a01a48926 Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/9a75965ecd610c57cd32669e94be8628.jpeg differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/9f20b3422dfcfdac1a83b6a759cf2221.png b/2025R2/Discovery-style-guide-25-r2/media/9f20b3422dfcfdac1a83b6a759cf2221.png new file mode 100644 index 0000000000..a57ae80659 Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/9f20b3422dfcfdac1a83b6a759cf2221.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/a295e07d070b846ac715fc30dee0b8ff.png b/2025R2/Discovery-style-guide-25-r2/media/a295e07d070b846ac715fc30dee0b8ff.png new file mode 100644 index 0000000000..896ec7f481 Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/a295e07d070b846ac715fc30dee0b8ff.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/a8078e01b621f9d735aa7d46b931e45e.png b/2025R2/Discovery-style-guide-25-r2/media/a8078e01b621f9d735aa7d46b931e45e.png new file mode 100644 index 0000000000..c2ca078d7e Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/a8078e01b621f9d735aa7d46b931e45e.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/a825507d518f8a74b8946943909cc41a.png b/2025R2/Discovery-style-guide-25-r2/media/a825507d518f8a74b8946943909cc41a.png new file mode 100644 index 0000000000..c32df48fa4 Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/a825507d518f8a74b8946943909cc41a.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/af6d2833fb40dfe0405afe7851c625ea.png b/2025R2/Discovery-style-guide-25-r2/media/af6d2833fb40dfe0405afe7851c625ea.png new file mode 100644 index 0000000000..ad6f0ac628 Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/af6d2833fb40dfe0405afe7851c625ea.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/af9066759acd8bd349300a30014128f7.png b/2025R2/Discovery-style-guide-25-r2/media/af9066759acd8bd349300a30014128f7.png new file mode 100644 index 0000000000..9a127b1f6e Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/af9066759acd8bd349300a30014128f7.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/b2a3551fe2fa2a55e31ba727460fc076.png b/2025R2/Discovery-style-guide-25-r2/media/b2a3551fe2fa2a55e31ba727460fc076.png new file mode 100644 index 0000000000..0d2a031b21 Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/b2a3551fe2fa2a55e31ba727460fc076.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/bab162d004dcbfa748e2b2dab56708eb.png b/2025R2/Discovery-style-guide-25-r2/media/bab162d004dcbfa748e2b2dab56708eb.png new file mode 100644 index 0000000000..6cf7aa78e1 Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/bab162d004dcbfa748e2b2dab56708eb.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/bbbf973f7771f1fd27a93c68897851a7.png b/2025R2/Discovery-style-guide-25-r2/media/bbbf973f7771f1fd27a93c68897851a7.png new file mode 100644 index 0000000000..fbfe59386d Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/bbbf973f7771f1fd27a93c68897851a7.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/bc83607e7e3db46cc7ef1106f90e0b01.png b/2025R2/Discovery-style-guide-25-r2/media/bc83607e7e3db46cc7ef1106f90e0b01.png new file mode 100644 index 0000000000..626074b312 Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/bc83607e7e3db46cc7ef1106f90e0b01.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/c3e51e29ba21ad281d5422dd6d26a594.png b/2025R2/Discovery-style-guide-25-r2/media/c3e51e29ba21ad281d5422dd6d26a594.png new file mode 100644 index 0000000000..462babb103 Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/c3e51e29ba21ad281d5422dd6d26a594.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/c862306d16b686dc308e84b077b4ae26.jpeg b/2025R2/Discovery-style-guide-25-r2/media/c862306d16b686dc308e84b077b4ae26.jpeg new file mode 100644 index 0000000000..62045165c7 Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/c862306d16b686dc308e84b077b4ae26.jpeg differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/cba147f10e1f8b82ad955b207bb80224.png b/2025R2/Discovery-style-guide-25-r2/media/cba147f10e1f8b82ad955b207bb80224.png new file mode 100644 index 0000000000..ffcb635e14 Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/cba147f10e1f8b82ad955b207bb80224.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/cc6f0519be993f730b0d16a12c2d0325.png b/2025R2/Discovery-style-guide-25-r2/media/cc6f0519be993f730b0d16a12c2d0325.png new file mode 100644 index 0000000000..73979f864a Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/cc6f0519be993f730b0d16a12c2d0325.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/cf9bb71088c0b35345af0cf006a6032b.png b/2025R2/Discovery-style-guide-25-r2/media/cf9bb71088c0b35345af0cf006a6032b.png new file mode 100644 index 0000000000..bb0c4826aa Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/cf9bb71088c0b35345af0cf006a6032b.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/d110fbd34d81e58cc87561615f30f123.png b/2025R2/Discovery-style-guide-25-r2/media/d110fbd34d81e58cc87561615f30f123.png new file mode 100644 index 0000000000..9b1a70ca46 Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/d110fbd34d81e58cc87561615f30f123.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/d2c6c709dc399e2a0fda4042b7b3e367.png b/2025R2/Discovery-style-guide-25-r2/media/d2c6c709dc399e2a0fda4042b7b3e367.png new file mode 100644 index 0000000000..681ba1c2af Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/d2c6c709dc399e2a0fda4042b7b3e367.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/dd963a88b0f73247911bb93cf57491b5.png b/2025R2/Discovery-style-guide-25-r2/media/dd963a88b0f73247911bb93cf57491b5.png new file mode 100644 index 0000000000..1da976c47a Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/dd963a88b0f73247911bb93cf57491b5.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/de7c121e5610da7df57d11f9933d1ee1.png b/2025R2/Discovery-style-guide-25-r2/media/de7c121e5610da7df57d11f9933d1ee1.png new file mode 100644 index 0000000000..3dba31e27b Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/de7c121e5610da7df57d11f9933d1ee1.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/df7096d5a46b4c997f04129c8e22fd17.png b/2025R2/Discovery-style-guide-25-r2/media/df7096d5a46b4c997f04129c8e22fd17.png new file mode 100644 index 0000000000..97695bf103 Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/df7096d5a46b4c997f04129c8e22fd17.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/e0c90abc198943d5098f0f8fabb15132.png b/2025R2/Discovery-style-guide-25-r2/media/e0c90abc198943d5098f0f8fabb15132.png new file mode 100644 index 0000000000..652a3a2b91 Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/e0c90abc198943d5098f0f8fabb15132.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/e168d6163cee39e9e11d0d2ea60a8d73.png b/2025R2/Discovery-style-guide-25-r2/media/e168d6163cee39e9e11d0d2ea60a8d73.png new file mode 100644 index 0000000000..ad9d83e947 Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/e168d6163cee39e9e11d0d2ea60a8d73.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/e62bb3aeae6d3876a07789f14a4da670.png b/2025R2/Discovery-style-guide-25-r2/media/e62bb3aeae6d3876a07789f14a4da670.png new file mode 100644 index 0000000000..336107a4df Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/e62bb3aeae6d3876a07789f14a4da670.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/e731574edda96ef990aab44365628036.png b/2025R2/Discovery-style-guide-25-r2/media/e731574edda96ef990aab44365628036.png new file mode 100644 index 0000000000..f15904366c Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/e731574edda96ef990aab44365628036.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/e939535659a00131f5d0df583dbdd01f.png b/2025R2/Discovery-style-guide-25-r2/media/e939535659a00131f5d0df583dbdd01f.png new file mode 100644 index 0000000000..fb45171751 Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/e939535659a00131f5d0df583dbdd01f.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/ecc796e2c7281a7eb54f737058d5aea8.png b/2025R2/Discovery-style-guide-25-r2/media/ecc796e2c7281a7eb54f737058d5aea8.png new file mode 100644 index 0000000000..c9071c15a4 Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/ecc796e2c7281a7eb54f737058d5aea8.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/ef6491c138ffe79edf283ce6b90eb076.png b/2025R2/Discovery-style-guide-25-r2/media/ef6491c138ffe79edf283ce6b90eb076.png new file mode 100644 index 0000000000..7b8b17f41d Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/ef6491c138ffe79edf283ce6b90eb076.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/f1c477790250560acd6cb5603e05ffa9.png b/2025R2/Discovery-style-guide-25-r2/media/f1c477790250560acd6cb5603e05ffa9.png new file mode 100644 index 0000000000..03192d8509 Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/f1c477790250560acd6cb5603e05ffa9.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/f20586879fefb4503fe6b74cf13b39ca.png b/2025R2/Discovery-style-guide-25-r2/media/f20586879fefb4503fe6b74cf13b39ca.png new file mode 100644 index 0000000000..cf20c8349c Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/f20586879fefb4503fe6b74cf13b39ca.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/f39f861bc210d3f49b70f4112c94ab01.png b/2025R2/Discovery-style-guide-25-r2/media/f39f861bc210d3f49b70f4112c94ab01.png new file mode 100644 index 0000000000..3ae778a1e7 Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/f39f861bc210d3f49b70f4112c94ab01.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/media/f7434b94b3492b93348826b4356b340b.png b/2025R2/Discovery-style-guide-25-r2/media/f7434b94b3492b93348826b4356b340b.png new file mode 100644 index 0000000000..6548db6718 Binary files /dev/null and b/2025R2/Discovery-style-guide-25-r2/media/f7434b94b3492b93348826b4356b340b.png differ diff --git a/2025R2/Discovery-style-guide-25-r2/themes.md b/2025R2/Discovery-style-guide-25-r2/themes.md new file mode 100644 index 0000000000..d3b1e5f00e --- /dev/null +++ b/2025R2/Discovery-style-guide-25-r2/themes.md @@ -0,0 +1,19 @@ +# Themes + +Theme options allow the user to choose the application-wide coloring (dark or light) best suited to their tastes or needs. Since this change affects the entire application, the choice of default theme should be part of the initial preference setup (user onboarding) on first usage of the product. If a product does not offer a user onboarding process, then the dark theme should be used by default. The theme selector also is typically found with other user preferences in the software’s settings options. See [Color palettes and their usage](./colors.md#color-palettes-and-their-usage) for details about the dark and light theme palettes. + +## Dark theme + +In the dark theme, interface controls are subdued and elegant, allowing the content in the main viewing area, such as results of a 3D simulation, to stand out boldly as the application’s centerpiece. This option is also easier on the eyes when viewing an application for a long period of time. The dark theme, however, does not lend itself to screen captures for use in printed documents. + +![A picture containing text, screenshot, multimedia software, software Description automatically generated](media/bbbf973f7771f1fd27a93c68897851a7.png) + +Figure 20: UI in the dark theme + +## Light theme + +Some users may prefer a brighter alternative. The light theme evokes the legacy interfaces of Ansys’ products, offering a sense of familiarity to our users who are used to those applications and their coloration. It is also suitable for screen captures intended for use in printed documents. The light theme, however, can be harder on the eyes when viewing an application for a long period of time. + +![A picture containing text, screenshot, operating system, software Description automatically generated](media/cba147f10e1f8b82ad955b207bb80224.png) + +Figure 21: UI in the light theme diff --git a/2025R2/Discovery-style-guide-25-r2/toc.yml b/2025R2/Discovery-style-guide-25-r2/toc.yml new file mode 100644 index 0000000000..410b1067be --- /dev/null +++ b/2025R2/Discovery-style-guide-25-r2/toc.yml @@ -0,0 +1,12 @@ +- name: Introduction + href: introduction.md +- name: Colors + href: colors.md +- name: Themes + href: themes.md +- name: Typography + href: typography.md +- name: Icons + href: icons.md +- name: Changelog + href: changelog.md \ No newline at end of file diff --git a/2025R2/Discovery-style-guide-25-r2/typography.md b/2025R2/Discovery-style-guide-25-r2/typography.md new file mode 100644 index 0000000000..19c953f2e4 --- /dev/null +++ b/2025R2/Discovery-style-guide-25-r2/typography.md @@ -0,0 +1,179 @@ +# Typography + +## Typefaces and fonts + +### Typefaces + +The following typefaces are used in Discovery: + +| **Typeface** | **Usage** | **Reason** | **Example** | +|----------|-----------|-----------------|-------------| +| Source Sans 3 (latest version of Source Sans Pro) | Everything except scripting user inputs, code consoles, and overlay help | As a sans-serif typeface, it sets the tone for modernity and clean design. It is in line with Ansys branding guidelines and is an excellent digital interface type. | ![image](media/af9066759acd8bd349300a30014128f7.png) | +| Source Code Pro | Scripting user input panels and consoles (except auto-suggest prompts, which use Source Sans 3) | This is an open-source monospaced typeface that has tried and tested symbol and glyph coverage for programming languages. | ![A black text on a white background Description automatically generated](media/76ecd05ae70ddd5ae2a3d139e6a9492c.png) | + +Avoid using multiple typefaces within the same UI element, such as a panel. One exception is where user inputs appear in Source Code Pro, while related labels and headers are in Source Sans 3. + +### Font treatments + +#### Small caps + +Small caps is a font treatment where all letters take the form of capital letters, but the height is taller for those that are capitalized and shorter for those that are not. [Capitalization styles](#capitalization) apply equally to small caps. + +Small caps usage is limited to just a few places in the user interface, where the text is no more than two words: + +- Ribbon group labels +- Ribbon tab labels +- Tool names (on the left side of the HUD and in super tooltips) +- Stage navigator control labels + +![A screenshot of a computer Description automatically generated](media/bc83607e7e3db46cc7ef1106f90e0b01.png) + +Figure 22: Examples of Small Caps Usage + +#### Italic and underline + +Font treatments such as italic and underline should be used sparingly and intentionally. Typically, underline is used to denote hyperlinks, and italic is used to denote emphasis or an in-progress state of displayed information. The meaning assigned to these special treatments should be clearly communicated to the user and consistently followed across the application. + +#### Strikethrough + +If it is not possible or sufficient to use icons to convey that a displayed value is out-of-date or has been overridden or deleted, the use of strikethrough treatment is acceptable on that text. + +#### Subscript and superscript + +Subscript and superscript can be used as needed, such as in equations or names of chemical elements (e.g., $CO_{2}$). + +#### Truncation + +Truncation can be used for labels that may be longer than the allocated space (e.g., user inputs or text that appears in a user-resizable window or panel). The truncation treatment will insert ellipses (…) at the end of the truncated text. + +### Main UI fonts + +For font colors in the main UI, see [Font colors](./colors.md#font-colors). + +| | **Font** | **Size (Default)** | **Weight** | **Treatment** | **Examples** | +|--------------|---------------|--------------------|------------|---------------|---------------------------------------------------------------------------------------------------------------------| +| **Body** | Source Sans 3 | 14px (0.87 rem) | Regular | | Body text and button labels | +| | | | Semi-bold | | Labels for toggle check buttons that are “on” | +| **Heading** | Source Sans 3 | 14px (0.87 rem) | Regular | | Expander labels (collapsed) | +| | | | Semi-bold | | Expander labels (expanded), section headings, flyout headings | +| **Emphasis** | Source Sans 3 | 14px (0.87 rem) | Semi-bold | Small caps | Ribbon tab labels, ribbon group labels, HUD active tool name, stage navigator control labels, super tooltip heading | +| **Caption** | Source Sans 3 | 12px (0.75 rem) | Regular | | Time and date stamps, status bar information text, footnotes, credits | +| **Title** | Source Sans 3 | 16px (1 rem) | Semi-bold | | Panel titles, window titles | + +For special panels using larger text (e.g., welcome screen), increment each size to the next level while maintaining the hierarchy of fonts within the panel. It is advised that the size of text in special panels does not deviate too much from the sizes set for the application. + +![image](media/dd963a88b0f73247911bb93cf57491b5.png) + +Figure 23: Font Specifications in the Main UI + +### Help overlay fonts + +For font colors in help, see [Font colors](./colors.md#font-colors). + +| | **Font** | **Size** | **Weight** | **Examples** | +|--------------|------------|-------------------|------------|--------------| +| **Body** | Source Sans 3 | 14 px (0.87 rem) | Regular | Body text | +| **Title** | Source Sans 3 | 24 px (1.5 rem) | Bold | Main heading | +| **Subtitle** | Source Sans 3 | 14 px (0.87 rem) | Bold | Sub-heading | + +![image](media/ef6491c138ffe79edf283ce6b90eb076.png) + +Figure 24: Font Specifications in the Overlay Help + +## Capitalization + +Capitalization styles can be used to aid in emphasis and clarity, but they can also slow comprehension if misapplied. There are three systems of capitalization commonly used for interface design: + +- Title-style capitalization +- Sentence-style capitalization +- All caps + +Small caps is a font treatment rather than a capitalization style. See [Small Caps](#small-caps) for details. + +### Title style + +When using title-style capitalization, the first letter of each word is capitalized. Unless they begin the text, articles (a, an, the) and small coordinating words (and, or, of) are left lower-case. + +Title-style capitalization should be used for text that + +- Represents a name, title, or group heading (e.g., page titles, tabs, icon labels, form labels) +- Labels a control that performs an action (e.g., context menus, drop-down menus, buttons) + +![Graphical user interface, application Description automatically generated](media/725993b2638194397e37d2646459b84a.png) + +Figure 25: Examples of Title-Style Capitalization + +### Sentence style + +As the name implies, sentence-style capitalization follows the typical rules of a sentence. The first letter is capitalized, along with proper nouns or acronyms. + +Sentence-style capitalization is used for + +- Anything that is meant to be read as a sentence. + - Examples: body copy, tooltips, interface messages/notifications +- Labels of settings/options/inputs that do not perform actions. + - Since there are often many of these shown together, and some are meant to be read as a sentence, using sentence-style capitalization ensures consistency within the group. + - Examples: drop-down list labels, options in Settings panel, inputs in HUD or HUD options panel, options in panels that open from the ribbon. + +![image](media/3f7a8b7a6774b7b5447e5a44a91f3ad2.png) + +Figure 26: Examples of Sentence-Style Capitalization + +### Dealing with conflicting guidelines + +If one of the items in a menu does not strictly perform an action, the title-style guideline will take precedence over the sentence-style guideline to ensure consistency within the menu. An example is Select Components in the menu below: + +![Graphical user interface, text, application Description automatically generated](media/613487a93e056ec6dfc5d6805022f8bd.png) + +Figure 27: Ensuring Consistency in a Menu when Guidelines Conflict + +### All caps + +Presenting text in all capital letters draws the eye and slows the reader. + +All caps should be used for acronyms and on product names in the title bar (where appropriate based on branding). For other situations where all caps might be considered, use them sparingly and not for labels of more than a few words. + +(Note that small caps differ from all caps; see [Small Caps](#small-caps) for details.) + +### User entries + +When a user enters text, do not apply capitalization transformations. Honor the formatting that the user intended. + +### Capitalization based on object name + +By default, object names are title case (e.g., Fixed Support 1, Max Displacement 3), but if the user changes the name, the capitalization for it will be whatever the user specifies (e.g., My distributed Force), regardless of where the name appears. + +![Graphical user interface, application Description automatically generated](media/d2c6c709dc399e2a0fda4042b7b3e367.png) + +Figure 28: Capitalization of Tree Object with User-Edited Name | + +### Capitalization based on outside sources + +Material assignments, for example, pick up capitalization from the material name, so capitalization will be dependent on the source of the material. + +![Graphical user interface, text, application Description automatically generated](media/1a8e16100bbd2f6d299675422101f81f.png) + +Figure 29: Capitalization of Material Names is Based on External Source + +## Punctuation + +Labels should not end with a colon (:). Omitting the colon helps to reduce clutter on the screen. + +## Field label placement + +The placement of labels for input fields depends on the context. The overall goal is to balance the competing goals of easy scanning, effective space usage, and internationalization. + +|Input fields | Labels | +|---|---| +| ![image](media/f7434b94b3492b93348826b4356b340b.png) | For small input fields, such as in the HUD, labels are placed in front of the fields to make it easier to scan and identify the field of interest. On the left side of the HUD bracket, the labels are left-justified, while on the right side they are right-justified. This keeps the HUD more compact, and less likely to get in the way of what the user is viewing. +| ![image](media/af6d2833fb40dfe0405afe7851c625ea.png) ![image](media/5f8edc9a5ef72144018abe6bd9ba6cde.png) | For multi-line input fields, labels should be placed above the fields for better sizing and layout management of the form or panel. In a form or panel, such as the HUD options, the labels and the corresponding fields should both be left-justified. Exceptions may be made if the labels in a group are of very different lengths, to avoid having any label in the group too far from its field. In forms where the user must fill in all fields, the labels are placed above the fields because there is no need to scan them. In this case, the internationalization guideline of placing labels above the fields takes priority. | + +## Wrapping for long labels + +For groups of buttons (e.g., in a ribbon), wrap long labels to optimize space usage for the set of buttons. + +|Group of buttons | Labels | +|---|---| +| ![Graphical user interface](media/f20586879fefb4503fe6b74cf13b39ca.png) | The labels of the first two buttons here wrap to two lines because a single line would lead to extra blank horizontal space (if the other buttons shifted to the right) or cause the labels to touch other content (if the other buttons did not shift). | +| ![A picture containing diagram Description automatically generated](media/83cc1d6f1c29e52380a3d6c535f487d8.png) | Split Edges does not wrap because that would use too much vertical space, given that there are only two buttons stacked to the right of it, and there is adequate horizontal space between Split Edges and the adjacent buttons. | +