You can learn a great deal by looking at others’ work and analysing it. Breaking down existing user interfaces and rebuilding them in XD will teach you how to ‘see through the eyes of others’.
I’ve included some ‘Master-Apprentice’ exercises where I’ve analysed a variety of interfaces in different contexts:
I use this Master-Apprentice approach in my teaching at Belfast School of Art, and the students who undertake the exercises invariably end up learning much faster and producing more refined work as a consequence. I hope you find the examples useful.
Looking at these interfaces and how they are structured will teach you about user interface design and information architecture in different contexts: from the relative space of a desktop context to the tighter confines of a wrist context.
I’ve undertaken a few exercises that I’ve included to demonstrate how I learn about user interface design by analysing, deconstructing and reconstructing others’ work.
The desktop examples I’ve included are browser-focused, but the principles apply equally to desktop software.
The UK government’s award-winning GOV.UK website is an excellent example of a website that simplifies complex information. It’s user interface is clear and information-focused, which serves its users well. The information hierarchy – at both the site-level and the page-level – is clear, enabling users to navigate the information presented easily.
A side project by Josh Worth, If the Moon Were Only 1 Pixel does a wonderful job of visualising complex information. I’ve intentionally included this more experiemtal example to show what’s possible with very minimal building blocks of interfaces: points, lines and planes of color.
The mobile examples I’ve included are for iOS (because I have an iPhone), but – broadly – the principles of information architecture and user interface design map over to other mobile platforms.
Fantastical 2 for iOS by Flexibits is a lovely example of an mobile application that condenses a great deal of information into a beautifully designed user interface. As a calendar and reminders app it has to fit a great deal into a small space and it does so minimally and elegantly.
Things 3 for iOS by Cultured Code is an award-winning personal task manager. The app’s user interface not only looks stunning, it feels stunning with delightful interactions that communicate how the app works to the user. In this file, I’ve also shown how Things 3 condenses down into a watchOS app so you can see the challenges of designing the same app in two very different contexts.
A designer, writer and speaker based in Belfast, Christopher mentors purpose-driven businesses, helping them to launch and thrive. He encourages small businesses to think big and he enables big businesses to think small.
As a design strategist he has worked with companies, large and small, to help drive innovation, drawing on his 25+ years of experience working with clients including: Adobe, EA and the BBC.
The author of numerous books, he is currently hard at work on his eighth, ‘Designing Delightful Experiences’, for Smashing Magazine and ninth, ‘Building Beautiful UIs’, for Adobe. Both are accompanied by a wealth of digital resources, and are drawn from Christopher’s 15+ years of experience as a design educator.
I hope you find this resource useful. I’m also currently working on a book for the fine folks at Smashing Magazine – ‘Designing Delightful Experiences’ – which focuses on the user experience design process from start to finish. It will be published in late 2019.
You might like to follow me on Twitter for updates on this book, that book and other projects I’m working on.