Interactive Design - Final Project: Single Page Lifestyle Microsite

2/7/2024 - 3/8/2024 / Week 8 - Week 14
Cindy Clarissa Leslie / 0367677
Interactive Design / Bachelor of Design (Hons) in Creative Media
Final Project: Single Page Lifestyle Microsite


INSTRUCTIONS

 


Research

Figure 1.1 Mood board for final website

Before starting the prototype, I first created the mood board for the whole concept and colour scheme. For this project, I wanted to create a fansite of one of my favourite bands, Deftones. As the band is known for their songs that has dark and edgy themes/ambience, I wanted the design itself to be able to represent their genre. I went with a dark theme with splashes of purple for a rather 'gothic' feel.

I also chose a gothic display font called 'Malevolent' that will act as the headers of the website.


Planning/Prototype

Figure 2.1 Wireframing using Adobe XD

 This time, instead of using Figma I attempted to try and use Adobe XD instead. Using the shapes tool for graphical aspects, I created a proper wireframe for the layout before starting the final design and separated the sections using different colours.

Figure 2.2 Final design prototype on Adobe XD

After wireframing, I collected my images and placed the proper graphical element into each shapes that I have inserted. I used the colour palette I chose supported by the font for the 'gothic' feel I was going for. I made small changes but the overall layout stayed the same.


Coding

Figure 3.1 Coding HTML on Adobe DreamWeaver

As usual, before starting any design I had to input the sections and textual elements on HTML as a foundation. I had to set some things as blank as some of the sections were simply pictures.

Figure 3.2 Coding CSS on Adobe DreamWeaver

After completing the HTML, the next step was to start with designing using CSS. For the coding, I separated and focused on one section each, completing one before starting to the next one, this is too also ensure that each sections can be easily identifiable.

I made small changes from the prototype itself, since I realized some of the design I wanted especially for the albums required JavaScript which I was unaware of, I had to improvise. I made a list of the albums the band made instead. While doing this, I added some hovering animations to make it more interactive in some way.

Figure 3.3 Coding to fit mobile devices

Before finalizing the design, I made sure to code the end so that the design was able to adapt onto mobile devices.


Final Project: Single Page Lifestyle Microsite


Figure 4.1 Final website layout in jpg

 
Figure 4.2 Final website layout in pdf


REFLECTION

In this module, I learned the basics of coding. It was overall a very interesting experience for me as I used to be really interested in coding however never got the chance to actually learn as I didn't know how to start it. This project alone had me researching, wireframing and at the end get a glimpse of what it is like being a front-end developer. Though the coding part was confusing most of the times since I am still unfamiliar, this project had its fun parts too, I especially like how it is supposed to represent our lifestyle in a way, to which I chose to create a site based off of one of my favourite bands. Although it was frustrating, I was also able to enjoy creating a design that has the aesthetic that I like, though my coding definitely needs to be more polished, to which I am looking forward to in the future and being able to create better designs.




Comments

Post a Comment

Popular posts from this blog

Advanced Typography - Task 3: Type Exploration and Application

Image
16/6/2024 - 22 /7/2024  / Week 9 - Week 14 Cindy Clarissa Leslie / 0367677 Advanced Typography / Bachelor of Design (Hons) in Creative Media Task 3: Type Exploration and Application LECTURES Link to  lectures 1 to 4 Link to lecture 5 INSTRUCTIONS In this task, we were required to propose specific problems and how we could design a font in order to solve them. These proposals were collected in slides format and proposed to the lecturer in order to decide which ones were good enough to do. Research Figure 1.1 Slides for proposal. Week 9, 16/6/2024 In the end, I chose to create an extension based on my old font and go with the final idea of creating a font for a band, I wanted to be able to present their metalcore music that showcases how different songs in the album is able to be loud and sharp, while some of their songs are on the softer side. Figure 1.2 Original logo/typeface for the band. Week 9, 16/6/2024 Setting the original typeface as a reference itself, I wanted to be ab...
Read more

Application Design - Project 3: Lo-Fi App Design Prototype

Image
2 /12/2024 - 7/1/ 2025  / Week 11 - Week 14 Cindy Clarissa Leslie / 0367677 Application Design / Bachelor of Design (Hons) in Creative Media Project 3: Lo-Fi App Design Prototype LECTURES Week 11: Lecture 11 Usability testing Evaluate a product or service with representative users The aim is to detect usability issues, gather qualitative data, and assess overall user satisfaction. Create scenarios for the participants, observe how they use it and gain insights. (3 different scenarios for 3 different users) Create a low fidelity wireframe first (does not contain graphics nor colours, just the main idea of the whole layout) UI Kit Should include aspects of the design: typography colour palette iconography INSTRUCTIONS Project 3: Lo-Fi App Design Prototype UI Kit As stated in the lecture, the UI kit should be created first to predetermine the design's typography, colour palette and iconography in order to ensure that it stays as consistent as possible. The kit will then be used as a f...
Read more

Application Design - Final Project: High Fidelity App Design Prototype

Image
2 /12/2024 - 7/1/ 2025  / Week 11 - Week 14 Cindy Clarissa Leslie / 0367677 Application Design / Bachelor of Design (Hons) in Creative Media Final Project: High Fidelity App Design Prototype LECTURES   PROJECT 1: MOBILE APP PROPOSAL PROJECT 2: UI/UX DESIGN DOCUMENT PROJECT 3: LOW FIDELITY APP DESIGN PROTOTYPE INSTRUCTIONS Project 3: Lo-Fi App Design Prototype Design process Figure 1.1 Deciding on the final colour scheme At first, I was struggling a lot in deciding on the final colour scheme. I had a lot of different experiments switching from dark to light mode. Since there are 3 official brand colours, I had to choose one of the colours instead as I figured that the purple that I initially planned on using wasn't able to reflect on the brand. At the end, to ensure a strong branding, I eventually chose blue as the accents with additional pink from the logo as the numbered notifications and other interactive elements especially in liking posts that could add to the design in a ...
Read more