Blogging happy mediums.

The blog of Jim Morrison. Student. Teacher. UX and Interaction designer. Digital composer. Visual artist. And I also like dipping biscuits in my tea.

[ourhappymediums]

The ‘Story Circle’ technique - Dan Harmon

[ourhappymediums]

Creating the Yonder survey

I’ve been researching a few different types of survey creation tools, from Typeform and Google forms to Survey Monkey and others.

A key consideration when deciding to use free surveys is the limitations it may put on the number of responses expected back. For this project I didn't want to limit the number to responses, as I wanted to create a survey suitable for a wide range of audience, ensuring sufficient and relevant data...

[ourhappymediums]

Affinity Mapping 101

Today in #ixdbelfast we discussed our ideas with the class and got some amazing feedback for our final year projects. 

A key thing for me was the highlighting of accessibility in both printed and digital media to ensure all children are able to read the Yonder books.

[ourhappymediums]

IXD303 Designing User Experiences

Invision Prototype

Keynote Prototype

Prototype Files

Mockups

Research

Icon Set

Website - Just a landing page I'm afraid.

Oblique Strategies Masterclass with Chris Murphy

Website

Research

[ourhappymediums]

[ourhappymediums]

IXD303 Designing User Experiences

Overview

The IXD303 module of the this has made me think a lot about UX design and how it could, and should, be integrated into the technology, products and services in which we use.

Although I was not able to complete a final build for the project and produce a finishing working application, the entire experience I can say has still been a positive one.

The main aspect of this project was to design a new weather app, using weather data that can be gathered using an API.

I researched the technology available and discovered that you could potentially build a rainbow detection device via the following:

Geolocation via GPS

OpenWeather API (for current / forecasted weather data & UNIX timecode)

Google Maps Elevation API (for topographic / Elevation data)

Javascript / Jquery (for retrieving data from API, publishing to HTML)

SunCalc.js (for suns position in the sky)

HTML & CSS (for design, layout, animations, micro-interaction)

Bringing all that data together and making it working is currently above my experience level, but its something that I will continue to work on and grow my skills as part of personal development.

Designing the Rainbow Radar

I decided to focus my attention on designing the user experience for the weather app, with my primary goal, designing a fun, unique weather app experience thats suitable for both kids and adults alike.

I designed the interface based on old radar systems from world war 1 and world war 2, as I wanted the interface to look and feel as if this was a real-world object, a tangible product that you could actually hold and use.

Another feature of the design was to include all seven rainbow colours within an appropriate colour palette that wasn't too visually striking and had a more subtle feel to it.

I decided to go with a old-school metallic style radar system, that would be contain the seven-colour palette, helping subdue the colours and make them more visually appealing.

I really wanted to focus on how this device would be interacted with in the real world, and so I decided that the interactive content should look and feel how it would on a real device.

I had been working on my skew-morphic illustration skills throughout the IXD304 - Creative Entrepreneur module and felt it was the best style to work with in order to bring this design to life

I initially designed the desktop interface, with the idea that this was a large device, and focused on making the navigation and interactive elements fun and intuitive.

After research about designing user experiences and interfaces for children, I found some really great resources that helped a lot.

https://www.nngroup.com/articles/childrens-websites-usability-issues/

https://www.smashingmagazine.com/2015/08/designing-web-interfaces-for-kids/

https://www.smashingmagazine.com/2009/11/designing-websites-for-kids-trends-and-best-practices/

https://www.smashingmagazine.com/2016/01/designing-apps-for-kids-is-not-childs-play/

http://rosenfeldmedia.com/design-for-kids/designing-for-8-10-year-olds-p/

Designing User Experiences

I’ve really enjoyed completing this module, and I feel its helped me out find my our illustrative style, and really think about what user experience and UX design really mean.

Sadly I was not able to complete a working prototype using HTML, CSS & JS, but this is a project that I will continue to work on over the summer in order to complete it.

I think the final design, UX, and interactions I've built into the Rainbow Radar really allow it to stand out from the crowd, and as a mobile/tablet application, I would really like to see this appear on the marketplace one day.

[ourhappymediums]

Rainbow Radar Keynote Prototype

Here’s the prototype of the Rainbow Radar app I've made for IXD303 Designing User Experiences.

[ourhappymediums]

IXD304 Creative Entrepreneurship

Guitaricons presents... ‘A Jimi Hendrix Experience’

Research

Website

Icon Set

Colouring Book

[ourhappymediums]

IXD Creative Entrepreneurship

Overview

From the beginning of this project, I knew this module was about creating a product using the knowledge and skills I have, and produce an icon set.

I think the most important aspect of this module is what you could do with the skill-set and knowledge that you know you have, and use that in order to generate an income and potentially pay some bills.  What I wanted to bring to this project, and ultimately get from it as well, was to make something that could engage people, something they could interact with, and at the end of the day, something they could enjoy.

The idea of creating a guitar icon set came about after thinking about the word ‘icon’ and what it means in popular culture.  From computer icons to movie icons, to rock icons, the understanding of what an icon is still remains the same, it is a symbol that communicates information about a given subject; for instance, Tom Cruise is a movie icon (the epitome of a movie star), while Jimi Hendrix is a music icon (the epitome of a rock star).

With this in mind, I wanted to create icons of an icon, using Jimi Hendrix as my subject matter and inspiration; the end goal of this project being to create a Jimi Hendrix experience.

Creative Entrepreneurship

In terms of entrepreneurship, I decided to use the icons I have created and produce a colouring book for both kids and adult alike.

I’ve found that there has been an upsurge in colouring books created for adults, providing a calm and stress-free activity that allows you to focus on something creative.

