What, no colour?

Designing without using any colours other than shades of black – what sort of challenge is this? I love, love, love colour…but not this week.

Artists and e-Learning designers similarly begin with a blank canvas and limited resources – and strive to create high-quality products, but removing my blues, reds and every other colour in my digital crayon box and making me focus on just black, white and tints of black is almost criminal!

I generally associate black with crime – so it seemed fitting that the topic I chose for my design for this “no colour” challenge was cybercrime.

Picture10
Click on the image to view the demo

The Design and the Process

I began this design challenge by thinking about what other elements of design besides using an amazing colour scheme make an e-Learning project engaging.

I came across this article on j6 design in which the six elements of [visual] design (the things that make up a design) – line, shape, direction, size, texture and colour, and six fundamental principles of design (what we do to the elements of design) – balance, proximity, alignment, repetition, contrast and space are detailed. It seems that how we apply the principles of design determines how successful the design is.

Colour is apparently “the first element the mind sees and the last it forgets” – so take away colour from any design and you need to rely on the other elements to make clear consistent emotional connections that in the e-Learning context equate to an engaging and memorable learning experience.

These infographics are embedded from this j6 design article.

With this in mind I realised that I already do focus a lot on the other elements and principles when I design – particularly shape, space, size, alignment and proximity. I also like to choose impactful images which in themselves can foster engagement and connection with the topic.

Generally when I’m designing for e-Learning I use some animation, but try not to over-do this. Some of the examples I looked at prior to starting this design inspired me to use a lot more animation for this design than I normally would.  This was all done with Articulate Storyline entrance and exit animations.

The challenge was also to share something “interactive” – which is also an element that makes an e-Learning project engaging. I didn’t want the interaction or navigation to dominate this design, so chose subtle indications at the interactive parts.

Background music

I’ve mentioned the elements and principles of “visual” design – but incorporating audio into e-Learning design is another way to engage the audience – and for this design I thought it appropriate to add some background music.

Articulate Storyline does not yet have the capability to add music that will play across the whole project without “messing” with the setup a little. Articulate e-Learning Heroes forum discussions on this topic date back a long way.

I’ve not tried to do this before and initially on reading some of the discussions I was a bit apprehensive. However, I got this to work pretty easily (once I worked out how to open the .html file in Notepad!)

Here’s the code I used, added just before the <body> tag:

<audio id=”control-volume” preload “auto” autoplay loop autobuffer>
<source src=”music.mp3″ /></audio>

<audio id = “music” preload = “auto” autoplay loop autobuffer>
<source src = “music.mp3” /></ audio>

<audio src=”music.mp3″ preload=”auto” autoplay loop></audio>

Music credit:

Cognative Dissonance – Electronic Medium by Kevin MacLeod is licensed under a Creative Commons Attribution license (https://creativecommons.org/licenses/by/4.0/)

The Result

Whilst only a demo, and incomplete as far as the actual content goes, I decided to focus more on the visual design. Click on the image at the top of the screen to view the demo and let me know what you think!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s