INTERACTIVE DESIGN - FINAL PROJECT
13/06/2019 (Week 11 - Week 14)Dk Nur Reem Rashah Pg Mohammad Apri (0336605)
Interactive Design
Final Project_______________________________________________________
LECTURES
Lecture 11:
No lecture.
Lecture 12:
No lecture.
Lecture 13:
No lecture.
_______________________________________________________
INSTRUCTIONS
_______________________________________________________
DESIGN PROCESS
Making the logo:
My partner for this project is Ian Chew Ze Han, and he requested for a gorilla to be the logo of the website due to the fact that the website would be named 'Healthy Gorilla'.
Creating the logo on Illustrator
The first draft of the logo
Final outcome
Making a logo with the brand name
The final outcome of the logo with the brand name
The first attempt on designing the layout:
The first draft of the first page
I noticed that there are certain things I'm not satisfied with such as the navigation bar where the 'Contact' is not as readable in comparison to the other categories due to the background image. Because of this, I decided to move the contact information (where the brand's social media will be shared) to the footer and perhaps remove both the search bar and the login buttons.
Final outcome:
First page
Home page
Second page
'About' page
Third page
'Arms' page
'Legs' page
'Chest' page
'Abs' page
Seventh page
'Back' page
'Nutrition' page
Ninth page
'Newsletter page' - The outcome of clicking 'Join The Troop' and ''Subscribe' button
_______________________________________________________
OBSERVATIONS
Week 11:
I saw that most people have created a variety of different styles in terms of laying out their website when we first did our first drafts on layout design. Personally, I still had to ponder on how I should design the website based on my partner's chosen topic. When I looked for inspiration online, I noticed that all the fitness websites I searched were quite different from each other in terms of layout. Though, the common theme that I observed was that most fitness websites had a clean, simple layout which I will try to implement for my final outcome.
Week 12:
I noticed that I should create my own icons for the content as we are not allowed to use stock images as content in exception of using those stock images as background images. This made me take the initiative to create multiple logos with and without the brand name for extra potential use for the content of the site.
Week 13:
From the final outcome of this project, I observed that it was quite interesting to see the way my design comes through after doing the coding for the HTML and CSS files. Though, I do find it quite confusing at times as to how the codes can translate into the result of the website. This thought process occurs quite some time while doing the coding and seeing the live preview.
FINDINGS
Week 11:
I found a huge range of websites can be used as my inspiration for this final project. Though, instead of using only one as an example, I chose to just look through most of them and simply find what I thought was a nice feature/characteristic that the site had and try to implement those qualities onto my site.
Week 12:
I realized that I should compile data on what to present on my site in terms of the information that will be delivered based on the chosen categories such as arms, legs, chest, abs, etc. I realized that I should first think of whether the information would relate to the target audience's needs (target audience: people who are aiming to start a healthy lifestyle). Hence, I chose to have a beginner-friendly approach instead of adding information on complex, advanced fitness routines.
Week 13:
I discovered that coding can be quite tricky at times. However, I found that I was able to learn fast after making errors as I was able to figure out what I did wrong very quickly during the coding process. I feel that coding will get easier by time if I just practice more.
EXPERIENCES
Week 11:
I would personally consider my experiences in this module to be enjoyable. I felt that sometimes coding without any time constraints can be quite therapeautic in the sense that I was able to see the outcome as I go about the process straight away. Though, this was definitely not the case when I was not consistent with my work and had to catch deadlines. I'm thankful that I was able to experience and learn how to code. I would consider learning to code even further in my own free time.
Week 12:
I became slightly more knowledgable on how to code HTML and CSS files. I actually had a very difficult time attempting to link all the HTML and CSS files for the navigation. At first, the CSS files wouldn't link to any of the HTML pages. It took me a long time to notice, however I was able to spot my mistake and I quickly learned that I misspelled some of the coding elements. Following this, I made sure that I won't do the same mistake.
Week 13:
Other than that, I also experienced that it was very hard trying to ensure that my website is responsive in terms of using media queries and more. I feel that I find this to be the most challenging part of designing a website. I still need further practice on this in order to ensure that I'll be able to make my website more accessible through a variety of different screen sizes on different devices.
Comments
Post a Comment