INTERACTIVE

WEB DESIGN
Group Members:
Phoon Kai Heng | Ng Yong Quan | Teok Wei Ling | Chong Wen Qian
 TABLE OF content
01 02 03
Introduction Research & Planning & Design
Analysis

04 05 06
Content Style Tiles Wireframes
01 INTRODUCTION
The Faculty of Communication & Creative Industries from TARUMT

TAR UMT Faculty of Communication and Creative Industries (FCCI) offers Diploma
and Bachelor Degree programmes in the area of Communication and Creative. In this
website, it focuses on programs related to communication, media studies, journalism,
advertising, public relations, design, and creative arts. They might offer courses in
journalism, broadcasting, graphic design, digital media, film, advertising, and more.
 User Persona 1
Ng Zhou Long

Age : 22
Occupation : College Student
Location : Setapak, Kuala Lumpur
Education : TARUMT University
Status : Single
BIO

I’m a college student pursuing a degree in design, fueled by a fervent love for the
discipline. I possesses an insatiable curiosity for the intricacies of design and seek to
immerse myself deeply in its theoretical and practical aspects. I’m dedicated to
honing my skills and knowledge, aspiring to become a proficient designer capable of
making innovative and influential contributions in the field.
 User Persona 1

GOALS
● Revolutionizing sustainable architecture through tech and eco-friendly practices.
● To be dedicated to blending creativity with tech for impactful, inclusive designs.
● Merge artistic flair with innovative technologies and inclusive designs for the future.

FRUSTRATIONS
● Feels unfortunate because of the restless deadlines while pursuing improvement in
his work.
● Facing the management of creative pressures
● Doesn’t know how to manage art blocks
 User Persona 2
Gan Chi Hui

Age : 17
Occupation : Student
Location : Wangsa Maju, Selangor
Education : High school graduee
Status : Single
BIO

I’m a passionate young female student who is looking forward to stepping into
university life. I’m planning to step forward and take the responsibility as a full time
college student while juggling my occasional freelance artist job to earn Some side
income for living. I also value work life balance so I’d frequently involve myself in
co-curicular activities to unwind
 User Persona 2
GOALS
● To be able to find a school that offers good art courses and helps her earn an
educational certificate
● To find a school that is near her house area
● To find people that she can connect with using art

FRUSTRATION:
● Finds it hard to sit down for hours, listening to a non-physical class

● Isn’t good in researching and doesn’t know who to contact or where to start

● Doesn’t know who to reach out for advice for improvements

 Goals and objectives

To be better in promoting the faculty to the potential students.

● To give the faculty website a new "life".

● Reach new students who targeted for the faculty.
● Increase the number of prospective clients through visits to our faculty.
● Enhance the impression & experience of the website for user’s better usage
● Increase the efficiency in exploring our faculty information
 RESEARCH &
02 ANALYSIS
When you do research, you can take
this as reference
Common navigation labels and patterns (How users navigate the website).
○ Common functionality and content (Things users can do).
○ Content voice and tone (Verbal personality of the website).
○ Design and layout (Aesthetic personality and usability of the website).
○ Recommendations and strategy based on client goals and findings.

Everyone do 2 website research per

person
 Website Reference
https://fcci.tarc.edu.my/home

TAR UMT FCCI Faculty is a main website for the Faculty of Communication and Creative
Industries (FCCI) Faculty in TAR UMT. They offer Diploma and Bachelor Degree programmes in
Mass Communication and Creative Arts. We offer a learning experience which is fulfilling and
fun-filled through hands-on learning, practical assignments and case studies as well as internship
programme which will challenge you to think creatively and hone your presentation and event
management skills as well.
Dislikes:
Website Research: TAR UMT
FCCI Faculty
Purple deco’s length isn’t
Text blends in consistent nor necessary
with the
pictures
Box and text colours are all
over the place

Texts are too small, making it

hard to read and causing
users to not read it at all.
 Inconsistent colour usage, cyan
and purple

Inconsistent title and button borders styles:

- Texts with a coloured background
- Only text
- Background image and purple border
for text

Can have a general sorting section

E.g: Art & Design, Business &
Communication
 Website Research
Can be better:

Tile/Head of the design can

be more obvious,with picture
at the background can make
it more instinch

Expandable description make

user more easy & faster to
get the information that they
wanted
 Website Reference
https://www.toa.edu.my/

The One Academy is Malaysia's leading private institution for arts and, design and digital
technology, recognised globally for its award-winning creative education. Its headquarters is
located in Bandar Sunway, Selangor, with a northern campus in George Town, Penang. They
offer a number of art courses on many different level of studies: Diploma, Degree and foundation-
taking pride in their talented students and their work and occasionally showcasing their work
taught and created by the best of the best.
Website Research: The One Academy
- Good usage of colours (Keeping to only
one primary colour, orange- and
secondary colours are used consistently
too)
- Although there is an image, it does not
block out the text or make it hard to
read, serving as a good cover picture
- Conveys a serious and professional vibe

- Makes everything the school has to offer and

contact informations highkey

- Easy to navigate and straight to the point

which avoids getting users confused
- Clean and neat orange border to help with
navigation
- Thoughtfulness: Icon stays at the side for the
screen, making it easy for users to sort out what
they want to see instead of scrolling all the way
back
- Has a nice animation and doesn’t interrupt user’s
visual experience

Good pictures layout even when

the site is scrolled out and resized
Shows what subject the artwork is done and in
relation to, further promoting their provided
subjects

