Using Storyboards in E-learning Design

Storyboards were first used to design animation movies. They can also be useful in the design of e-learning. Storyboards come in all types of format - from paper, to Word or PowerPoint documents, to specialized storyboard tools such as Storyboard That. 

The Purpose of Storyboarding

For some interesting background, here is a great YouTube video, The Purpose of Storyboarding. 

I first started using storyboards about 5 years ago, after beginning to design my first e-learning course in PowerPoint (based on Jane Bozarth’s first edition of Better Than Bullet Points: Creating Engaging e-Learning with PowerPoint). I was having a great time creating an e-learning version of an in-class course I had created and taught but it wasn't clear where I was going with the course. After reading Connie Malamed's blog about storyboards, I downloaded the examples of storyboards found in her Storyboard Depot, adapted one and started using it.

I realise that I use a combination of storyboarding and designing directly in Adobe Captivate. After reading the articles on storyboards and wireframes (they are mostly used to design websites), in my How to Design an E-learning Program course, and watching the above video, I realise that I don’t use storyboards in a visual context. For me, it’s all about the content (text) and the flow. The visuals come later.

Storyboarding the Menu

After doing my initial research into my learners and what they need to know, I write a first draft of my learning objectives. This is where I also figure out if I can do the work in one module or if I should have a series of modules. I use good old fashion paper to get this done.

The Menu in Captivate

From my potential objectives, I prepare my introduction as well as plan out how to develop the module using the storyboard. I use the storyboard until I'm comfortable with my outline and where the module is heading. Once I have a path for my module, I usually start working in Captivate. My transfer from storyboard to Captivate is pretty intuitive. When I am doing more word smithing than planning, that’s usually where I go to Captivate.

I may end up doing the rest of the course directly in Captivate, but at one point I go back to the storyboard and copy the text, instructions, etc. from Captivate into it. I do this for a few reasons:

• It's easier for the editor to review the course in the storyboard format;
• I indicate the types and colour of the text boxes, info on the visuals and buttons I used as well as other techniques such as roll-over captions within the storyboard;
• After potential students and my colleagues review the first published version of the course, I make the suggested changes in the storyboard. I use this version to make sure that everything is consistent. Then I make the changes in Captivate.
• Once completed, I forward the storyboard to the translators. I put everything that needs to be translated in French in red within the storyboard;
• Once it's translated, I copy the French text in a copy of the original version of the module in Captivate;
• The French storyboard gets revised by the editor and I make the final minor changes to the French Captivate version.

I like using both the storyboard and Captivate to design my e-learning courses. 

Storyboarding the Main Panel Page

The Main Panel Page in Adobe Captivate

 What I've learned:  

