Advanced Interactive Design | Task 1: Thematic Interactive Website Proposal
24/9/24 - 20/10/24 | Week 1 - 4
Iman Mikudim | 0338004 | Section 2
Advanced Interactive Design | Bachelor of Design (Hons) in Creative Media
Task 1: Thematic Interactive Website Proposal
SECTIONS
| Feedback
INSTRUCTIONS
Brief
Description:
Thematic Interactive Website
Proposal for Brand Engagement.
A thematic interactive website
is a website that focuses on a
specific theme or concept with
the aim of incorporating
interactive elements to
interact with users. Most such
websites utilize multimedia
such as videos, animations,
interactive graphics displayed
on the page, or other
clickable elements which have
interactive components that
provoke the user. This dynamic
experience is meant to keep
the user interested in
addition to the thematic
concept. Themes in such
websites vary from
educational, cultural,
promotional campaigns to
product launch. For example, a
thematic interactive site
could be a museum. Users can
go through a virtual
exhibition space through
interactive tours, games
simulation, or questionnaires.
In the event that it is a
movie, the site can simulate
movie universes offering
virtual tours through time and
space, or any other subject
previously created in the
movie. The aim of any such
site is to keep the user
engaged in the medium through
interactive exploration.
Requirements:
Students are required to
create a thematic interactive
website proposal with the
topic of their choice that can
be based on:
-
A specific product of a
particular brand
launch/special (i.e.: Nike
brand new shoe), Beauty
product launch (i.e.:
Sephora compact
powder)
-
Movie promotion
-
Game release
promotion.
-
Gallery/Museum exhibit
launch
-
Band/Artist latest
release
Or anything else you have in
mind (subject to the module
coordinator’s approval)
Submission:
-
Completed UI/UX proposal
document.
-
All processes (concept,
wireframes, mood board, flow
chart)
Process
1. Proposal Ideas
We were tasked with
developing five potential
ideas for our final project,
along with relevant visual and
website references. The five
concepts I selected
were:
-
A product launch for the
"Nike Zoom Vomero 5"
-
A "Valorant Character
Information Hub"
-
An interactive hub for "The
Witcher" TV series
-
A promotional website for
"The Witcher: Wild Hunt"
game
-
An interactive art
portfolio showcasing an
artist's work, gallery, and
creative process
Among the five options, I was
leaning more towards either
"The Witcher" TV series or
"The Witcher: Wild Hunt" game,
as I loved both watching the
series and playing the
game.
Click here
for the Figma link to the
proposal ideas:
Fig 1.1
Proposal Ideas (Figma) | Week
2 (1/10/24)
After presenting my ideas to
Mr. Shamsul for feedback, he
suggested that I focus solely
on the monsters, as others may
have already focused on the
characters. The content for
the monsters could include
their descriptions, spawn
locations, strengths, and
weaknesses. In the end, I chose to focus
on the game, as I enjoyed
playing it and had always
wanted to create a
game-related website.
2. Concept
An interactive website that
allows users to explore the
game The Witcher: Wild Hunt,
with a specific focus on its
monsters. The main pages in
the site includes an "About"
page that provides a brief
overview of the game's themes
and the significance of
monsters in the Witcher
universe. The centerpiece is
the "Monsters" page, featuring
an interactive map that
showcases various monsters.
Users can click on different
locations to reveal detailed
information about each
creature. Finally, a "Buy Now"
page directing users to
purchase the game, with a
clear link to the official
site.
3. Moodboard
-
Colour Palette
- I picked a range of shades
that really capture the dark
and gritty essence of The
Witcher setting. These
colours evoke a sense of
mystery and danger,
perfectly reflecting the
game’s themes and immersing
users in its atmospheric
world.
-
Typography
- I selected three distinct
fonts to enhance the overall
look of the site and convey
the game’s unique character.
The "Witcher" font is used
for headings and
subheadings, giving it that
authentic fantasy feel. For
body text, I chose "D-Din"
for its clean, modern style,
which stands out against the
more decorative elements and
makes reading easier. I also
included "Minion Pro" to add
a touch of elegance to the
body text, ensuring a
well-balanced visual
experience throughout the
site.
-
Visual References
- I looked at various
screenshots from the game,
as well as visuals from
other gaming websites. This
helped me draw inspiration
from the game’s rich art
style and atmosphere,
ensuring that my design
resonates with fans and
truly captures the essence
of The Witcher universe.
Click here for the Figma link to
the moodboard:
Fig 1.2
Moodboard (Figma) | Week 3
(1/10/24)
4. Flow Chart
Fig 1.3
Page Sections | Week 3
(1/10/24)
5. Wireframes
Click here
for the Figma link to the
wireframes:
Fig 1.4 Wireframes (Figma) |
Week 3 (1/10/24)
FEEDBACK
Week 2 (1/10/24)
General Feedback:
-
Come up with 5 different
proposal ideas with concept,
visual references and
website references.
Week 3 (8/10/24)
General Feedback:
-
Proceed to develop the
wireframe layout, selected
typography and visual
references.
Specific Feedback:
-
Focus solely on monsters
in the game as other
people might have focused
on the characters
already.
-
Talk about the monster's
descriptions, spawn
locations, strengths,
weaknesses, etc.
Week 4 (15/10/24)
General Feedback:
-
Proceed to develop the
prototype layout.
Specific Feedback:
-
Good layout with sufficient
interactive elements, and
clear understanding of what
a thematic interactive
website is.
-
As rough prototype has
already been shown, focus on
designing elements such as
buttons and other graphics
that will be used throughout
the design for
consistency.
REFLECTIONS
Overall, I thoroughly enjoyed this task, especially the process of researching and gaining a deeper understanding of how an interactive website should function. Exploring existing game websites and designing the wireframes helped me think creatively about how to make the site both intuitive and engaging for users. While I recognize that I could have added more to the content and design, we were reminded to stay realistic about the limited time frame. The most challenging aspect so far has been learning Adobe Animate, which I know will definitely take some time and practice to fully grasp.