The use of dark grey background makes the artwork

presented more

Credits and description of artwork, promoting

their students and also letting people know the
various thoughts process of the proud students
in the school
 Website Reference
https://clazroom.edu.my/

Clazroom College is recognized for offering specialized education in various creative

disciplines, including animation, game development, digital art, visual effects (VFX), and
multimedia design. The college aims to nurture and develop talented individuals who
aspire to pursue careers in the rapidly growing fields of digital arts and entertainment.
Website Research : Clazroom College

- In this website, there is a creative

layout with the description and
option.

- Besides, there are stunning artwork

presented with the option.

- Also, the background has

expressed a kind of mystery and
not just a solid colour.
- The background of homepage has a
good preview video of the artwork that
created by student.

- When you click the artwork, it will show

the users more about the artwork and the
way of presentation is very huge and
detailed.
- There is a cute mascot put beside
the consultation part to make this
part attractive.
 Website Reference
http://www.udemy.com/

Udemy is an online learning platform that hosts a vast array of courses on various
subjects, including communication skills, graphic design, photography, writing, public
speaking, digital marketing, and more. It provides both free and paid courses created by
experts from around the world. Students can learn at their own pace and engage with
course materials through video lectures, quizzes, assignments, and discussions. Udemy
often offers discounts on courses, making education in these fields more accessible to a
wide audience.
 Website Research : Udemy
- In this website, the users can directly
search the keywords in homepage
and the searching bar also quite
direct and obvious for users.

- Besides, the users can easily find out

what’s the latest publication in this
website because there is a big
homepage banner.

- When a user firstly access a new website, they may feel the
website would be a scam so I think this part is very good in
excluding the suspicion and increasing the credit of the
website.
 - In this website, the way that
provides option for users
also very well because the
basic information is shown
intuitively like the rate, price
and status.

- Besides, the style of the logo for the

categories is also quite interesting
and that can attract users to access it.
 Website Reference
https://99designs.com/inspiration/websites/gallery

99designs is a global creative platform that makes it easy for clients and freelance
designers to work together online. Since 2008, its freelance community has brought more
than one million creative projects to life for thousands of genius entrepreneurs, savvy small
business owners, and brands with big ideas.They’re dedicated to helping small businesses
thrive through expert design.
Homepage Visual Research :

● The advantage of the website

● Sufficient layout , the information can be clearly list out ,also easy
can set beside the picture when for user to know what’s the
the picture was massive for per website try to achieve
page
Homepage Visual Research :
● The fast searching, list out
what user can search for
faster to reach where they
want

● 3 row of information
card for clean visual
layout , makes different
variant of card can be
easy to pick
 Website Reference
https://www.monserrateinmobiliaria.com/en/

Monserrateinmobiliaria, an agency of people, personalised services and long-term

relationships. Their main assets are our leading way to communicate, our valuation capacity, and
their strategic vision. Their are a team of experts providing a premium service through our
passion and attention to every detail. Monserrate means safe, visionary and global real estate
consultants in a privileged region: Valencia.
 Homepage Visual Research :

● The top navigation ● The picture can be a part

bar will be appear as a background with the
after scrolling down, detail & information,
making it become faster to understand and
convenient for user digest information
Homepage Visual Research :

● Convenient to view all the

informations by using
horizontal switch
 Website Reference
https://design-milk.com/

Design milk is a design website that focuses on interior design and interior decoration, for those
designers who are interested in interior design, then this is the best interior design website
recommendation. It has a neat and clean layout that allows people to find what they need quickly,
and a simple colour scheme that is comfortable to look at.
Homepage Visual Research :

● The layout is very neat, the

photos and words are
aligned and very
comfortable to look at.

● Users are able to easily find the

topics they want to see and more.
Not only that, the bar on the top will
be hidden when the user scrolls
down, but it will appear when the
user scrolls up a little.
● Users do not need to go
to a new page to see
the video, very
convenient!

● There is one larger photo

and four smaller photos, but
they are all the same shape
and area. The colors are also
very well coordinated and
don't dazzle the user.
 Website Reference
https://bridgelanding.qodeinteractive.com/

Bridge is a paid WordPress theme sales site with a total of 520 demos to choose from and refer
to. Classification is very diverse, such as: "business, portfolio, blog, creative ... etc." Personally, I
think the style is more inclined to modern European and American style. Each of them is very
beautiful and creative, with a sense of design. We can refer to them and get inspiration from
them. The cover of the book is very design-oriented, which attracts my eyes!
Homepage Visual Research :

● I think a homepage that

catches the user's eye
quickly is very important.

● Users are able to quickly find the

type they are looking for by using
the bar at the top, or by searching
for it.
● Users are able to click
on favorite themes for
demos.
 PLANNING &
02 DESIGN:
Sketches 1 :
Sketches 2 :
Sketches 3 :
Sketches 4 :
 Style Tile 1

Colour Palette:
 Style Tile 2

Colour Palette:
 Style Tile 3

Colour Palette:
 Style Tile 4

Colour Palette:
Mid-Fi Wireframe 1
Home:
Mid-Fi Wireframe 1
About Us:
Mid-Fi Wireframe 1
Showcase:
Mid-Fi Wireframe 1
Achievements :
High-Fi Wireframe
Home:
High-Fi Wireframe
About Us:
High-Fi Wireframe

Dropdown_list:
High-Fi Wireframe
Achievements :