Graphics in Elearning

I know that the numerous authors are correct about the importance of appropriate graphics in an elearning program. The key word is “appropriate”. Just as in web design, using an image that is not relevant is worse than not having any.

Graphics or images need to be:

• Relevant or appropriate;
• Understandable; and 
• Useful in the communication of the ideas presented.

A clean layout with consistent font, colour and shapes

As much as images are required, I believe that it’s just as important to use consistent font, colours and shapes (such as buttons). This makes the elearning look professional and helps users know what to expect. 

The other point is to avoid at all cost the “wall of words”. Using images is one way of breaking things up. In my opinion the best way to avoid the wall of words is to keep the words to an absolute minimum. This is done by conveying what is necessary and leaving out the “nice to know”. I have found a great resource in Lisa M. Russell’s documents, including Clean the Clutter of your Words. 

I have been reading and using the book, White Space is Not Your Enemy (WSINYE) by Rebecca Hagen & Kim Golombisky. It’s informative with lots of examples, both good and bad. I highly recommend it.

White Space is Not Your Enemy

As for designing graphics, I seriously looked into learning software more technical than PowerPoint, the Snipping Tool and Paint. I use Photoshop minimally but I decided to spend my energy deepening my knowledge of design and development of elearning rather than graphics. At this time in my career, having some knowledge of web design is more important than becoming a graphic artist. If I need to, I can always hire a graphic designer.

What I've learned:

• I can't learn it all, especially if there is a steep learning curve! Graphic design will have to wait for a next life.
• I have a much better chance at becoming good at elearning and web design than graphic design.
• It's still pretty amazing what I can do with PowerPoint, the Snipping Tool and Paint!

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!