Interactive Design / Final Project

on
11.06.2024- 23.07.2024 (Week 8-Week 14)
Ng Kar Yee / 0367743
Bachelor of Design (Honours) in Creative Media
Interactive Design / Final Project

LECTURES

Week 9⇒ Box Model


The Display Property

  • Display is CSS's most important property for controlling layout.
  • Every element has a default display value depending on what type of element it is.
  • The default for most elements is usually block or inline.

Block-level element

  • <div> is the standard block-level element. 
  • A block-level element starts on a new line an stretches out to the left and right as far as it can.

Inline Element

  • <span> is the standard inline element. 
  • An inline element can wrap some text inside a paragraph <span> like this </span> without disrupting the flow of that paragraph.
  • A common example is making inline li elements
  • for horizontal menus.

Other Display Properties

  • Inline-block
  • Flex
  • Grid

Box Model in CSS

  • Most HTML elements are containers. Consider some of the HTML elements we've used so far: body, p, h1, h2, div, ul, ol, li.
  • Each of these is a container, or box.
Each box has three layers that surround its content. The layers are, in order from inside to outside
  • Padding
  • Border
  • Margin
    •
For example, consider the following <p>, which is wrapped inside a <div>:
Figure 1.0 Box Model

Flexbox

  • CSS Flexbox is a powerful tools for creating responsive and efficient web layouts. 
  • It rely on a solid understanding of the Box Model, as they manipulate elements' positioning and spacing within a container.

Flexbox (Flexible Box Layout). The key concepts are

1. Flex Container
  • The parent element with display: flex.
2. Flex Items
  • The children of the flex container.

INTRODUCTION


FINAL PROJECT

EXERCISE⇒ DESIGN, EXPLORATION AND APPLICATION

For our final project, Mr Shamsul introduced Design, Exploration and Application to us, where we are needed to create a microsite which consist of a minimum five sections. Our microsite should have a clear and consistent visual design that reflect the needs and preferences of our target audiences. Besides, our microsites should be responsive and dhere to web design best practices, including accessibility as well as usability.

In this assignment, we have the creative freedom to design and develop a single page microsite centered around the theme of lifestyle. The objective 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.

For this task, we are required to,

1. Lifestyle Theme Selection:
  • Choose a specific lifestyle theme that resonates with you. This could include topics like fitness, travel, fashion, food, wellness, or any other aspect of modern lifestyle that interests you.

2. Layout and Sections:

  • Design a single page microsite that consists of at least five distinct sections. These sections should flow seamlessly and provide a comprehensive experience for the user. 

Consider including sections like:

Introduction
  • Introduce the chosen lifestyle theme with a captivating headline and a brief description that captures the essence of the lifestyle.
Featured Content
  • Showcase the core content related to the lifestyle theme. This could be articles, tips, recipes, guides, or any relevant content.
Photo Gallery
  • Include a dedicated section with an interactive photo gallery. This gallery should showcase high-quality images that visually represent your chosen lifestyle theme.
  • Expert Interviews or Testimonials If applicable, feature quotes or short video interviews from experts or enthusiasts in the chosen lifestyle field.
Get Involved or Subscribe 
  • Encourage user engagement by providing a call-to-action section where users can subscribe to updates or follow your chosen lifestyle on social media.

3. Visual Design:

  • Design a visually appealing microsite that aligns with the chosen lifestyle theme. Select a color palette, typography, and visual elements that convey the mood and essence of the lifestyle.
  • Maintain consistency in design elements throughout the microsite, ensuring a cohesive and professional appearance.

4. Photo Gallery:

  • Create a dynamic and interactive photo gallery section using appropriate technologies (e.g., JavaScript, CSS animations).
  • Include a variety of images that showcase different aspects of the lifestyle. Ensure smooth navigation and transitions within the gallery.

5. Responsive Design:

  • Implement responsive design techniques to ensure that the microsite is accessible and functional across various devices, including desktop, tablet, and mobile.

6. User Experience and Interactivity:

  • Incorporate interactive elements such as hover effects, animations, and transitions to enhance user engagement and create an enjoyable browsing experience.
  • Ensure that navigation is intuitive and easy for users to move between different sections of the microsite.

7. Technical Implementation:

  • Write clean and well-structured HTML and CSS code that adheres to best practices.

Evaluation Criteria:

Your assignment will be evaluated based on the following criteria:
  • Creativity and coherence in design, aligning with the chosen lifestyle theme.
  • Effective use of interactive elements to engage users and enhance the user experience.
  • Functional and appealing photo gallery that showcases lifestyle-related images.
  • Responsiveness and compatibility across different devices and screen sizes.
  • Clean and organized code adhering to web standards and best practices.
  • Thoughtful documentation explaining design decisions and technical aspects.

RESEARCH

To have a head start, I began to do some research to get a briefly idea on how should I design my microsite.

https://www.team17.com/games/overcooked/

Figure 1.0 Overcooked Official Website

https://www.nexon.com/maplestory/

Figure 1.1 Maplestory Official Website

https://genshin.hoyoverse.com/en/

Figure 1.2 Genshin Impact Official Website

https://hsr.hoyoverse.com/en-us/

Figure 1.3 Honkai Star Rail Official Website

IDEA PROPOSAL

