Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
executable file 143 lines (82 sloc) 9.41 KB

IXD101 – Interaction Design Fundamentals

Placing a heavy emphasis on a design-focussed approach towards interaction design, this module introduces the fundamentals of the craft of communication design, both off- and on-screen. Through a combination of core analogue (drawing, making) and digital (HTML, CSS) skills, students are equipped with the tools required to practice in today’s interaction design industry.

For a more in-depth explanation of the module’s intent, including recommended reading, read the abbreviated module descriptor. (This module is run concurrently for students on both the BDes (Hons) Interaction Design and BSc (Hons) Interactive Multimedia Design courses.)

Supporting material for IXD101 will be posted here on an ongoing basis. If you're unfamiliar with GitHub, don't worry, we will be introducing you to its magic at the end of Week 03.

GitHub can all appear a little intimidating at first, but – like anything in life – with some experience it will all make sense. Don't worry, we won't leave you in the dark, we're here to help and will ensure you're all set to go. For now you can just keep this page bookmarked and read it like any other web page.

Project requirements can be found at – IXD101 Deliverables

Week 01 – Point

To kick things off we stressed the importance of working on paper:

Paper should be the first point of call to get your idea(s) out of your head and into a form that can be easily visualised, reimagined, discussed and shared. —Jake Giltsoff, Typekit

Always start on paper. —Lee Munroe, Mailgun

When we jump straight onto the computer and begin pushing pixels around in Photoshop (or our weapon of choice), we’re jumping several stages ahead in the process, without any of the foundational stages that go before it. As a result, we’ll likely find that problems arrive that would’ve been foreseen if we’d only gone through a bit of research and discovery first — some sketching, some loose ideas. The best designs come at the end of a process, and that process begins with rough experimentation with lo-fi tools. —Elliot Jay Stocks, Typekit


Each week I will add a list of suitable resources some will have been covered during the day but others may be added where appropriate. Depending on what's available these may be links to books, publications, websites or videos.

If the Moon Were Only 1 Pixel

Check out the Moving Brands Wikipedia "Living Mark" project. Pay particular attention to the amount of research they employed during the development of the brand.

Wikipedia Rebrand for Viewpoint

Teaching to See

We’re starting with the smallest possible building block – the point – we’ll use this across a range of exercises on paper that investigate and explore form and composition.

“Point, line, and plane are the building blocks of design. From these elements, designers create images, icons, textures, patterns, diagrams, animations, and typographic systems.” Ellen Lupton

Luptons book Graphic Design, The New Basics takes us back to the roots of design and asks designers to take a fresh look at the discipline while Christian Lebourg’s Visual Grammar asks us to learn and understand the basics for a better understanding of the graphics that bombard us every day.

We took a look at Sagmeister Walsh Seed branding and how simple dots can become a highly creative and very flexible brand. Alternatively, Nicholas Felton shows the value circles add to the creation of his personal annual reports.

What Do I need?

Continue with your 1, 2, 3 and 5 and making sure you complete each before moving onto the next. Then create a background for your mobile using nothing but circles. Try to avoid colour, we will be looking at this in good time.

Get a Tumblr account. It’s free and this is where you will post your work for assessment over the coming weeks.

You should also look at setting up a Dropbox account. The first 2GB are free and you can earn more space through referrals. Dropbox has become an invaluable tool for designers allowing them to share and access material wherever they are.


Sketch is one of the leading applications for interaction designers, and well worth getting to grips with.

There are tonnes of tutorials online which will take you through all aspects of this excellent package. Our introduction looked at creating a simple calendar icon.

There are lots more to accommodate all types of designer with CSS Author providing a handy list of some of the best.

To help you get to grips with the app a little more run through this Prescription Bottle Ilustration try to personalise it a little and post the result on Tumblr.

Finally, if you are not on Twitter go get youself an account and start following:

  • @timbrown
  • @zeldman
  • @sazzy
  • @feltron
  • @vpieters
  • @ajwshaughnessy
  • @SaraSoueidan
  • @stop
  • @NNgroup
  • @brendandawes
  • @swissmiss
  • @chriscoyier
  • @johnmaeda
  • @rachelandrew
  • @creativebloq
  • @nispweb
  • @pentagram
  • @fontshop
  • @dribbble

Not forgetting:

  • @fehler
  • @eleventhirty
  • @kylbd
  • @belfastschart

Week 02 – Line

This week we progressed to working with lines.

We looked at examples from Brendan Dawes also worth checking out are some of the work our very own Christopher Murphy created with his record label Fallt.

We also looked at Moving Brands vision for HP. And had mentioned UnderConsideration’s Brand New as a valuable resource for brand work discussion.

We touched on Richard Chartier’s work and also took a look at the Air Lines poster and the work of Ulster University graduate Nigel Peake

What Do I need?

Continue with your 1, 2, 3, and 5 line exercises and make sure you complete each before moving onto the next. Then create a background for your laptop using nothing but lines. Try to avoid colour, we will be looking at this in good time.

Don’t forget to keep posting your research material, development work and final pieces to your Tumblr account.

The Nine Squares exercise was introduced this week where we would like you to create two separate pieces using only dots on one and only lines on the other. You are not restructed on the number of dots or lines you can use but. Try to look at the 3x3 grid as a whole and treat each square as a component of the final image.

Week 03 – Plane

This week we extended our visual vocabulary by looking at the plane. Examples included Josef Müller Brockmann, Wim Crouwel and Mark Blamire’s work as Blanka. Don’t just check the links above, try to find out as much as you can about these people. The library will have material and there will be lots more online.

Covering modular typefaces we took a look at the work of Emigre co-founder Zuzana Licko and another look at Wim Crouwel, particularly his New Alphabet. The man is a legend.

This great great example of a modular typeface in Behance starts with the building blocks and illustrates how four simple shapes can create a very versatile typeface. We also took a look at The Chases brilliant design for Blinkbox (now TalkTalk TV)

So as you can see you can do a huge amount with very simple shapes. Now it’s up to you.

Continue with your 1, 2, 3 and 9 planes + tone and a more finely executed 9 planes + tone piece.

The final exercise for this week is to create a modular typeface built from planes. Fontstruct is an excellent tool to help you do this. Alternatively you could use Sketch or Illustrator.

Questions? Contact the module coordinator: Paul McCormack.