The Logical Blog by IconLogic

Modern Design: Clean and Simple

by Jennie Ruby 

 

Right now design is all the rage. Companies are promoting designers to the CEO level (design-e-o's?), incorporating design at the highest levels, prioritizing design, paying designers the big bucks, and generally going on a design spree. I'm all for it in many ways. Apple products that show the pinnacle of this kind of thinking are great--the iPhone is designed to "know" whether you are holding it up to your ear or have brought it down to look at the screen, and it shows you what you need to see in order to click, hang up, enter numbers, or whatever. If creating easy-to-use, intuitive products is by design, then by all means give me more design.

 

But designers right now are on a fad of "simple, clean, basic." And all too often, that equates to empty, featureless, and obscure. 

 

Along with simple, clean, and basic has come "flat" design. Cartoons have become flat. Images have become flat. Icons have become flat. Buttons have become flat. The 3-D realistic images of the Apple iOS have turned into abstracted, flat symbols of their former selves (iOS 5 versus 6 shown below).

 

   

 

The major software companies have all gone flat (Microsoft Windows 10 and Office 2013 shown below):

 

 

 

And famously, Google has gone flat, exchanging its shadowed, 3-D feeling logo for a flat one. 

 

But is all this simplicity and flatness benefitting users? 

 

Was it really an improvement when Google, even before the new logo, got rid of the simple words across the top of the screen letting us know that we could choose gmail, maps, calendar, and more? Now, we have to accidentally discover that a decorative little group of squares (shown at the right), with no other labeling, which look merely like--if you will excuse the phrase--a "design" element, is clickable, and that all of the various Google functions now come from a drop-down menu there. 

 

Then, instead of a drop-down menu of words, we see a series of flat images that only a person with a sharp eye for subtle distinctions can recognize as remotely suggestive of their functions.

 

 

 

Yes, the icons were labeled, but the text was in a pale gray, and the images dominated. We were clearly meant to make our choices based on the icons, not the labels. 

 

The Google menu shown above was in use before their latest redesign. With the new, even flatter design, intriguingly, words have made a comeback, with the labels now darker and clearer, and the flat images relatively smaller, inviting us more to read the words than to rely on the flat icons.

 

 

 

Of course that begs the question: If I have to read the words, then why do we even need the icons?

 

Well, once we learn the icons by reading the words a few times, then we start clicking these more by a combination of position and appearance. And this whole business of making icons recognizable and familiar is an old story-after all, we've been learning to recognize icons for like 25 years now.

 

As we design our eLearning courses to have the modern, clean, spare, and flat appearance, though, we have to make sure not to throw familiarity, recognizability, and usability out the window. The last thing our learners need is a learning curve just to be able to use our lessons, from which they are actually trying to learn the content!

 

In the next article on design, I'll share some further examples of barriers to usability, and some good examples as well. In the meantime, what are your thoughts on design? (Feel free to share your thoughts as comments below.)

Development Corner: Image Formats

by Sally Cox  

When it comes to adding images to websites, PowerPoint presentations, or eLearning projects, you will likely be given JPEGs, GIFs, or PNGs. Let's review the three most common image formats and why/when to use them.

JPEG

JPEG is short for "Joint Photographer's Experts Group." It is one of the most popular formats used on the web and in eLearning. JPEG compression (the act of making the image as small as possible while retaining as much quality as possible) is "lossy" compression, which means every time you save an image as a JPEG, it loses quality.

 

The first image above is a JPEG taken with my iPhone. In the second image, I have opened the file in Photoshop and zoomed in on the child's face.

 

 

 

  

 

The little squares you see in the closeup image are called "pixels." Every time you save an image as a JPEG, it loses some quality by throwing out pixels. So if you are editing an image in Photoshop, always save it as the native format first, which is a PSD (Photoshop Document).

 

In the Save As dialog box in Photoshop, choose "Photoshop" as the file format. This saves as a PSD and preserves all details. Then after you finish your edits, do another Save As and choose "JPEG." The original PSD remains fully intact.

 

The image below is an example of the same photo saved multiple times as a low-quality JPEG. Notice that that there is a squarish effect happening and details are lost. This effect is known as "JPEG artifact."

 

 

 

JPEGs use the "RGB colorspace," which has more than 16 million colors. This allows for beautiful continuous-tone images with fluid gradations and a full range of colors. It's a good choice for continuous-tone, but does not allow transparency or animation.

GIF

The "Graphic Interchange Format" (GIF) works in the "Indexed colorspace," so its color palette is quite limited--just 256 colors. GIFs do, however, support transparency and animation (the once-hated animated GIF is making a comeback; I see it every day on Facebook). The oldest format on the web (created in 1989), GIFs are saved as "lossless" compression.

In the image below, I have saved the image as a GIF and it contains just 256 colors. You can see that the image has lost some of its detail.

 

 

Here is an example of an image containing just 8 colors--all detail is gone and the image has a "posterized" effect.

 

 

 

GIFs are perfect for "flat color," i.e., logos or flat design graphics that don't have gradations or continuous-tone (remember: only 256 colors). 

 

PNG

 

The "Portable Network Graphic" was created (approved as a web standard in 1996) to provide high quality continuous-tone but also allow for transparency and animation.

PNGs are saved in the RGB colorspace, so they have the full range of 16 million+ colors. What I like best about PNGs is the ability to save transparency, which I use every day in my workflow. I save my graphics as high-quality PNGs and allow transparency (a checkbox I choose in Adobe Illustrator when I export a graphic to PNG).

In a recent project I wanted to use an image of a headset, and I needed the background to be transparent. I opened the image in Adobe Illustrator and set the Export PNG options to High Quality and set the Background Color to Transparency.

 

 

 

Thanks to the Transparency option, I had the freedom to overlay the headset on the green background shown below.

 

To Recap:

	JPEG	GIF	"PNG"
COLORS	16 MILLION +	256	16 MILLION +
TRANSPARENCY	NO	YES	YES
ANIMATION	NO	YES	YES
CONTINUOUS-TONE	YES	NO	YES
FLAT COLOR	NO	YES	YES

 

***
If you'd like to attend some awesome 3-hour mini courses that focus on eLearning, check these out.

eLearning: More Reflection

by Kevin Siegel   

Last week I wrote about how you can use Reflector to create software simulations and demonstrations from your mobile device.

I received emails from several people who, having read the article, downloaded Reflector and attempted to create a simulation using Adobe Captivate or Articulate Storyline. While most folks were successful in reflecting the mobile device onto the computer, several people reported that none of the actions they took on the mobile device were captured by the eLearning tool. 

As I mentioned in last week's article, the reflection of the mobile device you see on the computer is passive; you cannot control the reflection with the computer. Instead, you can simply see what's happening on the mobile device through your computer.

During the simulation recording process, if you're creating a software simulation, programs like Captivate and Storyline only capture the screen if you click your mouse (or manually create a screen capture by pressing the appropriate keyboard shortcut). Since you're not clicking anything on your computer (remember, the computer is simply showing you a reflection of the mobile device), neither Captivate nor Storyline will capture anything.Unless...

On your computer, start the recording process using Captivate or Storyline. Just prior to performing an action on your mobile device, click the reflection on your computer to create a screen capture. Next, on the mobile device, perform the action. Back on the computer, click the reflection again to create a second screen shot that shows the result of whatever it is you did on the mobile device. Continue this process over and over until you have completed all of the processes you wish to simulate on the mobile device.

If clicking over and over again to create a simulation sounds too difficult, all three of the top eLearning development tools (Camtasia Studio, Captivate, and Storyline) excel at creating videos. If you create a video of the reflected mobile device, everything you do on the mobile device is captured because the video isn't creating individual screen shots, it's capturing everything you do without discrimination. 

***
If you'd like to learn more about eLearning, come hang out in my next eLearning basics mini course. And if you'd like to learn more Captivate, Presenter, or Storyline, we've got a great collection of live, online classes for you.

eLearning: Create Icons Instantly with Iconion

by AJ Walther  

Previously I shared some tips for creating your own great looking flat design eLearning. A recurring trend in flat design is the use of simplified icons in lieu of detailed drawings, images, or photos. Many icons can be found by inserting symbols or certain Clip Art images from within PowerPoint. Creating your own icons from scratch is also not terribly difficult. As an alternative, I'd like to share a fun (and free!) tool for quickly creating and customizing icons for use in eLearning.

Iconion is a free download that is still currently in Beta. After you've downloaded Iconion, you can choose from a large array of icons from four different icon font sets: Typeicons, Linecons, Font Awesome, and Entypo.

 

To create an icon, simply select an icon from the left of the Iconion window, preview it in the center panel, and then add a style from the right panel. The styles are many and varied and, in addition to looking great in your eLearning, would blend seamlessly with Windows and iOS. After you've chosen a style, you can make stylistic tweaks to fills, background colors, gradients, blurs, etc. From there you can save your icon to your desktop in a number of fully scalable sizes. Fast, easy, and great looking!

Here's an example of how I incorporated some icons from Iconion into the slide deck for an online training course here at IconLogic:

eLearning: Creating Accessible Content

by Anita Horsley  

 

While I don't have a disability, I have experience, both personally and professionally, with people who have physical and learning disabilities. I have assisted people with developmental disabilities, and I volunteer for a Therapeutic Horseback riding program that helps children with disabilities ride horses. 

When it comes to eLearning, I develop content for many government and education organizations where Section 508 Compliance is required. Section 508, the Rehabilitation Act of 1973, requires all Federal agencies to make electronic and information technology accessible to people with disabilities.

If you want to make your eLearning courses accessible for everyone, it's a good idea to think about people who are hearing, visually, and dexterity (motor skills) impaired. Additionally, it's important to consider the elderly population and people who speak English as a second language.

Assistive devices provide a way for people with disabilities to communicate and train using technology. People who are visually impaired or blind need devices such as:

• Screen readers (Jaws, Window Eyes)
• Screen magnification
• Braille displays

People with hearing impairments need visual representation of auditory information such as:

• Closed captions
• Graphic displays

People who have mobility impairments may need:

• Alternative keyboards
• Keyboard shortcuts

Although creating accessible eLearning can feel like an additional task, the goal is to enhance your eLearning courses by ensuring that all learners can master the instructional material and meet the learning objectives. When learning is accessible to all types of learners, you are not only complying with regulations, but you are reaching a larger audience, upholding social responsibility, and increasing your effectiveness as an eLearning developer and instructor.

Note: This is the first in a series of articles covering accessible eLearning from Anita. Stay tuned for more! And if you'd like to take a 3-hour deep-dive into the best practices for creating accessible eLearning, check out Anita's live, online course. 

eLearning: What Happened to Microsoft's Free Image Gallery?

by AJ Walther  

In my Optimizing PowerPoint Design for eLearning & Presentations class I like to sing the praises of Microsoft's free online image gallery. But then, a few weeks ago, the unthinkable happened. I went to pull an image from said image gallery, and was met instead with this: 

Do you know what this is? I'll tell you what this is. Useless. It looks like maybe you can search here, but believe you me-you cannot. Where once I found easily searchable free images, I am now met with a screen telling me how to use the newest Office to search for Images (which doesn't work for me as I have Office 2010), how to use Office Web Apps to find images (does anyone use that?),  or how to use Bing to find these images (which I tried with zero success). The bottom of the page gives me links to images for Office 2010 or 2007, which I thought would be just the ticket. But no. Those links instead navigate to a page outlining how to insert clip art. Thanks for nothing.

