User:HDothiduc (WMF)/Design Resources

List of resources for designing in general and specifically about the movement. This should help making things pretty, fast, flexible and more.

General

• Webaim contrast checker

Images

Example of good images. Check the image categories

Editing

• 

Volunteers

• 
  https://commons.wikimedia.org/wiki/Category:Wiki4women_2018
• 
  https://commons.wikimedia.org/wiki/Category:Wiki4women_2019
• 
  https://commons.wikimedia.org/wiki/Category:ArtAndFeminism_Promotional_Images
• 
  https://commons.wikimedia.org/wiki/Category:ArtAndFeminism_2019/MoMA

"Tech" photos

• 
• 
• 
• 
• 
• 
• 
• 
• 

Categories to check out

• https://commons.wikimedia.org/wiki/Category:ArtAndFeminism
• https://commons.wikimedia.org/wiki/Category:Wikimedia_edit-a-thons_relating_to_art
• https://commons.wikimedia.org/wiki/Category:Wikimedia_meetups
• https://commons.wikimedia.org/wiki/Category:Wikimedia_edit-a-thons_relating_to_gender

Icons

• OOUI icons on Commons
• Font Awesome (Search) / Font Awesome 5 solid icons on Commons

After Effects

• School of Motion Keyboard shortcuts
• Illustrator to After Effects
• Text animation (range selector magic)
• Mattes in After Effects
• FX Console Plugin for working more efficiently

Illustrator

Exporting svg for Commons

Styling	Internal CSS
Font	SVG
Images	Embed
Object IDs	Layer Names
Decimal	5
Minify	Check
Responsive	Check

Might have to remove data-name attribute for valid svg based on https://validator.w3.org/#validate_by_upload, when exporting multiple artboards

Solved Illustrator SVG export issues: Set Decimal Places to 4 or 5. For any distorted paths do: Object > Path > Add Anchor Points (Context: This is a common error in .SVG file .. that's because hard curves (curves made with only two anchors and long handles) this cant not be rendered good by the browser. The best thing to do is to divide your path into smaller segments, specially around the anchor that have the problem.) - https://graphicdesign.stackexchange.com/a/54171)

Figma

• Best practices: components, styles, and shared libraries
• Type in Figma
• Tips and shortcuts (more for superuser)
• Figma community - plugins etc, Google Sheets sync, Contrast (checker), Lorem Ipsum and many more

Video export

• Export to webm with Adobe Media Encoder http://www.fnordware.com/WebM/