Ryan McClelland

Interaction Design student.

[saysryan]

IXD 303 & 304 Final Submission

IXD303

Research

Prototype

IXD304

Research

Prototype

Website

[saysryan]

A prototype made with Adobe XD

UX ed Final Protoype

[saysryan]

Heroes & Villains Prototype

A prototype made with Adobe XD

Heroes & Villains Final Prototype

[saysryan]

Heroes & Villains Final Website

Here is the final website for my heroes and villains project.

[saysryan]

Learning some Javascript

I watched this introductory video about maps using javascript and CSS. It really helped me understand how and why javascript is used. I now need to find how to make my SVG map clickable and possibly reference to a data table.

[saysryan]

Refining the prototype

As I have now finished the prototype I can move onto creating it in HTML. This part of the project is the most daunting for me, especially when I create the SVG map using javascript and css.

[saysryan]

Selecting the Colours

These are the colours I have chosen for the prototype/website. They really fit the sherlock theme and I feel that people will resonate these colours with sherlock.

[saysryan]

Creating the Illustrations

I have begun to create Illutrations for the prototype. I decided on a very minimalistic design style with side profile views as this is very old fashioned in terms of the ‘sherlock era’. I love minimalistic design and I feel that the icons and illustrations will look visual appealing next to the more traditional Bodini ext.

[saysryan]

Putting My Ideas on Paper

As I begin to sketch the prototype I start with mindmaps of the characters personalities to get a better understanding of them and ultimately determine how the design will flow. 

I then begin to do rough sketches of the pages to get an idea of the layout and I will develop from here.

[saysryan]

Becoming a Successful Illustrator - Book

This fascinating book is extremely useful for those looking to develop their Illustrating skills and I thought it was relevant to the Heroes and Villains project.

It is a well designed (no pun intended), clearly laid out book about what it takes to become a working illustrator.

The book opens up with the elastic nature of illustration, crossing into many applications in the image heavy world we live in. This is good news to those practitioners just entering this broad field as well as those long time illustrators who are always looking for different income streams for their work. Illustrations represented throughout the book include traditional to digital, editorial to advertising, product to visualising and concept, paper to screen, film to toys, motion graphics to animation, and to publishing of all kinds. This is not a book concerned with only one way to work as an illustrator, and I wouldn’t say that this is a book only for beginners.

[saysryan]

Juice Jam - App

I found this really cool and uniquely design app on the app store called Juice Jam. It has a sherlock holmes theme but I was really inspired by the icons and graphic within the game. 

[saysryan]

Getting to Know Sherlock

As I begin the prototype I am starting to gather information about Sherlock Holmes so I know the facts about the Heroes and Villains!

[saysryan]

API’s

In a recent lecture API’s were brought up (application-programming interface) and how they are used link Google maps through an API Key.

Other examples of API’s are:

Google fonts

Typekit

Fonts.com

An API is formally known as a set of programming instructions and standards for accessing a Web-based software applications. A software company releases its API to the public so that other software developers can design products that are powered by its service.

I may want to add a Google map to my website but that will depend on the design an if it is needed.

[saysryan]

Sample Animation

This is a sample interaction from my prototype, showing the process of using the search bar.

[saysryan]

High Fidelity Mockups

Here are some high fidelity mockups of my final app prototype. The full prototype is viewable here.

[saysryan]

UXed User Flow

This is how the app will link and how the user will flow through it.

[saysryan]

Empathy Mapping

Based on the User Personas, I created empathy maps of how the users think and feel, gaining a better understanding of how both they think and how the design of UXed will be.