Page MenuHomePhabricator
Create Task
Maniphest T194686

Imagery for all sections of style guide
Closed, ResolvedPublic
Actions

Assigned To
Volker_E
Authored By
• Nirzar
May 14 2018, 8:45 PM
Tags
Referenced Files
F27393765: consistency.png
Dec 5 2018, 8:27 PM
F27393069: content-first@2x.png
Dec 5 2018, 8:27 PM
F27393781: consistency_bak.png
Dec 5 2018, 8:27 PM
F27393913: everyone.png
Dec 5 2018, 8:27 PM
F27393075: everyone.png
Dec 5 2018, 8:27 PM
F27265809: image.png
Nov 20 2018, 5:52 PM
F27265779: image.png
Nov 20 2018, 5:52 PM
F26444473: for everyone.svg
Oct 9 2018, 2:44 PM
View All 28 Files
Subscribers
Aklapper
• Nirzar
Volker_E

Description

Goal

We need images representing different parts of content of the style guide

Design Principles

  • 1. This is for everyone
Screenshot beforeafterOriginal fileHiDPI readySVG, PNG or …?
everyone.png (108×1 px, 20 KB)
everyone.png (300×788 px, 40 KB)
everyone.svg29 KBDownload
SVG
  • typo icons are low contrast
  • Shouldn't start with a striked-through icon, but with “positive” connotated ones. Same point for icon #3
  • Vitruvian man inspired icon illustration seems disconnected in style and colors from rest
  • 2. Content first
content-first@2x.png (848×1 px, 153 KB)
image.png (582×1 px, 115 KB)
content.svg298 KBDownload
PNG for now, possibility to split in PNG/SVG later
  • 3. Collaboration
collab.jpg (680×1 px, 706 KB)
JPG in 2x size, got re-crushed from original Commons photo
  • attribution needed
  • 4. Trustworthy yet joyful
image.png (862×1 px, 153 KB)
trust.svg23 KBDownload
PNG due to variety of elements/gradients
  1. Consistency
consistency_bak.png (2×4 px, 886 KB)
consistency.png (784×788 px, 279 KB)
consistency.svg2 MBDownload
PNG, too many different elements for now
  • Features obsolete distance between input and search
  • Font issue with serif fonts
  • Publish button is labelled “Publish…” on mobile now
  • We don't use icons at Base100 in production, only Base90 and only when active Base100

Visual style

Principles

  • 1. Paper ink
image.png (864×1 px, 160 KB)
changed to SVG with base64 inkSVG with data uri
  • 2. paper corners
image.png (866×1 px, 75 KB)
changed to SVG
  1. Type + color
image.png (858×1 px, 144 KB)
changed to SVG
  • Wikipedia logo increased in contrast since original image was given
  • 4. style tile
image.png (738×1 px, 134 KB)
PNG 2x

Colors

  • 1. lead image
image.png (840×1 px, 103 KB)
HTML markupHTML

Typography

Has been updated independently, all HiDPI PNGs 2x

Related Objects
Search...

Event Timeline

• Nirzar created this task.May 14 2018, 8:45 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 14 2018, 8:45 PM
• Nirzar claimed this task.May 14 2018, 8:46 PM
• Nirzar added a project: Wikimedia Design Style Guide.
• Nirzar moved this task from Backlog to Next for Development on the Wikimedia Design Style Guide board.
Volker_E added a subtask: T186027: Define aspirational examples for “Imagery” section.May 14 2018, 8:49 PM
Volker_E added a subtask: T156531: Ensure usage of SVGs where applicable.May 14 2018, 11:16 PM
Volker_E subscribed.May 20 2018, 4:17 AM

@Nirzar Do we have attribution for 3. Collaboration one?

