Page MenuHomePhabricator

Icon design for programmatic banners
Open, Needs TriagePublic

Assigned To
None
Authored By
spatton
Mar 12 2019, 8:33 PM
Referenced Files
F28958937: Blog 2 40x40.png
May 7 2019, 7:33 PM
F28958942: Blog 2 120x120.png
May 7 2019, 7:33 PM
F28958946: Blog 3 40x40.png
May 7 2019, 7:33 PM
F28958950: Blog 3 120x120.png
May 7 2019, 7:33 PM
F28958910: Survey 40x40.png
May 7 2019, 7:32 PM
F28958911: Survey 120x120.png
May 7 2019, 7:32 PM
F28944426: Photography 40x40.png
May 6 2019, 8:17 PM
F28944387: Editing 40x40.png
May 6 2019, 8:17 PM

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

Hi @spatton, which project(s) is this task about? Wikimedia-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.

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.

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!

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
Alert 40x40.png (40×40 px, 1 KB)
Alert 120x120.png (120×120 px, 4 KB)
Blog
Blog 40x40.png (40×40 px, 1 KB)
Blog 120x120.png (120×120 px, 2 KB)
Editing
Group 5.png (35×35 px, 1 KB)
Editing 120x120.png (120×120 px, 6 KB)
Event
Editing 40x40.png (40×40 px, 934 B)
Event 120x120.png (120×120 px, 1 KB)
Photography competitions
Photography 40x40.png (40×40 px, 1 KB)
Photography 120x120.png (120×120 px, 3 KB)
Survey
Survey 40x40.png (40×40 px, 991 B)
Survey 120x120.png (120×120 px, 2 KB)

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.

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

Here are some potential updates for the blog icon:

40x40120x120
Blog 2 40x40.png (40×40 px, 1 KB)
Blog 2 120x120.png (120×120 px, 3 KB)
Blog 3 40x40.png (40×40 px, 1 KB)
Blog 3 120x120.png (120×120 px, 2 KB)

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.

So I'm really happy with all of these. They work well for the form factor and really like the consistent style and palette.

If you have the time I had one more request that I did not think of previously. And that is an icon for community consultations, requests for comment/feedback etc.

That would just be icing on the cake. Other than that these are fantastic and I hugely appreciate the time you put into these. You should hopefully start seeing them around the wiki :)

Hi @Jseddon! Sorry for the late response, I've been on vacation for the past two weeks.
So glad to hear that you like the icons so far. I'd be happy to put together an icon for Requests for comment / feedback some time this week.