Interactive Design - Project 3/Final Project : Working Webpage
Interactive Design - Project 3 : Working Webpage
25/06/2025 - 27/07/2025 / Week 10 – Week 14
Valenz Jycee Primadi / 0373407
Interactive Design / Creative Media / School of design
Project 3
TABLE OF CONTENTS
1. Lectures
2. Instructions
5.Feedback
6. Reflection
LECTURES
INSTRUCTIONS
Prototype
Before working on the Mie Sedaap website, below is the Figma prototype I created for the Mie Sedaap website. The overall design is expected to be similar to my prototype, but I will further refine the layout to make it look neater.
fig1.1 Prototype Website Mie sedaap
To start the website, the first thing I did was create a dedicated file for the Mie Sedaap website, including the images I would use. After creating the file, I made sure to save and manage it in Dreamweaver, which made it easier to work on the website.
fig 1.2 File Website Mie
Sedaap
Naviagation Bar/
Header
Before starting the homepage design, the first thing I worked on was the header or navigation bar that would be used on all the pages. I remembered that Sir Shamsul had previously shown us how to create a basic nav bar, so I went back to one of my older exercise files for guidance.
fig 2.1 Navigation Bar Code
I reused the structure but made a few design changes to match the new look I had in mind. One important detail I focused on was adding the Mie Sedaap logo in the header to keep the branding consistent. I also made sure the navigation links were active and properly connected to the other pages I planned to create.
Footer
Next, I created a footer for
each page. This footer included
contact and call buttons, the
Mie Sedap company address, and
information about each page,
etc.
fig 3.1 Footer Code
Home Page
Section 1
For the homepage, the first section I created was the hero section the first thing users will see. It features a photo of Mie Sedaap that I designed using Adobe Illustrator, along with a bold "View Our Menu" button that I plan to link to the product page.
fig 4.1 Section 1 Home
Page
fig 4.2 Section 1 Home
Page Code
For the headline, I wanted
something fun, so I came up
with the title:
"Start bold, Start
Sedaap!" a playful phrase that
reflects the brand’s
energetic and flavorful
image.
Section 2
Section 2 is a short About Us preview, featuring a brief description of Sedaap noodles and what makes them unique. Below the text, there's a "More About Sedaap" button that links to the full About page, inviting users to learn more about the brand’s story and values.
fig 4.3 Section 2 About Us
Section 3
In Section 3 of the homepage, I
created a carousel to showcase the different
Mie Sedaap product
categories: dried-based, soup-based, and Korean-inspired noodles. The carousel allows users to
easily browse through featured
products without overwhelming
the layout. Each slide includes
a product image and a short
label for quick
recognition.
I chose this format to keep the
design clean, interactive, and
user-friendly. To encourage
further exploration, I added
a "See More" button below the carousel
that links directly to the full
product page. This section
highlights variety while guiding
users to discover more of what
Mie Sedaap offers.
Section 3
For Section 4, I focused on highlighting Mie Sedaap’s exciting events, such as the annual “Come and See Mie” and the Soundrenaline collaboration. I designed this section to feel lively and energetic, using
pop-up visuals and a bold yellow background to catch the viewer’s eye.
The goal was to reflect the fun atmosphere of the events and keep users engaged. At the bottom of the section, I added a “Learn More” button so visitors can explore additional events hosted by Mie Sedaap. This section helps show the brand’s interactive side and builds a stronger connection with the audience.
About Us Page
For the about us page, I
created around 4 sections in
total, namely the about us
section, the history of Mie
Sedaap section, the mission
and vision section of Mie
Sedaap, and the achievement
section of Mie Sedaap.
Section 1
The first section of the About Us page uses the same layout as the homepage for visual consistency. However, I replaced the product image with an animated mascot of Korean Sedaap Noodles to make it more engaging.
fig 5.2 Section 1 About us
page section code
I also extended the description to give a clearer and more detailed overview of the brand. For the color scheme, I chose golden yellow and midnight blue to create a fun, bold, and premium impression that reflects Mie Sedaap’s brand personality.
Section 2
In Section 2, I created a special history section for Mie Sedaap. While the layout remains similar to the About Us section, I reversed the image and text positions for better visual balance. I used the brand’s signature red to reflect its identity and added a trophy animation to symbolize Mie Sedaap’s success and journey over the years.
fig 5.3 Section 2 History
section 3
Section 3 highlights the vision and mission of Mie Sedaap. I designed it as a pop-up section with a blue color scheme to reflect professionalism and trust. The layout is intentionally simple and minimalist, ensuring the message remains clear and easy to understand without distractions. This design choice supports the brand’s focus on clarity and direction.
fig 5.5 Section 3 Mision Vision
section 4
Section 4 focuses on Mie Sedaap’s achievements, featuring photos of trophies received from 2016 to 2021. The layout follows the same simple and clean style as the vision and mission section. I added a pop-up effect to highlight the awards, which were received at Malaysian award events, emphasizing the brand’s recognition and success over the years.
fig 5.7 Section 4 Achievement
Product Page
The product page
features three
different noodle
types: fried noodles,
noodle soup, and
Korean noodles.
Additionally, I
included several
section elements, such
as a greeting section,
to introduce and
highlight the
products. I also added
a dropdown menu near
the header to make it
easier for users to
navigate directly to
each product
section.
Section 1
Section 1 is the
greeting section, which includes a
dropdown menu and an
introductory message
before displaying the
product greetings. The
dropdown menu is designed
to help users navigate and
view the different product
categories more
easily.
fig 6.1 Section 1 Product Greetings
Section product
Next is the product
section, which features three
product variations:
Fried,
Soup, and
Korean. Each category is
displayed using a
carousel layout for easy
browsing. Additionally,
a red “Back to Top”
button is included to
quickly scroll users
back to the first
section.
fig 6.3 Section Product carousel
Event Page
Mie Sedaap has
hosted numerous
promotional and
community events
over the
years, so I created a
dedicated
Event Page
to showcase them. To
make the experience
more engaging, I
designed the event
section with
a pop-up style
layout
and used
vibrant colors
and playful
decorations
to reflect the fun
and festive
atmosphere of the
events.
Section 1
Section 1 of the
Event Page
highlights two of
Mie Sedaap’s most
well-known events:
"Come and See Mie"
and
"Soundrenaline."
These events gained
significant attention
in 2024. While
Soundrenaline
was a one-time
collaboration,
Come and See
Mie
is an annual
event with the next
one scheduled for
August in Bandung. I
chose to feature only
a brief description of
each to emphasize
their popularity and
reputation.
For this section, I
implemented a
special carousel
with fade-in and
fade-out
transitions
to give it a smoother,
more elegant feel
distinct from the
other carousels used
throughout the
site.
Section event
gallery
For the Event Section
Gallery, I showcased a
collection of photos
from past festival
activities.
To enhance the experience,
I used a
pop-up gallery
layout
that allows users to view
the images in a more
interactive and engaging
way.
fig 7.4 Section Event gallery code
This pop-up style helps
convey the excitement and
energy of the two featured
events. The color palette
of
beige and
gold-yellow
was chosen to give the
section a warm, festive,
and inviting atmosphere,
reflecting the joyful
spirit of Mie Sedaap’s
events.
Contact Us Page
Mie Sedaap's Contact Us page
makes it easy for visitors to
contact the team directly
through a form that includes
their name, email address,
phone number, job title, and
message.
fig 8.1 Contact page
fig 8.2 Contact page code
It also provides complete
contact information, including
email address, phone number,
and headquarters location. The
design is simple yet
attractive, featuring Mie
Sedaap's signature bold and
professional colors.
Responsive
I actually focused this design on mobile phones, specifically the Pixel 7. So, I adjusted all the layout, sizes, and elements for a small screen to ensure a comfortable fit.
fig 9.1 Responsive Mobile phone "pixel 7"
But when I tried it on an iPad Pro, it still looked pretty okay although there were a few parts that weren't quite as neat and still some thats still needs to work on. Overall, it was still readable and usable. Im suprissed actually, But after this module is finished, I will definitely try to play with my coding again to improve responsiveness to all devices, because I want to know how much I can make my website fully user-friendly.
fig 9.2 Responsive Tablet "Ipad Pro" Horizontal
fig 9.3 Responsive Tablet "Ipad Pro" Landscape
For the breakpoint, I used 992p x so the design could adjust when opened on a tablet or larger screen. So, even though it's primarily for mobile, this design is still responsive and works quite well on other devices as well. Honestly, making a website fully responsive is the hardest part of coding for me. It takes a lot of time to adjust, but at the end I'm fully understand how it works.
below here is the code for my responsive:
fig 9.4 Responsive Code
Link
Website deploy link : https://valenzjycprimadi-sedaap-final-project.netlify.app/
FEEDBACK
Week
11
Specific
Feedback
: Overall,
I
the
layout
is
nice,
but
some
colors
need
to
be
adjusted.
Avoid
using
green,
as
it
doesn't
align
with
the
Mie
Sedaap
brand
aesthetic.
Week
13
Specific
Feedback
:Yep
its
nice
keep
going,
dont
forget
to
do
the
responsive.
Week
14
Specific
Feedback
: Make
sure
for
product
page
theres
button
to
top,
everything
already
good.
Make
sure
every
button
its
the
same.
REFLECTION
Experience
When I
first
started
working
on the
Mie
Sedaap
website,
I was
honestly
quite
shocked
and
stressed.
Even
though I
had
tried
coding
before,
I felt
like I
had
forgotten
everything
because
it had
been so
long.
Now,
being
asked to
create a
project
from
scratch,
with a
deadline
and a
concept
that had
to be
implemented,
was
initially
confusing.
Especially
when I
encountered
errors
and
didn't
know
where to
start.
But
after
slowly
trying
again,
asking
friends,
and
looking
for
references,
I
finally
got it.
When I
saw the
results
of my
design
appear
on the
screen
and look
neat, I
felt
satisfied
and
proud.
Although
tiring,
this
experience
helped
me learn
a lot.
It turns
out that
what's
important
is not
just
understanding
the
code,
but also
patience,
thoroughness,
and a
willingness
to keep
trying
even if
you
fail. So
even
though I
was
confused
and
frustrated,
in the
end I
was
happy
that I
was able
to
complete
this
project
to the
end on
my own.
Observation
During
the
process
of
building
this
website,
I paid
a lot
of
attention
to my
own
learning
style
and
that
of
others.
It
turns
out
that
learning
with
friends
is
really
helpful.
Sometimes
a
friend's
explanation
can be
more
insightful
than
reading
a
tutorial
on
your
own.
YouTube
has
also
been a
lifesaver,
I
often
watch
video
tutorials,
especially
on
using
Bootstrap
and
creating
responsive
displays.
When
I'm
stuck
and
don't
have
anyone
to
ask, I
often
use AI
to
help
me
find
solutions.
From
there,
I
realized
that
learning
to
code
doesn't
have
to be
done
alone.
There
are
many
resources
that
can
help
if we
know
how to
use
them.
I also
started
to
understand
the
patterns
of
HTML
and
CSS,
and
over
time,
I've
become
accustomed
to
reading
code
and
finding
errors.
This
observation
made
me
even
more
convinced
that
learning
to
code
can be
mastered
as
long
as
you're
consistent
and
willing
to
continue
exploring.
Findings
During
this
project,
I
discovered
that
coding
is
like a
puzzle
every
piece
must
fit
together
to
create
a
perfect
result.
A
small
mistake
like
forgetting
to
close
a tag
or
making
a typo
in CSS
can
mess
up the
overall
look.
But
that's
precisely
what
taught
me to
be
more
thorough
and
patient.
I also
realized
the
importance
of a
clean
layout
structure
and
how
Bootstrap
can be
incredibly
helpful
in
creating
a fast
and
responsive
design.
Furthermore,
I
learned
the
importance
of the
inspect
feature
in
browsers
to
check
for
errors
and
see
screen
sizes
when
testing
on
various
devices.
The
most
important
thing
I
discovered
was:
the
process
of
learning
to
code
actually
trains
logic
and
patience.
It can
be
frustrating
at
times,
but
it's
also
fun
because
it
keeps
my
brain
engaged.
From
this,
I've
gained
a
greater
respect
for
web
developers
and am
interested
in
exploring
this
world
more
deeply.
Comments
Post a Comment