10/6/2024 - 22/7/2024 ( Week 8 - Week 14)
Ho Winnie / 0364866
Interactive Design / Bachelor's of Design Honors In Creative Media
Final Project : Design Exploration & Application
1. Final Project : Design Exploration & Application
1. Final Project : Design Exploration & Application
Objective: In this assignment, you have the creative freedom to design and develop a single page microsite centered around the theme of lifestyle. Your goal is to craft an immersive and visually appealing microsite that effectively communicates the chosen lifestyle theme and engages users through thoughtful design and interactive elements.
A. Theme Choosing & Proposal
For this final project, we can choose to do a microsite revolving around the theme "lifestyle" . I decided to do a website for the game "Neko Atsume" and link it to "Relaxation & Joy" lifestyle theme. It is a delightful mobile game where players attract and collect a variety of adorable virtual cats. The game, developed by Hit-Point Co., revolves around setting out different types of food and toys in a tranquil yard to entice feline visitors.
Introduction to the Theme :
The theme of "Relaxation and Joy" is about finding peace, happiness, and contentment in the small, everyday moments of life. It's about creating an environment and engaging in activities that bring calm and pleasure, which are crucial aspects of a balanced lifestyle.
Connection to "Neko Atsume" :
"Neko Atsume" embodies the essence of relaxation and joy through its simple, soothing gameplay and charming, whimsical art style. Here's how the game aligns with the project theme:
Simple Pleasures:
- Gameplay: The core mechanic of "Neko Atsume" is straightforward—players place food and toys to attract cats. This simplicity encourages players to slow down, enjoy the moment, and find joy in small achievements, like discovering a new cat.
- Visuals: The game's art style is gentle and pleasing, using soft colors and cute designs that evoke a sense of calm and happiness.
Tranquil Environment:
- In-Game Setting: The game's yard and house settings are designed to be cozy and peaceful, providing a virtual space where players can relax and unwind. This aligns perfectly with the theme of creating a relaxing environment in one's lifestyle.
- Sound Design: The background music and sound effects in "Neko Atsume" are soothing, further enhancing the relaxing experience.
Emotional Connection:
- Cat Collection: Collecting and interacting with virtual cats can evoke feelings of joy and companionship, which are important for emotional well-being. The game allows players to build a bond with their virtual pets, promoting a sense of fulfillment and happiness.
- User Engagement: The ability to share photos and stories of their cat collections fosters a sense of community and shared joy among players.
Mindfulness and Stress Relief:
- Mindful Interaction: The game encourages mindfulness by having players pay attention to the cats' behaviors and preferences. This focus on the present moment can be a form of stress relief and mental relaxation.
- Low-Stress Environment: There are no time limits or competitive elements in "Neko Atsume," making it a low-stress, leisurely activity that players can enjoy at their own pace.
Proposal Slides :
Inside the slides, I included synopsis, mood boards , visual references , content structure and wireframes
B. Figma Interface Designing
I utilized Figma as the main platform to design my interface. Initially, I worked on a low-fidelity wireframe to provide Mr. Shamsul with an overview of the website structure. I then applied my selected color palettes and typographic elements to create a high-fidelity wireframe. This approach allowed me to ensure that the elements chosen in the mood board integrated well with the overall website design, maintaining both aesthetic and functional coherence.
After Feedback :
Mr. Shamsul advised me to make a few improvements, such as shortening the titles and adding headers above normal paragraphs to differentiate them, and best to centralized the main headings. He also suggested including a contact form section at the bottom, just before the CTA button. Following his suggestions, I implemented the necessary changes to enhance the overall design.
I initially focused on designing the different states of the navigation links, such as their default, hovered, and active states. I considered this to be a crucial aspect of the design process because it significantly enhances the interaction between the website and its users. By creating visually distinct states for these links, I aimed to improve the user's experience by providing clear visual feedback, making navigation more intuitive and engaging.
For the default mood, it is all black in color but when we hover it over, the text changes to white and the text size increased. When it is on active mood, there will be an extra logo ( in this case, yarn ball ) next to the text.
For the second interactive element, I designed an image carousel positioned at the top of the page. This carousel is intended to showcase a slideshow of three different images. The purpose of this feature is to capture the user's attention immediately upon landing on the website, providing a visually appealing and dynamic introduction to the content. Each image is carefully selected to represent key aspects of the website's theme, creating an engaging visual narrative. The carousel includes smooth transitions and controls that allow users to manually navigate through the images if they prefer.
Mobile Screen Design :
Given the necessity for the website to be responsive, I designed a separate mobile version layout. The first significant change I made for the mobile version was transforming the original header navigation into a hamburger menu. This adjustment was crucial to ensure a clean and uncluttered interface on smaller screens. The hamburger menu saves space and maintains a user-friendly experience by allowing easy access to navigation links with a simple tap. This change enhances usability on mobile devices, ensuring seamless navigation across different screen sizes.
The next layout change I did to the mobile version is to reduce the space for displaying different cats and their details. I found that it takes up too much screen space for the users to scroll in order to reach the end of the cat gallery. Hence, I made a CTA button called "Next Cat" for the users to click in order for the section to skip to a next cat.
These are my final screen designs on Figma, including the various stages of the design process. From initial low-fidelity wireframes to high-fidelity mockups, each stage shows the evolution and refinements made based on feedback.
C. Dreamweaver Coding
To achieve a responsive and interactive website, I designed various components were designed and integrated using HTML, CSS, and JavaScript. Below is an explanation of the structure and code used in the provided files, along with detailed explanations of the HTML code.
HTML Structure :
The HTML file structures the webpage, incorporating various sections such as the header, navigation, carousel, content sections, and footer.
Header and Navigation:
The header includes the website logo, title, and a navigation bar. A hamburger menu is implemented for mobile view, providing a responsive design.
- Header Logo and Title:
The header contains several elements to present the logo and title of the website. The
div elements are used as containers to group different parts of the header. The span elements are used to display the title and subtitle text. Classes and IDs are assigned to these elements for styling and scripting purposes. For instance, the hamburger class is used to style the hamburger menu icon, and the header-logo-img ID is used to apply specific styles to the logo image.
Main Sections:
The main content of the website is divided into several sections: Hero (carousel), Introduction, Gallery, Tips, Fan Stories, and Social Media. Each section has a unique design and functionality to enhance user engagement.
Hero Section:
The hero section features a carousel that cycles through multiple images. This section uses div elements to structure the carousel and its indicators. Classes are assigned to these divs to control the carousel's appearance and behavior, such as which image is currently displayed.
Introduction Section:
The introduction section provides an overview of the game. It uses div elements to organize text and images into a coherent layout. Headers and paragraphs are styled using classes to ensure consistency across the section.
Gallery Section:
The gallery section showcases images of different cats. It uses div elements to group the images and their descriptions. Each div is assigned a class to apply specific styles, such as the size and positioning of images and text.
Final HTML Codes ( PDF ) :
CSS Styling Structure :
The CSS styling for the website is split between two stylesheets, `indexDesktop.css` and `indexMobile.css`, to ensure the website is responsive and visually appealing across different devices. Below is an explanation of the key CSS properties and techniques used.
Desktop CSS (`indexDesktop.css`) :
Global Styles :
Global styles are applied to all elements to reset default browser styles and ensure consistency across the webpage. These include setting margins, padding, and box-sizing.
Flexbox Layout :
Flexbox is used extensively to create flexible and responsive layouts.
Header :
The header uses `display: flex` to align its children (logo and navigation) horizontally. `justify-content: space-between` ensures there is space between the logo and navigation, while `align-items: center` vertically centers the elements within the header.
Sections :
Sections like the introduction and gallery use flexbox to arrange their content. For example, the introduction section might use `flex-direction: row` to place an image and text side by side, while `gap` is used to add space between them.
Grid Layout :
CSS Grid is used for more complex layouts, such as the tips section.
Tips Section :
The tips section uses `display: grid` with `grid-template-columns: repeat(3, 1fr)` to create a three-column layout. `gap` is used to add space between grid items.
Typography :
Fonts are styled using classes. For instance, headers might use a specific font-family, weight, and size to ensure consistency across the webpage.
-Example :
- `h1`: Uses a large font size and bold weight to stand out as the main heading.
- `p`: Uses a readable font and appropriate line height for body text.
Background and Colors :
Background colors and images are set to enhance the visual appeal of sections. Colors are carefully chosen to maintain a cohesive color scheme throughout the website.
- Example :
- `header`: Uses a background color that contrasts with the text color for readability.
- `#introduction-outer`: Uses a background image to add visual interest.
Media Queries :
Media queries are used to apply different styles based on the screen size, ensuring the website is responsive.
Final CSS for Desktop ( PDF ) :
Mobile CSS (`indexMobile.css`) :
Responsive Adjustments :
Styles are adjusted for smaller screens to ensure usability and readability.
Header :
The header height is reduced, and the navigation is converted into a hamburger menu for mobile devices.
- `display: none`: Hides the navigation bar on small screens.
- `.hamburger`: Displays the hamburger icon, allowing users to toggle the menu.
Flexbox for Mobile Layout :
Flexbox properties are adjusted for vertical stacking on mobile devices.
- Introduction Section :
Uses `flex-direction: column` to stack the image and text vertically. Padding and margins are adjusted to fit smaller screens.
Grid Layout Adjustments :
The grid layout in sections like tips is adjusted to fit a two-column layout on mobile devices.
-Tips Section :
Uses `grid-template-columns: repeat(2, 1fr)` to create a two-column layout, ensuring the content fits comfortably on smaller screens.
Typography Adjustments :
Font sizes and line heights are reduced to improve readability on smaller screens.
- Example :
- `h1`: Uses a smaller font size compared to the desktop version.
- `p`: Adjusts line height to ensure the text is not too cramped.
Menu Overlay :
The menu overlay and dropdown are styled to provide a smooth and intuitive user experience on mobile devices.
- `position: fixed`: Ensures the overlay covers the entire screen.
- `background: rgba(0, 0, 0, 0.7)`: Applies a semi-transparent background to dim the content behind the menu.
Overall, the combination of flexbox and grid layouts, responsive typography, and carefully chosen colors ensures that the website is both visually appealing and functional across different devices and screen sizes. The use of media queries allows for specific adjustments, enhancing the user experience on both desktop and mobile platforms.
Final CSS of Mobile ( PDF ) :
JavaScript Interactivity :
Three JavaScript files (nav.js, gallery.js, burger.js) add interactivity to the website.
Navigation (nav.js):
This script manages the active state of navigation links, providing visual feedback to users about their current location on the website. When a user clicks on a navigation link, the script highlights the active link and updates the URL fragment to reflect the current section.
Image Carousel (gallery.js):
The gallery script enables an image carousel that cycles through different images, enhancing the visual appeal and engagement of the gallery section. It listens for click events on the "next" button and updates the displayed image accordingly.
Hamburger Menu (burger.js):
This script controls the hamburger menu's behavior, toggling the visibility of the menu and overlay when clicked. It ensures smooth transitions and a user-friendly interface on mobile devices by handling click events on the menu icon and overlay.
Final Javascript codes ( PDF ) :
Overall, the combination of HTML, CSS, and JavaScript provides a responsive, interactive, and visually appealing website. The design process involved creating wireframes, selecting color palettes, and iterating based on feedback to achieve the final product. Each component was carefully crafted to enhance user experience and ensure compatibility across different devices and screen sizes.
With that, I am done with my final project , Neko Atsume website. View it on my netlify link here.
Responsive Design :
Full Size Screen Grab of Desktop Version :
Full Size Screen Grab of Mobile Version :
2. Feedback
Week 10 :
Mr Shamsul commented that the overall layout is good but suggested me to make the titles shorter and also put a distinct headlines for my paragraph texts. It will be good to make a contact form at the bottom of the page as well.
3. Reflection
As I approach the completion of my final project for this module, I reflect on the journey, which has been both fruitful and challenging. Throughout this process, I have come to realize the critical importance of having a well-structured wireframe and layout. These elements significantly ease the transition to high-fidelity designs, making the creation process more efficient and effective. This project has proven to be more demanding than my second project, as it involves much more complex coding requirements, including extensive use of JavaScript. Despite the difficulties, this experience has been invaluable in honing my skills and deepening my understanding of advanced coding and design principles.
QUICKLINKS
Comments
Post a Comment