Blog Stuff we're discovering, learning, reading, watching, enjoying...

I’m not exactly the first to notice, nor (obviously) am I involved in any way, but it’s hard not to be inspired by the Wired article about how Pixar built Toy Story 3. From the story itself through to the presentation of the article on the Wired site, it just feels like an exciting, creative project and indeed company that any creative mind would want to be involved in.

This HTML5 presentation is an easy to understand and exciting introduction to sensibly applied HTML5 techniques. Obviously there’s little point in viewing it in anything other than Chrome or Safari, or possibly Firefox 3.6, but if you can see it all then it offers a great demonstration of modern HTML5 capabilities. In Chrome on the Mac it did seem to stutter a little so there’s clearly still a few performance issues even in the most advanced browsers, but applied in a manner that degrades appropriately in other browsers there’s no reason not to start applying these techniques today.

I’ve just recently been tipped off about this CSS3 generator site and having had a chance to play around with it I’ve found it a very compelling way of trying out CSS3 effects. CSS values can be edited and are applied in real-time for as live preview of how the effects will appear, and most importantly you’re continually reminded which browsers will or won’t render the effects. Check out CSS3 Please.

I’m all for standard approaches to interface design and conforming to best practice and UI guidelines, but let’s face it, you don’t very often create magical interfaces that way. However, most of the application designs over at Well-Placed Pixels feel much more likely to catch your breath, whether by pixel-perfect information design or beautifully crafted and finessed creativity. An excellent resource when next needing application UI inspiration.

Google seem to be all about continual iteration and roll-out of small new features these days. Whether it’s visual tweaks to make the search box more obvious on their homepage, helping computers understand language or adding subtle intelligent enhancements to the search results. In the latter case, searching for “empire state height” would have highlighted “…the height of the Empire State building is…” whereas for relevant information types it will now highlight “…the Empire State building is 1250ft (381m)  to the top…”.

I guess when your core website is the most used site in the world and revolves around two pages [or increadingly one page due to the initial search box being built into browser interfaces... it took me weeks to notice the visual effects on the Google homepage] you’ve got a lot of scope to continually iterate and refine the experience.

I have to confess, until I read this article I knew literally nothing about CSS transitions. I hadn’t even considered they were possible, despite becoming fairly used to using other CSS3 features and to enhance pages for browsers that support them [drop shadows, text shadows, rounded corners, etc]. Apparently part of the delay regarding CSS3 transitions being implemented was a debate regarding whether transitions are ’style’ [and therefore part of CSS] or ‘interaction’ [and therefore part of scripting].  To my mind, they are certainly just style additions - mainly just enhancing a hover state or reveal that remains functional regardless of the effect/style used. The examples provided demonstrate quite appealing enhancements such as soft reveals of a drop menu or subtle glows on hover states, though the demo moving an object [a spaceman] from point A to point B seems to stretch the “this is just a style” approach and feels less obviously applicable to most web pages. So, using a compatible browser such as Safari or Chrome, check out the CSS Transitions 101 article at Webdesigner Depot. In fact, it’s worth comparing the article in a non-supporting browser too, just to remind yourself of the experience without the transitions.

Hopefully no major surprises to web designers and developers in this 10 Usability Crimes You Really Shouldn’t Commit, except that one which I think is often ignored these days is maintaining a visual indicator for links that have already been visited. Often, from a visual perspective, having unvisited and visited text links appear in two different colours can look slightly untidy but it’s a valid point that the usability issue of not recognising that you’ve visited a link previously has a potentially greater negative impact on the user experience than the different colours.

