INTERACTIVE DESIGN ✦ FINAL PROJECT ✦
INTERACTIVE DESIGN ✦ FINAL PROJECT ✦
/6/2024 - /6/2024
Week - Week
Bachelor of Design (tons) in Creative Media
✦ LECTURE ✦
This week, our teacher asked us to create our own website using the knowledge we’ve learned, with no restrictions on the topic. After the lecture, I chose a topic I’m interested in and began designing and coding the site based on the HTML skills we covered.
First, I planned the basic structure of the website. In the `<header>` section, I included the site’s title and navigation bar, using the `<nav>` tag to define the navigation links. I then created several `<section>` elements to organize the main content areas, such as Home, About Me, Portfolio, and Contact.
For the content, I used `<h1>` and `<h2>` tags for main and secondary headings, and `<p>` tags for paragraph text. I also used `<ul>` and `<li>` tags to list my interests and skills. To enhance the visual appeal, I incorporated images and links using the `<img>` and `<a>` tags.
Throughout the design and coding process, I referred to class notes and consulted online resources for verification and troubleshooting. I also tested the site extensively to ensure compatibility and responsiveness across different devices. This exercise not only improved my HTML skills but also deepened my understanding of web design.
✦ INSTRUCTION ✦
Figure 1.1 MIB
✦ FINAL PROJECT ✦
1.0 RESEARCH
Objective:
Create a single-page website dedicated to your favorite topic, demonstrating your web design and development skills.
Requirements:
Topic Selection:
Choose a subject you are passionate about.
Define the website's goal for clear content.
Content:
Include at least five sections on the topic.
Add engaging and relevant information.
Include one CTA button.
Design Elements:
Choose a fitting color scheme and fonts.
Ensure a visually appealing and balanced layout.
Make the design responsive for different screen sizes.
Navigation:
Implement smooth scrolling or a simple menu for easy navigation.
Interactivity:
Add interactive features like image sliders, hover effects, or lightboxes.
Final Task:
Build the website using HTML, CSS, and JavaScript.
Write and integrate content for five sections.
Apply chosen design elements.
Test for responsiveness on various devices.
Implement interactive elements.
Review and finalize the website.
2.0 DIGITALIZATION
Before creating the design in Figma, I sketch it on paper to visualize the layout and structure. This helps me refine my ideas before moving to the digital stage.
After creating five different sketches, I review each one to determine which design best aligns with my vision. Once I select the most promising sketch, I move forward with developing it in Figma to bring the design to life digitally.
Figure 2.2 Process in Figma
Once I complete the design in Figma, I move on to using Dreamweaver to build and develop the actual webpage. This transition allows me to turn the digital design into a functional website.
Figure 2.3 HTML
After completing the HTML, I begin editing the CSS to style the webpage. This step involves applying the design elements and ensuring that the site looks and behaves as intended.
3.0 FINAL OUTCOME
✦ REFLECTION ✦
This project taught me valuable lessons in web design and development. Sketching on paper allowed me to explore and choose the best design. Translating this design into Figma helped refine and finalize the layout. Coding in Dreamweaver, starting with HTML and then styling with CSS, brought the design to life. Each step—from sketching to digital design to coding—was crucial in creating a cohesive and functional website. This process has significantly improved my skills and understanding of web development.
评论
发表评论