Using a good colour palette is important. Look around major websites<\/a> and look at their use of colour. Notice anything? You’ll see that most employ a palette of 2-3 key colours. Anything beyond that are generally shades of those colours that compliment the main\u00a0palette depending on the type of action they achieve (e.g. web link, save, edit and purchase buttons). All colours can be categorised to a particular meaning<\/a>, and you should carefully consider these before designing something.<\/p>\n If (like me) your sometimes unsure of “colours that go”, there are some great tools out there that are free. Such as Adobe’s Colour app “Adobe Color CC<\/a>” (previously Adobe Kuler). This easy to use app can be used on desktop of mobile devices. You can upload an image to it and let it create a colour palette for you or you can manually choose colours from it. From there you can take the hex and RGB values from it to use in your designs. Easy!<\/p>\n Building a good flow into your designs are important. And providing a good contrast in key areas help the user quickly negotiate things like navigation and call to action buttons required to proceed. An example would be a disabled button could have a mid grey background colour overlaying a white background when the user has yet to answer a question or complete a task. Then it would turn green once the user has completed the task and is ready to proceed. The use of contrast here dictates to the user without having to create extra text explaining what they need to do.<\/p>\n An example of where this type of scenario could go wrong however is when designers implement a background image that is quite busy. Having a button overlaying this image could easily be missed by a user… unless careful consideration is used in the contrast between the button and the image with a good use of colour.<\/p>\n For more information about the importance of good contrast for more than just aesthetic purposes, as I haven’t even talked about accessibility yet!… see this article from Smashing Magazine<\/a>.<\/p>\n Using any eLearning package shouldn’t be a maze. We’ve all probably been on at least a few websites that you get completely lost on, forcing you to frantically click the back button. It shouldn’t be a puzzle to get to where you want as this leads to frustration to the user that has just come to learn and engage. And one of the\u00a0key factors to this is repetition. All of the elements in this list (colour to balance) require repetition. So things like, font sizes, styles, colours, paddings, margins, navigation, headers and footers should all be consistent for each page your user visits. Allowing them to be able to fully commit to learning.<\/p>\n Style is like art, in that its a very personal choice. Everyone has their own opinions of style. With this brings challenges we face as designers to give them confidence that this eLearning tool is current (cool if it has to be!), and is appealing. Imagine using something designed like an old 90’s website… would you trust its content to be current and up to date?\u00a0Creating a good style should come naturally by utilising the other elements discussed in this blog post. But if your not sure how to design something, don’t just throw the kitchen sink at it! As over styling is a thing, and not in a good way!<\/p>\n This coincides overlaps (ironically) with repetition and balance in that alignment is important to create an overall sense of style. Good alignment can allow elements on a page to breath, to have their own space in such a way that it doesn’t look out of place. Remember that alignment applies to everything your user looks at!<\/p>\n When\u00a0trying to create a balance, try to layout elements in such a way that creates a flow. Depending on the contrast and alignment of objects, users generally instinctively look from top to bottom, left to right. Bare this in mind when balancing content within your eLearning package. Thats not to say to centrally align text 100% width and have text, image, text image! You could make it more interesting by narrowing the width of the text to 60% and then adding a few smaller images on the\u00a0right taking up the\u00a0remaining space with some padding and white space thrown in (don’t forget the white space! Its like dark matter, you don’t really notice it but know its there and its important too – so I’m told).<\/p>\n There is no hard an fast rule to successfully creating a well designed eLearning package, but by following the above guidance and techniques, you soon understand why other good looking materials, websites and apps look aesthetically pleasing. And thus able to replicate that vibe on your designs. For extra inspiration I recommend using Pinterest<\/a> and search something like web inspiration or colour palette inspiration etc.<\/p>\n Next blog post in this series:<\/strong>\u00a02\/5\u00a0Add meaningful interactions<\/a><\/p>\n Or choose from this series:<\/b><\/p>\n 1\/5\u00a0Build a compelling visual experience<\/p>\n 2\/5\u00a0Add meaningful interactions<\/a><\/p>\n 3\/5\u00a0Let learners pull content<\/a><\/p>\n![\"Adobe](\"http:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2015\/11\/Adobe-Color-CC-screenshot-1024x595.png\")
<\/a>Contrast<\/strong><\/h2>\nRepetition<\/strong><\/h2>\n
![\"maze\"](\"http:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2015\/11\/maze.png\")
<\/a>\u00a0Avoid the\u00a0above!<\/strong><\/p>\nStyle<\/strong><\/h2>\n
Alignment<\/strong><\/h2>\n
![\"alignment\"](\"http:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2015\/11\/alignment.jpg\")
<\/a><\/p>\nImage from url:\u00a0http:\/\/tympanus.net\/codrops\/2012\/06\/19\/line-that-up-proper-alignment-in-web-design\/<\/a><\/h6>\n
Balance<\/strong><\/h2>\n
![\"balance](\"http:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2015\/11\/balance-example-1024x663.png\")
<\/a><\/p>\nA good example of balancing multiple elements on a page:\u00a0http:\/\/unboundwebsitecreations.com\/7-elements-for-a-balanced-page-layout\/<\/a><\/h6>\n