Picture of Daryl Hedley
Building a product around Adapt - Theming Part 1
by Daryl Hedley - Wednesday, 5 August 2015, 9:10 AM

Hi everyone,

During these posts I'd like to share with you our experience of building a product around Adapt. In this post I'll share with you our experience of theming in Adapt.


We knew that theming had to become an easy and affordable process for Adapt to work as a product. This meant not re-doing designs that have had time and resource spent on it. When we first started this approach we researched the best layout for learning, using teachers and students feedback through a variety of courses.


All this research pointed to one recurring idea. An idea that had been talked about when we first starting building Adapt:


During the prototype stage of building Adapt, myself and Paul Welch played with the idea of blocks and quickly found we wanted more layout options and that screens wasn't enough for the type of learning we wanted to create. At this time I was travelling to work on a bus and remember picking up a metro newspaper. This sparked a thought that we use a lot of rich media everyday and our inspiration should come from this too. Every newspaper page has a few articles that contain content blocks. Each block tended to have one or two elements (components) either graphical or text. We took this and looked at other forms of media. Quite a lot of content based layout followed this approach. Although we didn't know it yet, we had designed a system that followed A, B, C (articles, blocks, components).


What came out of the research at Appitierre was we still needed blocks and articles. However in our themes, articles have become more important and are used to separate out content through the use of article styles. This change meant we could add a special feature into our authoring tool that helped create sections of learning instead of endless scrolling pages. These article styles could be broken down into the following categories:

Content - simple styling and focus is on the content


Knowledge check - a place to test the learners knowledge


Summary - usually used after a knowledge check or content article to summarise the content the learner has just read


Stand-out - used to highlight important information or a link to our social platform/suggested learning material.


Header - although this is not an article style as such, it is an important block of content. It contains the page title, page body (we added a new attribute called page description for menu items) which would normally contain the learning objectives for the current page.


What the styles meant to the learner became extremely important. We found learners knew where they were and what they were expecting from the current content. Were they about to be asked questions or was it a summary?


Giving this visual feedback/information to the learner worked extremely well - but also from a Learning Designer point of view, it made structuring Adapt pages really easy. This concept of familiar UI design throughout content isn't a new concept and is used everyday in magazines, instructional/teaching books and apps. We found that learners like knowing where they are and what they're going to experience.


Giving Articles more power has meant we've benefitted in other ways too. Take for instance our "book shelf" plugin that enables learners to click a button to save that content for later. The learner can then retrieve that content without going back into the full course and searching for it. (Best example is a maths equation that could be saved for later revision). As our content is placed in stylised articles it meant our "book shelf" could still hold its styling and meaning, keeping the learners expectations.

I've built a lot of themes for Adapt, some extremely high end design, some more basic that put learning at the forefront. What we've found is that Adapt is a great content framework. But to make it a learning framework we needed to distinguish different types of content and this is the approach we took. For a more technical overview of how we did this please see this post:





Picture of Sam Tsiu
Re: Building a product around Adapt - Theming Part 1
by Sam Tsiu - Thursday, 6 August 2015, 1:21 AM

Thanks Daryl. 

Reading your article is a great inspiration. And I'm very grateful for what the team made possible for the community. It opened a whole new world for me in creating elearning course.

Picture of Daryl Hedley
Re: Building a product around Adapt - Theming Part 1
by Daryl Hedley - Thursday, 6 August 2015, 8:07 AM

Thanks Sam! I'll be posting another one about how we've made the theming easier and more modular very soon...

Picture of Sam Tsiu
Re: Building a product around Adapt - Theming Part 1
by Sam Tsiu - Thursday, 6 August 2015, 9:08 AM

Thanks Daryl!

I'm looking forward to the new article.

Picture of Wes Atkinson
Re: Building a product around Adapt - Theming Part 1
by Wes Atkinson - Thursday, 6 August 2015, 8:29 AM

Hi Sam,

You can see the full screenshots of different article styles here: http://www.appitierre.com/blog/2015/08/05/building-a-product-around-adapt-theming-part-1/



Picture of Sam Tsiu
Re: Building a product around Adapt - Theming Part 1
by Sam Tsiu - Thursday, 6 August 2015, 9:16 AM

Thanks Wes:-)

Already read the above post and your other blog posts on the website and subscribed to your blog.

and I'm very impressed with both Evolve and Bloom.


Great job!