Skip navigation

Category Archives: UI

Articles on User Interface development and design

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

Advertisements

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/

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.

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.