What is User Interface (UI) Design?

“User interface (UI) design is the process of making interfaces in software or computerised devices with a focus on looks or style. Designers aim to create designs users will find easy to use and pleasurable. UI design typically refers to graphical user interfaces but also includes others, such as voice-controlled ones.”

ALAN DIX, N.D, USER INTERFACE (UI) DESIGN, INTERACTION DESIGN FOUNDATION

Motion Design Area of Focus

The project’s concept is still based on a story about UI design and science fiction. The approach is mostly based on Ambrose and Harris’ philosophy, which states (2009, p. 28):

At each stage you should take stock of where you are, where you are heading, what’s working and what’s not. The ability to learn from each stage will enhance the development of design thinking, and will help to generate radical and successful designs. 

At every main scene of the animation involves the cyclical repetition of the “design thinking process” (Ambrose & Harris 2009, p. 28). The process is largely dominated by researching and gathering concept photos, and researching tutorials while simultaneously prototyping.

Current experimentation

Changes
The main failing I was concentrating on was the fear that the animation would become clichéd. So, for the aesthetic factor, I’ve been looking at different sci-fi media, with a particular focus on the video game Star Wars: Jedi Fallen Order’s portrayal of planets and hyper-speed, the movie Iron Man and the Avengers’ visual aspects and UI interfaces, and the video game Halo 5: Guardians (2015)’s 3D layout of their UI design. After receiving some feedback, I came up with the idea of utilising the VC Orb plugin to add some extra planets to my design. The purpose of included this section was to give the story more depth. This breaches the fourth wall and creates the appearance of audience engagement.

Complications

The planets’ components were hard to create owing to the vast quantity of memory/pixels they required. Furthermore, due to the buffer being greater than 30000 pixels, one of the interfaces generated kept generating an error code, which was unexpected. Furthermore, the file kept failing in Adobe Media Encoder (AME) when rendering for several proofs, making it difficult to re-watch some portions of the animation. However, I resolve this by converting the file to a smaller format in AME, such as a YouTube 480 Sd video (standard definition). Instead of waiting hours for a full resolution render, this allowed me to receive a fast render to check certain aspects out before finalising things.

Technical Breakthrough

The new sequence also had a problem with working with 2.5D and secondary motion when it came to connect it to the “start-up” scene. I wanted each planet to spin horizontally as the interfaces overlapped, revealing the opposite side and the characteristics of these planets. However, I was able to do achieve this through experimenting with secondary motion and lighting to give the animation a feeling of motion and detail.

I believe that the most difficult aspects of working on this animation will be working in a 2.5D area and with secondary motion, since I will have to physically materialise the animations. In addition, the viewer’s eye is guided by the rhythm of motion, which ensures that the information is clear and not overwhelming (Poulin 2011, p. 94 & pp. 99-100).

Current Render

3 TYPES OF USER INTERFACE:

• SUI (solid user interface) / PUI (Physical User Interface) – terms for the human-machine interactivity with a physical control unit – mechanical or otherwise.
• GUI (Graphic user interface – often shortened to UI) – digital functions are translated into interactive visual imagery
• VUI (Voice user interface) – an audio based platform enabling human-computer exchanges

References:

Ambrose, G, & Harris, P 2009, ‘Stages of Thinking’, in Design Thinking, AVA Publishing, Crans-près-Céligny, pp. 28-29.

Halo 5: Guardians n.d., images, Axis Studios, viewed 4 June 2021, <https://axisstudiosgroup.com/work/halo-5-guardians/?#&gt;.

Molson, S 2015, DARK MATTER – UI/Screen Graphics, image, Behance, viewed 4 June 2021, <https://www.behance.net/gallery/29103939/DARK-MATTER-UIScreen-Graphics&gt;.

Poulin, R 2011, The Language of Graphic Design: An Illustrated Handbook for Understanding Fundamental Design Principles, Quarto Publishing Group, USA.