Skip to content

Commit

Permalink
Add new images
Browse files Browse the repository at this point in the history
  • Loading branch information
@undavide
undavide committed Nov 25, 2024
1 parent 6a69089 commit 8aa9484
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 30 deletions.
20 changes: 9 additions & 11 deletions src/pages/guides/design/ux_guidelines/feedback_and_messaging.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ Loading indicators are particularly important when the system is processing a re

[Progress circles](https://spectrum.adobe.com/page/progress-circle/) show the progression of a system operation such as downloading, uploading, processing, etc. in a visual way.

![Progress circles](./img/feedback_progress-circles.png)
![Progress circles](./img/feedback_progress-circles2.png)

They can represent determinate or indeterminate progress: either the percentage of the operation that has been completed or spin indefinitely until completion.

Expand All @@ -41,7 +41,7 @@ They can represent determinate or indeterminate progress: either the percentage

When a group of cards are loading, they follow the [ghost loading convention](https://spectrum.adobe.com/page/cards/#Ghost-loading).

![](./img/feedback_ghost-loading.png)
![](./img/feedback_ghost-loading2.png)

There are 5 phases for ghost loading:

Expand All @@ -55,24 +55,22 @@ There are 5 phases for ghost loading:

[In-line alerts](https://opensource.adobe.com/spectrum-css/inlinealert.html) display a non-modal message associated with objects in a view. These are often used in form validation, providing a place to aggregate feedback related to multiple fields.

![](./img/feedback_ghost-loading.png)
![](./img/feedback_inline-alert-1.png)
![](./img/feedback_inline-alert-2.png)
![](./img/feedback_inline-alert-3.png)

## Toasts

[Toasts](https://spectrum.adobe.com/page/toast/) display brief, temporary notifications. They’re meant to be noticed without disrupting a user’s experience or requiring an action to be taken.

![](./img/feedback_toasts.png)
![](./img/feedback_toasts-1.png)

They come in multiple kinds, each with a different purpose:

![](./img/feedback_toast-kinds.png)
![](./img/feedback_toasts-2.png)

## Full-panel Messaging

When the feedback is more complex or requires more space, a full-panel message can be used.
When the feedback is more complex or requires more space, a full-panel message can be used. Please mind the padding between the graphics, text and other UI elements to ensure a clear and organized layout.

![](./img/feedback_full-panel-messaging.png)

Please mind the padding between the graphics, text and other UI elements to ensure a clear and organized layout.

![](./img/feedback_full-panel-messaging-padding.png)
![](./img/feedback_full-panel-messaging2.png)
42 changes: 23 additions & 19 deletions src/pages/guides/design/ux_guidelines/visual_elements.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,23 +46,19 @@ Spectrum is based on the Adobe Clean and Adobe Clean Han typefaces. The former i
</div>
</div> -->

### Headings
### Headings and Body Text

Headings in Spectrum for Adobe Express use bolder typography. The default weight is 700 (Adobe Clean Black, Sans Serif), with a size ranging from M to XXS.

![](./img/visual_heading.png)

### Body Text

The available sizes for body text in Spectrum for Adobe Express span from XS to XXL, while the weight is usually around 400-500.

![](./img/visual_body.png)
![](./img/visual_heading-body.png)

### Usage

Here's an example of how you can implement the Adobe Clean typeface in your add-on; please note the recommended spacing between text and other user interface elements.

![](./img/visual_example.png)
![](./img/visual_example2.png)

## Layout & Structure

Expand All @@ -78,7 +74,7 @@ Add-ons on Desktop are assigned a specific width of **320px** and a **100%** hei
- The body holding the add-on's content.
- Optionally, a footer with Call to Action (CTA) buttons.

![Basic Structure](./img/layout_basic.png)
![Basic Structure](./img/layout_basic2.png)

### Padding

Expand All @@ -89,7 +85,7 @@ Padding plays a crucial role in maintaining visual harmony and readability. You

This padding structure ensures that content is well-separated and easy to interact with.

![Padding](./img/layout_padding.png)
![Padding](./img/layout_padding2.png)

### Responsive Grid and Core Container Styles

Expand All @@ -101,7 +97,7 @@ Adobe Express add-ons rely on a [responsive grid system](https://spectrum.adobe.

Remember to apply the standard gap of 16px between grid elements for consistency.

![Responsive Grid and Core Container Styles](./img/layout_grid.png)
![Responsive Grid and Core Container Styles](./img/layout_grid2.png)

### Panel Structure and core content actions

Expand All @@ -119,7 +115,7 @@ Structural grids in Adobe Express add-ons are designed to accommodate various co

Please note the specific paddings on each of these grid types.

![Structural Grids and Foundational Patterns](./img/layout_patterns.png)
![Structural Grids and Foundational Patterns](./img/layout_patterns2.png)

## Panel Actions

Expand Down Expand Up @@ -147,7 +143,7 @@ Panel Actions, when available, should be arranged at the top of the add-on's con

Here are some examples of common panel organizations and hierarchies for Adobe Express add-ons.

![Examples](./img/visual_actions.png)
![Examples](./img/visual_actions2.png)

## Components

Expand All @@ -165,15 +161,15 @@ Buttons are essential for enabling user interactions in your add-on. -->

[Buttons](https://spectrum.adobe.com/page/button/#Usage-guidelines) allow users to perform an action or navigate to a different part of the add-on. They have multiple styles to fit various needs and are ideal for calling attention when a user needs to take action to move forward in the workflow.

![Buttons](./img/components_buttons.png)
![Buttons](./img/components_buttons2.png)

Please mind the padding when using CTA buttons in the add-on's footer.

### Button Groups

A [Button Group](https://spectrum.adobe.com/page/button-group/) is a collection of buttons that perform related actions. See the [Usage Guidelines](https://spectrum.adobe.com/page/button-group/#Usage-guidelines) for more information on their correct use.

![Button Groups](./img/components_button-groups.png)
![Button Groups](./img/components_button-groups2.png)

### Secondary Variant Buttons

Expand All @@ -183,6 +179,12 @@ The [Secondary Variant Button](https://spectrum.adobe.com/page/button/#Usage-gui

Spectrum buttons support several variants (Accent, Primary, Secondary, Negative, Icon) to fit different use cases; refer to the [Spectrum reference](https://spectrum.adobe.com/page/button/#Options) to see all available options and when to use them.

### Sliders

Sliders allow users to quickly select a value within a range. They should be used when the upper and lower bounds of the range are known and fixed.

![Sliders](./img/components_sliders2.png)

## Form Elements

Form elements are essential for collecting user input and enabling interactions within your add-on. They include a variety of components such as text fields, search fields, pickers, and more.
Expand All @@ -191,7 +193,7 @@ Form elements are essential for collecting user input and enabling interactions

[Text fields](https://spectrum.adobe.com/page/text-field/) allow users to input custom text entries with a keyboard. Various options can be shown with the field to communicate their requirements.

![Text Fields](./img/form_text-fields.png)
![Text Fields](./img/form_text-fields2.png)

It's recommended to let text fields span the entire add-on's width—minus the container's padding—when possible, for a more consistent look.

Expand All @@ -205,15 +207,17 @@ A [Search Field](https://spectrum.adobe.com/page/search-field/) is used for sear

[Pickers](https://spectrum.adobe.com/page/picker/) (sometimes known as "dropdowns" or "selects") allow users to choose from a list of options in a limited space. The list of options can change based on the context.

![Pickers](./img/form_pickers.png)
![Pickers](./img/form_pickers2.png)

Like all the components covered so far, it's best for pickers to take advantage of the add-on's full width.

![Pickers](./img/form_pickers3.png)

### Color Pickers

Color pickers are a special type of picker that allows users to select a color.

![Color Pickers](./img/form_color-pickers.png)
![Color Pickers](./img/form_color-pickers2.png)

The Spectrum component used as a Color Picker is the [Swatch](https://spectrum.adobe.com/page/swatch/), which shows a small sample of a fill—such as a color, gradient, texture, or material—that is intended to be applied to an object.

Expand All @@ -227,10 +231,10 @@ Navigation is a key component of any user interface. It helps users understand w

Tabs organize content into multiple sections and allow users to navigate between them; the content under the set of tabs should be related and form a coherent unit. Please always include a label for accessibility.

![Tabs](./img/navigation_tabs.png)
![Tabs](./img/navigation_tabs2.png)

### Accordions

The [Accordion](https://opensource.adobe.com/spectrum-web-components/components/accordion/) element contains a list of items that can be expanded or collapsed to reveal additional content or information associated with each item. There can be zero expanded items, exactly one expanded item or more than one item expanded at a time, depending on the configuration. This list of items is defined by child elements that are targeted to the default slot of their parent.

![Accordions](./img/navigation_accordions.png)
![Accordions](./img/navigation_accordions2.png)

0 comments on commit 8aa9484

Please sign in to comment.