Interaction Design learning

After spending a number of days watching two very informative webinars on CreativeLive I decided it was in my best interest to summarize them to reinforce their messages and organize my thoughts. Luckily there was overlap and it was great to hear different perspectives and reiterations of key points! First I’ll highlight notable take-aways from each webinar and then I’ll point out overarching principles mentioned in both.

Modern Web Design Demystified

The first was Modern Web Design Demystified with Jesse Arnold and Andy Pratt. It was lengthy and very informative, with an interesting interplay between two personalities with different approaches and ways of working! Although this was filmed in the spring of 2015 I think, the ideas and approaches still seem very relevant and timely.

One of the key points they wanted to make was the idea that designing should not only be responsive (using flexible grids, responsive images and media queries) but Future friendly, designing systems not pages, using progressive enhancements, starting with a core (for mobile) and then adding bells and whistles (for larger machines).  They emphasized content before design, so figuring out typography (voice/brand, hierarchy, size) and then the grid system or the enhancement, for tablet and desktop.

Another core take-away was that you can’t design for everyone, so you need to prioritize business goals, create user personas, define what success looks like with key performance indicators and focus your attention.

Andy also talked about the Behaviour Gallery which houses the interface’s personality, the special sauce, the wow factor (eg the like button in FB, # for Twitter, swipe in Tinder), where form and function are joined.

Interaction Design

The second webinar is titled Interaction Design with Jamal Nichols who strongly recommended that in order to truly empathize with developers, designers should code something from start to finish…and not just something like a straightforward website. He also pointed out that as designers you need to let go of your ego, and focus on functionality, usability and empathy for the user’s wants and needs. The more you understand people’s mental models (how they think and react), the better you can create something they will “get” and enjoy.

Jamal also highlighted the importance of understanding and designing microinteractions, the small, brief, easily overlooked product moments that focus on a particular task. He talked about how this involved three components: the trigger, the rules and the feedback and that the best interactions are smooth, wordless and where you feel understood.

Screen Shot 2017-03-16 at 4.05.10 PM

Overarching principles mentioned in both webinars

Both webinars emphasized the need for collaboration with your clients and making sure you understand the problem before searching for solutions, that there is a lot of work on a project before the design work starts!

They expounded on the fact that interaction design is a conversation, so not only is it important to know and speak the developers language, but also that communication is key between designers and developers, stakeholders, and the rest of the team.

Finally the webinars summarized the key steps in interaction design:

  1. Research to understand the problem, through stakeholders meetings, literature review, audits of competitors, user interviews and observations.
  2. Development of user personas to help focus the discussion of the issues and the early design of solutions
  3. Building of wireframes to sketch out the design layout, an inventory and hierarchy of the content
  4. Construction of prototypes so that the wireframes can be contextualized and put into action
  5. Then and only then does visual language, design elements (typography, colours, logos) come into play.






Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s