Skip to content

UOIT-Computer-Science-Society/DesignWorkshop

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 

Repository files navigation

Design Guide

Adobe XD Cheatsheet:

Basic Tools:

"*" = The main ones you should know

  • V : Default Cursor *
  • R : Rectangle Tool
  • E : Ellipse Tool
  • L : Line Tool
  • P : Pen Tool
  • T : Text Tool
  • A : Artboard Tool *
  • Z : Zoom Tool *

Other useful Keyboard shortcuts:

When scrolling:

Good to combine with Zoom tool (Z)

  • Shift : Horizontal
  • Ctrl : Zoom
  • Alt : Zoom

Workflow:

  • Ctrl + Z : SUPRISE IT'S UNDO
  • Ctrl + Shift + Z : This is your redo... not Ctrl + Y
  • Ctrl + Y : Artboard Panel
  • Ctrl + Shift + Y : Assets Panel
  • Ctrl + G : Group Selected Elements Together
  • Ctrl + Shift + G : Ungroup Selected Group
  • Ctrl + E : Export Selected Elements
  • Alt : Show guides relative to selected element
  • Shift + Drag : Maintain proportions
    • This one is SUPER important if you are working with groups
  • Alt + Drag : Size about center

Interesting topics within Adobe XD:

  • Using Artboards
  • Using Groups
  • Shapes vs Path Objects
  • Properties Panel
  • Flat vs 3D
  • Subtle Additions (Shadow and Gradient)
  • UI Kits (Material Design, Wireframes)
  • Masking Layers + Transparency
  • Export types
  • Plugins (CSS & SVG)
  • Other SVG stuff
  • Prototyping + Sharing
  • You can prototype to your phone!

Other resources:

Design Standards:

  • Material Design: material.io

Inspiration:

  • Dribbble.com

Colours:

Recommended

  • colormind.io
  • Coolors.co/app

Other

  • Colourlovers.com (Social for color themes)

Typography:

Recommended

  • Google Fonts : fonts.google.com

Other

  • Font Flipper : fontflipper.com
    • (Like tinder for fonts, this is a new one to me but it seems like it might help some people)

Stock Photos:

  • Unsplash.com
  • Photopin.com

Step up your CSS game:

  • SCSS
    • This version is designed for css3 (the css version that is commonly used today)
    • Commonly referred to as SASS (the name of the original version before css3)
      • Specifically known as SCSS or SASS3
    • Complies down to a single css file, and makes css easier to work with.
    • This is a superset of css, if you can write css you can write scss
      • All you have to learn is how to compile

BONUS: Some Pure CSS Icons that can be animated

  • cssicon.space/#/animate

Fancy SVG Stuff:

  • Optimiser : petercollingridge.appspot.com/svg-optimiser
  • Animate SVGs : shapeshifter.design

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published