Page MenuHomePhabricator

Add 'volumeUp', 'volumeDown' and 'volumeMute' icons in Design Style Guide & OOUI
Closed, ResolvedPublic

Assigned To
Authored By
mwilliams
Aug 7 2020, 5:20 PM
Referenced Files
F32378067: image.png
Oct 8 2020, 9:23 AM
F32193869: volumeLow.svg
Aug 24 2020, 6:08 PM
F32193843: volume_icons.png
Aug 24 2020, 6:08 PM
F32193868: volumeOff.svg
Aug 24 2020, 6:08 PM
F32191006: image.png
Aug 21 2020, 12:14 PM
F32051505: volumeUp-ltr.svg
Aug 11 2020, 2:06 PM
F32051506: volumeUp-rtl.svg
Aug 11 2020, 2:06 PM
F31985304: video_example.jpg
Aug 7 2020, 10:05 PM

Description

The structured data team is looking to add an icon to help distinguish audio files in the new media search. We currently don't have anything in the icon library that quite meets our needs and would like to suggest an addition.

Example of the icon in use (the complete layout is not finalized but we expect to use the audio icon in this way):

search_example.png (1×2 px, 354 KB)

Example of the icon in our icon template layout:

icon_template.png (714×694 px, 101 KB)

Icon files

*Updated SVGs (LTR&RTL and SVGO optimized)*



Event Timeline

+1 we could do with a video icon as well :)

image.png (172×886 px, 15 KB)

Good point @Esanders, we were planning on using the "play" button for now but maybe there is something better. Happy to think on that.

video_example.jpg (882×1 px, 261 KB)

Iniquity subscribed.

Wow! Yes, please :) I need it for VideoJS player. All native icons need to be replaced T258584: Align VideoJS player to Wikimedia UI design. It is possible to create an icon in three versions: full volume, half volume, muted?

@mwilliams If we add additional icons (later) for it in place of volume buttons, this would be the equivalent of audioUp/volumeUp? Asking for naming agreeement.
Note https://material.io/resources/icons/?style=baseline

  • audioMute/volumeMute
  • audioDown/volumeDown
  • audioUp/volumeUp [this one]
  • audioOff/volumeOff with a line through

@Volker_E Following that naming scheme makes sense to me as it seems like we will probably be adding additional related icons in the future for the player. Between audio and volume, I think volume is probably a more accurate descriptor even if it's a bit odd and unrelated in my use case.

Volker_E renamed this task from Audio Icon to Add 'volumeUp' icon in OOUI.Aug 11 2020, 12:45 PM

@mwilliams I was a bit confused when I've opened the document and it was 20x16px document boundaries. Although you've shared the icon on the icon template correctly.
The canvas is always unchanged 20x20px to make the icon positioning in implementation more predictable.

Change 619473 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] icons: Add 'volumeUp'

https://gerrit.wikimedia.org/r/619473

Volker_E triaged this task as Medium priority.Aug 11 2020, 2:47 PM
Volker_E moved this task from Backlog to OOUI-0.40.3 on the OOUI board.
Volker_E edited projects, added OOUI (OOUI-0.40.3); removed OOUI.

Change 619473 merged by jenkins-bot:
[oojs/ui@master] icons: Add 'volumeUp'

https://gerrit.wikimedia.org/r/619473

Change 621711 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/core@master] Update OOUI to v0.40.2

https://gerrit.wikimedia.org/r/621711

It seems odd to have a "volumeUp" icon without a "volumeDown" one. Without other icons nearby, "volumeUp" just looks like "volume on". For volumeUp/Down icons that are less ambiguous you could use this style which I have on my keyboard:

image.png (94×152 px, 3 KB)

Also the only use case so far for "volumeUp" is not "volume up" which makes the choice of name seem strange.

It seems odd to have a "volumeUp" icon without a "volumeDown" one. Without other icons nearby, "volumeUp" just looks like "volume on". For volumeUp/Down icons that are less ambiguous you could use this style which I have on my keyboard:

image.png (94×152 px, 3 KB)

My preference is for the curved sound wave lines to indicate up and down since they can be also be used to denote maximum and minimum values, like when used on opposite ends of a volume slider control.
And actually, the volumeUp when used on its own in certain contexts serves to indicate volume/audio. So, naming conventions aside, it is comparatively more versatile (than volume +), and pretty widely used.

Change 621989 had a related patch set uploaded (by Michael Große; owner: Michael Große):
[oojs/ui@master] Fix the removing of windows being broken by this scoping issue

https://gerrit.wikimedia.org/r/621989

Change 621989 merged by jenkins-bot:
[oojs/ui@master] Follow-up I669cfeeb: Fix the removing of windows being broken by this scoping issue

https://gerrit.wikimedia.org/r/621989

OOUI v0.40.2 got reverted due to an unrelated breakage. We'll plan to do a v0.40.3 release tomorrow which will then be the release containing 'volumeUp' icon.

Spent some time on what volumeDown and volumeOff could look like...

volume_icons.png (442×1 px, 135 KB)

Contemplated having separate icons for off and mute like Material Design does, but couldn't come up with a use case for that. Off and mute should mean the same thing, correct? I don't feel like I have all the context on the new player design to be 100% though.

@Volker_E Still having some weird artboard sizing issues and some general svg confusion. Attaching the two new svg's in their current state here, maybe you can help me out here. Feel free to message me if these are way off and we can work through it together.

Change 623824 had a related patch set uploaded (by Jforrester; owner: Jforrester):
[mediawiki/core@master] Update OOUI to v0.40.3

https://gerrit.wikimedia.org/r/623824

Change 623824 merged by jenkins-bot:
[mediawiki/core@master] Update OOUI to v0.40.3

https://gerrit.wikimedia.org/r/623824

Volker_E edited projects, added OOUI; removed OOUI (OOUI-0.40.3).
Volker_E renamed this task from Add 'volumeUp' icon in OOUI to Add 'volumeUp', 'volumeDown' and 'volumeMute' icons in OOUI.Oct 7 2020, 2:30 PM

Change 632770 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] icons: Add 'volumeDown*' and 'volumeOff*' and optimize 'volumeUp' further

https://gerrit.wikimedia.org/r/632770

Change 632770 merged by jenkins-bot:
[oojs/ui@master] icons: Add 'volumeDown*' and 'volumeOff*' and optimize 'volumeUp' further

https://gerrit.wikimedia.org/r/632770

Change 632805 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/core@master] Update OOUI to v0.40.4

https://gerrit.wikimedia.org/r/632805

Change 632805 merged by jenkins-bot:
[mediawiki/core@master] Update OOUI to v0.40.4

https://gerrit.wikimedia.org/r/632805

Can people upload it in commons? I tried uploading it but it's not working due to the libsvg bug (T193352#5984544)

image.png (309×325 px, 17 KB)

@Ladsgroup What would that be in order to work? A less optimized version?

Sorry, just saw T193352#5984600 so actually a libsvg bug. Not sure if investing in workarounds is worth the effort.

Volker_E renamed this task from Add 'volumeUp', 'volumeDown' and 'volumeMute' icons in OOUI to Add 'volumeUp', 'volumeDown' and 'volumeMute' icons in Design Style Guide & OOUI.Oct 8 2020, 1:35 PM
Volker_E removed a project: Patch-For-Review.
Volker_E updated the task description. (Show Details)

@mwilliams Last bit missing is to update the Design Style Guide's Illustrator collection with those files (correctly named and preferably source files).