Design Lessons from My Father

Over the last few years I have found myself, more the once, saying things that make me stop and think –  ’Whoa that is something my father would say’. I began to realize that much of my design and general ‘creation’ methods and philosophy comes from my father.

My father would not call himself a designer, although when asked what he did at work, he usually responded ‘making stuff’. I always found this statement a bit odd and couldn’t really relate from my childhood imagination of what fathers actually did at work (this was equal to TV dads). It wasnt until much later that I realized – together with my own desire to create something – what he meant and appreciate certain experiences.

My father exposed me and my brothers to technology at a very early age, as well as gave us ample opportunity to build things on our own (read:blow-up) – model rockets, hot air balloons (too small for people), RC airplanes, computers – you name it. When I was a bit older we were exposed to carpentry, homebuilding techniques (from reading monthly issues of Fine Homebuilding and Fine Woodworking magazines) and architecture. My father also exposed me to all things Japanese. It started with a few bonsai trees and progressed to a full scale Japanese garden in our backyard. This combination of technology and aesthetics has been a powerful combination for my future.

All of these experiences resulted in some useful lessons:

1. Read

My father read (and still does) constantly. I have many fond memories of my Dad reading in the evenings, at the beach, in airports – everywhere. My father also read everything. No matter what book or magazine he found laying in front of him he would read. It was almost that we couldnt help himself (I have the same habit). This resulted in him having a rather wide area of knowledge, that really is an asset when designing solutions. Some of my truly best design solutions are ones that I developed while reading magazines about subjects I wouldn’t normally be interested in.  True innovation occurs in the combination of previously unrelated ideas and reading is a good way of exposing yourself to these ideas.

2. Measure twice cut once – Prototypes

My father is now, after retirement, a full time carpenter. I have watched him through the years build furniture that has become more and more complex and elegant. Each project demands planning and due to the work and cost involved, a good way of minimizing risks and avoiding mistakes. Enter prototypes. If my father was making a large piece that involved new techniques he would often make a prototype with less expensive wood. This allowed my father to learned from the process, modify techniques or change the design  without breaking the bank.

In the digital world, I have found prototypes an excellent way of testing to see if a solution is effective in a low(er) cost format.

3. Try it yourself

If my father wanted to learn how do something, he read about, then gave it a try. He wasn’t very big on calling in an ‘expert’ to do certain projects if he was confident he could do it himself. He succeeded many times, and seeing this has given me the ability to try things myself I may not have considered otherwise.

One of the things about designing things digitally is that many of the technologies you can try yourself. There is usually a blog post or tutorial that can guide you through the most difficult technologies. By doing this, you learn what is involved in realizing an idea digitally and also the value of experts in these areas.

4. Tools

I remember going into by fathers shop looking at all the different tools in amazement. My brothers and I would begin to make basic wood ‘objects’ and realize we didn’t have the skills or knowledge to do what we wanted. My father would take out a strange looking tool that could perform the task easily.

‘The right tools makes things easier’ he would say.

When designing things, using the right tool, can make all the difference.

Editors Note: The opposite can also occur. I have developed some good design solutions using the completely wrong tool. It took longer, looked rather bad, but was a good solution.

Thanks to my brother Brian for inspiration and ideas for this post.

UI Design Patterns

The last few months have been a very intense time as I have recently changed jobs. In my new role, Interaction Design is a critical part of the job description (yeah) but this has put my personal UI toolbox to the test .  Over a series of weeks, I tried to expose myself to as many UI design solutions as possible. During this search, I have uncovered a large collection of some really great sites that I would like to share.

In order not just to flood my senses with design solutions and improve recollection for the future, I started a notebook of highlighted UI solutions. Actually, it started a few doodles on scraps of paper, but it soon graduated to it’s own notebook.

The method of documentation is simple, for each new resource I discover, I choose at least 3 solutions that I find interesting or relevant. I study each solution, then after a few minutes, sketch the UI from memory. For me this, this works well for internalizing the UI solution in my brain for future recall. Occasionally, I have redrawn the UI slightly different, or how I remember it, transforming it into something different.

My list of top UI design resources:

UI Design Patterns for Websites and Applications

1. UI-patterns.com

UI-patterns.com is a large collection of design patterns for UI designers to gain inspiration from. The site allows users to keep sets of their own (publicly accessible to site visitors) so that you can see other UI design pattern collections.

