Flat Design eLearning Template

Jun 18, 2013

Good Evening Community...

Thought I'd share my newest template that I've been working on for the past few days. We've had some discussion about "flat" design in the past here, and with Apple's recent departure from skeuomorphism, I thought it would be fun to play with the flat look and feel. 

Check out a working demo here.

Download the template here.

Also, if your'e interested, I also wrote separate blog post, which has some extra stuff about development of this template. 

Enjoy! Tim

95 Replies
Bruce Graham


Have thought about this over a simple but particularly fine lunch...so a question...

This is all very well so long as imagery is not involved. I would have thought that adding any (standard) iStock'y types of images would completely ruin this.

If someone were to re-use, what's the best way to incorporate images, from a design perspective?

Do you have any examples you could offer that work well?

I would have thought "icon" style graphics would work well, but photos? Not so sure.

Appreciate your input here for those of us struggling to take design to the next level.


Karyn Lemberg

Great template Tim!

Bruce - as for images, I think they would work fine - as long as you use a nice thick border around the image to keep it a flat block-type shape(ie no shadows or glows etc). on the content pages or on the smaller sliders or ?: a image filling the entire rectangle would prob work too.


Tim Slade

Thanks for the kind words everyone! I always forget to subscripe to the responses here, so I apologize for coming back so late to comment.

Bruce, as for images, I don't think it would ruin it at all. Like Karyn mentioned above, I think it all depends on how you incorporated the images. Like she said, no shadows or extra "visual bling."