Using Button UI Kits to Jumpstart E-Learning Course Development #360
Button Starter Kits for E-Learning #360: Challenge | Recap
Stop Designing from a Blank Canvas! Get a Jump Start on Your Next E-Learning Project with Button Starter Kits
- Fantastic starting point for many e-learning projects
- Mock up projects with button kits to give clients a general idea of how the course will look
- Customize the buttons after you’ve decided on the general design and layout
- Save development time by using existing buttons
Today’s authoring tools make developing e-learning easier than ever. However, that doesn’t mean course designers always have extra time to play with new design ideas, much less start every project from scratch.
The goal for most designers should be to find ways to reuse common course elements like content slides, quizzes, interactions, and, of course, UI elements.
We have already looked at course starter templates and how they can help designers create a general structure for their projects. This week, we’re going to look at a smaller component of course starters: button kits.
Button Starter Kit Example
Here's an excellent example of a button starter kit that contains prebuilt buttons for navigation, quizzing, and content slides.
Example | Download | David Lindenberg | Website | @dvdlindenberg
Maija's button starter kit comes in two colors and features a rich collection of core button styles, including radio buttons, checkboxes, and toggle buttons.
Red: View project | Download | Blue: View project | Download | Maija Perfiljeva | Website | @GamayunTraining
Challenge of the Week
This week, your challenge is to share a button starter kit using common button styles. Include as many different button types and styles as you’d expect to use in a typical course.
- The Ultimate Guide to Buttons in Storyline 360
- Tips for Designing Buttons That Scream “Click Me!”
- Everything You Need to Know About States in Storyline 360
Share Your E-Learning Work
- Comments: Use the comments section below to share a link to your published example and blog post.
- Forums: Start your own thread and share a link to your published example..
- Personal blog: If you have a blog, please consider writing about your challenges. We’ll link back to your posts so the great work you’re sharing gets even more exposure.
- Social Media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can track your e-learning coolness.
Last Week’s Challenge:
Before you get started clicking this week's challenge, check out the Valentine's-themed examples your fellow challengers shared over the past week:
Love-Themed E-Learning Examples RECAP #359: Challenge | Recap
New to the E-Learning Challenges?
The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.
Learn more about the challenges in this Q&A post and why and how to participate in this helpful article.
ENTRY #1 UPDATED: Was able to take a second look at the shadow effect settings I had in place - particularly for the Down state - and, thanks to your suggestions/feedback, made adjustments that effectively eliminated that pesky white fringing I was seeing (also noticed that the shadow effect from the Normal state was indeed "bleeding" into the Down state - thanks again, Jon, for pointing that out!) Simple, bold, and clean button set...though there is that annoying white border to deal with (see project feedback): https://360.articulate.com/review/content/771f54ce-c76a-4716-a32b-b67cfe824be5/review ________________________________________ 2nd Entry Came across this sleek UI kit and figured I'd try replicating bits of it in SL: https://www.pinterest.com/pin/1686739485... Expand