2. Interaction Design Pattern Library

Welie.com has an interaction design pattern library maintained by Martijn van Welie, a Ph. D. graduate in Human Computer Interaction who now works as an Interaction Design Senior Consultant for Philips Design. The library features a ton of design patterns involving various site tasks such as navigating around a site, searching a site, and basic interactions such as slideshows. Each pattern follows a specific format: (1) the problem, (2) the solution, (3) when to use the pattern, (4) why you should use the design pattern, and (5) examples of the pattern in use.

3. Pattern Tap

Created and maintained by Matthew Smith and Chris Pollock, Pattern Tap is a gallery of popular web-based User Interface components and design patterns such as slideshows and breadcrumbs. Pattern Tap allows users to create their own sets, and they now have over 7,000 user sets. There’s plenty of inspiration to be gained at Pattern Tap.

4.  design|snips

This design gallery focuses on common web page components such as navigation as well as popular design trends such as Grid layouts. design|snips has over 30 categories so that you can easily find the design pattern/trend that you’re interested in. Users are allowed to rate each design featured in the gallery so that you can see what the overall consensus is with regards to the effectiveness and appeal of a design being shown.

5. The UI Pattern Factory

The UI Pattern Factory is a UI design library and gallery. The added extra from this collection  is that they sometimes share videos in each entry to improve the description of design problems and solutions. Entries are further enhanced by user-submitted examples of the pattern, which they archive in their Flickr group: UIPatternFactory.com. A very comprehensive collection.

6. Web Design Practices

Web Design Practices is a gallery of web design patterns such as breadcrumb navigation with very thoughtful and comprehensive write-ups on each design pattern, often including statistics and helpful resources about a particular website component. This information is good when explaining why design solutions have been chosen.

7. Elements of Design

Elements of Design focuses on particular components of a web design such as login forms and site navigation in the hopes of inspiring designers, as well as to highlight prevalent patterns for typical website needs and features.

8. UI Patterns

UI Patterns is a UI design library that follows a weblog format where each post is a design pattern and a showcase of it in use on a website or web application.

9. Little Big Details

A great tumblr site that gives a daily dose of UI inspiration

10.Ultimate guide to table UI patterns

A rather short, but good,overview of types of table UIs as well examples.

I will add new ones as I find them, but so far this list is my new UI design toolbox.

Flickr Collections and Groups

1. Design Patterns

This Flickr collection maintained by Chris Messina is a showcase of unique and interesting interfaces on the web. The collection is very well-organized into sub-sets such as Drag and Drop interfaces and Calendar Views.

2. Design Patterns Group

In this Flickr Group, there are over 300 items that you can browse through to see interface design solutions and trends.

3. Web Form Design: Filling In the Blanks

Maintained by Luke Wroblewski, this Flickr set is a collection of images pertaining to web form design. This is an excellent and inspirational resource to have around for times when you are designing web forms.

4. Search Patterns

Peter Morville has a Flickr collection dedicated to gathering design to for effective search. For different types of search UI inspiration this an excellent resource.

I will add more resources as I find them, but for now, this will fill my UI design toolbox quite well.

What is the one brand you cannot live without (except Apple, Google and Ikea)?

Last week, after the latest Apple ‘Lallapalooza, juggernaut, mother of all product releases’ event for the Ipad 2, I began to think seriously about brands. I found it interesting that a brand (Apple) can command such a following for a product release. How do such brands develop such passionate followers ? Note: for the record I followed the release myself so partially this was a bit of self introspection.

I started to think about the brands that are important to me and realized the the list was quite long. I started to wonder what brands other people felt strongly about. To get a more realistic idea of what these brands could be, I conducted a very unscientific study where I surveyed  my friends on Facebook and my Twitter followers (863 as of this writing).

The question posted to Facebook and Twitter was the following:

‘What is the one brand you cannot live without (except Apple, Google and Ikea)?’

I chose to exclude certain dominating brands to get a better idea of some of the smaller brands in peoples lives.

Alphabetical result list:

