INTERACTIVE DESIGN FINAL PROJECT

 MODULE GCD60904: INTERACTIVE DESIGN

10 July 2024 - 3 August 2024 : Week 11 - Week 15

Bachelor of Design (Hon) in Creative Media

Task III: Single Page Lifestyle Microsite

---

MODULE INSTRUCTION:

“APR - JUL 2024: GCD 60904 / ADVANCED TYPOGRAPHY MODULE INFORMATION BOOKLET”

Task I / Exercises: Web Analysis (Week 11 - 14)

Single Page Lifestyle Microsite: Students within the cohort are expected to design and develop a single-page microsite centred around a specific theme and/or Lifestyle. Students need to craft an immersive and visually appealing microsite that effectively communicates the chosen lifestyle theme and engages users through thoughtful design and interactive elements.

---

Task III: SINGLE-PAGE LIFESTYLE MICROSITE

WEEK 11: Understanding the Project + References

For this final project, I originally had the idea to create a Single Page Website centred around one of my interests such as Video-Games; choosing to make a website talking about one of my favourite Game-Studios, “FromSoftware.” Over my time playing Video-Games, I’ve enjoyed the titles published by FromSoftware due their Games’ narratives and difficulty and thought it would be reasonable to make a site which discussed elements of the games while not being too in-depth. When discussing this with the lecturer, the idea wasn’t too bad however, he believed making a website about multiple titles may be a bit time consuming and instead recommended focusing on one the the titles produced by FromSoftware, leading to me downscale the project to just one of their games, “Elden Ring” and its upcoming DLC Release.

Following my discussion with my lecturer, we also talked about the layout of the website and how I might structure it to look better. In his recommendation, he suggested looking at existing Game websites such as online storefronts or the publisher's main page and taking inspiration from there to begin creating some designs. For this Reference phase, I looked towards existing storefronts from Playstation and XBox while also looking at FromSoftware’s home page. In addition, I looked at some general websites to get a better sense of the structuring of the pages.

“Storefront Playstation”

First Reference Site - Playstation: This is the digital storefront hosted by Sony/Playstation which is used to promote and sell titles on their game console. This page is adaptable as it can be found on both online and on the hardware it is meant to promote. The strengths presented in this website is its clean appearance; all sections and buttons are displayed/stand out with all the relevant information being provided to the user instantly. The website is adaptive to different resolutions which is to be expected. The weaknesses of the website are rather minute with the only form of criticism coming from the presentation of the addons and purchase types; it may be a bit confusing for users. 

“Storefront XBOX”

Second Reference Site - XBOX: This is the digital storefront hosted by Microsoft/XBOX which is used to promote and sell titles on their game console. This page is adaptable as it can be found on both online and on the hardware it is meant to promote. The main strengths which I believe are done a bit better in this example is the clean appearance; the website has a detailed layout which still emphasises the important information such as buttons for the users. In addition, each section is clearly distinct which makes the website more readable/defined. For the weaknesses of the site, I find it interesting that the user is not informed about their purchase capability immediately and needs to look through extra information before being able to make their purchase. While this may work in websites discussing the release, I believe it does not align with a storefront. 

“Mainpage FromSoftware”

Third Reference Site - FromSoftware: This is a company-hosted website meant to display and capture the history of the company and the projects they’ve worked on over the years. As this website is designed mainly for the web, it does break in a few instances when used on quick-browsing devices. The main strength of this website is mainly its theming and unique creative aspects. The page features interesting yet clearly defined buttons which make it easy to move around each section. However, this is probably one of the only strengths presented due to the glaring weaknesses of the site. One weakness is how the website differs from the universal website expectation which makes it a bit difficult to reach other pages of the site.

WEEK 12: Sketches

Continuing with the project this week, I began by developing a series of preliminary designs using a program recommended by the lecturer, Figma. While it took some time getting used to, Figma was an online service which helped in producing mock-ups for websites which makes it easier to see what the final product would be like. In my case, I used it to develop these rough layouts for I ultimately wanted to format my final website.

“Layouts made by using the program Figma”

