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.
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.
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:
Week 02 – Line
This week we progressed to working with lines.
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.
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.