I guess I shouldn't have been upset that a free service had disappeared. But, ya know what, I was upset. (Spoiler alert: I was upset enough that I kept digging until I found a solution. Read on for more!)

If you've used the free image gallery you probably know how great it is. But if you haven't, here's why it's such a valuable tool for eLearning designers:

You Can search by Style numbers

Let's say you found this image:

  

If you found the image in Microsoft's free image gallery, then it came complete with a linked style number.

 

Clicking the style number pulls up other images from the same style that can all be used together for a cohesive design. That's awesome.

 

Unless you already know the Style number, you cannot search by style number from the Office Clip Art pane. Nor does the clip art mention anywhere in its keywords what the style number is.

Search by General Style 

 Maybe a particular style doesn't have quite enough images for you. That's okay, the image gallery has a feature allowing you to search by general style--pulling up other images that look similar, even if they aren't technically part of the same style group.

 

The Search feature within Office's Clip Art pane does not have this feature.

Note: This feature did not work for me in Chrome or Internet Explorer without first downloading Microsoft's Silverlight. I'm running Parallels, however, so I used Safari on the mac side without having to do any additional downloading.

More Selections

When I search within PowerPoint's Clip Art pane using the keyword "construction" for illustrations, including content from office.com, I get back 106 images to choose from. The same search online in the MS Image gallery brings back 156 images.

