School of Computing & Creative Media
Bachelor of Arts (Hons) in Creative Digital
Media
Final Project: Website Design
CDM3313 Interactive Design
Lecturer: Nur Atiqah Binti Zaini
Prepared by:
Moh Hioung Ek BDM21090008
Izzat Imran BDM21030003
1
Table of Contents
Title Page Number
1.0 Introduction 3-4
2.0 Idea Development 5-6
3.0 Website Development Process
3.1 Logo
3.2 Logo Process 7 - 11
3.3 Typography
3.4 Menus
4.0 Website Design
4.1 Wire frames 12 - 22
4.2 Website Prototype
5.0 User Experience 23 - 24
6.0 Conclusion 25
7.0 References 26
2
1.0 Introduction
Interactive Design is an interaction design that involves the users
and products. The products could vary to software, apps or a website. The
main reason on why interactive design is important is because it lets the
user achieve their objective in the most intuitive way possible. Even
though there are a lot of practicality involved, there are also other
elements that contribute on what a good interactive design is such as
aesthetics, motion, sound and space.
In order to achieve the ideal interactive design, there are 5
dimensions that need to be worked on. First are the words. It could be the
font type used, font size or even the button labels. It should also be
simple and straight forward. This would enable the users to understand
quickly and not overwhelm them.
Next, it would be visual representations. This involves on visual
elements such as images, typography and icons that the users would be
able to interact with. This element would help the user know what each
detail meant with just a glance.
Then there is physical object or space. In other words would be the
object of the design being shown on. The users might have to interact
with the product on a laptop or a smartphone. Having this thought out
early will make the flow of designing smoother.
In addition to adding visuals would be time. This refers to how the
product changes in time. It could be animation, videos or sounds. This
adds a sort of connection between the user and the product as it makes the
product feel alive.
Last but not least would be behaviour. Behaviour includes action as
well as a reaction when the user interacts with the product. Not only that,
this dimension also allows emotional feedback from the users which
3
makes room for improvement if there are any new recommendation that
could enhance the user experience.
4
2.0 Idea Development
We as gamers ourselves wanted to create something that could
benefit both us and the community altogether. In order to achieve said
goal, we have opted for a creation of our own version of a gaming phone
as mobile gaming has had an uprising in market as of late. Before we got
to the sketches for the design, we had to decide on what requirement we
wanted to achieve first. We wanted the phone to be able to be purchased
by everyone in the community so we made sure to create a variety of
designs that had different price range. We also wanted our product to
have a futuristic and competitive look so it fits well with the other
existing gaming products.
Figure 2.0 Sketch of phone
After we finished sketching the product, we chose a dark blue and
bright orange for the main colour to give off a space look as the dark blue
represents the space void and the bright orange represents the bright sun.
5
2.1 Final Product
After sketching the main design of the phone, we implemented our
design on actual phones to evaluate it’s looks. We have come up with 3
different designs that will be our main products as of now. The middle
one will be our most expensive product as it is our flagship release. While
the other two will be cheaper as it is not as powerful. We have also
decided to name our products T-Tenn with numerals attached beside it to
show the version.
Figure 2.1 Final product showcase
6
3.0 Website Development Process
3.1 Logo process
Figure 3.2 Logo sketches and ideas
The logo process was taken through multiple design variations to
experiment on which logo will fit best. After much thought, we finally
came to the decision that the simple round design was our best choice.
3.2 Logo
The round shape has a universal meaning which represents
perfection and timeless. This perfectly describes our goals as we wanted
to our product to have as little fault as possible and is up to trend no
matter the timeline. For the colour, we chose a simple monochromatic
black and white colours as it represents power and strength. Not only that,
it also gives a professionalism vibe to show that we are serious on our
product making. Finally, we added a small slogan text underlining our
company name as it can further communicate information about our
service.
7
3.2.1 Mock up images
Figure 3.3 Mock up logo images
We made a few mock up photos to bring our company’s logo to
life and test how it feels in the environment.
3.3 Typography
Typography is the art of arranging letters and text in a way that
makes the copy legible, clear, and visually appealing to the reader.
Typography involves font style, appearance, and structure, which aims to
elicit certain emotions and convey specific messages. In short,
typography is what brings the text to life.Good typography could be the
difference between someone staying on your website for one minute
or half an hour. It’s important that your website is visually stimulating
and memorable, and typography plays a huge role in this process.
8
3.3.1Fonts/Typefaces
Fonts we using Times New Roman on our website typefaces we
using the original Times New Roman.
3.3.2 Contrast
The contrast we using for the website are white contrast of Times
New Roman.
3.3.3White Space
For white spacing in the website we using 1.5 for all paragraph.
3.4 Menus
Figure 1 :image of website menu
This is the our main menu for the website it can bring you through
the whole website you wanted to be.
9
Figure 2 : Image of website menus
This is the FAQ section in our website also at the same time if you
wanna go to the other pages of our website you can also click it from here
it will also bring you to the page you wanted to go if you lazy on
scrolling to the top again.
10
Figure 3 : Image of website menu
Since our website are a website selling gaming mobile phones this
is the menus which you can pick your phones type,colour and its internal
size of the phone.
Figure 4 : Image of website menu
11
Not only that we also have a page that sells original accessories for
handphone such as type-c charging cable, charger, car charger and also
phone cases for each individual phone.
12
4.0 Website Design
4.1 Wire frames
This is how our website wire frame looks like
Figure 5 : Image of website wire frame
This is the main page of our website wire frame looks like there is
logo on the top left and the menu in the middle that can bring you to the
whole website and also there is where you can check your account in the
top right. For the first section is like a tittle to show how our website
have. Second part of the wire frame is about us which is who was the
creator of this website and a short story of how this website was created.
And for the bottom part it will be a FAQ section that also can bring
through the website.
13
Figure 6 : Image of website wire frame
This is the second page of our website which you can see there is a
blue square that’s means which pages we are right now this page is
describe about spec for our product be.
14
Figure 8 : Image of Website wire frame
This is the product view where you wanted your phone colour be
or how big the internal size of your phone and also how many quantity
you wanted to buy. At the bottom left there is a space that describe about
info of the phone.
15
Figure 9 : Image of Website wire frame
This pages is same as the pages that we sell our smartphones but
only the product at this pages are the original accessories for the phones.
16
Figure 10 : Image of website wire frame
And for the last page of our website this is where you can give
comments or asking question place which you want to know about it.
4.2 Website Prototype
17
Figure 6 : image of website prototype
Figure 7 : Image of website prototype
Figure 8 : Image of website prototype
18
Figure 9 : Image of website prototype
Figure 10 : Image of website prototype
19
Figure 11 : Image of website prototype
20
Figure 12 : Image of website prototype
Figure 13 : Image of website prototype
21
Figure 14 : Image of website prototype
22
Figure 15 : Image of Website prototype
23
Figure 16 : Image of website prototype
Figure 17 : Image of website prototype
24
Figure 18 : Image of website prototype
Figure 19 : Image of website prototype
25
5.0 User Experience
Figure 5.0 Age range of users
The test was mainly taken through google docs and was spread out
by using WhatsApp. There were 20 participants that took part in rating
our website. To evaluate our website the best we can, we decided to ask
the participants to judge our website on 3 main elements; Accessibility,
Visibility, and Usefulness.
Figure 5.1 Bar chart to show each category
26
Category Ratings (in users)
1 2 3 4 5
Accessibility 0 2 3 11 5
Visibility 1 1 5 8 5
Usefulness 1 4 6 6 3
Based on our findings, the mod rating for the category
Accessibility, and Visibility is 4 stars with 11 and 8 users rating them
respectively, while Usefulness has a tied mod of 3 and 4 stars with 6
users each. Overall, our average score based on the users rating is 4/5
stars. We can confidently say that our website has achieved it’s main job
of attracting users and making it easy to use.
27
6.0 Conclusion
From this, we were introduced to the importance of interactive
design which helped improve the user-centred approach, usability and
user experience. By following the 5 key dimension interactive design
process, we were able to establish the requirements needed, design any
alternatives, making prototypes and evaluating the final product.
28
7.0 References
Cgionlinestore. “HyperX Cloud Earbuds Gaming Headphones with Mic
HX-HSCEB-RD”
https://shopee.com.my/HyperX-Cloud-Earbuds-Gaming-
Headphones-with-Mic-(HX-HSCEB-RD)-i.13888920.2696031958
Republoc of Gamers. “ROG Flow X16 (2022) GV601”
https://rog.asus.com/my/laptops/rog-flow/rog-flow-x16-2022-
series/?gclid=CjwKCAiA-
dCcBhBQEiwAeWidtXiN7YveuGnaj3YOhnBZNuTBH6K4fpZJJ5AjFH
WZR8fZNZC-1rBcahoC7nsQAvD_BwE
GSMarena. “The best phones to get”
https://www.gsmarena.com/
Club UX. “What is Interaction Design for beginners ? learn 5 Dimensions
of Interaction Design”
https://www.youtube.com/watch?v=j2c23lYUQb0
Teo Yu Siang (2020). “What is Interaction Design?”
https://www.interaction-design.org/literature/article/what-is-
interaction-design
OpenLearn. “An Introduction to interaction design”
https://www.open.edu/openlearn/science-maths-technology/an-
introduction-interaction-design/content-section-5
29
