"

This 'telephone' has too many shortcomings to be seriously considered as a practical form of communication. The device is inherently of no value to us." Western Union internal memo, 1878

Tuesday, 8 June 2010

Let us guide you

Our latest project recently rolled out, but in a slightly different manner than we're used to. Why different? Well, you won't find it online but instead instore.

We were approached by Virgin Media earlier in the year with a very interesting brief which tasked us to recreate their EPG (Electronic Programme Guide) within a browser setting. The main reason for doing this was so that the Virgin TV experience could be demonstrated within electrical outlets across the UK, without the need for the actual service to be installed.

This was a very interesting project as it provided it's own set of freedoms and at the same time barriers. For starters, it was apparent that as it was going to be operating within a closed system, we didn't need to concern ourselves with multiple browser support, which is a rare treat.

On the flip side, this was new territory for us and re-creating an existing piece of software under a different set of rules was bound to throw up a few challenges, one of the biggest of which was achieving fullscreen HD video playback within the browser (without the use of flash). After overcoming such hurdles, and learning a lot in the process, the finished article started to come together quickly, but although the bulk of the work was in the bag, the project didn't end there.

Aside from the EPG itself, it also needed to look the part from a hardware perspective, and that meant having to install it onto a PC small enough to fit inside an actual V+ set top box. This was a fun job in itself, and we're happy to say that looking at the end result, you really wouldn't know the difference from the real thing.

It can currently be seen in the Lakeside 'Best Buy' store, so if you're in the area please take a look. We're now busy on the second phase of the project, which involves adding more content and functionality to the system. Case study to follow soon...

Wednesday, 12 May 2010

Not just a pretty face

I play videogames. In fact, I play a lot of videogames. My wife would probably tell you I play videogames too much, but I digress. The one thing I come across a lot with games is the amount they're judged by their visuals. Now, I'd love to say I was one of those gaming purists that believes that visuals don't matter, that it's all about the experience and how fun a game is to play, but I would be lying. You see, I believe that the presentation layer is incredibly important in a game. We're talking about a medium that is all about immersion and so if it doesn't look the part, it's not going to be doing it's job as efficiently.

So what point am I trying to make? How does this all relate back to the web? Well it got me thinking about user experience on the web and how important it is to look good.

The first thing that springs to mind is that it's a lot to do with context. I'm certainly not trying to to draw any parallels between websites and videogames here, they were simply the catalyst that provoked the question. But one thing I will say is that 'looking good', in my opinion, serves the videogame world a lot more than it does the online space. Let me explain.


Looking good is overrated

