Nelson Croom's Blog

A big change for Imago

by Andrew Turner

 

Everything thing we do at Nelson Croom is based in our technology system Imago. Imago is constantly working to ensure every course is accessible, every report works and every learner can get the most from each course.

On the 13th of January Imago got a facelift and we have to say we are very happy with the results, she has never looked fresher or younger.

All in all we there are four great things to come out of this facelift, three which are immediately visible to all, and one, perhaps the most important, which is not:

1. A fresher more intuitive navigation panel– You will notice the menu on the left hand navigation panel has changed., In response to user feedback we’ve made the menu more intuitive and modern looking
2. A new Imago Manager – We have fundamentally redesigned Imago ManagerDon’t panic though, every report or tool  is still there, they are just presented in a different way. Instead of one long list down the page, the headings are attractive tabs across the top. When you click on them the list of headings appear in a left hand column. Select the appropriate heading and the reports and tools will appear. (See below)



3. A more attractive out of the box gateway page – So if clients don’t want to customise their gateway page we’ve made the out of the box version nicer to look at.
4. HTM5 – this is the change you won’t see but it is a major step to ensure continued compatibility with all browsers, the possibility of more exciting interactive design (without resorting to flash) and easier implementation of accessible features.

These are all important steps in keeping our technology current and up to date. If you have any questions or would like any more information, we’d love to hear from you.

Contributions to enrich the learning experience

by Crispin Best

 

It's always good to talk to peers, hear their points of view and share experiences. So, we try to create courses that enable users to do just that, courses that have the flexibility to allow engagement with other learners as well as reading the thoughts and opinions of subject matter experts.

These features are one of the main facets of our courses that consistently get a great response from our learners and clients, and so that's why we've spent a good deal of time expanded and updated this technology.

We've recently been working to design, build and launch a new initiative called "Contributions". The functionality allows learners to add bits of professional experience or opinions into courses. Doing this works to build on and enrich the knowledge on each topic. Learners can read, reflect on and respond to other people's contributions, creating a learning experience that can be different and interactive in various new ways.

The functionality also allows learners to rate each other's contributions, as well as flag any that are inappropriate.

We're looking forward to seeing what this new initiative leads us towards, and will keep trying to create new ways in which our courses can engage the learner.

Let it breathe

by Hamish Long

 

If we have something we want to show off or draw attention to, it doesn't make sense to surround it with clutter - detracting from its beauty. Think of an art gallery - you can fully appreciate the exhibits because they have plenty of space between them.

Let's apply this to a webpage. In this example we have a series of four photographs/products that we want to show off; each has a title and a short blurb. A webpage layout for such an example could look like this:

For me, there's too much going on - the products are not taking centre stage and I feel I should be taking in all the information at once. There may be other issues: to see a detailed version of the image I'll need to invoke a pop-up window or perhaps a layer, causing further clutter; some of the content may be off the bottom of the viewport so I won't see the full series without scrolling up and down.

Let's try it a different way:

Decluttering and giving your images the attention they deserve may require you to build a few more webpage’s but you can recoup the time by using a template so go on... take a deep breath, and let it breathe...

Create more than a splash

by Hamish Long

 

Until a few years ago, if a client had more than one or two courses, we would usually create within our Imago system, a customised splashpage where learners could find out how the courses work and login to the gateway of courses. Once logged in they would be taken to the customised gateway page where they could find out about the content of the courses and access them.

Following development, clients can now have a website template built in Imago and they can add pages and content themselves - the website structure automatically updates. There are hardly any restrictions to template design and layout. We are finding that these websites are being used in all sorts of ways - from elearning intranets, to direct selling.

 

 
 

We also now offer a more personalised experience for the learner - encouraging them to come back often. The above prototype example shows a "my account" area where users can update their details, and a "my courses" area which gives details of the courses the learner has already registered for. There is also a "Top 5 courses" panel which shows what's popular with other learners. The number of these types of features is growing all the time.

So, what are you waiting for? Don't just make a splash - take a bomb dive from the top board!

10 years on: Design

by Hamish Long

You can have any colour you like as long as it's #000000*

How has the design of our courses changed over the last 10 years? It hasn't! Well, when I say that, I mean the core elements behind the design haven't changed - they are sometimes referred to as the three pillars of good web design: HTML, javascript, and CSS (cascading style sheets). This latter pillar has become more prominent in my workflow over the last three years or so, as developments in our Imago system have enabled us to really utilise the power of CSS, providing flexible tailoring without the need to hand code.

In terms of graphics, the volume of designed objects within a course has dramatically increased over the years. Seven or eight years ago you would only see graphics in the knowledge pages. Interactive graphics might appear in every two or three knowledge pages. Today we have interactive graphics in almost every knowledge and activity page. Experience and increased efficiency are probably the two main reasons behind these improvements. But not only that, we now create customised gateways and splashpages - these splashpages are often developed further into fully functioning websites with guest areas, and members' areas providing access to the courses.

