Category Archives: Pattern Library

Ideal Mix – thoughts on the UX design process

Retro Book cover featuring David Byrne of Talking Heads


The explosion of management theory in the 1990’s as pointed out in ‘One market under God’ by Thomas Frank, has created a situation where every one has a better theory than the previous person. This makes me nervous about writing a few posts about UX processes. So I don’t want them to be too theoretical but practical. I also want to credit lots of people along the way, because there are so many clever people out there who have already solved these problems. But I think as a manager you are always looking to find a better way of working. I think as new software becomes available you can practically solves some of the old recurring problems.

Continue reading

Responsive banking dashboard concept


The user’s dashboard should be an honest, fun, collaborative, conversational, engaging interface that lets the user control their money in the Ginkou bank. So that they feel that they have control of their finances. The bank is supporting them in achieving their goals in life with simple financial management. The dashboard represents a move away from reporting financial data to the user and towards engaging with them in designing the best financial outcomes for them.

Continue reading

Material Designs


Google has announced a new design language for Android’s UI design. Matias Duarte, the head of Android design at Google, talks through Android L design features, creating a new design language called Material. I have pulled out my highlights from his talk. The stand out was the trouble they had taken to create delightful animations to provide clear feedback on touch devices. He said ‘its delightful when your touch is rewarded with animation….’ and I haven’t considered how important this was before. But this presentation really made the point. Its a very confident piece of work.

Continue reading


This is a library of patterns and components to act as a personal reference point.

Design Patterns are common interactions and behaviour seen frequently across a large range of sites. They becomes the basis for accepted functionality and behaviour. Having made a number of Pattern Libraries as part of the web development work I have carried out over the years. I have decided to compile some designs as a small library here at The idea is to be descriptive and not prescriptive. As there is no way that such a library can be definitive. As with all libraries it will start small but hopefully grow over time.

There are also slightly more project centered design libraries that contain components. A component being a ‘chunk’ of a composite page that can be used over many pages in a modular site development. For example when redesigning, we produced a module catalogue, which described a range of 87 modules to be re used throughout the service. Its not possible to approach a redesign of hundreds of pages without reusing elements/modules/components.

There will be moments in this library where the notion of components and patterns blend. As some of the modules described in the library will be too specific to be a pattern, or to general to be a component. As a designer you move between general and specific design solutions. Between modules, chunks of pages, and creating experiences with whole sections of sites.

Personally I am very familiar with the idea of patterns and interaction behaviour. I’m excited by the recent work on the possibilities of components. If these are be pulled into frameworks then I’m intrigued. So I think I’ll be working through and researching these concepts in my head as I build this library out.

There are a lot of examples of pattern libraries on the web, and component based approach to web design. I believe mailchimps pattern library very elegantly summarises the benefits.

I have worked with alot of great front end developers and designers and I cannot begin to credit them enough with helping me and inspiring me. So thanks for all the help along the way. There is never a right way, but libraries can build consensus where there has been disagreement, and consistency when there has been difference.

Grid Financial Services

Thumbnails of a responsive gridDescription

The Financial Service industry has a wide range of products and services. Products such as accounts, insurance,loans, savings, credit cards, investments, and mortgages. These products are supported through a range of services, mobile, online, branch, telephone, and mail.  For the customer to understand the benefits of these products and services, it is essential that they are described with a clear portal wide taxonomy and at a page level with a clear and consistent information architecture.

Continue reading

Grid magazine

Thumbnail IPC magazine webpage grid


‘ What is the purpose of the grid? By arranging the surfaces and spaces in the form of a grid the designer is favourably placed to dispose his texts, photographs and diagrams in conformity with objective and functional criteria. The pictorial elements are reduced to a few formats of the same size. The size of the pictures is determined according to their importance for the subject.

Continue reading