After doing some research and brainstorming, I quickly gather my idea into a proposal using Canva. My idea was to do a microsite on a game named Maplestory which I played since young. The game brought me a sentimental value as it was full with my childhood memories till now. However as the years went by, the amount of players wasn't as much as before. Therefore, my aim for this microsite is to attract new players and promote the game experiences.

DRAFTING

After proposing my idea to Mr Shamsul, he felt that the idea was ok. However, they are quite an amount of coursemate doing the same theme where they promote a microsite on games. Therefore, Mr Shamsul suggested me to create microsite on a my favorite character in the game. After considering his idea and filtering from 47 classes in Maplestory, I decided to choose Adele as my character for the website as I played this character the longest.

After deciding on the character, I started to draft out my layout as well as the draft design for the microsite using Figma.

Figure 1.4 Microsite Layout Draft 1

Figure 1.4 Microsite Layout Draft 2 & Design Draft

Figma View Link
https://www.figma.com/design/j1F5tFfmX6J00uizMe5n3M/Untitled?node-id=0-1&t=rHFeSaurWUuAmaG3-1

DIGITIZATION

After drafting out my idea, I dive straight into the coding. I have seperate the whole microsite into 6 content section and 1 header and footer. 

For the header of my microsite, I designed a navigation bar to be there as I wanted to convenience user who browse the web page. I also added a the word Maplestory as the logo for my microsite. 

Figure 1.5 Header

I added a music selection on the top on the page as I wanted to increase viewer's interaction in the page. A <div class="audio-wrapper"> and <audio controls autoplay loop> was used so that the audio is set to be loop after viewers press the play button.

Figure 1.6 Music Button

After that I added an image as a starting so that the image may act as a main title and a home navi for the viewers.

Figure 1.7 Home Navi

For the first section, I designed to be the character's class and information. The section includes the basic information of the character like races, class, weapons and stats. Besides, I also used  a <div class="w3-container w3-blue w3-round-xlarge" style="width:80%"></div> to create the progression bar to represent the overall stats of the character.


Figure 1.8 Character Information

To attract viewers attention, I inserted a gif animation to the profile picture.

Figure 1.9 Profile Picture Gif Animation

After briefly introducing the character, I added a trailer debut to the content.

Figure 2.0 Trailer Debut

For the second section, a briefly backstory of the character was added.

Figure 2.1 Backstory

After finishing the introduction in the first 2 section, I designed the third section to be skills showcase so that players are more aware of what type of skills the character used.

Figure 2.2 Main Skills

To not make the whole microsite just plain wording and images, I inserted a showcase of the 2 main skills used by characters. A carousel was used to showcase the videos. Viewers can press either left or right to scroll through the videos. Besides, a play and a pause button is located at below left of the video to start or pause the video. The carousel is also design to scroll automatically between both videos. 

Figure 2.3 Main Skills Showcase 1

Figure 2.4 Main Skills Showcase 2

After the 2 main skill showcase, the below section would be a list of skills from beginner job to 6th job of the character throughout the game.

Figure 2.5 Beginner Job To 6th Job Skills List

The fourth section is designed as guides of the character. This section is designed give new players a quick road to familiar themself with the character. Old player like myself also find guides useful as everyone has their limit in specific knowledge.

Figure 2.5 Adele Guide

A carousel was also used to showcase the videos. Viewers can press either left or right to scroll through the videos. Besides, a play and a pause button is located at below left of the video to start or pause the video. The carousel is also design to scroll automatically between both videos. 

Figure 2.6 Adele Guide 1

Figure 2.7 Adele Guide 2

Figure 2.8 Adele Guide 3

Figure 2.9 Adele Guide 4

In addition, I also added a 'More about Adele' section, where fanmade videos or illustrations are showcased. A carousel was used to showcase the videos. Viewers can press either left or right to scroll through the videos. Besides, a play and a pause button is located at below left of the video to start or pause the video. The carousel is also design to scroll automatically between both videos.

Figure 2.9 More About Adele

Figure 3.0 Music Video Showcase

Figure 3.1 3D Version Trailer Showcase

For the last content is the join community section. The aim of this section is to attract players to join the big family so that everyone is connected with each other. To code the form, a <div id="cform"> was used.

Figure 3.2 Join Community

Lastly, I designed the footer to have the social media platforms so that viewers can connect to official webpages for more infos. Besides, I also added the private and confidential terms to imitate an official website.

Figure 3.3 Footer

For the overall layout, Margarine has been used for h1, h2 and h3  text while Comfortaa has been used for p and li. the overall alignment is also set as align center so that it look more clearer. The colour white is also commonly used in the website.

RESPONSIVE STRUCTURE 

WEBSITE VIEW

MOBILE VIEW

FINAL HDML STRUCTURE

FINAL CSS STRUCTURE 

FINAL LINK TO NETIFY

https://66ade95795b59743abe46a98--loquacious-mandazi-0e58f8.netlify.app/#Home

REFLECTION

Working on design, exploration and application has been a fun ride where I got to design a web page according to my interest. Besides, we got to learn how to just limit our design in a horizontal or vertical way instead we can design them flexibility yet visually convenience to the users. Moreover, we have the opportunity to analyze and explore different amazing websites created by experience designer. I also found it interesting that I get to choose a create a webpage based on my favorite character in my favorite game. This final project was an upgraded challenge version for me as we need to combine the coding skills learned throughout the 14 weeks however with the guidance I got from Mr Shamsul and my friends, I managed to finish the tasks.

Comments

Post a Comment