Enterprise Web Designer, Adam Lang

The early hours of Thursday morning (1oth June 2010) saw me on the way to my very first conference. And not just any conference, this was the Web Directions @media conference of Waterloo, London – highly regarded as one of the best annual conferences for web designers in Europe.

I shared company with my fellow web development folk of Jadu, the organisation from whence I hail. Upon my return from the two-day conference, I went straight to work on writing up my notes from the presentations I’d attended, initially to share the wealth of information I’d gathered with the rest of my colleagues – however, I’ve decided now to also share said write-up on here, too. So here it is.

Designing for play – Christian Crumlish

Christian provided to us a very engaging presentation on how to design for social engagement. His slides were divided up into very modular sections, giving us more of a bullet-point approach to take notes from rather than speaking to us a story.

A lot of what he was trying to put across to us was that users enjoy being able to use websites naturally. When needing to represent themselves in some form or another to others within the same platform, they expect to be able to do so (through means of an avatar, for example). They expect sites to flow, for things to be obvious, and to enjoy their experience. Christian used examples of actual games (board games, video games, and to prove his points further, even musical instruments) throughout the presentation to compare relative experiences on websites, and how particular features (when implemented correctly) will make a successful website.

One great example he gave was with actual social websites and how they are experienced, particularly Facebook and MySpace. The former of the two utilises one key feature, and that is a strict framework. When designing a website that has the potential to get very out of hand through user input and customisation (personalising user profiles, for example), strict frameworks need to be put into place. Facebook’s framework prohibits any user from customising the “look and feel” of their profile page, hence keeping everything neat, tidy and uniform. MySpace on the other hand became renowned for providing the exact opposite to its users, and actually won over many of its younger generation for this reason alone. However, this led to chaos (profiles that looked hideous and unreadable/unusable), and users slowly but surely moved towards the more ‘stable’ of the two networking platforms – leaving MySpace with minimal actual users, and becoming more of a music/band orientated site.

Another of the reasons he gave as to why Facebook is such a successful (perhaps THE MOST successful) site of its kind was that it allows users to make mistakes, but still able to make those mistakes work. Take for example a new user to the site, inexperienced to social networking, not knowing where to start or what to do. They are greeted with a tutorial on how to set up their profile and enter their personal information – great, easy, done. What next? They see the ‘Home screen’ and news feed, and a great big text box at the top asking “What’s on your mind?”. You write what is on your mind, and post it. You then proceed to a friends’ profile page, and see a similarly styled great big text box at the top, this time saying “Write something…”. Without navigating back to the home screen, the user may wish to write something else that is on their mind, and not realise it is going directly to that person… A mistake has been made. But did the website break? Was their experience destroyed? No. The person they left their message upon responds with a ‘comment’, explaining the error of their ways, and the user has learned something new – whilst at the same time, communicating with a friend and in turn, being socially engaged.

It is this aspect that leads to a sense of play, an invitation to make more mistakes and still feel comfortable. The experience can be compared to the aforementioned aspect of playing an instrument. Christian told us of learning to play the ukulele, and although once in a while he would hit the wrong string whilst playing a chord (making a mistake), it would still sound great, and so he would continue make the same mistake again, rather next time it would be intentional.

I think overall, the biggest part of what I took away from this presentation was that you have to ensure a website flows. Design flaws can be instantly spotted when this doesn’t happen, and the phrase “Don’t make me think!” is what first comes to my mind when trying to envision the success of a socially-interactive website design.

An introduction to server-side JavaScript – Tom Hughes-Croucher

Otherwise known as SSJS, server-side JavaScript got me pretty excited after hearing this talk. Tom was quite a character, firstly pointing out his “American transformation” with the crazy glove-shoes he was rocking, and of course his tinged English accent from living the Californian life for the past 2 years.

He started off his presentation by stating that the remainder of his slides will be shown in Comic Sans. “I know, I know.” he said, as we all rolled our eyes. “I can guarantee though, that you still won’t hate me. This is so awesome, and I am so confident that you’ll think the same, that even Comic Sans won’t bring you down.” From this point on, I knew we’d be getting some more laughs out of him. And we did. (You had to be there.)

-This is where it gets geeky-

Right now, there are no “official” standards for server-side JavaScript, as the official JavaScript specification only gives APIs that are useful for browser-based applications. Therefore, something called CommonJS got invented, which is basically a super-fast object-oriented API, providing APIs that ARE useful for SSJS, also allowing the developers’ applications the freedom to work across multiple platforms (V8, Rhino etc.)

Direct from the CommonJS website, its most notable benefits of use are:

• Server-side JavaScript applications
• Command line tools
• Desktop GUI-based applications
• Hybrid applications (Titanium, Adobe AIR)

Tom swiftly brushed over this though, mentioning to us a little known gold-mine to SSJS’ers – that being Node.js. Apparently this is the greatest thing ever, and gets lots of JavaScript programmers very excited. I personally just enjoyed watching his enthusiasm as he went through bits of code (not understanding 95% of what he was showing us), it was still interesting. From what I gathered (I shall research this more when I get the chance to), Node.js does everything. It can be installed to a Unix server using just 4 lines of code, and is capable of running queries 10-to-the-6 times faster than Apache can (or so he claims). It is also capable of rendering a scripts’ HTML and DOM on the server, allowing applications to run lightning fast when, say, a AJAX request is sent to the server for a content change or something.