So, looking good, what's the deal? Straight off the bat, I'm sure you would brand me an idiot if I were to say that it wasn't important, because it is. To a point. Now I've always been of the opinion that as designers, making our work look good is a given (I won't get too much into this - subjective arena - can of worms and all that). What seems to pass a lot of folk by - not everyone - obviously some reading this will feel i'm preaching to the choir, is that design is first and foremost about problem solving, and this is especially important when designing for the web where communication and interaction are at the heart of what we're trying to achieve.

A majority of the time when you are engaged with a client on a project, what they want is to see a slick piece of eye-candy, a visual of their site to get them excited. That's all well and good, afterall, who wouldn't want to see that? But in contrast, one of the last things they probably want to see is a wireframe document, in all its grey box, functional glory. And herein lies the problem. The step in the process that is arguably the most important is also that which is most often overlooked.

You wouldn't expect an Architect to design a building with no foundations, or a football manager to tell his players to just show off and try and get the ball in the goal. When it comes down to it, it's all to do with sound structure and planning, and it's just as important when designing for the web, or any other digital medium.


Balance

Now before you think I've gone a bit 'Jakob Nielson', i'm not saying style and aesthetics aren't important. Looking good is important, it just isn't everything, or even (in my opinion) the most important thing. What would you say was better? A car that looks ok and runs like a dream or a car that looks amazing but runs like a dog. Of course the smart among you will say neither and that it's better to have a car that looks amazing and runs like a dream, and you'd be right, it's what we should all be aiming for. But it's important to remember, we're not in the business of creating eye-candy, we're in the business of creating experiences.

This is not the first time questions have been raised over the importance of aesthetic style. In 1896 American architect Louis Sullivan coined the now infamous term 'form follows function' that was a principle used throughout 20th century architecture and industrial design. Founders of the Modernist movement in the early 1900's even went as far to proclaim 'form follows function, ornament is a crime'. A step to far if you ask me, but then it's funny how the minimalist stylings that were born out of such thinking ironically became a style of their own, and can be seen throughout much product and web design today.

In a way, it saddens me that more and more these days the roles of User Experience professionals and 'web designers' seem to be becoming more polarised. In my mind, a web designer is only doing half their job if they're being asked to style up someone else's wireframes. Maybe as time goes on we'll use different terms for these roles, or preferably we'll see a return to a single role as information architecture becomes a more considered topic within design education.


IA is your friend

So, in conclusion, what do we need to do to make sure we don't lose sight of this essential part of the process? First of all, as designers we need to recognise the importance of good information architecture and embrace it. If it's a subject area that you're not overly familiar with, pick up a few books on the subject to get the ball rolling. You could do worse than taking a look at 'Don't Make MeThink!: A Common Sense Approach to Web Usability' by Steve Krug or 'The Design of Everyday Things' by Don Norman, which are both great starting points. The former is a particularly accessible (and short) book that you can pass onto colleagues that work in other disciplines or even clients. And let's face it, the more the word is spread, the easier the job becomes.

Friday, 12 February 2010

Home sweet homepage

After lots of searching, Bright Spark Digital has a new home. We’ve not moved far from our temporary home in Bermondsey Street and will now be located in-between London and Tower Bridge.

The obligatory trip to IKEA beckons as well as some serious cleaning and painting work before we’ll be all set. Please see the Contact page for the new address.

Speaking of new homes, you’ve probably also noticed we’ve finally got our new website up and running. As well as a fresh lick of Photoshop paint, we’ve also added a Twitter feed so you can see what’s getting us fired up over BSD HQ.

Thursday, 4 February 2010

Thumbs up for the Web Open Font Format

Since the birth of the World Wide Web and HTML browsing, web developers have always had to work hard accommodating the typographic dreams of creative directors and designers. As browser technology has evolved, so have the options for web typography. Over recent years, there has been an ever increasing number of ways to render type within a web browser (GIF image text, SIFR, FLIR, SVG, EOT, Cufon etc.) None of these have been truly standard, cross platform and cross browser solutions.

The latest Firefox 3.6 browser release adds support for the Web Open Font Format (WOFF) and will hopefully provide real momentum for its acceptance as the de-facto font file format for use within browsers and web pages.

Whilst SIFR and Cufon provide decent vector font replacement techniques, creating WOFF files and embedding them in a page using CSS3 syntax really is a breeze (anyone who’s used Microsoft Weft to create Embedded OpenType files will certainly appreciate the simplicity).

There are a lot of folks hoping Microsoft and Google also get behind this one. If they do, it might finally allow web developers and designers to get on with things font-related using a standard convention rather than wondering which hack to use or which browser they won’t support.

As well as improvements in browser capabilities, such as Firefox’s WOFF support, websites such as TypeKit and FontSquirrel provide simple mechanisms to generate or embed custom fonts within web sites. FontSquirrel provides access to many fonts free of EULA issues as well as an excellent web font generation service. This creates a pret-a-porter zip file containing web font files, sample CSS and HTML for OTF and TTF fonts that you upload. This is a great way to simplify getting the correct files and font-face definitions into your web pages.

TypeKit takes a slightly different approach, operating as a subscription service and uses a JavaScript include file to add bespoke font-face rules according to a browser’s capabilities. I’m sure there are many more font services out there too, hopefully all helping drive towards an open standard for web fonts.

Overall it should be an interesting year in web typography for designers and developers alike. We'll be keeping our eye on how it all unfolds.

Useful links
http://www.w3.org/2009/08/WebFonts/charter.html
https://developer.mozilla.org/en/About_WOFF
http://en.wikipedia.org/wiki/Web_typography
http://www.fontsquirrel.com/fontface/generator
http://typekit.com/

Wednesday, 27 January 2010

Flash bang wallop, what a picture.

A few weeks back something arrived in my twitter feed which really caught my attention. Someone posted a picture they had taken of a train station. Ordinarily it would’ve been the sort of thing I would’ve quickly closed and not thought of again, but this had something different.

It had obviously been photoshopped to give it a particular style; kind of Polaroid like, a greenish colour cast, distressed markings. It had an overall feeling of ‘faded glamour’ that really appealed to me. As it turned out it wasn’t photoshopped but had actually been taken using an iPhone app called ‘Hipstamatic’. Intrigued, I downloaded it to take a look.




What is it?

Hipstamatic is essentially a camera app which applies a set filter effect to each picture you take to give it the aforementioned style (I can hear the tuts and curses of a thousand designers already). But hold on a minute. Let’s have a think about this…

Is it cheating?

Well, yes and no. And honestly, more yes than no. But that doesn’t mean to say it isn’t worthy of attention. The app allows you to mix and match between an array of different lens types, flashes and films, so there’s still a certain level of creativity there. Plus you still need to choose and frame a shot, which is surely still the biggest creative variable? Is it really any different from using a Photoshop filter or brush? Or a Javascript plug-in?

Don’t get me wrong, part of me feels that as a graphic designer I should be the one manipulating my photographs, experimenting and exploring with visual effects of my own, and to be honest, I still do. If anything, Hipstamatic has been somewhat of an inspiration for me to do more of that, which can only be a good thing.

Hipstamatic for the people

What’s really nice here is that people who aren’t skilled in the dark arts of Photoshop are being given the means to play around with visual effects they would otherwise have no idea how to achieve, and they’re producing some really interesting results. And I think the key word there is ‘play’. It’s a fun tool, not a serious piece of software, so let’s play with it.




Not just a pretty face…

Finally, there’s more here to appreciate than just the output. The application interface itself is beautifully designed to look like an old school SLR, there’s obviously been a lot of care and attention gone into it.




Will it get tired quickly? Maybe. Is it impressive in the short term? Definitely.

Check out more about the app here:

http://www.hipstamaticapp.com

And to take a look at some of the results, check out this Flickr set:

http://www.flickr.com/groups/hipstamatic/pool/

Thursday, 26 November 2009

Gold, Frankincense and Beer...

Late November we went live with our latest project, a global Christmas Campaign for Stella Artois called ‘Send a Card, Save a Tree’.

We were approached back in October and asked to come up with a killer campaign idea that would capture people’s imaginations, and 6 weeks on and a lot of hard work later, we believe we’ve done just that.


The result is an e-Card campaign with a little more oomph, the oomph in this case being the use of augmented reality, one of 2009’s most interesting trends.

Using Flartoolkit, a Flash based AR framework, the e-Card recreates the look and feel of the Stella Artois Christmas TV Commercial and provides the audience with a new and truly engaging brand experience.

Users are asked to hold up a marker image to their webcam and in return are presented with an interactive 3D winter scene, complete with a chalice of Stella Artois, blowable snow and a personalised Christmas wish.

But as the campaign name suggests, there’s more to it than just a cool e-Card to send to your friends, there’s also a great environmental incentive for taking part. Stella Artois in association with the World Land Trust have pledged to save a tree in Argentina’s rainforest for every e-Card sent.

Sunday, 13 September 2009

Introducing the Rolls-Royce of websites

We’ve been off the radar for a couple of months but we’re finally pleased to announce the launch of Rolls-Royce Motor Car’s new global website. The driving force behind the website is the unveiling of the new Ghost model at this year’s Frankfurt Motor Show and it was all hands on deck to deliver the site by the September deadline.

Brought on board by advertising agency Partners Andrews Aldridge for our experience within the luxury sector, Bright Spark Digital took creative and technical lead on the project. We set out to capture the essence of the new forward-thinking Rolls-Royce brand. Visually, it’s simple and light on style, which is at the heart of Rolls-Royce’s design approach. As is said of the new Ghost, "It’s natural, not styled".

The technical solution reflects the brand values of "effortless and seamless" using AJAX transitions and some clever "hidden technology", another key component of all Rolls-Royce cars.

Overall, we’re hugely happy with the result and you can check out the site for yourself at www.rolls-roycemotorcars.com.