Page MenuHomePhabricator

Imagery for all sections of style guide
Closed, ResolvedPublic

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 …?
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
PNG for now, possibility to split in PNG/SVG later
  • 3. Collaboration
JPG in 2x size, got re-crushed from original Commons photo
  • attribution needed
  • 4. Trustworthy yet joyful
PNG due to variety of elements/gradients
  1. Consistency
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
changed to SVG with base64 inkSVG with data uri
  • 2. paper corners
changed to SVG
  1. Type + color
changed to SVG
  • Wikipedia logo increased in contrast since original image was given
  • 4. style tile
PNG 2x

Colors

  • 1. lead image
HTML markupHTML

Typography

Has been updated independently, all HiDPI PNGs 2x

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 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 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 added a subscriber: Aklapper.

@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

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

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.

BeforeAfter
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