INTERACTIVE DESIGN ✿ FINAL PROJECT ✿
INTERACTIVE DESIGN ✿ FINAL PROJECT ✿
28.08.23 - 14.07.23
week 1 - week 15
✿ TAN JIA JIA 0350577 ✿
Bachelor of Design (Honours) in Creative Media
✿ LECTURE ✿
Please refer to Exercise.
✿ INSTRUCTION ✿
Figure 1.1 MIB of Interactive Design
✿ FINAL PROJECT ✿
The assignment grants creative freedom to design and develop a single-page microsite with a focus on the lifestyle theme. The objective is to create an immersive and visually appealing experience that effectively communicates the chosen lifestyle theme. The emphasis is on thoughtful design and the incorporation of interactive elements to engage users throughout the microsite.
1.0 RESEARCH
In this final project, I've chosen to create a website dedicated to my
favorite Korean team, (G)I-DLE. Before diving into the sketching phase, I
opted to explore the existing official website owned by (G)I-DLE for
insights and inspiration. This preliminary research will not only provide a
better understanding of the group's aesthetic and branding but will also
guide the design process, ensuring that the final product aligns with the
established identity of (G)I-DLE.
Figure 2.1 (G)I-DLE official website
Following a review of the official (G)I-DLE website, I observed a lack of
color vibrancy. To infuse more energy and align my project with (G)I-DLE's
branding, I have decided to incorporate the neon red and purple color
palette. By doing so, the website will not only pay homage to the group's
visual identity but also create a more dynamic and visually engaging user
experience.
Figure 2.2 Color Palette #1
2.0 SKETCHES
For the sketching phase of this project, I've chosen to utilize Adobe
Illustrator to bring my ideas to life. Opting for digital sketching allows
for a cleaner and more precise representation of my concepts compared to
traditional hand-drawn sketches. Adobe Illustrator's tools and
functionalities will aid in refining the design elements for the (G)I-DLE
website, ensuring that the initial ideas are translated into a digital
format efficiently and with a high level of detail.
Figure 2.4 Template 1
Figure 2.5 Template 2
Figure 2.6 Template 3
Figure 2.7 Template 4
Figure 2.8 Template 5
Final Sketch
Figure 2.9 Final sketch
3.0 FIGMA
Utilizing Figma, I've successfully crafted two distinct layouts, each
featuring a different color palette for the (G)I-DLE website. This
approach allows for a comprehensive comparison, aiding in the
decision-making process to determine which color scheme better aligns with
the envisioned aesthetic. Figma's design capabilities have facilitated the
creation of visually compelling layouts, enhancing the exploration of
diverse color options and ensuring a well-informed selection for the final
design.
Figure 2.10 First template
Figure 2.11 Second template
After a thorough comparison between the two layouts featuring different
color palettes in Figma, I have made the decision to proceed with the
second layout, characterized by a captivating purple color scheme. This
choice is driven by the visual appeal and alignment with the envisioned
aesthetic for the (G)I-DLE website. By opting for the purple color
palette, I aim to create a visually engaging and cohesive design that
resonates with the vibrant spirit of (G)I-DLE.
4.0 DIGITALIZATION
In crafting the (G)I-DLE website, I opted to leverage Dreamweaver to
translate my designs into functional code. This tool has facilitated the
coding process, offering a user-friendly interface for HTML, CSS, and
potentially JavaScript. By using Dreamweaver, I'm able to seamlessly bring
the envisioned website to life, ensuring that the visual elements and
interactive features align with the design created in Figma. As I proceed
with the coding phase, my goal is to maintain clean and organized code,
prioritize responsiveness, and conduct thorough testing across various
devices and browsers to guarantee an optimal user experience.
Figure2.12 HTML code
Figure 2.13 CSS code
Final Outcome
✿ REFLECTION ✿
The final project, dedicated to creating a website for (G)I-DLE, has been a
rewarding and creative journey. From exploring the official (G)I-DLE website
to using Adobe Illustrator and Figma for design and layout, the process
involved thoughtful choices, including the selection of the neon red and
purple color palette. The decision-making process, involving a comparison of
two layouts, culminated in choosing the purple color scheme for the final
design. Transitioning to Dreamweaver for coding, the project emphasized
cleanliness, organization, and thorough testing for responsiveness. Overall,
this experience has not only enhanced my design and coding skills but also
deepened my appreciation for the intersection of creativity and technology
in web development. The final website serves as both a personal expression
of admiration for (G)I-DLE and a showcase of my growth in web design and
development.
Comments
Post a Comment