Using templates to create eLearning
By
Cath Ellis
In this episode of The Learning Pro Live, I decided to share a peek into my daily workflow. As learning designers, we are constantly juggling research, visual design, and content creation. Anything that saves us a few clicks or sparks inspiration is worth its weight in gold.
Inspired by Melissa Milloway’s fantastic newsletter, This Side Up, I have rounded up my top 10 Chrome extensions that I use every single day. These tools help me design faster, steal inspiration (ethically!), and keep my browser organised.
Here are the essential extensions you need to add to your toolkit.
1. Infinity New Tab I start every day with this. Instead of a blank Google search page, Infinity New Tab turns your new tab into a customizable dashboard. I have shortcuts to my most-used documents, eLearning courses, and Google Drive folders all laid out on a beautiful background. It keeps my digital workspace clean and efficient.
2. Loom If a picture is worth a thousand words, a video is worth a million. Loom lets me record my screen and camera instantly. It is perfect for sending quick feedback to clients or explaining a complex interaction to a developer without typing a long email. The free Chrome extension records in 720p, which is perfect for quick updates.
3. ColorPick Eyedropper Ever see a colour on a website and think, “I need that hex code”? This extension lets you click anywhere on a webpage to grab the exact RGB or hex value. It even has a magnifier so you can pick the precise pixel you want.
4. WhatFont This is a game-changer for identifying typography. Hover over any text on a webpage, and WhatFont will tell you the font family, size, weight, line height, and colour. It is the easiest way to deconstruct great typography on the web.
5. Lorem Ipsum Generator Stop searching for “lorem ipsum” and copying text from random websites. This extension generates placeholder text directly in your browser. You can choose how many paragraphs or sentences you need, copy it, and paste it straight into your storyboard or authoring tool.
6. Image Downloader Need to grab assets from a page quickly? This extension pulls every image on a webpage and displays them in a grid, allowing you to download them individually or in bulk. It is incredibly useful when you are doing visual research or need to save client assets.
7. Muzli – Stay Inspired This is my daily dose of inspiration. Muzli replaces your new tab (if you aren’t using Infinity) with a curated feed of the best design content from around the web, Dribbble, Behance, Product Hunt, and more. It keeps me up to date with the latest UI trends without me having to go looking for them.
8. CSS Peeper This one is for the nerds (like me!). CSS Peeper lets you inspect the CSS of any website in a visual way. You can click on a button or container to see its exact padding, margins, and dimensions. It is brilliant for reverse-engineering web designs to replicate them in tools like Articulate Storyline.
9. GoFullPage – Full Page Screen Capture Taking a screenshot of an entire scrolling webpage can be a nightmare. GoFullPage does it in one click. It scrolls the page for you, captures everything, and lets you download it as a PNG or PDF. I use this constantly for adding portfolio pieces or capturing inspiration.
10. Color Contrast Checker Accessibility is non-negotiable. This extension tests the contrast ratio between foreground text and background colours directly in your browser. It tells you instantly if your colour pairing passes WCAG AA or AAA standards, ensuring your designs are inclusive for everyone.
Watch the full video above to see live demos of each extension and learn how to install and configure them for maximum efficiency.