Adobe
Arla
Artek
BBC
Bang & Olufsen
Carhartt
Copic
Facebook
Fender (2)
Finn.no (Norwegian marketplace)
Filippa K
Flickr (3)
G-Star
Illy
Leica
Lego (2)
Logitech
Nespresso (pod coffee)
Nikon
Northface
Norröna (outdoor equipment)
Nikon
Omega
Pampers
Paypal
Pepco (electricity)
Prophoto (photosite platform)
Wordpress
SVT (Swedish television)
Senseo (pod coffee)
Systembolaget (Swedish liquor retailer)
Tiger
Wikipedia
Windows
Vitra
Volvo

If we look at the list we can see that it covers a wide range of consumer products with a few brands were mentioned more the once. Flickr, the photo-sharing site was the brand with the most votes (3). Next on the list, with two votes, we have Lego and Fender Guitars. Lego can be explained by the large number of my friends that have children at the moment. A bit of a surprise is Fender, the guitar manufacturer. Apparently, Fender products generate a great deal of passion from it users. Pod-coffee (Nespresso and Senseo) and Public Service Television (BBC and SVT) where, as a category, also voted for more the once.

So we can say that my friends and contacts value viewing photographs on line via Flickr, playing with Legos, playing Fender guitars, drinking good pod-coffee and viewing Public Television.

Statistics:
5 responses out of 185 friends on Facebook.
9 responses from from a Twitter following of 836 persons.

Erik Spiekermann: Putting Back the Face into Typeface

A very well produced interview with Erik Speikermann. I was particularly taken by his take on a few points of the design process:

1. His Creative Process

I look at design inspirations for a long time – I look through books, on the internet and then I begin to sketch what I have seen. Then I put it all away for sometime. The next day (or next week) I sit down and draw it from memory – and then it is different. It is what I remember these design inspirations are be, but it is never the same as the original.

2.Teamwork

Most things I have done have been with other people. My responsibility is to show people that the design process is always teamwork, there are no geniuses, no single incredible person that can do it all of this.

New Job

After many years at my existing employer, I have decided to move on.

In March 2011, I will begin employment as an Interaction Architect at the digital consultancy Antrop in Stockholm.

I am extremely excited about this role and look forward to working with this group of creative, experienced people.

Infographic Resources

A week ago I got a question from fellow tweep @glvsn if I knew of any good in infographic resources for beginners.

Now 2010 was THE year of infographics and there are thousands of examples of infographics, some better then others (actually allot better), but ‘how to’ resources are not as common.

After some tweets back and forth between myself, @axbom and @belos_theclouds we assembled a pretty good list.

I took this list and fleshed it out with a few other links of my own.

I hope you find it useful.

Huge Infographics Design Resources: Overview, Principles, Tips and Examples An excellent resource gives a brief history, design guidelines and some good examples of successful infographics

10 Awesome Free Tools To Make Infographics This is a very good list that points out some basics, but really summarises a number of key free online tools for creating infographics.

Good Inforgraphics This comes from the GOOD website, which just drips with good design.

Society of News Design (SND) – Infographics A comprehensive list of articles, blog posts and longer essays on inforgraphics. Can loose yourself for hours in there.

Books on Infrographics Good list of visual design basics as well as some more advanced graphic guides.

The Anatomy of an Infographic Article that describes the three components of an good infographic: visual, content, and knowledge.

Seven and a Half Steps to Successful Infographics A excellent post from visual journalist Sarah Slobin based on 20 years of infographic experience from New York Times, Fortune Magazine and CNNMoney.com. Nuff said.

Finally:

‘Don’t stand in the way, let the information tell its own story’

Old vs. New vs. Good

A prominent digital designer was in Tokyo recently, and shared a story about an experience he had in his neighborhood in London. He decided to embark on a journey to as many antique shops as possible, and to purchase antiques with particularly romantic stories attached to them. Unexpectedly, each of the shopkeepers surprised him with a consistent response to his question, “Tell me about this object.” The dominant responses being, “Well, it’s *old*.” Or, “It’s from the 1800s, and is really *old*.”He found this response of “it’s old” (and therefore it’s *good*) quite puzzling. And then got to thinking how as a digital, “new media” person folks would ask him about his work to which he would respond, “It’s digital. It’s *new*.” And by the same token, implicitly, it’s *good.* He realized that neither “new” nor “old” are sufficient rationales to express quality. That the quality of “good” is something more. Like this story he related. It’s a good one, for certain. -JM

From the latest Posterous post from John Maeda.