Alright @Volker_E, went through an exploration phase for it:

.. and am now suggesting this:

BEFORE	AFTER

Some conceptual thoughts:

• Firstly, I dismantled the copy we’re using for the section.
• It’s mainly about diversity and accessibility.
• Think of it as WMF’s accessibility keyboard
• WMF is reaching a diverse audience through 300+ languages, it’s the key aspect of the composition (blue button)
• The icons on the left and right support the copy’s other core message: accessibility. They feature key iconography for navigating through content in our products.
• With Wikipedia as it’s core product and the branding direction we’re taking, I think it’s important to include it in the visual...

Let me know if you have better / additional / replacement suggestions for the iconography that’s used in the mock @Volker_E... cheers!

Notes from the call with @Volker_E on September 17:

• VE likes the general direction and the thinking
• Language icon
  • Having it in the center is probably the right thing
  • Visual balance/importance of it and having it representing our diversity alone could be problematic
  • Is in the critique (T210865)
• Imagery should work responsively
  • RS will create Mobile version that can be used for html <picture>
• Icons that can be considered for next iteration (see OOUI icons)
  • Audio / sound
  • Info
  • Help
  • Half brightness

Hey @Volker_E ! Worked on the visuals based on our last conversation.

After this exploration phase, I still think the language icon should be in the center, despite its critique it’s still standing. From a visual composition standpoint I recommend to go with A.

I’ll produce the final assets and export the svg’s once we decided on which variant. Looking forward to get your feedback.

A: Slightly smaller central element with language icon + replaced cog with contrast icon

B: Slightly smaller central element with “Da Vinci” iconography, language icon as part of the “keys”

C: Small central element with language iconography + replaced cog with contrast icon

D: Small central element with “Da Vinci” iconography, language icon as part of the “keys”

Art directed for Mobile

@Volker_E, considered you’re feedback re: icon size on Mobile and added two new screens in T228764#5529230

Hey @Volker_E – here the designs I’m going to present at design review on Thursday.

I consider the Desktop designs as done but will ask designers about iconography (language vs person). Of course, this will also affect icon for Mobile.

Desktop A	Desktop B

Also reiterated on distribution, alignment and amount of buttons for Mobile. My opinion is that Mobile A works best since aligning plus/minus and text size adjustment (AA) next to each other will conveys the idea. These are the suggestions I’m going to present:

Mobile A	Mobile B	Mobile C

Cheers,
Robin

Adding the notes from design review here:

Rita:

• Leaning towards Desktop B and Mobile C
• Leonardo icon does not work that well without “gridlines”
• Try out globe icon
• Language icon only represents two languages (and yes it is controversial)
• Maybe explore to not use Wikipedia W, maybe a books icon

Jess:

• Leaning towards Desktop B and Mobile C
• Language icon does not communicate accessibility very well
• Suggests to add animation to the image go convey the idea of a keyboard

(tried out the globe icon in the center, doesn’t work well)

Based on that conversation, let’s move forward with this @Volker_E:

Desktop	Mobile

In our last conversation @schoenbaechler I should have mentioned, that I need the SVGs and/or the Sketch file. Imagery is part of the Style Guide and needs to be updated as part of resources as well.

Hey @Volker_E, thx & here you go:

https://www.dropbox.com/sh/lkc8rnjjle3yf8x/AAAjmTTK2aqYrJyXGhLTZx3Ia?dl=0

(includes original and svgo’d versions)

Two more open requests:

• We need to add both variants (desktop & mobile) to resources/Wikimedia_Design_Style_Guide-imagery.sketch file. The SVG import looses details.
• The desktop imagery images are limited to 788px, we need to cut the image or scale it. In first iteration I cut 6px on both sides as it seemed more appropriate, but happy to amend further.

And a hint, svgo is installed in the DSG directory. By help of grunt svgmin the SVGs get compressed perfectly and in alignment to Wikimedia SVG coding guidelines.

Here testing on an iPhone SE :

…and iPhone X, looking great.

Hey @Volker_E, thanks for the feedback, here’s the new delivery:

https://www.dropbox.com/sh/twhj9umqsmyabue/AADHoHDbCq2nkm1KTo5IbGmba?dl=0

Remarks / Changelog:

• Added a .sketch file
• Desktop composition is now using 788px width
• Added a version that fits better on iPhone SE (tife-iphone-se.svg). I’ll leave it up to you if you want to use it for Mobile in general. Probably makes maintenance easier in the future if there are only 2 versions.
• Further unified all compositions
• Used Sketch’s SVGO compressor plugin, maybe you have to double check if it’s in line with the coding guidelines (I haven’t set up any dev environment at all on my machine)

@schoenbaechler Perfect! Yes, we will go only with 2 versions, using the taller iPhone SE one for all mobile. 346 vs 356 doesn't play a role there, as the SVG gets bumped to 100% width responsively. Keeping a constant margin to screen boundaries would need a slightly more complex approach. Let's keep it simple for this iteration though.

Side-comment: Sketch SVGO Compressor's default settings are good, but not perfect. We can amend it. I'd consider providing such JSON file content to align with our guidelines.

Thanks @Volker_E, configuring it with svgo.json sounds like an excellent idea!

In T228764#5578733, @schoenbaechler wrote:

Thanks @Volker_E, configuring it with svgo.json sounds like an excellent idea!

Captured in T238042.