Page MenuHomePhabricator

Icon design for programmatic banners
Open, Needs TriagePublic

Description

Hey @cmadeo, here are the details for this task, let me know if I missed anything!

Summary: We'd love your help designing icons for our new standardized programmatic banner template, and we'd like to complete this project by June 30, 2019.

Currently we have 3 stock programmatic banners that we run via CentralNotice:

With guidance from the design team, we're developing that new standardized template that we'll use instead. The icons you design would replace the thumbnail image from that example.

Here are the different types of content we feature in these banners, and for which we could use icons:

  • General purpose notice (generic alert)
  • Event notices (conferences, meetups etc.)
  • Surveys
  • Photography competitions
  • Editing calls to action (Editathons, etc)
  • Blog posts

SVGs would be great. We'd need the icons to legible between about 40x40 and 120x120 px in size.

As far as design guidelines - ideally these would pop a little, and have a bit more color than the flat black icons from the style guide. Somewhere between that style guide and, say, the logo for Wikipedia Asian Month :)

For all our reference, I want to link to two icons cmadeo designed for previous fundraising content: an editing icon and survey icon. @Jseddon, could you let us know how close those are to your needs for these banners?

Event Timeline

spatton created this task.Mar 12 2019, 8:33 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 12 2019, 8:33 PM

Hi @spatton, which project(s) is this task about? WMF-Design? Fundraising-Backlog? Please associate at least one active project to this task (via the Add Action...Change Project Tags dropdown.). This will allow others to see this task when looking at the corresponding project workboard. Thanks!

Word @Aklapper, thanks for the nudge! @Jseddon, is there some programmatic tag that would be appropriate? MediaWiki-Extensions-CentralNotice didn't seem quite right.

Restricted Application added a project: Design. · View Herald TranscriptMar 13 2019, 2:32 PM

Hey @cmadeo!

Really sorry for the delay in getting back to you. I really liked the survey icon.

  • While not plain, a limited palette would be good. I'm thinking greyscale + 1 colour where the 1 colour could be potentially altered for different colour schemes.
  • Easily adapted to be all white for use on solid backgrounds.
  • I like the slightly thicker lines on the survey icon compared with the edited icon but its not too bloated.
cmadeo added a comment.Apr 3 2019, 3:10 PM

Hi @Jseddon!

Not a problem! Once I have a few more tickets settled on the newest iOS release I'll jump on this and start sharing some early drafts.
For a time estimate, I will start working on this most likely late next week.

Thanks!

cmadeo added a comment.EditedMon, May 6, 8:17 PM

Hi @Jseddon + @spatton, sorry for the delay!
Here's a first pass at the icons listed above, please let me know if you think these will work or if you'd like any updates.

Icon40x40120x120
Alert
Blog
Editing
Event
Photography competitions
Survey

No need to apologize, @cmadeo, these are so nice! Seddon is the owner, so his feedback is important - but he's out this week and I thought it polite to respond :)

My only constructive comment is that the Blog icon is a little hard for me to process at 40x40. It's quite nice at 120x120. Knowing that the blog on wikimediafoundation.org is actually titled News, I wonder if there's another icon theme that would be a little more legible at small sizes? When I google image search for 'news' or 'breaking news,' I see things like megaphones, microphones, newspapers, or even globes.

cmadeo added a comment.Tue, May 7, 5:58 PM

@spatton, a more 'news-y' direction sounds great. I'll update later this week.

cmadeo added a comment.Tue, May 7, 7:33 PM

Here are some potential updates for the blog icon:

40x40120x120

These look fantastic @cmadeo

+1 to the changes that you've made to the blog icon. I prefer the one without the flap. I would also try reducing possibly one line of the "skeleton" lines in the tinier version. The same goes for the smaller calendar, I think that you can reduce the visual complexity by reducing the dots in the smaller version. The camera icon in the 40x40 looks a touch blurry by the flash.

Solid work, would love to see how these translate in context.