When I found I could no longer access my beloved Images section of MS Office's site I spent two hours being bounced around between Microsoft's live online chat and multiple tech support hotlines. I tried explaining what was missing every way I knew how and no one seemed to know what I was talking about. If I couldn't access the site anymore I was hopeful that someone could at least tell me how to identify a clip art image's style number from within MS Office for easy searching. This was not the case.

Luckily (and I know it is cruel to make you wait this long for the solution, but at least you weren't on the phone for two hours), I found the solution on my own. By bypassing the image search page of the Microsoft Office page and instead searching the Office site as a whole, I was able to find the hidden images! For your convenience, here is a direct link.

You're welcome.

(Note: When you click the direct link above, the resulting page will say "found no results” because you haven't searched for anything yet. Go ahead and type your search keyword into the search bar above the text to look for images. After you search you can adjust the Media Types at the left to filter your results.)

eLearning and Design: Another Typography Game and Perhaps Some Inspiration

by AJ Walther

Tantalized by typography? Gaga for good design? Head over heels for history? Gung-ho for a bit of gamification in your free time? Then you must try Type:Rider, available for iOS and Android. Right off the bat I'll tell you it isn't a free app, but the educational value as well as the simple and visually stunning design will make it worth the $3 (or $3.64 for Android--sorry folks!).

The game starts with a six-step tutorial level where you travel through a world of cave paintings (aka the origin of typography) as the gallant [horizontal] colon; rolling, jumping, dodging, and moving objects in your pursuit of collecting typographic symbols and unlocking content for further reading.

In this first tutorial level, the content is cave painting, cuneiform writing, Egyptian hieroglyphics, Chinese characters, the Greek alphabet, and the Latin alphabet.

To advance to the next level, you must find a third "dot" and move it along with your colon character into three designated slots, forming an ellipsis.

The "Origins" tutorial moves on to the Gothic era, where game play takes place in a land of cathedral ruins consisting of books, ink bottles, and misplaced type.

The content you're working to unlock is visually appealing, relevant, and interesting. But if you find yourself caught up in game play, you can always skip the reading and circle back to it after you've finished the level.

To date, I have only gotten as far as the Gothic level. Eight additional levels adorned with mysterious question marks still await me (each decorated in the style of the times so I could probably guess what each has in store).

Aside from the obvious fun and visual interest I've found in this game (that I think fellow designers will find as well), I've also found inspiration for future eLearning courses. Thoughts of creating a game-based course for the medical field with a scalpel as the main character, cutting through to each new level, dance in my head. Or maybe a hard hat in the construction industry-protecting the head of a new character for each level. Have I gotten your creative juices flowing too? Don't be shy (or greedy)--share those ideas with your ol' pal AJ by posting comments below!

And if you've gotten past the Gothic level in Type:Rider, don't give me any spoilers. ;)