http://www.independent.co.uk/extras/indybest/arts-books/colouring-books-colouring-books-for-adults-johanna-basford-millie-morotta-10464381.html

Taking this into consideration, it made me think about the amount of detail within the icon set itself, but I still wanted to make the colouring books accessible to younger adults and children as well.

I think what I’ve managed to produce is that meets the criteria, for not only an icon set, but that can also provide an entrepreneurial model for generating income, or at the very least, getting yourself noticed within the creative industry.

Expanding the Guitaricon universe

I’m going to continue building upon the Guitaricons model and produce more illustrations and colouring books based on famous musicians and rock icons, such as Keith Richards of the Rolling Stones, or Kurt Cobain or Nirvana.

Choosing this subject matter allows the growth of the icon set, and the continued production and publication of new material.

What I would like to do with ‘Guitaricons’ is to produce a simple business model, with the hope of selling printed versions of the colouring books, which can then be sold for a small price, depending on content.

[ourhappymediums]

Rainbow Radar Prototyping

A bit of animating in Keynote

[ourhappymediums]

Guitaricons Development

Found a lovely javascript library for an HTML5 audio/video player to use with the Jimi Hendrix experience website...because it wouldn’t be right without music

You should check it out and use for you own projects

https://plyr.io/#audio

Its as simple as this for a youtube video embed

Brilliant!

[ourhappymediums]

‘The Space Between’

A thought-provoking journey, blended with ambient synths and psy-trance beats, we start to see through the gaps in our own reality, connecting to a place beyond body and mind; a place where anything is possible, where reality merges with imagination; it is only here that we begin to see through the space between us.

[ourhappymediums]

Oblique Strategies

For our IXD303 Masterclass, we where tasked with building an interactive randomiser in HTML, CSS & Javascript for Brian Eno’s Oblique Strategies cards.

Subtitled ‘Over One Hundred Worthwhile Dilemmas’, each card contains a phrase which can help provide a change of thought, or inspiration to take a new direction on a project or help resolve a dilemma in a given situation. Some are specific to particular creative types, while others are more general.

In 1970, Peter Schmidt created "The Thoughts Behind the Thoughts", while Eno pursued a similar project of his own. Both acquaintances, Eno & Schmidt decided to combined their projects into a single pack of cards.

For this task we built a randomiser in Javascript, which would then output a phrase into our HTML document.

The variables are pre-defined in javascript, within the variable ‘selectStrategy’.

The randomiser then picks a strategy after the user refreshes the page or click on the refresh button (which refreshes the page).

After the initial set-up was completed, and the randomiser was working properly on click & refresh, it was then time to style the oblique strategies site.

The masterclass, being presented by Chris Murphy, I thought it would be beneficial to create a ‘Tiny Books’-esque branded Oblique Strategies page, and style it in the same way the Tiny Book website is branded.

The background was created using CSS animations by Saransh Sinah, the Codepen can the found here: http://codepen.io/saransh/pen/BKJun; while the layout was created using FlexboxGrid by Kristofer Joseph. FlexBoxGrid can be found here: http://flexboxgrid.com.

I created the hover animation using CSS transition and transform properties and tested the site out on different devices to ensure maximum responsiveness and adaptability.

The rocket ship was created using Adobe Illustrator, and inspired by the rocket ship graphic from the Tiny Books logo; you can visit Tiny Books and see if I got the branding right: http://tinybooks.org

You can visit the complete project here: http://jimmorrison.io/obliquestrategies/

[ourhappymediums]

Rainbow Radar Interactive Prototype

Are you ready for rainbow radar?

Check out my prototype built with Invisionapp.

I’ve added as many interactive features as I could through the Invisionapp platform, including a wee cheeky unicorn that pops out now and again. 

The app includes the main Rainbow Radar interface, About section, Camera integration and social sharing capability. I wanted to keep the interface as minimal as possible, with emphasis on the interactive buttons and the interactive animations.

I think what I've achieved is something really nice, and suitable for kids and adult alike.

Please try out the prototype and see if the Rainbow Radar detects any rainbows for you.

https://invis.io/D5BP82UC4

[ourhappymediums]

Guitaricons Development

I really wanted a Zoom & Pan functions for the guitar icons website, so you can really zoom in and see the detail, while still interacting with the image.  I tried out a few different plugins, but found the fancyBox 3 plugin amazingly easy to use

It allows Gallery function, Zoom & Pan, touchscreen enabled, responsive and support video as well.  Its a fantastic little plugin you can find here:

http://fancyapps.com/fancybox/3/

[ourhappymediums]

Oblique Strategies

Connected Product Idea

For our Oblique Strategies Masterclass, we had to build a javascript randomiser and output the result in HTML & CSS.

What we then had to do was research how the same information could be relayed to a connected device, product or service, in order to think about the interactivity and accessibility of the content.

My initial idea for the connect product was an ‘Oblique Strategies’ key ring, that when activated, would output a random strategy to the user.

The device itself could be small enough to fit on a keyring, while the LCD output screen, similar to those found on old pagers and calculators, could display the strategy as scrolling text.

My second idea was to go completely off the grid and see how we could make the strategies accessible in a very low fidelity way, and without the need for the internet of things.

This idea, entitled ‘Oblique Lavatories’ would involve pre-printed toilet paper, with all the strategies randomly printed throughout the roll.  

The main purpose of this idea is to help promote inspiration while your sitting doing, well, what you need to be doing.  

I liked this idea, as I felt it was a way to approach the awareness of the ‘Oblique Strategies’ product, while at the same time, helping promote inspiration and creativity on the toilet.

[ourhappymediums]

Rainbow Radar Prototyping

If a unicorn tells you to do something, you should do it!