INTERACTIVE DESIGN FINAL PROJECT

18/10/2018 - 22/11/2018  (Week 8 - Week 13 )
Ng Shu Zhi (0327158)
Interactive Design - Final Project -  Design, Exploration and Application  

INSTRUCTIONS


WORK
Week 11: Mood board, Structure and Wire frame

At the beginning of this project I had the idea to add some illustrations to my friend's blog as the head of each page but then after designing those illustrations, they seemed to only make the page more complicated and like it didn't for the theme of being more minimalistic.

Week 12

The types of illustrations I had in mind for the head.
The camera illustration seemed as though it could fit the theme but then the palette and paintbrush just seemed unprofessional like and my abilities to make it seem more simplistic but still have an idea of the item was lacking. They also caused a bit of a problem with the wireframe because with the addition of buttons and navigation bar from the template, it would've messed up the templates placement which I already liked very much so I took them out from the idea and just had a simple solid coloured background for the head.

Week 13 - 15
Final webpage: https://app-1543996628.000webhostapp.com/
Here are the codes for the final webpage.

Home page
html code

home page css

About page
html code


css code


Art&Design page
html code

css code

Photography
html code


css code

Travel
html code

css code

homepage about

homepage art and design

homepage photography

homepage travel

about page

art and design page

photography page

travel page


 FEEDBACK
Week 11
[no feedback]

Week 12
[no feedback]

Week 13
Specific feedback: I was told my microsite would require more information and I could refer to the typography MIB. I was asked to add an underline to my navigation because the design of the page made it confusing to understand, I should have a bigger contrast between my title for the merchandise and pricing, my merchandise title should be on the lft side which would make it look like a real title instead of a coding error on the right and finally to remove the Taylor's University on the top corner left because it looked like a logo when it wasn't
REFLECTION
Experience
Week 11
For this week I made a moodboard, framework and wire frame for the final project based off the information my friend had sent to me.

Week 12
I had began the coding for my friend's website with the help of a template, making it much easier to finish the work. My friend had a very simple need for me which was to make a portfolio for her work and a travel section for her past travel experience.

Week 13
This week I had a problem with the homepage which I chose to make just a slider because I knew my friend enjoyed simplistic, non-complicated designs so putting a slider as the homepage seems to be the best choice to save space but still allow people to look at the type of contents on her blog. The teacher helped me with a problem in the code and the page worked properly. Since I was almost done with the blog, I tried different ways to decorate the page like having a background image but then it only made the page look more complicated so I went back to the original design.

Week 14
This week I was already done with my friend's blog so I didn't have much to worry about other than a few tweaks here and there after consulting with the lecturers.

Observation
Week 11
Making the mood board for my friend is much easier as I've known them for awhile and the process of making a mood board.

Week 12
I learned what was the filter which is ctrl+f, and it made the coding process much easier since I was using a bootstrap template.

Week 13
Adding a background image makes the design more complicated because the resolution seemed bad and the text wasn't readable any longer.

Week 14
My website's simple design didn't leave much more things to work on.

Findings
Week 11
Making the mood boards and wire frame for the final website is very fun as it is for my friend who I know the preferences of.

Week 12
I found the filter which made the coding process much easier because I would be able to find which part of the css to change which made things easier for me to change the coding.

Week 13
I found that it is better to make things simple in web design as when I tried to ass an image as the background, it only made everything look more complicated and my text couldn't be seen clearly.

FURTHER READING

https://www.w3.org/2005/10/howto-favicon



This was my further reading for this week on making a favicon for our webpages

Comments

Post a Comment

Popular posts from this blog

INFORMATION DESIGN - EXERCISE

Image
7/1/2019 - 28/1/2019 (Week 1 - Week 4) Ng Shu Zhi 0327158 Information Design - Exercises LECTURES Week 1 Tuesday Week 1 Thursday Week 2 Tuesday Week 2 Thursday INSTRUCTIONS WORK Week 1-Monday For the first week of class we did an exercise to refresh our minds on After Effects. We had to choose a topic to make a short infographic video. I chose to do my dog because I knew my dog very well and since it was just a simple warm up, we couldn't spend a lot of time on just research. Week 2 - Tuesday For this class we were to count buttons to make data to share to make an infographic poster My buttons arranged according to size, texture, hole amounts and colour. My data collected at the end of the session Week 2 - Monday We learned how to make dynamic animation in After Effects where when we use numbers, they can change automatically. Then each group was assigned a topic to make an infographic video and my group got currency. I chose to conv...
Read more

INTERACTIVE DESIGN PROJECT 2

Image
4/10/2018 - 18/10/2018  (Week 6 - Week 8 ) Ng Shu Zhi (0327158) Interactive Design - Project 2 -  Typosexual Typographic Exhibition Collateral: Interactive Microsite LECTURES Week 8: We had a lecture on the usage of Bootstrap. INSTRUCTION WORK The code for the website for the first attempt The css for the first attempt of this project The layout for the first attempt FEEDBACK Week 9 Specific Feedback: I was told that my wireframe was very simple and would be easy to do with such a simple layout Week 10 Specific Feedback: My coding was very messy as everything wasn't in their own container so ti was hard to check and fix problems that occur to the page, then I was recommended to use bootstrap to make my page more easier. REFLECTION Experience Week 9 For this week I didn't try to use bootstrap because after my first few failed attempts, I thought I wouldn't have enough time to fully understand how to use it. So I ...
Read more

DESIGN RESEARCH METHODOLOGY - PROJECT 1

28/8/2018 - 18/9/2018  (Week 1 - Week 4 ) Ng Shu Zhi (0327158) Design Research Methodology - Proposal LECTURES Week 1: We were given an introduction to the course by an interesting exercise of giving a presentation for the process to our past designs. Through that Ms Jinchi transitioned into the lecture about research and why we have to do research. Week 2: Today we had a lecture about Problem Statements, Research Questions and Research Objectives then had a critique session where we gave presentations on our topic of interest.  Week 3: [Public Holiday] Week 4: [Tutor session] INSTRUCTIONS WORK Week 2: Topic of interest At first I wanted to do something more about the psychological effects games and movies have towards people from childhood into adulthood but then that topic was too broad to do research on for only 14 weeks so I was to narrow it down into a specific topic to research on. On those slides, I had listed "Analyse colours and composit...
Read more