• It's important that I not get bogged down with using a specific tool because I "should" rather than what works best for me.
• I don't spend time with the visuals in my storyboard because honestly I can't draw (free motion quilting doesn't count) and I know that I would spend all of my time on the visuals. Visuals are important, but they have to support the ideas. It's best if I do these after I know where I'm going.

Why E-Learning? Why Not?

I have just started another e-learning course through the University of Toronto's Continuing Education. This one is How to Design an E-Learning Program. The first week is essentially an overview of the other two courses I've taken - Visual Design and Display of Information, and Writing for the Web.

My first discussion topic is:

Comment on a few of the advantages and benefits of e-learning in terms of why you might choose e-learning as your educational medium, and list specific advantages and benefits that impact the program you will be developing as part of this course.

Here's a quick summary of the program I'll be developing in this course:

• Posting on the Intranet Using Umbraco is intended for employees who are tasked with posting content on the intranet. The intranet platform, Umbraco, is relatively easy to use for most simple posting tasks.
• Employees are located across the country and presently get personal face-to-face training / coaching when possible. Otherwise, I use a combination of web-ex and conference calls.



Front page of the Posting on the Intranet Using Umbraco Program

• There are only a few employees in each business unit who post on the intranet, however there is often a very high turn-over for performing these tasks since it is often in addition to the rest of their regular jobs.

Advantages and benefits to having this program be delivered through e-learning:

• Convenience: employees will be able to follow the course at their desk, where ever they are. No more scheduling of boardrooms, web-ex and conference calls.
• Flexible: they will be able to access the parts of the course that they are interested in or are having difficulty with. 
• Self-paced: Instead of learning the basics within a two-hour time frame, employees will be able to stop the training when they feel they have had enough at the time.
• Economic option: it is not feasible to keep teaching/ coaching employees one at a time, or in small groups. Eventually another method of delivery will be required.
• Consistent with the skill sets of the employees: employees who will post on the intranet are usually quite comfortable with technology. An e-learning program will not be outside of their comfort zone.

What I learned in this first week:

• It's going to take me more than one day a week working from home to complete all the readings and assignments for this course!
• I read a few articles on the difference and effectiveness between e-learning and face-to-face training. The bottom line is that e-learning can be as effective or as bad, as face-to-face training. The quality of the training is generally based on its design and how it addresses the learning needs of students. 
  
• I discovered a couple of MOOC (Massive Open Online Course) websites. I had found one website but the course I wanted was neither free or nor available in Canada. I've now registered for the course, Leaders of Learning with edX. It's a course in their archive which suites me better since I can do it at my own pace.  I suspect I may have my hands full with my Design course. I was also intrigued with Coursera. There have less archived courses and more actual asynchronous online courses. 

Wish me luck!

Creating Navigation Tabs

Beautify your Blog

The next lesson on Erin's Beautify your Blog series is 5. Navigation Tabs. I've been thinking for a while about adding more pages to my blogs. Of course, it's important that the tabs link to related and interesting pages. To that end, I've been noticing what types of additional pages bloggers have on their sites. Here are some of the additional pages that are often found on quilting blogs:

• Quilting Tips or Tutorials;
• Link to their e-Shop, patterns for sale, etc.;
• Linking Parties (that they created or participated in); 
• Quilts and Projects (either in-process or finished);
• Quilt-Alongs (that they created or participated in);
• Speaking,Teaching and Events (especially if they are professionals);
• About Me;
• Quilt Gallery or Finished Projects (photos of finished quilts) (some divided by year); and
• Helpful Hints (theirs or links to other resources).

Here are some neat ideas about other possible pages:

• UFO Management; 
• Events that they are attending;
• Annual Plans (usually UFOs and UFO Challenges);
• Quilt Journal (links to all of the blogs related to a finished quilt);
• Ideas for future quilts (lists, links, pictures, sketches, etc.);
• Interesting Resources (on the internet, books, etc.) about design, FMQ; 
• Quilting Bloggers around the world;
• Specific interest pages such as techniques, products like journal covers or purses, original designs, etc.; and
• Specific Projects or a series, etc. (that they created or participated in).

I've been doing some research on the design blogs out there. Many are created by professional designers who have companies, so it's difficult to use them as examples of the types of pages I might want to add to my design blog. I guess the real issue is what is the purpose of the blog. For me, it's about recording my learning journey in design, be it for web, blog, e-learning or anything else. As I keep looking at design blogs, I'll be able to get a better sense of what I will want for the Design blog. I'm slowly making my way though the Top 100 Design Blogs To Follow by Ciera Design.

Technically you don't want to create and publish navigation tabs if they don't link to anything....that's why I started this process in the test site. I'll be creating potential navigation tabs and showing them off in this post, but will only upload them on my "real" site as I create actual pages to link to.

Erin suggested that when creating navigation tabs, that the image for the navigation tab should be about 50px high or less.  I did create a button using the image above but when I went to post it on Photobucket, it didn't let me download just one photo, but rather, it downloaded my entire folder. I was not impressed. It may have been my fault, but after that, I wasn't in the mood to keep at it. Maybe one day when I have more patience, I'll try again.

So, I did what everyone does....I Googled it! I found a web site that said that I can use a gadget for my navigation bar. That sounded good to me. When I searched the gadgets, it wasn't really obvious, but here it is. It worked really well and was fairly easy to install. Now, I just have to figure out what I want to place in my navigation bar.

What I learned:

• It's not a good idea to play with new apps when I'm impatient! On the other hand, it did lead me to find an alternative to creating my own navigation tab. 
• I know that I at least want to link my two blogs together. I'll be able to do this and still keep their design distinct.
• I don't really need an "about me" section, but like Erin said, it is easy to create.

Working on a Header

Weeks 3 and 4 of Beautify your Blog is about the header. I'm looking forward to these because so far I'm not really impressed with the backgrounds that I've chosen. I know that once I create a header that I like, that I will probably have to use a more neutral background.

Here are a few things that Erin suggests:

• If you've adjusted the width of your blog, then you'll want a header that is roughly 1000px wide. The height of the header should be about a third of the width, so in this case, 300px or so.
• Use only a couple of fonts and match your background colours.

I ended up making a large number of headers. I love making these. I've been using PowerPoint to make my own images for years. It's simple to put images together and then add text. One thing that I've learned is that it's best to do this within a coloured box, even if that colour is white. Unless I'm going to use just one background image, the first thing I do is create a white rectangle with a thin border. I then add my images and text boxes. Once I'm done, I save the entire group as a JPEG image. After the image is saved, it's easy to place it where you need it, and then, if you don't like something, to go back into PowerPoint to make changes. That's why I always save my PowerPoint file - you never know when you'll have to go back and make changes.

Here are some of the headers I've tried out on the Test site.

Header with two large images and centered name

In my header I've used a number of images. This example contains two larger images, one of them within a round frame. The blog name is large and in the middle, and as Erin suggested, it contains two fonts and two colours that fit with the background.

Header with round images and smaller name

In this example, I used a number of images within round frames. The blog name is smaller and located under the smaller images.

Header with images in square frames

This header is similar to the above example but the images are within a square frame with rounded borders. There are less of them and they are slightly larger.

You will notice that the background is different. I tried taking a picture of fabric and using these as background. This was my favourite one, but I'm not sure that it's required if I have an interesting header.

Header for Learning & Design Blog

I wanted to try something totally different for my Learning & Design blog. (You may have noticed that the other images are for the Quilting & Learning blog.)

Header with different fonts

This is a similar header with  different fonts and a different background colour. I found the design, Stitches, on the Starsunflower Studio site that Erin suggested. The design is by Jan Kopriva.

Header with an overall image

I've just added a different header for the Learning & Design blog. It took a while to get it right because it turns out that even if you make the background the correct size (970px), when you open it up in PowerPoint, the size will change.

The image is Winter Leaves, designed by Nathalie Ouederni from France. I found the image on the Smashing Magazine website, as part of their Desktop Wallpaper Calenders: January 2015 series. Isn't it great? If you go to Nathalie's site, you can download wallpaper from this image.

What I learned:

• If you want to put writing within your image, you have to have a uniform section to write in, otherwise you'll only see the writing in some sections and not others.
• Details such as font, font size and the frames around images can make a lot of difference.
• Bringing an image into PowerPoint changes its size!
• Working with a width of over 1000px makes aligning images much more difficult within a post. I ended up going back to 970px.
• Getting the same colour background for my test site and this site was very difficult. It turns out that if you want to change the background colour to something specific, you should go to the "Advanced" setting/ "Backgrounds" and then change the "Outer Background".
• The hard part is choosing! Should I keep making new headings or just choose one?  

If you have any preferences, please let me know!

New Look is Coming Along

It's week 2 of Beautify your Blog. Erin's examples and instructions are really well done. The lesson was on Blog Layouts and Backgrounds.

New background

Erin gave us suggestions for finding wallpaper through Google. It turns out that getting the right wallpaper is tricky. They suggest that if you want to image to cover the full background of the blog, then the image should be 1800 x 1600 or greater. However, the image needs to be under 300k - that's quite small. So if you want a large image, the resolution has to be pretty low; and then you would only see the sides of the wallpaper behind your blog.

Another option is to find a smaller image and tile it. This can work very well, but it really depends on the image. I found a funky but not too strong image at Wallpaper Panda.com It's relatively small; tiles well; has colour and interest without over-powering the page.

Following Erin's instructions, I also made the test blog wider. I think it's important to show more of the blog and less of the background!

First version of the new look

Although Erin suggests keeping the blog's background (where the writing is located) white, I just found the contrast to be too much. I played with many colours and the one I liked best was the cream. I actually loved the pale pink, but that didn't give the page enough contrast.

I'm not sure is this is my final background design but I'm going with this choice at this time. The great thing about the design is that it can be changed, and it's even easier than painting a room!

Second background choice

I guess I must of had reservations about my choice because after publishing this blog post and making the changes in the Learning & Design blog, I got an idea (oh oh!) When I took the picture of the blog above, it was with the Snipping Tool and I notices when I posted it that it was quite small in size.....so, why not take a snippet of one of the backgrounds that I liked but was too large, and see if this would work. Well, it did!

Second option for the new look

Now I have a dilemma - which image should I use? I'm going to post images of both images and blogs. I don't have to decide right away - and if you want to tell me which one you like best, that would be appreciated!

The next two lessons are about creating a header - I can't wait. It would be nice to create something that pops!


What I learned:

• I loved playing with the background! I seem to be unable to choose anything that is really sedate.
• Sometimes it's good to consider other tools such as the Snipping Tool to play with your images.
• I also learned how to add a text gadget at the bottom of the blog to give credit for the image.

Beautifying My Blog Project

Welcome back!

I've been reading many blogs lately (usually of a quilty nature of course!) and came upon Sew at Home Mummy's Beautify your Blog series. There are twelve posts in the series which started a while ago so that her series is now finished. That's how I love series...finished! Now I won't have to wait to go from one post to the next.

The series was created by Erin Davis, an incredibly busy Sew at home mummy who tries to blog at least 3 times a week (that's my objective for the month!!) The series was created specifically for those using blogger.com. I'm going to follow the series and post my results in this blog as I go along.

Are you ready for a design adventure? I'll take that as a yes if you're still reading :-)

Week one Start Here:
There are a series of videos on how to get ready for this Adventure.

Video 1 is "How to back up your blog".  Well, since I really don't like my blog's template, I'm going to take a chance and not back it up. I'm sure that all will go well. Once I've changed my blog to something I love, I'll back it up!

Video 2 is "How to make a test blog". That's probably a good idea. I have created the test blog and will copy the positive results on this blog. I can also use my favourite Snipping Tool to take pictures of the not so positive results or anything else that will help you and I learn to beautify our blog.

Learning & Design Blog - Before

I've taken a shot of my Learning & Design: What a Combo! blog as it looks before taking this course. My objective is to beautify it!

Video 3 is about inserting a button within the post and on the side of the blog. Although I had figured out a while ago how to insert a button, I did learn something I had been wondering about.... and it's so simple!

I'm not sure if you can see it in the "before" photo, but the title over the button on the right is "Beautify Your Blog Series", which is redundant since that's what the button says! I was wondering how bloggers got comments like "Participating in..." within their side bar. It turns out that they write that comment as the title! You can also include more than one button in the same gadget. 


As for inserting a button in the post, if you don't want to work in html, you can click the button in the options section to "Interpret typed HTML". This means that you can paste the button information directly on your post page and it will interpret the html code for you. This is how I posted this button. I also followed her instructions for changing the alignment of the button from center to left of the page.

I can't wait to play with my template. So far I've only changed it to Simple. Stay tuned for more changes.








What I learned:

• Although I often work with html coding at work, I didn't really make the link to using it for things like the gadgets that are inserted on the blog page. It turns out that they follow the same principle as web pages. I didn't have the code to insert the Grandmother's Choice button but I followed the code pattern of the Beautify Your Blog button and Voila! Isn't it amazing when you can apply things that you know from one domain to another? Now that's real learning.

Ever After?

It's been almost a year... and I was stumped.

I thought that I would keep being inspired to keep up this blog through the fascinating world of course design. Wouldn't you know it, now that I have my certificate in Adult Ed., I'm really having a hard time finding it fascinating! Hopefully this is just temporary.

In my last post, I applied another template to my blog since I wanted to be more "serious". Well, it's just not ME! For something different, I've switched to a different template. This one looks like some wonderful batik fabric. As Oscar Wilde wrote: "Life is too important to be taken seriously"....life, blogging, design, templates, etc.!

Since last August, I've taken another course through Continuing Education at the University of Toronto. This was Writing for the Web. Although I didn't blog throughout the course, I used it extensively to help me with my Quilting and Learning Blog. As I look back at my earlier blogs, I see the difference. It's mostly the details like:

• creating appropriate links; 
• knowing how to add Gadgets properly (those buttons on the left); 
• using bullets and avoiding the "wall of words";
• keeping a consistent style like my "What I learned" section at the end; as well as 
• just knowing what to write about!

A recent post

One of my first posts

To continue on my learning journey, I've recently been participating in events offered by the quilting blogging community. Seeing and reading other bloggers' sites is a great way to appreciate what works from the reader's point of view. There's even a Blog Hop for new quilters hosted by Plum and June which includes advice from advanced bloggers to new bloggers. It's really great to read blogger's advice and to see these new bloggers. Getting involved is, however, a lot of work. The trick is to balance the time spent on the computer with actual quilting time.

What I learned:

• Blogging is wonderful fun. I don't ever want to take it too seriously that I don't do it!
• Learning can be done in so many ways, from taking a course; putting things into practice; to reading other people's blogs. 
• Everything is so interconnected! I can use my design knowledge to create web pages and beautiful quilts as well as enjoy art more fully.