Southern Cross University ITC72003 UI Design Prototype Assignment

This report presents a user interface (UI) design prototype developed using Adobe XD, alongside image editing and manipulation techniques performed using GIMP. The project aimed to create an interactive prototype, focusing on user experience and design principles. The student utilized GIMP for basic image editing features, including layer masks to selectively modify image opacity and transparency. The Adobe XD tool was employed for prototyping, enabling the creation of interactive elements and transitions. The report includes feedback from testers, highlighting the intuitiveness of the prototype and suggestions for improvement, such as refining the color scheme and integrating additional features. Furthermore, the report analyzes the features of both the graphics editor and the prototyping tool, assessing the user experience in using them and suggesting potential improvements for future iterations, including mobile version and enhanced navigability. The assignment adheres to the requirements of ITC72003, demonstrating skills in UI design, image manipulation, and prototyping.

Running head: ITC72003: USER INTERFACE DESIGN PROTOTYPE
ITC72003: User Interface Design Prototype
Name of the Student
Name of the University
Authors note

1ITC72003: USER INTERFACE DESIGN PROTOTYPE
Basic Editing Features used for composition of Two images in GIMP
For the image manipulation the GIMP tool is used in this project. In the image
manipulation the layer masks and other techniques were available. The layer masks are helpful in
basic image manipulations. Use of this technique helps the editor in order to selectively apply
modification to the image opacity or transparency of layer. This technique is different from the
utilization of the layer Opacity slider on the selected image as a mask. Using the mask it is
possible selectively modify the opacity in different segments of the single layer.
Applied editing techniques
In case of the modification through the layer’s transparency utilizing some mask is
considered as non-destructive to selected layer. Through this flexibility it is possible to define
opacity of selective areas of a chosen layer. This technique is the basis for different other
advanced image manipulation techniques available in GIMP. The example of such techniques
are luminosity masking, selective coloring and so on.
User experience in using the tools
As the GIMP tool is one of the open source image manipulation tools thus there are lot
of examples and forums are available that helped me in the completion of this project using some
of the images from the internet. The images are later on modified using GIMP as well as
composed with each other.
User experience in prototyping tool
For the prototyping, the Adobe XD tool is used which is very helpful in the creation of
interactive prototypes for application easily without the use of the third-party plugins for basic

2ITC72003: USER INTERFACE DESIGN PROTOTYPE
interaction design. With the help of this prototyping editor, it is possible to o visually connect
different interactive areas on the designed user interfaces/screens using connection wires and
setting up transitions when an specific element is clicked. With this interaction ready prototype
it is possible to publish as well as share the prototypes with the users that can be be viewed on
the web or on the editor of Adobe XD.
Further improvements
While utilizing the Adobe XD, I found some very useful plugins that can improve the
color schemes as well as features like usage of icons on the through those plugins. In this way it
will be possible to make the UI more intuitive and feature rich. Furthermore, the navigation
social networking logos integration can be added in the further modifications of the design.
In the next versions we will try to make the website for a mobile version and better
navigability using different elements available in plugin.
Feedback from two testers
Tester 1:
The Prototype is quite good and the interaction through the different pages are also
intuitive. With the ease of design as well as animation in the editor area can meet the
requirements of an client so that they can visualize about the product they need and test and
iterating on the designed UI.
Tester 2:

3ITC72003: USER INTERFACE DESIGN PROTOTYPE
The interaction on the developed user interface is effortless which makes use of the
navigation elements and animations to reach the next stage. It is suggested to improve the color
scheme of the design as sems to be very bright on the screen.