INTERACTIVE DESIGN - FINAL PROJECT
26/7/2023-3/8/2023 (Week 10 - 15)
Chan Suet Yee 0358427
Bachelor of Design (Honours) in Creative Media
Interactive Design | GCD60904 | Sec 04
Final Project
LIST
TABLE OF CONTENTS:
INSTRUCTIONS
FINAL PROJECT
INSTRUCTIONS
We need to create a single-page website focused on a topic that we passionate about. The site should feature at least five sections that clearly present and explain our chosen topic, with one call-to-action (CTA) button to encourage user engagement. Choose a colour scheme and fonts that reflect the theme of our topic, and design a visually appealing, mobile-friendly layout. Ensure navigation is smooth, either through scrolling or a simple menu, and consider adding interactive elements like image sliders or hover effects to enhance user experience.
Process (Topic Selection)
I want to create a website to promote a yoga studio. The homepage will feature a hero section with a captivating introduction and a prominent "Join Us Now" CTA button.
Section 1: About Us
- This section will provide an overview of the yoga studio’s background and values to give visitors insight into what makes the studio special.
Section 2: Instructors
- Introduce the studio's instructors with brief profiles, highlighting their expertise and teaching styles.
Section 3: Class Schedule
- Display the class schedule to inform visitors about the available sessions and timings.
Section 4: Upcoming Events
- Showcase any special events or workshops happening at the studio to keep visitors informed and engaged.
Section 5: Contact
- Provide contact information and include a form for visitors to make inquiries or get more details.
Process (Mood Board)
Fig 1.0 Mood Board
Process (Sketches)
After consulting with Mr Shamsul, he recommended selecting sketch #3 and #5 to move forward with for the prototype.
Fig1.1 Sketches
Process (Prototypes)
The first prototype (left) is the initial version I created, while the second prototype (right) incorporates refinements based on feedback from Mr. Shamsul. He suggested using different colours to distinguish the sections more clearly.
Fig1.2 Prototypes
Process (Website Development)
To develop the website, I first focused on building a strong foundation by writing the HTML code. I started by laying out the basic structure, ensuring that all the essential content was in place, including headings, paragraphs, images, and buttons. At this stage, I concentrated solely on the content and organization, leaving out any design or styling elements. This "naked" version of the website allowed me to ensure that the content flowed logically and that all necessary sections were accurately represented before moving on to the design phase. This approach also made it easier to visualize how the final design would fit around the content and allowed for easier adjustments if needed.
Fig1.3 Process of Final Project
Fig1.4 Process of Final Project
Fig1.5 Process of Final Project
After establishing the basic structure with HTML, I transitioned to writing the CSS code to bring the design to life. Using the prototype I had created earlier as a guide, I began by defining the overall layout, setting up the grid or flexbox systems to ensure a responsive and well-organized design. I then carefully selected color schemes, typography, and spacing to match the visual style and branding of the yoga studio.
Next, I applied styling to individual elements, such as buttons, navigation menus, and images, ensuring that each component aligned with the aesthetic and user experience goals outlined in the prototype. I paid close attention to details like hover effects, animations, and the use of contrasting colors to highlight important areas, such as the "Join Us Now" CTA button.
As I progressed, I frequently referred back to the prototype, making sure that the design decisions I implemented in CSS accurately reflected the original vision while also adjusting and refining where necessary to enhance usability and visual appeal. This stage was crucial in transforming the plain HTML structure into a visually engaging and cohesive website.
Fig 1.6 Process of Final Project
Fig 1.7 Process of Final Project
Fig 1.8 Process of Final Project
Fig 1.9 Process of Final Project
Final HTML & CSS Code
Fig 2.0 Final HTML Code
Fig 2.1 Final CSS Code
FEEDBACK
The overall layout is well-structured, but you might consider using different colors to better differentiate each section. For the class schedule, displaying it in a table format would be more effective than simply listing the types of classes available. Overall, the design looks okay.
REFLECTION
Throughout this assignment, I gained valuable insights into the process of web design and development. Beginning with the creation of the HTML structure, I learned the importance of laying a solid foundation before moving on to the visual aspects of a website. Writing the HTML allowed me to focus on content organization and ensure that each section was logically placed and accessible.
Transitioning to the CSS phase, I experienced the creative side of web development. I used the prototype I had created earlier to guide my design choices, ensuring consistency between my initial vision and the final product. Applying colors, typography, and layout adjustments brought the website to life, and I learned how small design decisions can significantly impact user experience.
Feedback from Mr. Shamsul was instrumental in refining the design. His suggestion to use different colors to differentiate sections helped enhance the visual clarity of the website. Additionally, restructuring the class schedule into a table format not only improved its readability but also made the information more accessible to users.
This assignment taught me the value of iteration and feedback in the design process. Each phase—from planning to execution—requires careful consideration, and being open to adjustments is key to achieving a polished final product. Overall, this experience has deepened my understanding of web development and improved my ability to translate design concepts into functional, user-friendly websites.
Comments
Post a Comment