Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
2 contributors

Users who have contributed to this file

@fehler @itsdangold
163 lines (74 sloc) 7.73 KB

Master-Apprentice Exercises

I’m just in the process of converting my Keynote Master-Apprentice files into XD files (20 July, 2019). I’m aiming to have this done 22-26 July.

As I’ve noted in the overview, this is a work in progress and I’m sharing it here in draft form. It isn’t finished, but I hope it provides some value as I finalise all of the chapter content.

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:

  • Desktop
  • Mobile (Smartphone, Tablet)
  • Wrist

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 to the tighter confines of a wrist.

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.

Where possible I’ve sought the permission of those whose work I’ve deconstructed and I’m thankful that the majority of the designers I’ve contacted have been happy to share my analysis of their work.

If your work is included here and you’d like me to remove it, please do drop me a line, and I will – of course – replace the example with a different one. Rest assured, I did contact everyone.

/ What’s missing here are the final, Keynote files that I’ve built. I can show you these (Becky). My intention is to recreate them using XD so that everything I share is built using XD. I’ll do this last, while we’re working on converting my text files into an ebook or website. /

Desktop

The desktop examples I’ve included are browser-focused, but the principles apply equally to desktop software.

ALT

GOV.UK

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.

/* I’ll be adding an analysis file built in XD here, shortly. */


ALT

If the Moon Were Only 1 Pixel

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.

/* I’ll be adding an analysis file built in XD here, shortly. */


Mobile (Smartphone, Tablet)

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.

ALT

Fantastical

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.

/* I’ll be adding an analysis file built in XD here, shortly. */


ALT

Things 3

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.

/* I’ll be adding an analysis file built in XD here, shortly. */


Wrist

The wrist examples I’ve included are for Apple’s watchOS (because I have an Apple Watch). If possible – and of course affording every single device is an issue! – it helps to own the devices you’re designing for so you can truly understand them by using them regularly.

ALT

Activity

At its heart the Activity app for the Apple Watch is just a series of concentric circles (with a more detailed information view available via a scroll). The circle’s bold colours and the animations as they build in add to the delight of the minimal user interface, providing an update on your progress as you aim to close your rings.

/* I’ll be adding an analysis file built in XD here, shortly. */


ALT

Bear

Despite occupying a very small amount of space, the watchOS version of Bear – a note-taking app – provides a wealth of information. The user interface enables you to dictate short notes and browse previous notes on the go all within the confines of a very small screen. Its user interface is focused, minimal and elegant.

/* I’ll be adding an analysis file built in XD here, shortly. */


About the Author

Christopher Murphy

Christopher Murphy

@fehler

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 and other projects I’m working on.

Copyright · Mr Murphy + Adobe
Design and Build · Dan Gold + Little Thunder

You can’t perform that action at this time.