by Colette Boyd, Graphic Designer
A successful brand says many things to its audience and to tamper with that can be dangerous (remember the Consignia fiasco); get the rebrand wrong and it can at best alienate your existing audience and at worst fail to gain a new one.
Listen to your existing brand
So to start the whole rebranding process, we listened to what the success of the existing Aurion Learning brand was telling us and used this as a basis to build on.
The existing brand told us that our customers associated Aurion Learning with reliability, professionalism and creativity. We needed to retain this aspect of the brand to appeal to our existing market but also think about what we wanted the new company branding to say to new customers.
How do you want to appeal to new customers?
We looked at our current service offering and thought about how to reflect this visually. This posed a challenge because the Aurion Learning service offering is varied – we offer different things for different clients, depending on their learning and development needs. We deal with serious learning content and technology that need a careful hand and serious tone and at the same time we must have the creative ability to take e-learning material and breathe life into it.
Creating the brand
Visually we decided to build on the existing brand giving it a new twist by retaining the clean typography of the existing logo but transforming an element of it into a more visual or “logoized” version. The concept behind this is the idea transforming the “on” part of the Aurion Learning logo from simple typography to a button highlight the fact that Aurion Learning is always “on” always ready to support and deliver to its clients. We also integrated the idea of transformation into an accompanying strapline for the website and promotional materials- “transforming learning and development in your organisation”.
We are a confident organisation and wanted to reflect this in the branding, so the logo sits on white with no decoration or fuss because it doesn’t need it. The colour palettes are limited but bold. The primary palette consists of two colours, grey and orange. Grey reflects the professional ism, stability and calm side of the company and orange reflects the energy and vibrancy and warmth of its staff. We incorporated the curve of the button into the stationery and online materials. We also wanted to showcase our creative talents by introducing a series of characters that guide you around the website and reflect our service offering. There is a trainer, an instructional designer a designer/ developer and a marketing consultant.
We rolled this design ethos over the whole brand incorporating it into the website, blog, internal systems and corporate stationery. We think it is a success.
by Lee Reilly, Senior Web Designer
My first real foray into the realm of coding over a decade ago pertained to making a text box on my page a solid colour, positioning it to the right and making the text white. After much musing (by which I mean searching around the internet) I fumbled a solution and had inadvertently coded something! In this case it was a <div> container to hold my text, which was aligned right and coloured accordingly. The beginnings of my first HTML site, though perhaps not as grand as I might have liked.
Over the years my HTML and CSS skills have improved, as has my understanding of the underlying processes involved. With the upcoming publication of the highly anticipated HTML 5 specification I find myself feeling like I did over a decade ago; is the difference between HTML 4 and 5 so great that I must start creating little text boxes on a page again in order to understand this new version?
The answer, mercifully, is no. HTML 5, in its simplest form, is a revised version of HTML 4. Sure, it has the ability to be so much more, but it does not have to be. I could take the latest project I am working on, amend line 1 to <!DOCTYPE html> and I would have an HTML 5 project. I would obviously not do that as it would be cheating and not advisable for compatibility of content within that project.
The real power of HTML5
The real power of HTML 5 (and CSS 3) comes from the improvements within. HTML 5 is created to improve the interoperability of HTML based documents. This means it is designed to work across multiple platforms and software setups. Numerous elements have been added such as <article>, <header>, <footer> and <section> to make the lives of developers easier. If nothing else these new elements reduce the quantity of <div> elements required for layout. These and other elements have been created to help add meaning to the content within. An example of this would be creating a news article:
In HTML 4 I might create something like:
<h2>Why am I making this site in HTML4?!</h2>
In HTML 5 this could be created as:
<h2>HTML 5: That’s the ticket!</h2>
The benefits to creating this in HTML 5 are two-fold. First, there is less coding involved. Second, and more importantly, the elements used are created for the purposes illustrated; <article> is used for independent, self-contained content and <date> is used for defining dates and times. The freedom that HTML 5 allows in creating element names might at first make it appear to be less structured and potentially more prone to variation between developers. What this flexibility does, when combined with new elements and attributes, is allow for greater control of structure.
Can it make a difference?
Everything mentioned above give HTML 5 the potential to improve the way websites and web apps are built. The real power of HTML 5, however, comes from its integrated Application Programming Interfaces, or APIs. They have been designed to make developing web apps easier across multiple platforms. These include new APIs for audio and video, which will act to provide a uniform (and non-flash based) approach to getting rich media easily on to the web. Great in theory but these are still a long way off being perfect. In its current incarnation, HTML 5 has no full cross-browser support for video file formats. This means if you were to use the <video> element in a project today you would need to encode your video as both mp4 and ogg file formats to ensure all modern browsers would play them; a large overhead to say the least.
When evaluating how good HTML 5 is we must consider that it is still only a draft specification and elements and attributes are still subject to change. That said, it has the potential to deliver on numerous fronts and the thought of a fully interoperable web app or website across numerous platforms, complete with rich media and animation without the need for user-installed plugins makes its success all the more appealing. So much so that we have already begun project work using HTML 5. These E-learning projects have been designed to work cross-platform, from the traditional desktop E-learning to tablets and smartphones (so called M-learning or mobile learning). The benefit of using HTML 5 as the backbone is that the same pages are served up to each platform, the only difference being how they are styled. This technique of catering for different platforms using the same pages is called responsive design.
In future blog posts we will look at responsive design as well as the hugely anticipated <canvas> element in HTML 5 and its potential for usurping flash for cross-platform animation. We will also look at what new features CSS 3 brings to the party.