Versions Compared

Old Version 2

changes.mady.by.user Gosia Creosteanu

Saved on

compared with

New Version 3

changes.mady.by.user Gosia Creosteanu

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

IntroductionThe majority of elements and pages within the Media Manager were updated according to the new Design Guide.

General areas of changes include:

  • Semantic tagsAdding semantic tags, wherever it is possible

  • Keyboard focus, a.k.a. the ability to navigate the application with keyboard

  • Text alternatives to visual elements such as buttons and icons

  • Contrast and colors for better visual perception of the application

Elements of the system

Changes

Image

Top bar

  • new buttons design

  • new spacing rules

  • the ability to customize color was preserved

Image Added

Menus

  • colors, character styles and interactions in lists were updated

  • the ability to to navigate the lists with keyboard was added

Image Added

Upload

  • colors, spacing and margins were updated

  • the changes were implemented both in desktop and mobile UI

Image Added

Menu navigation

  • it’s now fully navigable with keyboard

Image Added

Mobile menu

  • the styling was updated

  • it’s now fully navigable with keyboard

Image Added

Filter panel

Sorting

Asset card

  • the styling for search inputs, headers and buttons was updated

  • the spacing was updated

  • it’s now fully navigable with keyboard

Image Added

Asset card

  • icons were changed and new buttons were implemented instead

  • styling was updated according to the new Design Guide

  • ‘Public’ icon was removed

Image Added

Pagination component

  • infinite scrolling was removed

List component

  • Spacing and button styling were updated

  • it’s now fully navigable with keyboard

Image Added

Asset list component

  • the updated include: chevron icon styling, line height, minimum width for action column, colors for text and hover as well as spacing

  • title column is now required

  • when dragging a column, a highlighted line was added

Image Added

Buttons and checkboxes

  • colors and contrast were adjusted according to the Design Guide

  • sizes of buttons and text were standardized

  • target area was made bigger than the actual button

Image Added

Chip component

Breadcrumbs

Folders

Collections and sharing panel

Metadata editor

Tabs

Comments

Modals

Crop page

Workflows and automations pages

Tasks page

Profile page

Login modal

Brand portals

Notification dialog

Asset status

Video and audio player

Download metadata modal

Text input

...