All in all, very interesting. And he was right – it certainly did leave me thinking it was awesome.

The Art of emotional design – Aral Balkan

I think this talk could be compared to Marmite. Personally I enjoyed it, a lot, although my team leader was not so keen (for whatever reason). It gave me an insight into how great an application (web or mobile) can actually be, if it is thought out well enough and no expense is spared in the effort and passion put into its development.

The majority of his presentation consisted of him showing us how he developed his latest iPhone app, namely “Feathers”. It was a very simple idea in context, basically allowing the user to ‘jazz up’ their tweets through use of special Unicode characters, etc. However, him being the perfectionist that he is, and having the mindset that he has toward user experience and how essential it is to put across a ‘good’ one to your user, the application he produced absolutely shone.

Aral gave us numerous examples of situations we, as designers (and developers, no less), should put ourselves into when we’re creating our applications or websites. He asked us at one point to close our eyes, and remember back to when we felt a real, genuine sense of delight. That glee, that happiness, that pure excitement about something that you only feel several times throughout your entire life. For mine, I remembered back to when I was having my final interview at Jadu, and the CEO came and told me I’d gotten the job. That feeling, right there.

He then told us to hold that memory in our minds, that sense of delight, and settle on nothing short of an experience to our end-users of whatever application we were creating. A magical experience, if you will. He told us that a very reputable organisation who shall not be named (*cough* APPLE *cough*), were highly renowned for perfecting this experience in every product they release.

Through providing products that ensure this magical experience to their end users, they are able to ‘reinvent’ already successful product genres with their own take – examples being the mp3 player with the iPod, the home computer with the iMac, the mobile phone with the iPhone, the netbook/e-reader with the iPad. I think this proves his point entirely!

I know I’ve only covered three of the many presentations I attended over the span of those two days, but they are the ones that really stood out to me, and I feel have had the most effect on how I will design (and develop) my sites from this point on.

Would just like to usher my thanks to all of the speakers whose talks I made notes on – you’ve definitely helped aid my path to becoming one of ‘the best’!

It seems that no matter how much you think you might know about something, you never really do. I was a fool for thinking I knew as much as I thought I did about design, but such is life.

As much as you’d like to believe it, design does not come naturally. It needs to be learned. I’m lucky enough to have a peer that has been taught a hell of a lot, and has been patient enough with me to give me chances to improve what I do, and learn through my mistakes.

The site I am in the process of designing is for a large public-facing client. They want something that is “clean, organised, and modern”. The first round of design that was so close to being finalised on my side (not yet seen by the client), was actually a complete state – simply because I’d become oblivious to its flaws. Padding was inconsistent, headings were inconsistent, weights and colours of typography and containers were inconsistent, font usage was inconsistent. But how was it this bad without me even noticing? One reason – I’d focused my design around one main feature, and NOT looked at the bigger picture.

The feature I speak of was a large horizontal accordion. Having recently read a blog post entitled something along the lines of “Design trends of 2010″, and seeing horizontal accordions on the list, I thought I’d try my dab-hand at something a little bit different. Horizontal accordions are (in my mind) clean, modern, and keep content organised – all whilst looking pretty damn sexy. So at wireframe stage, I pushed most the design that featured the accordion. I really pushed it. As it turns out, they still preferred the simple tabbed carousel option so chose that one instead, but having been set a tight design schedule I decided to start Photoshopping early, even before they’d even agreed to a wireframe. This accordion was the feature I’d focused all my attention on – I wanted it to shine, and so designed this first and built the rest of the site around it.

So what should I have done instead? After a good hour’s chat with my peer, and a cram-session of being shown techniques and methods of designing in Photoshop that I was completely unaware of, I think I may be set on the right path again.

Start off in black and white. This way, you can focus PURELY on the basics – layout, weights, fonts (this is still perhaps jumping too far ahead), padding. These are the things that are key to the success of a design. Forget colour, forget images, forget icons; all of those are things that you’ll spend way too much time mulling over and will become that feature you unknowingly build the rest of your site around, then wonder why you hit a brick wall two or three days later!

Starting off in black and white might seem like the logical thing to do, but for me, I always just dove straight in with the colours and the fonts and just arranged the elements in a way that I thought worked. It may have been successful once in a blue moon, but not for sites that have the potential to grow (i.e. those powered by CMS) – which in essence, the majority of sites I design for now, do. This isn’t wireframing, it’s one step beyond that. Wireframing is a rough sketch, this is the beginning of a design. It’s the foundations on which you will build upon. Get this bit right, you’ll save yourself so much frustration further down the line.

Alternatively, do what I did which was ignore the advice, dive straight in and try to get all the design elements down at the start. You’ll either end up with a mess, or having to start again.

I’m sure something similar has happened to every designer at some point early on in their career, it’s no doubt part of starting out in the big wide world of design. You need to learn to follow the right process. But I’ve had to experience it (more than once) to know that unless you tell yourself you’re doing it, and stop yourself from continuing to do so, it’ll keep on happening. I’ve had to scrap pretty much everything I did because I designed a whole site around one feature on a homepage.