Page MenuHomePhabricator

Positive Reinforcement: Leveling Up Post-edit dialog illustrations
Closed, ResolvedPublic

Assigned To
Authored By
RHo
Nov 24 2022, 8:12 PM
Referenced Files
F35823999: C-Alternative-level-up-Add-image-RTL.svg
Nov 29 2022, 11:43 AM
F35823998: B-Suggested-edit-prompt-RTL.svg
Nov 29 2022, 11:43 AM
F35823997: A-Level-up-prompt-RTL.svg
Nov 29 2022, 11:43 AM
F35823919: A-Alternative-Level-up-Add-image.svg
Nov 29 2022, 10:21 AM
F35823916: B-Suggested-edit-prompt.svg
Nov 29 2022, 10:21 AM
F35823915: A-Level-up-prompt.svg
Nov 29 2022, 10:21 AM
F35822771: image.png
Nov 28 2022, 7:05 PM
F35818120: image.png
Nov 24 2022, 8:12 PM
Subscribers

Description

This task is to create SVG illustration assets for use in the new post-edit dialogs being introduced as part of the "Leveling up" project.

  • Specifications for each illustration:
    • SVG file format
    • Same image for mobile and desktop
      • Max width 360px
      • Max height 128px
      • No border and no cropped imagery on left, top, and right edges to enable extending background colour beyond image size.
    • Provide RTL version if required

For reference, this is an example image used in onboarding elsewhere:

SVG Add link onboarding 1
image.png (430×718 px, 35 KB)
In-situ desktop:
image.png (1×1 px, 136 KB)
In-situ mobile 320px wide screen:
image.png (976×654 px, 94 KB)

Event Timeline

Thanks for creating this task @RHo. Just wanted to double check the image size specs as 360x128px seems very short and wide. Looking at the previous illustrations I estimate it to be more like 360x216px but just wanted to check in case I’m not understanding correctly.

Thanks for creating this task @RHo. Just wanted to double check the image size specs as 360x128px seems very short and wide. Looking at the previous illustrations I estimate it to be more like 360x216px but just wanted to check in case I’m not understanding correctly.

Hi @KieranMcCann - yes the reason is that these are on bottom cards/drawers that should ideally not take up the whole article page (unlike the onboarding illustrations that appear on full screen). Here's an example of the 360x128px size on a 36-x640 device:

image.png (1×744 px, 129 KB)

@RHo Thanks for clarifying. Apologies for the confusion.

SVG for A (for use in a dialog after a new editor makes a Growth suggested edit, which prompts them to try another type of task):

SVG for B (for use in a dialog after a new editor makes a non-Suggested edit, which prompts them to try making a Growth Suggested edit)

An alternative approach for situation A would be to use illustrations with the task icon badges. The illustration would change to focus on the particular task that the newcomer is being asked to do (‘add an image’ in this example), but this might be over complicating things?

RTL to follow shortly

@RHo RTL versions...

I’m not sure changing the direction of the hands and mountains is completely necessary but doing this matches the difficulty level icons so I thought it was more logical.

Awesome, thanks @KieranMcCann ! It makes sense to change the level and mountain directions for RTL, looks great!