Design meeting notes for June 27, 2018

Transcript of the whole meeting can be found in our Slack-channel.

Sketchpress and WP Admin Design System

Special topic: we spent a good portion of the meeting discussing how to bring together a few amazing Sketch resources that have been developed. The hope if that having one source of truth will make it easier to accelerate design for anyone working in the WordPress community. See SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. for the whole discussion but some highlight are noted here.

The resources and creators are:

@Sarah James from 10Up https://github.com/10up/SketchPress
@garusky from Milan https://github.com/motork/WP-Admin-Design-System
@Joen has an extensive Sketch file and library from his work on GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/

Where will this live?

The SketchPress repo I created already has traffic and followers, so keeping it all in there might be good
A contributions file in the repo would be key to capturing all the efforts that would be merged into the single location
A solution is still being discussed…

How can we all contribute to this and help?

Let’s all be thinking about this

Triage Inbox

Nothing this week

Calls for design: follow-ups

@cathibosco requests to discuss the ‘Make a blog post‘ page design

Everyone agrees that subpages are a good design direction

Infographic of Training Team workflow

@estelaris shared that the simplified version is up in TrelloTrello Project management system using the concepts of boards and cards to organize tasks in a sane way. This is what the make.wordpress.com/marketing team uses for example: https://trello.com/b/8UGHVBu8/wp-marketing. and Training team will review and discuss which one they prefer

And that was all the time we had today.

#meeting-notes

Joen Asmussen 8:54 am on June 28, 2018
How we use Sketch Libraries

High level learnings:
- Sketch libraries can make it drastically simpler to create mockups without creating conflicts, and keeping components up to date.
- A Sketch Library is not a Pattern Library. The latter is something you can create using a Sketch Library. Sketch Libraries is for making Sketch symbols/components reusable across many different sketch files
- Google takes a somewhat similar approach with their Sketch Toolset.
- Creating reusable components that are included in many projects and updated centrally, is a key factor in speeding up workflows. With GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ we are looking at doing that with ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/.. Using Sketch with Sketch libraries and symbols can get us close to the same, but with design, by creating reusable symbols that live in a central, shared location.
Specific tricks:
- Sketch Artboard Tricks has an option to rearrange artboards into grids. This is a great way to rearrange icons and sketch symbols into a neat grid to keep the library file tidy.
- Sketch symbols are grouped together based on dimensions. Any symbol that has a 24x24px grid can be swapped out for another of the same size. By leveraging this, we can group symbols based on the dimensions. Icons are 24×24, color swatches are 30×30, that way you can choose an icon and then a color and not accidentaly mix the two.
  - This can be applied further to button styles. If for example you have a Primary button that’s blue and a Secondary button that’s gray, give them the same dimensions so you can swap them back and forth.
- When a Sketch symbol is sufficiently reusable, put it in the shared Sketch Library. Any Sketch mockup file that references that library file, next time it gets updated, will receive an update notice. For example you might find a bug in the button symbol that means it’s not properly resizable. If you fix it in the pattern library, then share the file with other designers, those will receive the benefits of your fix as well.
On Icons:
- We’ve had some discussions in the Dashicons project to reinvigorate the icon set. This can include moving towards multiple sizes, where 24px and a scaled down 18px version can work for us. The discussions are here. WordPress.comWordPress.com An online implementation of WordPress code that lets you immediately access a new WordPress environment to publish your content. WordPress.com is a private company owned by Automattic that hosts the largest multisite in the world. This is arguably the best place to start blogging if you have never touched WordPress before. https://wordpress.com/ already uses a 24px icon set that is also open source, and so some mockups for Gutenberg have been created with a 24px set in mind, adding 2px padding to all icon components so Dashicons and Gridicons can be used interchangeably. Google’s Material Design icon set is also 24×24 which opens up opportunities for pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party developers to use an expanded set, which can be important given new Gutenberg APIs.
- The way to create re-colorable icons in Sketch mockups is a little roundabout — you have to create first a color swatch as a symbol, then insert that with the icon itself as a mask. This allows you to switch out the color from a dropdown menu. Thankfully, Sketch Icons can take all the manual labor and vinegar out of managing this. See attached GIF.
  - Dashicons are on a 20x20px grid. To make those interchangeable with Gridicons, simply import them with 2px padding, and they will have the same symbol dimensions and therefore be swappable.
Next steps

SketchPress is cool. Thank you, 10up, for creating this project. We would love to contribute the above learnings, and any Sketch file details to you, if you’d have it. What’s the best way to approach this? For now you can look at the Sketch library we’ve created. It is not yet fully complete and expansive, but we believe there are some good learnings there that can be contributed back up to the SketchPress repo. Let me know what you think is the best way to proceed.

Screenshots & GIFs
- Monique Dubbelman 9:06 am on June 28, 2018
  
  Thanks @joen , this is really helpful. I’ll try and find a way to integrate this info in the handbook.
  - Joen Asmussen 9:07 am on June 28, 2018
    
    ✨
    
    Noting that while you can go ahead and use the library, there are still some unanswered questions worth working out before it’s a good idea to rely on it for production.
    - Monique Dubbelman 9:30 am on June 28, 2018
      
      I was a bit too quick with my comment. Totally agree we should first digest what was said yesterday and work/further explore from there. Maybe it would just be nice to have this information findable for other people to prevent reïnventing the same wheel? For now, I’ll post a link to your comment on the card we’ve created in our Trello design board.
- jarahsames 9:00 pm on July 23, 2018
  
  I wanted to follow-up and see if everybody has added their thoughts to this thread (and to thank @joen for such a wonderful write-up!)? I am going to take these findings, and the shared Sketch file (thank you for that, too) and see how I can improve the SketchPress GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/.
jarahsames 9:47 pm on September 20, 2018

GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ file is updated to include a Sketch library file. I would consider this a betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. version. You can access the file here

https://github.com/10up/SketchPress/blob/master/SketchPress_WP-Admin_Library.sketch