At the FOWD tour event in Leeds earlier this year, Brendan Dawes gave a great talk on the importance and role of beauty in everyday life and how this should be applied in interface design and digital systems. The Small Worlds Flash game is definitely an example of this. I’m not a gamer [not by modern standards, though I'm still weak to temptation when it comes to any release of FIFA on XBox 360], but there is something magical about the Small Worlds game that just draws you in. Despite winning a recent gaming award, I guess Small Worlds won’t be challenging CoD7, WoW9 or DGACAG5 in the annual gaming honours, but it’s a fine way to waste 10 minutes online, and might just remind you that small can certainly be beautiful.

Two totally different new websites came to my attention today…

Javari.co.uk is Amazon’s attack on the shoe market. I understand it’s been running in the US for a while and has already made a massive dent in the traditional shoe retail business. Amazon have tried to remove the barriers to online shoe [and presumably clothing] purchase by offering free one-day delivery, free 365-day returns and a fantastic product preview experience including high-res ‘exploratitive’ zooming of multiple product photos. It’s not the same as trying on a shoe and walking round the shop but if the price is right then it’s got to be tempting.

Jimcarrey.com on the other hand is a totally different approach. As rich Flash portfolios go, this one is going to be hard to beat. You can see the creators were basically given a blank sheet of paper, probably a blank cheque and certainly told not to hold back on the bells and whistles. Every possible effect and embellishment has been used but, along with a slightly eclectic and twisted creative direction, it completely fits with what we know of Jim Carrey. Great execution all-round and a worthy use of 10-minutes spare time.

Something I’m often asked is “What’s the point of building a mobile-specific internet experience when many new phones have the capability to browse full websites?”. [Or even worse, people usually say "my iPhone" rather than "many new phones"]. I’m a strong believer that a mobile-specific service will always provide a better user experience than merely viewing a web-oriented one on a capable device. Even though there are a number of technical reasons to consider [connection speed, screen size, processor speed, lack of rich-media support, etc] there are far greater and more impacting user-focussed reasons, including user context, use of mobile enablers, stronger likelihood of task-oriented activity, appropriate interface design and navigation approaches. The summary from mobiThinking in The mobile Web is dead… Long live the mobile Internet explains some of the reasoning in more detail.

Don’t mistake this for those childhood ‘colour by numbers’  books where each numbered area could be matched to a colour. Google Assaults Designers With Data is an interesting report from a recent talk by Marissa Mayer, “keeper” of the Google homepage since 1998. In her presentation, Marissa outlines just how much of “the devil is in the detail”, and how running a service with a simple interface is not a matter of sitting back and resisting adding complicating features, but of gradually fine-tuning, testing and iterating. It might not be the inspirational, creative approach to design that we all love to get excited by, but it demonstrates results and proves that versatile modern day designers need a toolbox containing more than just pure creative flair.

Apple have given pretty strong direction about the design patterns and approach to creating iPhone application UIs [in fact 'strong direction' is being kind when you consider some apps have been rejected for using chat bubbles incorrectly]. However, more often than not we’ve found that even when following the Apple UI Guidelines there are often multiple ways to tackle an interface challenge. A good solution is to take direction from other apps that have already made it into the App Store, and to create [where suitable] consistent interfaces through common design patterns where standard methods are becoming established.

As WordPress developers, we’ve all come across the same situation when starting out on a site build… the default WordPress theme sometimes just isn’t barebones enough. Well, the obvious approach is to install a theme which is designed to be a blank canvas from which to start, and Starkers: The completely naked theme for WordPress appears to offer just that. We’ll be giving it a bash it in the near future I expect.

I figured one of these would be coming along from somewhere soon. I nearly threatened to do one myself but, presumably like so many others, have battled on with a varied mix of GUI elements used in creating Android screensflows/wireframes and never quite feeling that I had a ‘kit’ that was worthy of sharing. Well, good old Smashing Magazine have done one for us! This Android GUI PSD Vector Kit will be an invaluable resource for anyone needing to design Android flows and screens.

Our blog has been suffering a little lately… summer attitudes, holidays, deadlines, etc. However, via Twitter I came across the Design for Service blog this week, offering excellent insight and resources around thinking and designing using a Service Design approach. Whilst quite niche, I think the general thread of the site demonstrates the important but often misunderstood role of Service Design within the digital/interactive environment.

There are some excellent Fireworks extensions available from johndunning.com. Some of the older one’s are now rendered obsolete by recent Fireworks releases but mostly the extensions add some great features that can significantly improve your workflow if you’ve been using workarounds. For instance, Smart Knife, the latest extension, allows shapes, text or bitmap to be split into two just by defining a curved path [the built-in Fireworks knife only allows for straight splits].

Having just been working on a concept with a more dark theme than my instinctive slant towards light/spacious/clean web design, I can across this collection of inspirational black websites. Whether you find the collection inspirational or not, webdesign.fm have a range of colour-theme comparisons of websites which can offer inpiration in when you’re scratching your head. Though there’s nothing like getting up from your desk and getting some fresh air to help on that front.

Symbols are too easily overlooked in Fireworks. Although we’re used to using them all the time in Flash, it’s only recently become apparent how useful they are in Fireworks as, yet again, it proves how much more effective it is for web and interactive design than Photoshop. Symbols allow you to define a visual object once and then re-use it time and again, with the ability to modify each instance’s paramters whilst having a single master object in the library to update if needed. The obvious usage in interface mock-ups is for buttons but once you’ve grasped the concept it’s easy to use for logos, site-wide graphics, navigation elements, etc. Check out this excellent Adobe article to get started.

Fireworks is pretty much the most powerful tool in our box, enabling us to deliver everything from interactive wireframes through to fully design UI mock-ups. However, it wasn’t until recently that we started to dig a little deeper into it’s customisation potential, and it was a very pleasant surprise to find that with only a little Javascript you can create very powerful Fireworks extensions. Photoshop introduced ‘Actions’ many versions ago but they always felt a little clunky and only worth setting up if you had a lot of repetitive tasks to get through. However, with extensions it is much quicker and more flexible to consolidate a whole range of steps into one command, and vastly increase your productivity in the meantime. Check out the Adobe documentation Adobe documentation or this tutorial to get started. You won’t regret it when it avoids a thousand select/copy/paste/tweak/save tasks!

Note to Mac CS4 users: the place to put your saved extension files is:
Macintosh HD:Users:<User>:Library:Application Support:Adobe:Fireworks CS4:Commands

We’ve blogged about this before but having adopted the 960 grid system for the majority of our web designs for some time, the resources at 960 Grid System look invaluable. To have ready-to-go templates for Fireworks, Inkscape and OmniGraffle is excellent and ensures the consistency needed to move between design apps effectively, followed by easy transition into  development using the supplied CSS.

We’ve been following the progress of the relaunched Skittles site with interest to see if they’d be sticking with their relatively brave approach to creating a web experience relying almost exclusively on utilising the big destination sites such as YouTube, Facebook, Flickr, etc. The site itself doesn’t offer much that’s new except for the blatant approach to exposing the underlying web properties and a quite nifty [though also not new] use of a floating Flash ‘controller’ to keep it all together. Wonder how long this will last and/or if other brands will follow suit.

Dolphins. Apparently the second most intelligent creatures on the planet. In an almost perfect animal therefore, where might you make improvements? Remove their restriction to water? Enable a few more sounds than just squeaks and clicks? Bring out a pink version? Style over function one might suggest.

Here at Common we’re no strangers to Wordpress. In fact, it’s our blog and indeed CMS of choice for many small/medium site requirements. However, it’s often hard to keep up with the rapidly developing options regarding theming so some of the examples covered in fresh trends in Wordpress themes are worth checking out just to see the breadth of experience that can be created beyond the simple blog.

Ever since working with mobile WAP greetings in the mid-90’s I’ve been interested in the frequent need to micro-scale imagery. To some extent, the recent trends of clean, typographic buttons and clean mark-up has reduced the over-use of iconography on the web but it remains a critical part of most web projects and even more so in application interfaces. As ever though, if I’m at a creative dead-end I’m more than happy to just apply a set of rules to get things going again and Turbomilk’s article on 10 Mistakes in Icon Design provided just such a checklist for me recently. The very use of icons is often the point of much debate, let alone the resulting imagery, but the article covers some good points backed up with visual examples.

I was only recently introduced to the wondrous suite of visual/design online applications at Aviary.com. Having had a brief explore, I’m sure Adobe aren’t worried just yet but as a demonstration of how usually complex graphics applications can be delivered online using Flash they’re an amazing showcase. As with Google’s online application suite, the opportunities for such applications are best maximised either by focussing on the 10% of an applications features that are used by 90% of it’s users or when they deliver features that couldn’t be delivered with offline software. In Aviary’s case this might mean being able to quickly alter a photo before posting to a blog or photo-sharing site or being able to collaboratively edit a visual in real-time with other users.

The rather well thought of ‘Future Of Web Apps’ conferences are on tour this year and are coming our way [e.g. up to Leeds] in May, whilst also visiting Cambridge, Edinburgh and Bristol.

Web designers have always battled with, and found creative ways around, the limited number of fonts available for ’standard’ use on the web. On mobile there is usually no option but to allow the device to just render using a single system font, but on iPhone at least there is a selection to choose from - though not the complete set that is included on Mac OS X. This excellent review of the iPhone fonts explains the comparisons to the ones available on OS X and some of the shortcomings with the iPhone subset.

iStockphoto, a favourite amongst many designers for cheap image/video/flash stock assets, is developing an application to allow richer access to it’s library. The application offers enhanced features over an already capable web interface, adding things such as ‘cover flow’ view, multiple/batch downloading and improved lightbox management. The initial release - public Beta due in February - is Mac OSX only, with an Adobe AIR version to follow shortly after.

Cool enough to get Marvel comics attention. Not even fully in post until 20th January and already Barack is being saved by Spidey.

I just came across the Gaping Void - “cartoons drawn on the back of business cards”, and, besides being entertained, it reminded me of a previous life creating some of the first WAP m-cards for Hallmark. In these iPhone rich-experience days, mobile users would now laugh at the 44×96 pixel monochrome bitmap greetings but there is something refreshing about being forced to keep your message concise.

The Blueprint Grid CSS Generator is aimed at designers and developers utilising the Blueprint CSS framework. However, it is a very handy tool for calculating columns and gutters for any grid layout, regardless of the final development [though presumably with a little more searching there are other design-oriented tools specifically for this also].

The Blueprint framework seems to be fast becoming the preferred method of quickly desploying a grid-based design to a CSS based layout.

Never waste time again creating those web-2.0-tastic animated loading gifs, just use www.ajaxload.info instead.