Page MenuHomePhabricator

Provide Style Guide imagery within Style Guide repository
Closed, ResolvedPublic

Description

{F8716062}With https://github.com/wikimedia/WikimediaUI-Style-Guide/pull/38 in at T163189 Sketch export is working.
We should make use of this automated way for the style guide inherent imagery as well, so the/a source Sketch file is needed.

Event Timeline

Volker_E created this task.Jun 6 2017, 4:54 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 6 2017, 4:54 PM
Volker_E updated the task description. (Show Details)Jul 12 2017, 1:58 PM

@Nirzar I've started with the implementation of the sketch imagery collection file you've provided (also uploaded here).
Images yet missing:

  • Design principles
    • This is for everyone
    • Design for consistency – we should probably reconsider its composition (better alignment, update)
  • Visual Style Principles
    • It is an uncommon mix of new and old media – we need one without possible legal issues
  • Visual Style Typography
    • Grid
    • Contrast
    • Dynamic text
    • Use of styles (3)
  • Icons
    • Lead image
    • Guidelines for creating icons
    • Illustrations

Also in the Sketch file, Artboard 9 isn't clear where it's intended to be used?


And Artboard 11 uses a different “Do/Don't” style than currently at Typography, but I expect this to be replaced with @Pginer-WMF's latest version.

In a minor note, I'd remove the dot besides “W” on basic elements image for branding purposes.

I'll start to amend the file and add it as a PR to the repo.
In the next step files and inputs for typography @Pginer-WMF, for icons @RHo and for illustrations @cmadeo are needed.

Volker_E renamed this task from Provide style guide imagery within style guide repository to Provide Style Guide imagery within Style Guide repository.Jul 13 2017, 11:33 AM
Volker_E added a subscriber: Nirzar.

Multiple enhancements proposed in https://github.com/wikimedia/WikimediaUI-Style-Guide/pull/48:

  • Adding imagery Sketch file to resources
  • Adding automatic build step for SVGs and fallback @2x PNGs of all provided images
  • Introducing grunt-svgmin for saving around ~200kBs of unnecessary over-the-wire data by default Sketch exported SVGs

@cmadeo @RHo @Pginer-WMF PR is merged thanks to Jan. Please either provide me with the other images in Sketch file format or –even better– update the now available Sketch file with it as further pull request.
I've put the artboards on a grid (pages are rows, all starting at x+1000px/y+540px) to make overview easier for users. Also the artboards must have lowercased and hyphenated labels to make exported imagery names web-compatible.

In the next step files and inputs for typography @Pginer-WMF, for icons @RHo and for illustrations @cmadeo are needed.

I added the typography images I made and submitted them in a pull request.
The sources for the following images are still missing in the section:

@Pginer-WMF's PR is reviewed & merged.

RHo added a comment.Jul 18 2017, 7:44 PM

hey @Volker_E - don't think I am able to have PR permissions (?) so please grab the updated Sketch resource with the missing images added from https://www.dropbox.com/s/zq92amgq4qmxiuo/WikimediaUI-Style-Guide-Imagery_Jul18.sketch?dl=0.
Note I took the opportunity to update the images slightly whilst it was added so the updated exports are attached below.




RHo added a comment.Jul 18 2017, 7:48 PM

In T167156#3443234, @Pginer-WMF wrote:
The sources for the following images are still missing in the section:



– hey @Pginer-WMF - I've added the last two missing image resources for typography, and the first image with the gridlines is actually the same "typography-readability" canvas with two 'guide' and 'grid' layer folders hidden in the Sketch file.

cmadeo added a comment.EditedJul 18 2017, 8:46 PM

@Volker_E Added the illustration illustration to @RHo's Sketch file but will need a bit of time to clean up images for Buttons and Textfields.

– hey @Pginer-WMF - I've added the last two missing image resources for typography, and the first image with the gridlines is actually the same "typography-readability" canvas with two 'guide' and 'grid' layer folders hidden in the Sketch file.

Great. Regarding the "typography-readability" I totally missed the hidden layers. I guess we'll have to duplicate the board to have a version with the additional layers enabled in order to the export to work correctly. If we really want to avoid duplication, the common part could be defined as a symbol, but that may be overkill for a sample image that I'd not expect to change much and it is easy to recreate anyways.

Volker_E closed this task as Resolved.Sep 6 2017, 10:39 PM

This has been merged and resolved in 2017-07-26.