Interactive Design - Final Project
Interactive Design - Final Project: Design, Exploration and Application
TABLE OF CONTENTS
Lecture Note: HTML & CSS
2. INSTRUCTIONS
For visual inspiration, I turned to various sources, seeking out compelling examples of game websites. I conducted extensive research, examining a range of design styles and layouts. Pinterest proved to be an invaluable resource, where I gathered a collection of visuals that capture the energy and aesthetics of the gaming world. These references have informed my design approach, helping to shape a website that is both visually appealing and user-friendly.
This project is not just about creating a website; it's an opportunity to develop a deeper understanding of web design principles and hone our technical skills. By focusing on a topic I am passionate about, I aim to create a compelling online experience that resonates with fellow gaming enthusiasts.
Wireframes #1
|
| mood board |
In the initial wireframes labeled #1, my approach seemed to diverge from the intended vision. Mr. Shamsul suggested that my design should be more aligned with a blog format. He emphasized the importance of creating wireframes that reflect a structured, content-rich layout typical of a blog. Additionally, Mr. Shamsul noted that the navigation bar was too simple and needed more complexity and functionality.
To address this feedback, I need to redesign the wireframes with a focus on a more sophisticated navigation bar and a layout that supports blog-style content. The navigation bar should include clear sections for different categories, perhaps incorporating dropdown menus or other interactive elements to enhance usability. The overall design should facilitate easy access to blog posts, archives, and other related features, ensuring a user-friendly experience.
I will create new wireframes based on these recommendations and submit them to Mr. Shamsul for further review and feedback. This iteration will aim to capture the essence of a well-organized, aesthetically pleasing blog, providing a solid foundation for the project's development.
In Figma, prototypes are interactive models of a website or app that allow you to simulate the user experience. After your wireframes were approved by Mr. Shamsul, creating prototypes in Figma would involve several key steps:
-
Design Elements: Begin by fleshing out the visual design elements in your Figma file. This includes selecting the color scheme, typography, images, and other stylistic choices.
-
Interactive Components: Use Figma's interactive components feature to create buttons, menus, and other interactive elements. You can define their behavior, such as hover states and clickable links, to mimic real-world functionality.
Prototypes Attempt2
After receiving feedback from Mr. Shamsul on my second prototype, I made several improvements to address the issues he highlighted. The adjustments were focused on enhancing the overall design and functionality, ensuring the website meets the desired standards and visual appeal.
In Dreamweaver, I utilized the skills learned during practical classes to enhance my game website project. Here's a summary of the implementation:
-
External Style Sheet: I linked an external style sheet, , to the HTML page using the tag. This style sheet controls the overall design and layout, ensuring consistency across the website.
final_styles.css<link> -
Fonts: I incorporated several fonts from Google Fonts, such as Bree Serif, Exo 2, and Teko, to improve the visual appeal of the text. These fonts were chosen to match the dynamic and engaging theme of a game website.
-
Navigation Menu: The navigation bar () includes a list () of links that direct users to various sections of the website. The sections include "Home," "Buy Now," "Play Now," and other relevant links tailored for a game-focused site. This setup allows users to easily access different content areas.
<nav><ul> -
Content Sections: The page content is organized into distinct sections using the tag. Each section covers different aspects of the game website, such as game introductions, player reviews, tutorials, and promotional content.
<section> -
Footer: At the bottom of the page, a element includes an "Ask Me" interactive box and social media links. This section allows users to engage with the site by asking questions or following on platforms like Instagram.
<footer> -
Images and Visuals: The tag is extensively used to display images, enhancing the visual engagement of the site. These images include game screenshots, promotional banners, and other visual content relevant to the game.
<img> -
Navigation and Structure: CSS controls the structure and layout, making the page easy to read and navigate. The design choices aim to provide a seamless and enjoyable browsing experience for users.
HTML CODE
REFLECTION
This project provided a comprehensive exploration of web design and development, covering everything from wireframing to prototyping and final coding. The iterative feedback process emphasized the importance of user-centric design and maintaining a professional presentation. Through this experience, I learned to balance aesthetics with functionality, ensuring that the final website was not only visually appealing but also user-friendly.
By incorporating feedback and making necessary adjustments, I gained a deeper understanding of web design principles. This hands-on experience allowed me to develop practical skills in creating a polished, professional website that meets user needs and design standards.
评论
发表评论