Page MenuHomePhabricator

Newcomer tasks: Create all final visual assets
Closed, ResolvedPublicDesign

Description

Create the following visual assets as part of the newcomer tasks UI:

Add Suggested edits overlays
V1.0 Introduction overlay assetsSVG DesktopPNG@4x DesktopSVG MobilePNG@4x
General intro illustration
intro-heart-article-256w@4x.png (832×1 px, 60 KB)
intro-heart-article-160w@4x.png (520×640 px, 36 KB)
User who answered "Add image" in their Welcome survey
Intro-add-image@4x.png (432×384 px, 16 KB)
Intro-add-image-rtl@4x.png (432×384 px, 16 KB)
Intro-add-image-64w@4x.png (288×256 px, 11 KB)
Intro-add-image-64w-rtl@4x.png (288×256 px, 11 KB)
User who answered "Create article" in their Welcome survey
Intro-create-article@4x.png (432×384 px, 15 KB)
Intro-create-article-rtl@4x.png (432×384 px, 15 KB)
Intro-create-article-64w@4x.png (288×256 px, 10 KB)
Intro-create-article-64w-rtl@4x.png (288×256 px, 11 KB)
User who answered "Add or edit content" in their Welcome survey
Intro-add-info@4x.png (432×384 px, 7 KB)
Intro-add-info-rtl@4x.png (432×385 px, 7 KB)
Intro-add-info-64w@4x.png (288×256 px, 5 KB)
Intro-add-info-64w-rtl@4x.png (288×256 px, 5 KB)
User who answered "Fix typo" in their Welcome survey
Intro-typo@4x.png (432×384 px, 8 KB)
Intro-typo-rtl@4x.png (432×384 px, 8 KB)
Intro-typo-64w@4x.png (288×256 px, 6 KB)
Intro-typo-64w-rtl@4x.png (288×256 px, 6 KB)
Topic Overlay assetsSVG DesktopPNG@4x DesktopSVG MobilePNG@4x
General illustration
Topic-general@4x.png (512×512 px, 13 KB)
Topic-general-64w@4x.png (256×256 px, 6 KB)
User who answered "Add image" in their Welcome survey
Topic-add-image@4x.png (512×512 px, 11 KB)
Topic-add-image-rtl@4x.png (512×512 px, 11 KB)
Topic-add-image-64@4x.png (256×256 px, 5 KB)
Topic-add-image-64-rtl@4x.png (256×256 px, 5 KB)
User who answered "Create article" in their Welcome survey
Topic-Create-article@4x.png (512×512 px, 12 KB)
Topic-Create-article-rtl@4x.png (512×512 px, 12 KB)
Topic-Create-article-64w@4x.png (256×256 px, 6 KB)
Topic-Create-article-64w-rtl@4x.png (256×256 px, 6 KB)
User who answered "Add or edit content" in their Welcome survey
Topic-Add-info@4x.png (512×512 px, 13 KB)
Topic-Add-info-rtl@4x.png (512×512 px, 13 KB)
Topic-Add-info-64w@4x.png (256×256 px, 6 KB)
Topic-Add-info-64w-rtl@4x.png (256×256 px, 6 KB)
User who answered "Fix typo" in their Welcome survey
Topic-Fix-typo@4x.png (512×512 px, 11 KB)
Topic-Fix-typo-rtl@4x.png (512×512 px, 11 KB)
Topic-Fix-typo-64w@4x.png (256×256 px, 6 KB)
Topic-Fix-typo-64w-rtl@4x.png (256×256 px, 6 KB)
Difficulty Overlay assetsSVG DesktopPNG@4x DesktopSVG MobilePNG@4x
Square format (Desktop)
Difficulty-square@4x.png (512×512 px, 12 KB)
Difficulty-square-rtl@4x.png (512×513 px, 12 KB)
n/an/a
Landscape format (Mobile)n/an/a
Difficulty-landscape@4x.png (256×864 px, 12 KB)
Difficulty-landscape-rtl@4x.png (256×865 px, 12 KB)
Suggested edits module
Asset (same for Desktop & Mobile)SVGPNG@4x
End of results graphic
end-of-results@4x.png (576×576 px, 9 KB)
No results graphic
no-results@4x.png (576×576 px, 17 KB)
no-results-rtl@4x.png (576×577 px, 18 KB)
Error message
error-message@4x.png (576×576 px, 15 KB)
Placeholder image on article card
placeholder-image@4x.png (512×1 px, 4 KB)
Impact module
No edits graphicuse same heart articles "shield" graphic as general intro overlay illustration
"Try suggested edits" graphicuse same pencil-ruler cross over lightbulb graphic as general topic overlay illustration
Badge for 10 Suggested edits completed
Impact-badge-10SuggestedEdits@4x.png (256×192 px, 7 KB)
Progress counter for 10 Suggested editsuse https://codepen.io/reets/pen/RwwGLeg
Icons
Difficulty levels - easy, medium, hard, mixed (LTR & RTL versions)
Mentor icon (LTR & RTL versions)
Live results icon

Event Timeline

RHo updated the task description. (Show Details)

Assets completed and added to ticket.

hi @kostajh @Catrope @Tgr - i've added notes on Zeplin but maybe better to ping you all directly that I've uploaded all new visual assets for newcomer tasks to this ticket. LMK if you notice anything is missing or not looking right.

Maybe some of these visuals should be converted for RTL. @Dyolf77_WMF, can you have a look at them?

Absolutely, here the list:

  • Difficulty-square.svg
  • Intro-add-image.svg
  • Intro-add-info.svg
  • Intro-create-article.svg
  • Intro-typo.svg
  • no-results.svg
  • Topic-Add-info.svg
  • Topic-Create-article.svg
  • Topic-Fix-typo.svg

Here is an example of edit: the title of the article and subtitle have to be in the right side like in Wikipedia:

Intro-add-image.svg
Intro-add-image-rtl.svg.png (108×96 px, 7 KB)

Please tell me if you want that I show the changes in other files.

Absolutely, here the list:

  • Difficulty-square.svg
  • Intro-add-image.svg
  • Intro-add-info.svg
  • Intro-create-article.svg
  • Intro-typo.svg
  • no-results.svg
  • Topic-Add-info.svg
  • Topic-Create-article.svg
  • Topic-Fix-typo.svg

Here is an example of edit: the title of the article and subtitle have to be in the right side like in Wikipedia:

Intro-add-image.svg
Intro-add-image-rtl.svg.png (108×96 px, 7 KB)

Please tell me if you want that I show the changes in other files.

Thanks @Dyolf77_WMF and @Trizek-WMF - knew I forgot something! Will make the additions in the next few days.

Updated with missing RTL versions - please review @Dyolf77_WMF in case I missed something. Thanks!

Hi @RHo - thanks for upating these icons. I see for Difficulty-square-rtl.svg in the red page, Title and the subtitle are not on the right place.

Hi @RHo - thanks for upating these icons. I see for Difficulty-square-rtl.svg in the red page, Title and the subtitle are not on the right place.

Updated! Thanks for 'proof-viewing' :D

hi @Catrope - I've removed the egregious PNG embedded in the "intro-heart-articles" graphic, and reduced the file size as much as possible. Have also reduced the sizes of the difficulty overlay images slightly too.

MMiller_WMF added a subscriber: MMiller_WMF.

Though we are still using the contents of this task, the task is complete.