Skip navigation

Yesterday saw the completion of primary development for this round. Another sprint development, but it hasn’t gone too bad.

A bit of light heartedness is deserved.

Here’s some Dilbert:

Dilbert comic strip describing the pains of watching someone's powerpoint presentation

http://www.90percentofeverything.com/2010/03/23/even-more-dilbert-on-ux/

W3CSchools has released results on common screen resolutions for January 2010.

Quite interesting to see that 1024×768 is no longer the most common size, we’re going bigger and bigger all the time it would seem.

76% of people are using above 1024×768 with just 1% of people running 800×600.

http://www.w3schools.com/browsers/browsers_display.asp

Johnny Holland currently has an article on creating successful style guides.

Quite often when designing a site or application the initial pitch is based on a single page concept. There may be numerous elements on this page some of which could appear in other areas some of which are specific to that page alone.

This guide provides a great read on working on how to create yourself a guide and document style attributes you use in your designs highlighting common areas like reviewing your style guide, keeping it updated as new functional specifications are raised and clearly defining elements which may have varying results, form items for example that may appear different across browser and platform.

For the last few weeks I have both been very ill and working hard on a new development at Pure360. It’s meant that even with good intentions, I have been unable to post as much as I had intended.

At the end of January I attended a workshop day on CSS3 which was hosted by Richard (Clagnut) Rutter and Natalie (NatBat) Downe of Clearleft. I would like to start off by stating that I would give a limb to work with these people. My impressions of Clearleft before attending the workshop were that of a group of individuals who all aspired to be great in their field. On completing the workshop my opinion was of a group not only who aspired to be the best, but were in fact steering the ship.

Both Rich and Nat provided an incredible experience in terms of the subject matter, working (and not working) examples, exercises and debate. Clearleft put together incredible workshops, providing resourceful classroom materials, the facilities were amazing with tea/coffee pastries in the morning before the session started where I was even greeted by the Jeremy Keith who I think may have been around just to snoop, a fantastic assortment of sandwiches and wraps for lunch and each desk littered with good old dev/designer brain food, or haribo, chocolate and jelly babies as the common man may know them. There was even fresh fruit and more chocolate for the final break with a trip to the pub to finish off the day.

It was great to meet up with the people who had travelled in from Europe to attend solely on the reputation that Clearleft holds, truly eye opening in many different ways.

If it wasn’t for the fact that the CSS3 workshop bankrupted me for a good couple of months I would be booking up to attend the HTML5 workshop at the end of April along with the UI seminar in June. It’ll have to wait another year.

Workshops with Clearleft

In the last few weeksjQuery UI V1.8a has been released to coincide with the latest jQuery 1.4release.

While on the surface it would seem like only two new widgets have been introduced, what they do is, as it always is with jQuery, staggering.

Autocomplete

A common tool that can often been exhaustive to code up, autocomplete is bound to make many people very happy by applying a simple jQuery tag to a given input field.

It’s options set allows for a set of tags to be defined, this could easily be applied to an ajax function to query a database or xml feed.

Buttons

Quite how nobody has put this together in such a big a way is a mystery. Sooner than you think you will be questioning how you ever developed interfaces without this.

Buttons allows you to morph common form elements into stylish looking button controls. this is not limited to the de-facto <button> tag either. Assign the button function to form buttons, submit buttons, anchors, radios, checkboxes, even select boxes to create multiple value drop menus. This one will be a huge asset to most peoples UI toolbox.

This does require slightly more markup than most jQuery widgets, but the time saved in building these components is going to be quite expansive.

I absolutely love the use of storyboards, I always have. The value of having something laid out in front of you end to end is so vast that it confuses me when people appear to either fear it or feel that it is a waste of time.

Here is a great video show the sketchboard method for web design.

Today I discovered UXBooth, which is also where I found this video. The video is accompanied by a really nice article with photos of the design process as well. http://www.uxbooth.com/blog/telling-your-websites-story-with-sketchboarding/

Useful information over on Johnny Holland today, particularly the importance of we not I when it comes to design and story telling.

It was quiet last week as prototyping and structuring the development schedule became of the upmost importance, but I will be writing up on some things we have been looking at in the next week.

Really good video from HTC about the considerations and innovations they brought into the design and development of the Nexus Google Android handset.

Once again showing that working on paper first shines through to great design and even greater development.

Creating prototypes with a designated application is something I have not done before. After a day of quickly getting up to speed on our tool of choice Axure, which is astoundingly brilliant, we realised we had bolted before the gate was open and headed back to the trusted pencil and paper method.

It is very easy when you have time constraints to try and skip some of the early steps of spec’ing out a project thinking you will make gains later on, however I think we have learnt that it is often those first few baby steps that shape everything else in the project moving forward.

