Interactive Design / Final Project: Design, Exploration & Application

2024.06.11-2024.07.23 Week 8 - Week 14

Teh Ming En/0364908

Interactive Design-Bachelor of Design (Honours) in Creative Media--Taylors University

Final Project: Design, Exploration & Application

---

Instructions

---

Final Project: Design, Exploration and Application

In the final project, we need to create a single-page website centered around the theme of our favorite topic. 

Requirements:

• The content should have at least 5 sections that explain the topic of interest and include one CTA button that reflects the content.  
• Choose a color scheme and fonts that reflect the artist's style or your taste.
• Ensure a visually appealing layout with a balanced use of text and multimedia.
• Create a responsive design that adapts to different screen sizes (mobile-friendly).
• Implement smooth scrolling navigation or a simple menu that allows users to jump to different sections of the page.
• Adding interactive elements such as image sliders, hover effects, or lightboxes for multimedia content.

Sketches

Fig 1.1 Sketches 1-3

Fig 1.2 Sketches 4-5

I have drawn out 5 wireframes for my website in the first week. I chose my favorite game- Sky: Children of the Light as my theme to create a page for it. After discussing with Mr. Shamsul, I started creating the prototype before creating the site. 

Prototype

Fig 2.1 Final Project Prototype

I created the prototype before started creating the website. I chose to use dark blue and white as primary colors and light blue and black as secondary colors for my website. There are 5 sections in my site which are hero section, introduction, guide, news and contact sections.

I had planned to add a wallpaper section in one of the sections. But after discussing with Mr. Shamsul, I felt that the large size of the wallpaper would affect the responsiveness of the webpage, so I decided not to do it.

Progress

Fig 3.1 Include Bootstrap’s CSS and JS

Before started creating the site, I have included the Bootstrap’s CSS and Javascript in the project. It will help me build the website more easily.

Fig 3.2 Craeting Navigation Bar

Next, I created navigation bar and added 4 sections in it that are Introduce, Guide, News and Join Us. I styled the navi bar as dark blue with white color text, it will looks more suitable to my site. Besides that, I also place the game icon at the left of the navigation bar. Here, I also set the navigation bar to the hamburger menu when the screen size is different.

Fig 3.3 Styling Hero Section

I chose a suitable game picture and used it as the background of my hero section. After that, I added the title and a CTA button on it. For the call-to-action button, I have maked a shake effect on it. When the user's mouse arrow is on the button, it will start to shake in order to interact with the user.

Fig 3.4 Creating Introduction Section

The next section is about the introduction. It is a simple introduction to the game, with a picture on the left and the description on the right. Some important parts are highlighted using <strong>.

Fig 3.5 Creating Guide Section

I embedded the tutorial videos on YouTube into each card, and attached titles and descriptions so that users would not be confused when viewing them.

Fig 3.6 Creating News Section

The News section contains news about the game, including game updates, new game seasons, new events, etc. I have divided them into two rows same as the guide, with a total of six news, and also attached the title and date.

Fig 3.7 Styling News Section

When the user's mouse arrow is on the picture, the picture will start to shake, reminding the user to click the picture to get more details. When the user clicks the picture, the webpage will jump to a new tab to the event details page published on the official website.

Fig 3.8 Contact Section

Fig 3.9 Sign Up

Moving on, I come to the last section. Here I have added five social media icons and linked them to the game’s official homepage. Again, when users click on them, they will be redirected to a new tab, without having to worry about revisiting the lost web page. Additionally, I have added the sign up content in the last section. Users will receive the latest news or newsletters about the game by sign up their email addresses.

Fig 3.10 Icons

For icons, I used the icons provided by Bootstrap, which is convenient and saves my time to find free icons to use. haha

Fig 3.11 Mobile Friendly

The last step before publishing the site, I adjust every height and width, position, margin and the details of the website to make it suitable for the screen size.

Submission

Netlify Link: https://welcome-sky-page.netlify.app/

Fig 4.1 Full-sized screen capture of the website

Reflection

Working on the final project was an interesting and enriching learning experience for me. It required creating a site individually and applying various skills on it. I find that simplify the navigation and intuitive the layouts will significantly affect the aesthetics of the website. A good layout will make the website more engaging and satisfying. Starting from initial research and wireframing to prototyping in Figma and completing in Dreamweaver, I consolidate my knowledge and skills from previous assignments and gained the new experience of my web development. This is a good experience for me to develop my skills in creating website, and learn from the coding.

Feedback

Week 12: 

My media section in the sketch may change to a news section. The hero section just needs a heading or short description and a call-to-action button. I should make sure my website has at least have 5 sections, including hero section and CTA button.

Week 13: 

I need to explore more with the Bootstrap website. I can use the card code in the Bootstrap to help me create the card group in website easily.

About the content:

• Adjust the font size in the prototype, and make it smaller.
• Modified the navigation bar, and made it look clean.
• Guide section: Either describe more with the content or change the style to show it, such as YouTube video.

Week 14:

Adjust Navigation so that it can present the hamburger menu on the different size screen.