Fruit bars, vegan book and design inspirations
While working on challenge #92 which was about creating navigation instructions in e-learning courses, I've noticed how much visually I absorb from things around me and implement them into my e-learning examples. Inspiration is everywhere!
I saw this great poster one day and the next week, when the navigation instructions challenge was announced, I knew it's going to be my design inspiration for the challenge.
Have a look at the image below: home button is a small house icon at the top of the hills, which are topics of my course. A tree with big white R is for the resources slide (custom built), a gray tree was my slider thumb, when you move it right, an instruction appears placed on a cloud. I chose two types of font and inserted some data visualisation graphics on the next screen - just to show how easily new style-unified assets can be created.
(click the image to launch the interaction)
Always consider what kind of design is suitable for the subject you're going to present.
Not only I was inspired by this great flyer - check this awesome bike thief game by Christine Jeziorowski.
I remember very smart tip from Tom Kuhlmann's blog which I read over 6 years ago: when you find any interesting design element/interaction/visual effect on the web, always take a print screen and place it into folder. You can have a look inside the collection of inspirational assets, whenever you need design idea for a project. So simple and helpful.
When I do shopping I often pay attention to the packages of the products - like this one below, which is a box of fruit bars.
Or this book which I got few days ago (not only cover is brilliant, but the inside design as well).
These two examples are great design starting point for an e-learning course about eco-style living: saving energy, recycling, healthy food, environmental protection, etc.
Being inspired by design mentioned above I created some UI elements in PowerPoint:
- color palette (to define color code use the eyedropper tool and pick a color from a picture/other shape)
- background: wrinkled sheet of paper (but you can use pin board, old paper, cardboard, notepad paper or a texture as a background too). It was originally white, but thanks to color saturation and brightness/contrast options in PowerPoint it's easy to change it
- title rectangles/buttons/hotspots filled with few brush strokes, which I've done in Photoshop (to do so - paint some strokes in Ps, save them as .png and import to PowerPoint. Then fill a shape with .png - select "Tile picture as texture", manipulate with offset X and Y to get nice effect)
- I chose 2 types of fonts for the content: "From where you are" and "Open Sans"
I've designed 4 types of slides to show you how I imagined all this groovy stuff working together:
- menu slide
- content slide "text + photo" type
- quiz screen (question + feedback shown)
- content slide "text + graphic" type (with hotspot shown)
The bird (menu), fruits (quiz) and few graphics on the last slide are imported icons from Flaticon website. You can set up the size, border and filling color and save it as .png. It's really handy resource to have. After inserting these elements into PP, I've applied line drawing artistic effect to them and it gave cool look and feel fitting to the style I chose.
The grass, tree and border rectangle are drawn in PP, exported as an image and imported back to PowerPoint, again with this line drawing artistic effect applied.
See a PDF preview of the slides and if you like this kind of design, feel free to download PowerPoint file (no font provided), rebuild it, add more slides (e.g. video, data visualisation, other type of quiz, summary) and use it for your future e-learning project or presentation.
As always I'm looking forward to your comments.