• Vvjjkkii renamed this task from Imagery for all sections of style guide to dzcaaaaaaa.Jul 1 2018, 1:10 AM
• Vvjjkkii removed • Nirzar as the assignee of this task.
• Vvjjkkii triaged this task as High priority.
• Vvjjkkii added projects: CheckUser, Connected-Open-Heritage-Batch-uploads (RAÄ-KMB_1_2017-02), Tamil-Sites, Gamepress, Hashtags, Jade, KartoEditor, Language-2018-Apr-June, New-Editor-Experiences, Mail, TCB-Team (now WMDE-TechWish).
• Vvjjkkii updated the task description. (Show Details)
• Vvjjkkii removed a subscriber: Aklapper.
CommunityTechBot renamed this task from dzcaaaaaaa to Imagery for all sections of style guide.Jul 2 2018, 4:12 PM
CommunityTechBot assigned this task to • Nirzar.
CommunityTechBot raised the priority of this task from High to Needs Triage.
CommunityTechBot updated the task description. (Show Details)
CommunityTechBot removed projects: TCB-Team (now WMDE-TechWish), Mail, New-Editor-Experiences, Language-2018-Apr-June, KartoEditor, Jade, Hashtags, Gamepress, Tamil-Sites, Connected-Open-Heritage-Batch-uploads (RAÄ-KMB_1_2017-02), CheckUser.
CommunityTechBot added a subscriber: Aklapper.
Volker_E added a comment.Jul 17 2018, 4:56 PM

@Nirzar “Visual Style – Overview #5” is missing in the description (newspaper and citation). Also “Visual Style – Overview #4“ (style tile) seems to use a low-contrast type.

Volker_E updated the task description. (Show Details)Aug 11 2018, 7:10 PM
Volker_E triaged this task as High priority.Aug 11 2018, 7:34 PM
Volker_E updated the task description. (Show Details)
Volker_E updated the task description. (Show Details)Aug 14 2018, 4:46 PM
Volker_E updated the task description. (Show Details)Aug 14 2018, 4:54 PM
Volker_E updated the task description. (Show Details)Aug 17 2018, 12:36 AM
• Nirzar added a comment.Sep 25 2018, 7:26 PM

hey all,

here's an invision for second iteration of imagery
https://wikimedia.invisionapp.com/share/VWO8UR2C8ZU#/321928356_DSG_Imagery

please provide comments ^^

• Nirzar added a comment.Oct 9 2018, 2:44 PM

for everyone.svg41 KBDownload

joy.svg272 KBDownload

content first.svg2 MBDownload

consistency.svg2 MBDownload

content first.svg2 MBDownload

consistency.svg2 MBDownload

collab.png (680×1 px, 2 MB)

Volker_E added a comment.Oct 9 2018, 4:09 PM

We need to update the resources/WikimediaUI-Style-Guide-Imagery.sketch file accordingly. It also still has at least one comment unresolved about the search input+button margin. If I've got the updated Sketch file, I can continue working on it…

For the collaboration image, I need the source URL. Also, it shouldn't be saved as PNG for high picture quality.

Volker_E claimed this task.Nov 20 2018, 12:46 AM
Volker_E added a comment.Nov 20 2018, 5:52 PM
BeforeAfter
image.png (1×1 px, 3 MB)
image.png (952×1 px, 2 MB)
Volker_E updated the task description. (Show Details)Nov 20 2018, 5:54 PM
Volker_E updated the task description. (Show Details)Dec 5 2018, 8:27 PM
Volker_E updated the task description. (Show Details)Dec 5 2018, 8:33 PM
Volker_E updated the task description. (Show Details)Dec 6 2018, 2:06 PM
Volker_E closed this task as Resolved.Jan 3 2019, 12:39 AM

This has been rolled-out latest with https://github.com/wikimedia/WikimediaUI-Style-Guide/commit/b318d4960aadd22e8b8f1519d72c193d4e20fed0 and is resolved.

Volker_E moved this task from Next for Development to Done on the Wikimedia Design Style Guide board.Jan 3 2019, 12:39 AM
Volker_E changed the status of subtask T186027: Define aspirational examples for “Imagery” section from Open to Stalled.Feb 26 2019, 12:23 AM
Volker_E removed a subtask: T186027: Define aspirational examples for “Imagery” section.Feb 26 2019, 5:27 PM
Volker_E closed subtask T156531: Ensure usage of SVGs where applicable as Declined.Dec 20 2023, 7:48 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits