Newcomer tasks: Create all final visual assets
Closed, ResolvedPublicDesign
Actions

Assigned To

Authored By

	RHo
	Oct 14 2019, 4:46 PM

Description

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

Add Suggested edits overlays

V1.0 Introduction overlay assets	SVG Desktop	SVG Mobile
General intro illustration	intro-heart-article-256w.svg111 KBDownload	intro-heart-article-160w.svg105 KBDownload
User who answered "Add image" in their Welcome survey	Intro-add-image.svg4 KBDownload	Intro-add-image-64w.svg4 KBDownload Intro-add-image-64w-rtl.svg4 KBDownload
User who answered "Create article" in their Welcome survey	Intro-create-article.svg4 KBDownload Intro-create-article-rtl.svg4 KBDownload	Intro-create-article-64w.svg4 KBDownload Intro-create-article-64w-rtl.svg4 KBDownload
User who answered "Add or edit content" in their Welcome survey	Intro-add-info.svg6 KBDownload Intro-add-info-rtl.svg7 KBDownload	Intro-add-info-64w.svg5 KBDownload Intro-add-info-64w-rtl.svg7 KBDownload
User who answered "Fix typo" in their Welcome survey	Intro-typo.svg4 KBDownload Intro-typo-rtl.svg4 KBDownload	Intro-typo-64w.svg4 KBDownload Intro-typo-64w-rtl.svg3 KBDownload

Topic Overlay assets	SVG Desktop	SVG Mobile
General illustration	Topic-general.svg2 KBDownload	Topic-general-64w.svg2 KBDownload
User who answered "Add image" in their Welcome survey	Topic-add-image.svg4 KBDownload Topic-add-image-rtl.svg4 KBDownload	Topic-add-image-64.svg4 KBDownload Topic-add-image-64-rtl.svg4 KBDownload
User who answered "Create article" in their Welcome survey	Topic-Create-article.svg4 KBDownload Topic-Create-article-rtl.svg4 KBDownload	Topic-Create-article-64w.svg3 KBDownload Topic-Create-article-64w-rtl.svg3 KBDownload
User who answered "Add or edit content" in their Welcome survey	Topic-Add-info.svg6 KBDownload Topic-Add-info-rtl.svg6 KBDownload	Topic-Add-info-64w.svg6 KBDownload Topic-Add-info-64w-rtl.svg6 KBDownload
User who answered "Fix typo" in their Welcome survey	Topic-Fix-typo.svg5 KBDownload Topic-Fix-typo-rtl.svg5 KBDownload	Topic-Fix-typo-64w.svg4 KBDownload Topic-Fix-typo-64w-rtl.svg4 KBDownload

Difficulty Overlay assets	SVG Desktop	PNG@4x Desktop	SVG Mobile	PNG@4x
Square format (Desktop)	Difficulty-square.svg15 KBDownload Difficulty-square-rtl.svg16 KBDownload		n/a	n/a
Landscape format (Mobile)	n/a	n/a	Difficulty-landscape.svg15 KBDownload Difficulty-landscape-rtl.svg16 KBDownload

Suggested edits module

Asset (same for Desktop & Mobile)	SVG	PNG@4x
End of results graphic	end-of-results.svg1 KBDownload
No results graphic	no-results.svg4 KBDownload no-results-rtl.svg4 KBDownload
Error message	error-message.svg4 KBDownload
Placeholder image on article card	placeholder-image.svg312 BDownload

Impact module

No edits graphic	use same heart articles "shield" graphic as general intro overlay illustration
"Try suggested edits" graphic	use same pencil-ruler cross over lightbulb graphic as general topic overlay illustration
Badge for 10 Suggested edits completed	Impact-badge-10SuggestedEdits.svg1 KBDownload
Progress counter for 10 Suggested edits	use https://codepen.io/reets/pen/RwwGLeg

Icons

Difficulty levels - easy, medium, hard, mixed (LTR & RTL versions)	levels-outline-ltr.svg272 BDownload levels-outline-rtl.svg276 BDownload	levels-easy-ltr.svg258 BDownload levels-easy-rtl.svg260 BDownload	levels-med-ltr.svg245 BDownload levels-med-rtl.svg246 BDownload	levels-hard-ltr.svg233 BDownload levels-hard-rtl.svg234 BDownload
Mentor icon (LTR & RTL versions)	mentor-ltr.svg1 KBDownload mentor-rtl.svg1014 BDownload
Live results icon	liveBroadcast.svg1 KBDownload

Related Objects

Mentioned In: T244555: [BUG] Newcomer tasks: arwiki "suggested-edits-icon" placement should be aligned with RHS of module header
T238610: Newcomer tasks: include topics in intro overlay
T236854: [mobile] Newcomer tasks - UI issues with Suggested edits module and Difficulty overlay
T236910: Texts in Czech are too long to display well
T237352: Difficulty overlay needs different image and layout on mobile

Event Timeline

RHo created this task.Oct 14 2019, 4:46 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptOct 14 2019, 4:46 PM

RHo moved this task from 📗Backlog (Current sprint) to 💪In Progress on the Growth Design board.Oct 14 2019, 4:47 PM

RHo moved this task from Incoming to Needs Design/Design Doing on the Growth-Team (Sprint 0 (Growth Team)) board.

RHo updated the task description. (Show Details)Oct 14 2019, 7:06 PM

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.

RHo updated the task description. (Show Details)Oct 17 2019, 10:30 PM

RHo removed a project: Growth Design.

RHo updated the task description. (Show Details)Oct 18 2019, 11:32 AM

RHo updated the task description. (Show Details)Oct 22 2019, 9:53 AM

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.svg7 KBDownload

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.

In T235444#5594901, @Dyolf77_WMF wrote:

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.svg7 KBDownload

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!

RHo updated the task description. (Show Details)Oct 25 2019, 12:58 PM

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.

RHo updated the task description. (Show Details)Oct 25 2019, 12:59 PM

In T235444#5606262, @Dyolf77_WMF wrote:

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

JTannerWMF moved this task from Needs Design/Design Doing to Ready for Development on the Growth-Team (Sprint 0 (Growth Team)) board.Oct 29 2019, 2:27 PM

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.

• Catrope mentioned this in T237352: Difficulty overlay needs different image and layout on mobile.Nov 5 2019, 5:24 AM

RHo mentioned this in T236910: Texts in Czech are too long to display well.Nov 5 2019, 6:43 PM

MMiller_WMF mentioned this in T236854: [mobile] Newcomer tasks - UI issues with Suggested edits module and Difficulty overlay.Nov 13 2019, 1:05 AM

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

RHo updated the task description. (Show Details)Nov 15 2019, 11:47 AM

RHo mentioned this in T238610: Newcomer tasks: include topics in intro overlay.Nov 20 2019, 8:34 PM

RHo mentioned this in T244555: [BUG] Newcomer tasks: arwiki "suggested-edits-icon" placement should be aligned with RHS of module header.Feb 20 2020, 1:33 PM

	F30973394: intro-heart-article-160w@4x.png
	Nov 3 2019, 8:49 PM

	F30971597: Difficulty-landscape-rtl@4x.png
	Nov 3 2019, 8:49 PM

Newcomer tasks: Create all final visual assets Closed, ResolvedPublicDesignActions