Resources

Textbooks

The textbook mentioned in the section, and all readings assigned in the course modules, are available to Algonquin students for free through Safari Books Online.

http://www.algonquincollege.com/library (opens new window)

Recommended textbooks:

Note: Free to use when signing in with your AC SSO.

Mobile Design Pattern Gallery - UI Patterns for Mobile by Theresa Neil

• O'Reilly Media; 2nd edition 2014
• ISBN-13: 978-1-4493-1432-3
• oreilly.com/library/view/mobile-design-pattern/9781449368586/ (opens new window)

Designing For Touch by Josh Clark

• A Book Apart; September 2016
• ISBN: 9781937557294
• oreilly.com/library/view/designing-for-touch/9781492017851/ (opens new window)

eText books:

http://www.algonquincollege.com/etexts/ (opens new window)

Software

Links to Adobe software:

• www.adobe.com/ca/creativecloud.html (opens new window)
• Digital Resource Portal (opens new window)

Online Resources

• Algonquin Student Survival Guide: algonquincollege.libguides.com/student-survival-guide (opens new window)
• LinkedIn Learning: https://www.linkedin.com/learning (opens new window)
• Pluralsight: www.pluralsight.com (opens new window)

UI/UX Design Resources

Tools

• Graphics

  • Squoosh app (image optimization) (opens new window)
  • CSS Gradient Generator (opens new window)
  • Gradient Generator (opens new window)
  • SVG Editor (opens new window)
  • svgOMG (opens new window)
  • Android DP/PX converter (opens new window)
  • Website style Guide generator (opens new window)

• Paper prototype templates

  • Download 1: sneakpeekit.com (opens new window)
  • Download 2: alterspark.com (opens new window) or (PDF download (opens new window))

• Information Architecture (Free educational diagram tools):

  • app.moqups.com (opens new window)
  • mind42.com (opens new window)
  • www.mindmup.com (opens new window)
  • whimsical.com (opens new window)
  • Data Architecture (high-level) diagram tool: isoflow.io (opens new window)

• Brainstorm tool:

  • miro.com (opens new window)
  • padlet.com (opens new window)
  • mural.co (opens new window)
  • Post-it® App (opens new window)

• Wireframe/UI Design

  • Balsamiq (Free student access) (opens new window)
  • Sketch (50% student discount) (opens new window)

• Prototype

  • Figma (opens new window)
  • Adobe XD (opens new window)
  • InVision Studio (opens new window) & Cloud version signup (opens new window)
  • Sketch (50% student discount) (opens new window)

• Colour

  • Adobe Color CC (opens new window)
  • Colormind.io (opens new window)
  • Online colour accessibility tool
    • Material colour picker: (opens new window)
    • Color Oracle – Design for the Color Impaired (opens new window)
    • Sim Daltonism Mac App(The color blindness simulator) (opens new window)
    • Geenes (opens new window)
    • Colorable: (opens new window)
    • w3schools tool: (opens new window)
  • Online colorizer: http://paletton.com (opens new window)

Design Resources

• Free stock photos & videos(Creative Commons) (opens new window)

• Icons and Photos For Everything (opens new window)

• Laws of UX (opens new window)

• Designing for Readability – A Guide to Web Typography (opens new window)

• Platform Specific Guidelines

  • iOS Human Interface Guidelines (opens new window)
    • The iOS Design Guidelines: An Illustrated Guide (opens new window)
  • Android Design Guidelines (opens new window)
  • Material Design Guidelines (opens new window)
  • Progressive Web App Design Best Practices (opens new window)

• Platform Specific Design Resources

  • Apple Design Resource (Kits) for Sketch, Adobe XD and Photoshop (opens new window)
  • Android Material Design Resources (opens new window)
  • MAC System Fonts (opens new window)
  • Material Design Fonts: Roboto, the default system font for Android (opens new window)
  • Material Theme Builder (opens new window)

• Persona templates by xtensio.com (opens new window)

Additional Reading

• Creating Excellent UX Flow Charts – EightShapes – Medium (opens new window)
• 32 User Interface Elements For UI Designers: Your Ultimate Glossary (opens new window)
• Gamification: A guide for designers to a misunderstood concept (opens new window)
• Empty State Best Practices(UI Design) (opens new window)
• How to design for AI-enabled UI (opens new window)

Tutorials

• Figma – Getting Started Video Tutorial (opens new window)
• Adobe Xd – Start using XD (opens new window)
• Sketch for UX Design video tutorials (opens new window)
• Getting Started with InVision (opens new window)
• Adobe Create Magazine for tips & tricks (opens new window)

UI Design Examples

• Android App on pttrns.: (opens new window)
• Apple Design Awards: (opens new window)
• 15 Progressive Web App Examples that Brand Owners can Learn From (opens new window)