I’ve also grown the confidence in my convictions and desire to create the best user experience possible by simplifying any action but still retaining the ability to provide further control for anyone seeking it. It is a notion which I think deep down we all want whether it is when you are using a complex program such as Photoshop, or the remote control for your TV.

I headed to my Bible, or .net magazine as it is also known, and grabbed issue 183, 196 and 198 to start sourcing ideas.

After reading a feature with Andy Budd of Clearleft, (I will stop raving about them soon), I have fallen in love with the KJ- Technique. I love the idea of democratic decision making without discussion. The method provides the ability for a group to put their own opinions down relating to a topic without feeling coerced or influenced by stronger personalities within the room.

We’ve stepped past that point this time around, but I am very keen on trying it out the next time around.

This weekend I will be updating on how the final day of prototyping progressed, and whether showing things on paper had a positive impact.

late last year I began experimenting with jQuery and within a couple of hours wanted to make it my wife.

It was as if somebody had looked at me, my little spindly fingers, those tired eyes, sweats of desperation and instantly knew what it was I needed to reduce the level of ‘programming’ required in being a front-end developer and make it more accessible for the punk DIY’ers like myself and essentially re-write javascript to not suck monkey balls.

Several things make jQuery instantly accessible. For me, the main bonus is that its framework allows you to write logical statements. No more getElementById for everything when really all you want to do is change the behaviour of a class, and a whole toolbox of effects, methods and actions to go nuts with.

After running up some very basic prototypes using the demo examples I had put forward the introduction of jQuery into our application. This did provide some initial issues, the main one being that we were not using a doctype of any kind within our application, but this was quickly rectified.

jQuery1.4

January saw the release of jQuery 1.4 a significant release to the library with both improvements and additions agogo. To celebrate its release the jQuery crew put together what I can only describe as the geekiest of promotional campaigns I have ever witnessed. The 14 Days of jQuery site was created to build up to the final release candidate going public. Each day a new video was posted showing you around some of the new features along with discussions on how these new features could be used.

Despite the announcement that documentation is going to be reviewed and improved, that certain elements look a lot better and that the jQuery-UI library is about to be released to github, there are a few things that have bummed me out about the release and the absolutely stunning 14 days website.

All videos are code-behind
Not so bad, yes we need to know how to write these new functions and features, but by it’s nature jQuery is a visual applicant, if we can’t see what it is doing then how do we know we got it right? I would really like to have seen some actual working examples of how, for example the .live() function works.

Comments on API Docs
I am a huge advocate of comment posts of blogs of any kind, I think they’re invaluable at times and allow for the extension of a debate. But! how will the new comments for API be controlled? It says not to use it for bug tracking, but surely that is what most people will be commenting on? Is it only open for a short period, if so when will comments be closed? They’re already starting to look shabby, take the page for .add() as an example.

Let’s not forget that this is Awesome

Even with just a few bug bears about the release and changes to jQuery UI (although this could see some serious move on the UI tools) the fact is jQuery is still totally amazing and certainly a platform I am going to continue working in for all that little extra flair of interactivity.

I looked at this briefly the other day before attending the CSS3 Workshop with Clearleft on Friday (I will write a bit more on that later). After understanding what components have been used to create this sexy bit of CSS3 and jQuery I am even more impressed by it.

Pushing Pixels by Daniel Kurdoghlian

Pushing Pixels by Daniel Kurdoghlian

Daniel has utilised CSS3 box-shadow and border radius to create this interactive experience.

Flick the switch to turn on the light on and the title produces a shadow. Move the bulb or the title itself around the screen and you will see the shadow move in relation to the light source. Going one step further, moving the light further away from the title weakens the strength of the shadow and in turn, moving it closer makes a stronger harder shadow.

http://pushingpixels.at/experiments/dynamic_shadow/

User Experience

Heading down the rabbit hole into the cold waters of user experience development.

For the next month I will be researching and analysing web apps to further explore the fundamentals, principles and the art of UI Design and creating powerful UX based applications.

I have just read the first part of Better User Experience with Storytelling by Francisco Inchauste for Smashing Magazine which has provided a very strong introduction into the principles of story telling and how these can be applied to branding, and generating an interactive experience.

Other blogs which have caught my attention today have been UI-Patterns.com which has provided some great advice on using wizards and goal indicators effectively in applications and the psychological impact that this can have on a user.

Konigi in itself is a wonderful example of beautiful interface design, and regularly updates with examples across the web of both site design and application design. The real winner for me is that they tag each submission with specifics such as use of Header and Footer, or menu controls.

Follow

Get every new post delivered to your Inbox.