The Big List Of Resources For Designing Digital Learning Experiences

I use a ton of resources when designing a new learning experience. I look to several sites and tools to help inspire me, to teach me, and to support me.

From my presentation on UI design for elearning

  1. Ludus

    I use Ludus for my presentations. It's a really awesome web app that I learned about via Product Hunt. The coolest part is that you can easily add in loads of multimedia from different channels. You're able to add in websites via iframe, images from Giphy, icons from Noun Project, videos directly from YouTube, and so much more.

  2. Check out my presentation

    My presentation from DevLearn goes into why great UI design is important, how to scale your designs, and covers resources that will help you to design better.

Get inspired by these resources

I integrate learning about beautiful and user friendly designs into my day. I use these tools and sites to inspire me.

  1. Panda - A Google Chrome extension.
  2. Dribbble
  3. Collect UI
  4. Behance
  5. PatternTap by ZURB
  6. One Page Love
  7. Site Inspire
  8. AWWWARDS
  9. Codepen

Collect what inspirations you

As I'm looking through different designs for inspiration, I add the ones I like to a moodboard. I'll download images of the designs or take screenshots and add them into the moodboard. Here are some examples of moodboards to use.

  1. Go Moodboard
  2. Niice
  3. The Matboard
  4. Pocket

Design a mockup and/or a prototype

My main tool of choice for creating mockups is Sketch. Here are some other common tools for creating mockups and prototypes. A pen and paper also works well!

  1. Sketch (Mac only)
  2. Adobe XD
  3. Framer
  4. InVision

Learn all the things

This list of curated courses have all been tested and approved by me. They've been super helpful in teaching me design tools/coding and a bit about web design fundamentals.

  1. Sketch Essential Training: The Basics
  2. Learning Adobe XD
  3. Code School - HTML/CSS path
  4. Code School - Fundamentals of Design
  5. Code School - The Elements of Web Design
  6. EnvatoTuts+
  7. Daily UI - Check out this ID's take on the challenge.

Get the resources, don't let your dreams be dreams.

I'm always on the lookout for free and cheap resources to help me design a project. These are just a few of the resources I utilize.

Shia LeBouf animated gif of him saying, Don't let your dreams be dreams.
  1. All The Free Stock

    Basically, a giant hub for stock sites on videos, images, graphics, icons, audio, color inspo, templates, and more.

  2. Stock Jo

    Another really great hub for many different stock sites.

  3. Free Design Resources

    A great repository of all kinds of stock multimedia.

  4. Sketch App Sources

    Resources for design for Sketch (and sometimes Photoshop and Illustrator.)

  5. Sketch Repo

    More Sketch resources, UI kits, icons, and more.

  6. Freebie Supply

    Lots of freebies, especially for UI design.

  7. Pixel Buddha

    Lots more freebies.

  8. Up Labs

    Freebies and inspirational resources.

  9. XD Resources

    Free Adobe XD resources.

  10. Hero Patterns

    Just a bunch of nice subtle patterns you can use for backgrounds and other things.

  11. Subtle Patterns

    More awesomely subtle patterns.

  12. Patternico

    Create your own custom patterns.

  13. Vector Emoji

    Because emoji are important.

  14. Emoji One

    Just some more emoji.

  15. The Badass List of Free Stock Photos Websites for Designers

    A massive list of stock photo sites.

  16. ImageOptim

    Reduce your image file size, without losing quality.

— Mel