But how has the actual design of the web graphics changed? When I started in web design twelve years ago it was all about rounded corners and bevelled edges, and the general graphical look and feel tended to err on the illustrative side. Later there was say a five year period when graphics became flatter and squarer, and photographs were increasingly used. Although some of our clients have specific requirements, generally, over the past few years, we've been combining both illustrative and photographic elements along with subtely bevelled buttons and drop shadow icons.

 

I suppose that's how progress is made in many industries - you keep the best bits from the past, develop, and move forward. Take fashion for example - imagine if people today were wearing clothes that were only really acceptable in the Eighties...

* #000000 is the web (hexadecimal) colour for black.

Design tip #5: HTML Snippets Series - Attention please!

by Hamish Long

Here's a nice simple way of drawing attention to a message using CSS. It displays an icon, a coloured background and coloured borders with the message. Customise the code to fit your requirements. If you have any questions, please leave a comment.
Add this class to your stylesheet:

.attention
{
background: #C9E9F4 url(../images/snowflake.gif) center no-repeat;
background-position: 6px 50%;
text-align: left;
font-family: Arial;
font-size: 12px;
padding: 10px 10px 10px 40px;
border-top: 2px solid #0099CC;
border-bottom: 2px solid #0099CC;
}

On your webpage, put your message in a div tag with the “attention” class. For example:

<div class="attention">
Please take extra care when out and about at this time of the year as the pavements can be slippery due to ice. You should wear sensible shoes. Espadrilles are a no-no.
</div>

My example looks like this:

 
  
The icon image and text will stay vertically centred regardless of how much text your message contains.

Styling our programmes

by Hamish Long

We aim to be as flexible as possible in terms of styling the look and feel of our programmes. Not only does this increase the aesthetic value but enables us to meet our clients’ design brief requirements. 

To aid this, we have been gradually increasing the amount of elements within a programme that can be altered using stylesheet overrides. What this means is that we can change the appearance of say, all the page titles, in one fell swoop by applying the change in the stylesheet.

We have always been able to change the font and main look and feel colours in the stylesheet, along with other basic elements such as list items and horizontal rulers but as more elements are assigned their own classes, we can amend elements that were previously fixed.

The images show "before" at the top, and "after" below. You'll notice that the course colours have been applied to the left navigation buttons, the page heading and the activity heading panel.

These are just a few examples of elements that can be changed in the stylesheet overrides, and we continue to develop more for even greater customisation!

Creating a colour palette 'the natural way'

by Hamish Long

I'm always excited about a brand new project when the client gives me free reign. One of the first things I create is a colour palette for the website. "Fresh and "vibrant" are words I hear a lot and with spring just around the corner (hopefully!) let's create a palette with a seasonal twist...

I find that good quality nature photographs offer stacks of inspiration so I've carried out a search in my stock photo library, www.photos.com, and found this great image of a yellow spring tulip in bloom.

I then open the image in a graphics application, in my case, Adobe Fireworks. Next I create four squares and use the colour picker tool to find a nice selection of colours from my tulip image. You might need more colours for your project but I find four gives me enough variety without over-complicating things.

 

As this website will not have colours bleeding into each other, I add a white border to my squares and overlay them so I can see how they sit together. I have duplicated the yellow square so all colours touch each other. I have also created a 40% opacity palette.

 

I can then start mocking up website layouts and colour combinations. You may be creating a palette for a different project - a slideshow presentation or a newsletter perhaps. It can be difficult to get started when creating a palette so I hope this technique of finding an image to match the mood of the project will prove useful.

Design tip #4: HTML Snippets Series - bullets and bars

by Hamish Long

You can jazz up a plain looking html page with some coloured bullets and bars. Here's an example:

For the green bar you use:
<hr style="color: #66cc00; background-color: #66cc00; height: 10px;">
and can change the colour and size to match your needs.

For the bulleted list:
<UL style="LIST-STYLE-IMAGE: url(images/bullet.gif)">
in this example I have my bullet image in a subfolder called "images".
I find the best size bullet image is 6x6px with a 4px space above it.

Which is my best side?

by Katy Hillary

I was about to write about some design work I have been doing on the big dental project that I’m sure we’ve all mentioned (it is taking up a lot of our time at the moment!) but then I spotted something.

The pictures of each other that we are using on the blog. Did anyone ever explain where they came from? Did we commission a Nelson Croom portrait to celebrate a good year? Did Alan bring in paints to amuse Edie and Leo when they came to work with daddy one day? Has Hamish lost the plot design-wise or is he aiming for a more “naïve” feel?

Well actually we painted them at our Christmas party last year. We sat down in pairs, with a refreshing glass of something festive and some poster paints, and tried to immortalise our partners on canvas. Some were more successful than others as I’m sure you can see!

I painted Angela, who seems very bright and larger than life, possibly due to arrested development of my painting abilities aged about 12. Angela’s version of me on the other hand, seems to be visiting from beyond the grave, and I’m clearly not very happy about it either. Of course, next morning as I boarded the red eye flight to Belfast, having got up at 5am with a bit of a headache, it was actually a pretty accurate likeness...

Can you guess who painted each of the others?