Share Your Button Starter Kits for E-Learning Designers #133

Button Starter Kits #133: 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

Button Starter Kits

Today’s authoring tools make developing e-learning easier than ever.

But 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 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 by Montse Anderson

This button starter kit features a static view of the core button states (normal, hover, selected, and disabled) as well as prebuilt button sets in both dark and light colors.

Button Starter Kit 1.0 by Montse

View the button starter kit | Download the button starter kit

Button Starter Kit by Matt Guyan

This outstanding button template contains prebuilt buttons for navigation, quizzing, and content slides. The kit also includes several animated buttons to give your projects a creative touch.

Button Starter Kit by Matt Guyan

View the button starter kit | Download the button starter kit

Bilingual Button Kit by Alexander Salas

This button kit provides a creative solution for bilingual courses by using the button hover states to include the translated text.

Button Kit by Alexander Salas

View the button starter kit | Download the button starter kit

Challenge of the Week

This week, your challenge is to share a button starter kit for e-learning. Include as many different button types and styles as you’d expect to use in a typical course.

This week’s challenge is not a repeat of our animated button challenge. That button challenge was more about playing with creative effects for buttons. What we’re looking for this week are more complete sets of buttons to help designers get a jump start on their projects.

Related E-Learning Challenges

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.

Google Drive Users: Move Your Hosted E-Learning Examples to a New Server!

Google announced it’s pulling the plug on Drive’s hosting service. After August 31, 2016, your e-learning portfolio, challenge, and demos will no longer work. Learn more about moving your projects!

Google Drive Web Hosting is Going Away

Learn more about moving your projects to a new server! 

151 Comments
Maija Perfiljeva

I wanted to make buttons which would be interesting, but at the same time resizing-friendly (sometimes it is not so simple to resize buttons with extra objects in individual states). For multilingual developers sizing and resising is a painful topic! With this in mind, my set has some 'composite' buttons, which have a separate text-containing part - its length can be resized without adjusting additional objects in specific states. In other words, what you see is what you resize. :) The only exception is the custom marker, where the text popup is hidden in the 'selected' state, but it is easy to resize as you'd need to adjust only the popup, rather than the whole button. Published version: http://bit.ly/232ualw Story file in hot pink: http://bit.ly/ELH133-pink and peaceful blue: h... Expand

Jeff Kortenbosch
Brenda Tyedmers

Here are two demos created in Civic and Paper colour themes. They have normal, hover, down, visited disabled states. Similar to what Jeff indicated above, just select another colour theme and apply if you want to change them. Paper Theme: http://elhchallenges.s3.amazonaws.com/133%20Button%20Kit%20-%20Paper%20Colour%20Theme%20-%20Storyline%20output/story.index.html Civic Theme: http://elhchallenges.s3.amazonaws.com/133%20Button%20Kit%20-%20Civic%20Colour%20Theme%20-%20Storyline%20output/story.index.html Story Files Civic Theme https://www.dropbox.com/s/n3rmh03aknt50nz/133%20Button%20Kit%20-%20Civic%20Colours.story?dl=0 Paper Theme https://www.dropbox.com/s/c6dhtweqm5oybfa/133%20Button%20Kit%20-%20Paper%20Colours.story?dl=0 Technic Theme https://www.dropbox.com/s/e34nlq9... Expand

Kayla Burtch

Hey all, I took this as a great opportunity to share one of my best asset-finding secrets - video game assets! When you think about the kinds of things we need to do in e-learning, a lot of it overlaps with game development (We want menu buttons, forward/back buttons, volume control, etc. etc.) And the game development community is as open to sharing as we all are! Which means there are thousands upon thousands of assets that are royalty free / share alike creative commons (Be careful that their version of copyright does not need an attribution! But many don't!) Just a word of warning - When using states to shift between buttons that are separate images, ensure that each image is THE EXACT SAME SIZE in pixles, and use the right click > change picture feature, otherwise when you... Expand

Kayla Burtch