Looking at all of the references from the previous week, I wanted to open the website with a clear “Hero Banner” which displayed A) visual Design and Tone of the Video-Game and B) the leading “call to action” and any other additional information which may be important to the website. Taking some mix inspiration from the XBOX and FromSoftware page, I thought it would be unique to make the ‘Hero Banner’ an auto-scrolling carousel as it showcases more in a simple way.

The “Brief Introduction” section was supposed to be generic information about the company and would feature a side image of the team or a vertical panoramic of various images from the company. Once again, there was not too much innovation for this point as it wasn’t supposed to be the highlight of the website.

For the “Released Titles” section, it was originally designed to be either cards or containers which would display different selling points about Elden Ring, having sections on Exploration, Combat, Bosses, Crafting Etc. In the design phase, I had a few ideas: The first Idea was a card-based carousel (something similar to what can be found on Amazon etc.) which would contain brief snippets of information regarding the sections previously explained. While I thought it was something cool to explore, I realised that it would be difficult to design and would be un-practical for this style of website. Its design was mainly introduced to be a unique section.

For the Second Design, I wanted to go with something similar to the XBOX approach with coloured horizontal cards which would display the relevant information while also having an auto-carousel of images. While I preferred this style of layout, I decided to tweak it a bit as seen with the third design where the carousel was removed and all sections were sorted into one block where hopefully a unique design could be implemented.

The Fourth Section is a mixture of the First Idea and the other two in a sense that it was supposed to be a vertical carousel of which can be scrolled through but is still segmented into individual containers. While this idea was the one I was going to use, I found it difficult to make the code move to each section perfectly and update the side tab, making it scroll only.

For the final section, I knew that I would want to include a ‘purchase’ option as the main ‘call to action’ and I intended to stylise it similar to that of the Playstation store. In essence, it would see the game title, price, availability, description and version in a shared container. Next to it would be the legally require ESRB to inform users more about their purchases.

Interactive Design as a module references the concept of providing select pieces of information in a creative & engaging format. Mainly focusing on Websites & their development + Design, Interactive Design provides additional methods of providing information to intended audiences using the receptive and intuitive medium of website design. For this first week’s assignment, student’s are to take this concept and explore it through referencing two existing websites. In analysing a series of websites, students can become more familiar with the expectations of Website Design and its functionality. This way, when we need to develop our own websites in future; we’ll have a reference as to what an effective website looks like and what mistakes we should avoid.

WEEK 13-14: Developing Website

To begin working on this final project, it was recommended by the lecturer to use a system known as ‘Bootstrap’ to help speed along development. “Bootstrap” is an online service which programs all forms of HTML and CSS functions to make it easier to develop a website however; this comes at the cost of limiting your creativity as it is very difficult to alter the commands. Before putting too much content into my website, I first began by creating a crude replica of the final plan shown off in the previous section and then adding the content afterwards.

The Designing part proved to be somewhat difficult as I would constantly need to consult the Bootstrap master document in order to see if what I wanted to achieve was even possible. If what I wanted to do was not possible, I would have to improvise which in retrospect, led to a majority of mistakes. Case in point, for the photographs which were to be put next to the text, I thought it would be reasonable to make it a separate column as sometimes the image acts funny when formatted alongside text. This however made it difficult to edit the website at smaller resolutions which was a let-down. Regardless, I was more-or-less satisfied with the rough layout and was able to begin editing and stylising it with content.

When Stylising, the greatest challenge faced was Bootstrap; due to the way it is formatted, it sometimes assumes priority over the attached CSS file which leads to unfortunate outcomes. In one instance, the background of the website was supposed to be a gradient (more in-line with the Playstation website) but it was always de-render unless the ‘navbar’ was removed which proved to be a difficult work around. In addition, Photographs used for the project would work in isolated instances which proved doubly annoying as some sections were the same but mirrored. Despite editing the photos and making them suited for the positions, they sometimes would fit the outlined frame and sometimes, it would break. Overall, this project proved to be just too frustrating to do and found it difficult to stay motivated while working on other projects alongside it. While I wish I was able to dedicate more time to it; I’m at least okay with the end product.

Site Can be found Here: SITE