Interactive Design: Final Project
Interactive Design: Final Project
29/10/19 - 26/11/19 (Week 10 - Week 14)
Sia Man Sheng
0333877
INSTRUCTION
In this final project, we are required to team up with a person from the class and create a professional website for them. The website could be either a portfolio, small business website, informational site or whatever else the client (which is our friend) wants.I decided to team up with YI XIANG.
We both got to discuss on what we wanted our websites to be, then we individually wrote out our content and sent them to each other.
Brainstorming
I got to finalise on my content and with the information given from my partner,then I start with creating a sitemap, wireframe sketches as well as a mood board for his website.
Figure 1.1 Mind-mapping on Content
Figure 1.2 Wireframe Sketches
For colour template, I have selected the famous hot pot restaurant, which is Hai Di Lao as my reference and has extracted colour for my website from it.
Figure 1.3 Haidilao's Official Website
Figure 1.4 Colour Extracted from Haidilao
Process
To start, I went online to search for bootstrap templates as I wanted the website to have a responsive design. I found many different themes and templates which I found to be nice the use.
 |
| Figure 2.1 Templates
I ended up choosing the some templates purposely made for restaurant and food delivery as my themes. Below are the websites and images of them.
|
Figure 2.1.1 Reference 1
Figure 2.1.2Reference 2
Figure 2.1.3Reference 3
I proceeded to download it and open it in Dreamweaver. From there, I changed the content according to the information given to me by Yi Xiang. I also created different pages and linked them together.
Figure 2.2 Process of coding in Dreamweaver
Figure 2.5 Process of coding in Dreamweaver
Details
I continued to work on all the pages, changing the style in css as well as adding pictures and other contents. Belows are some elements I've made changes base on the references shown above.
Figure 3.1 Image Wall with Intro that links to Menu Page
Figure 3.2 Categorized Them by Changeable Page in Menu
Figure 3.3 Icons and Text Appear Accodingly When Scroll Down
Figure 3.4 Fillable Contact Section
Figure 3.5 Fillable Reservation Section
Final Outcome
After making the final adjustments and changes to the style to the website, I was finally done with it. Here's the outcome of the website I designed for Yi Xiang.
Figure 4.1 Home Page
Figure 4.2 About Page
Figure 4.3 Menu Page
Figure 4.4 Reservation Page
Figure 4.5 Customer Reviews Page
Link to the website:Yi Xiang's Kitchen
FEEDBACK
Week 13
11/11/19
General feedback
While using the bootstrap template it is important to make some changes and not stick to it 100%.
Specific feedback
For the final project, I could add a logo and replace it with the word “home”. Also, the paragraph of text shouldn’t be in a centre alignment and instead it can be justified.
Week 14
18/11/19
General feedback
Please make sure we upload the template as well as the link for it. This is because Mr. Shamsul want to look at how much we have done regarding the website and the changes made from template.
Specific feedback
For the final project, I could reduce the height of the section in the page for "Get in touch" section so there is no too much white space.
11/11/19
General feedback
While using the bootstrap template it is important to make some changes and not stick to it 100%.
Specific feedback
For the final project, I could add a logo and replace it with the word “home”. Also, the paragraph of text shouldn’t be in a centre alignment and instead it can be justified.
Week 14
18/11/19
General feedback
Please make sure we upload the template as well as the link for it. This is because Mr. Shamsul want to look at how much we have done regarding the website and the changes made from template.
Specific feedback
For the final project, I could reduce the height of the section in the page for "Get in touch" section so there is no too much white space.
REFLECTION
EXPERIENCE
29/10/19
Week 10
This week I got to have a clearer idea of what to do for the website and start writing the content.
5/11/19
Week 11
I got to exchange content with my friend and from there, create a sitemap and do some sketches based on what she wants it to be about.
12/11/19
Week 12
This week I got to start on the website. I started by choosing a template that I liked and made the necessary changes in Dreamweaver.
19/11/19
Week 13
For this week I continued to work on the website and added all the necessary pictures as well as changing the colours. Through this I got have a better experience of how to use a bootstrap template and how to style the contents in it.
26/11/19
Week 14
This week I took the time to make changes to the site such as adding background images, changing the colours, fonts and others. Once that was done I got to upload it to webhost.
OBSERVATIONS
29/10/19
Week 10
While coming up with the content, I observed that it is important to write out my content in an organised order so it'll be easier for my friend to categorise the content into different pages and sections.
5/11/19
Week 11
I observed that there are many possibilities as to what sort of style and content should the website include, and that having a mood board would be helpful.
12/11/19
Week 12
I observed that the css codes from the downloaded bootstrap templates may be a little confusing at times as it is all cluttered in one big paragraph.
19/11/19
Week 13
Through editing the codes in Dreamweaver, I observed that sometimes what I view on the spilt view is different from the browser and I should always go back to the browser to check if the layout is okay.
26/11/19
Week 14
I observed that I was best if I didn't use a lot of colours for the sections' background as the images used are already colourful on its own and it would be better if the background colour is white or light grey.
FINDINGS
29/10/19
Week 10
With a clearer idea in mind, I could finalise the contents I want to include as well as the colour palette I want.
5/11/19
Week 11
I found that it is quite fun to be able to plan an design a website for a friend based on the contents given to me by them.
12/11/19
Week 12
I found that it is good to use a bootstrap template as it makes the website have a responsive website which is good to have.
19/11/19
Week 13
Through the times I got to learn about html and css in dreamweaver during this semester, I found that I am more familiar with how to code this time around.
26/11/19
Week 14
From this project, I found that using a template was a useful guide, and that creating a website takes time and patience to design. Overall, I found this project to be interesting as I got to create a website for my friend.
29/10/19
Week 10
This week I got to have a clearer idea of what to do for the website and start writing the content.
5/11/19
Week 11
I got to exchange content with my friend and from there, create a sitemap and do some sketches based on what she wants it to be about.
12/11/19
Week 12
This week I got to start on the website. I started by choosing a template that I liked and made the necessary changes in Dreamweaver.
19/11/19
Week 13
For this week I continued to work on the website and added all the necessary pictures as well as changing the colours. Through this I got have a better experience of how to use a bootstrap template and how to style the contents in it.
26/11/19
Week 14
This week I took the time to make changes to the site such as adding background images, changing the colours, fonts and others. Once that was done I got to upload it to webhost.
OBSERVATIONS
29/10/19
Week 10
While coming up with the content, I observed that it is important to write out my content in an organised order so it'll be easier for my friend to categorise the content into different pages and sections.
5/11/19
Week 11
I observed that there are many possibilities as to what sort of style and content should the website include, and that having a mood board would be helpful.
12/11/19
Week 12
I observed that the css codes from the downloaded bootstrap templates may be a little confusing at times as it is all cluttered in one big paragraph.
19/11/19
Week 13
Through editing the codes in Dreamweaver, I observed that sometimes what I view on the spilt view is different from the browser and I should always go back to the browser to check if the layout is okay.
26/11/19
Week 14
I observed that I was best if I didn't use a lot of colours for the sections' background as the images used are already colourful on its own and it would be better if the background colour is white or light grey.
FINDINGS
29/10/19
Week 10
With a clearer idea in mind, I could finalise the contents I want to include as well as the colour palette I want.
5/11/19
Week 11
I found that it is quite fun to be able to plan an design a website for a friend based on the contents given to me by them.
12/11/19
Week 12
I found that it is good to use a bootstrap template as it makes the website have a responsive website which is good to have.
19/11/19
Week 13
Through the times I got to learn about html and css in dreamweaver during this semester, I found that I am more familiar with how to code this time around.
26/11/19
Week 14
From this project, I found that using a template was a useful guide, and that creating a website takes time and patience to design. Overall, I found this project to be interesting as I got to create a website for my friend.
FURTHER READING
 https://smallbiztrends.com/2013/05/what-is-responsive-web-design.html
What is Responsive Web Design? by Annie Pilon
|
Responsive web design revolves around the idea of creating a web page that is able to respond and resize itself according on the type of devices it is being viewed on. This varies from a desktop, laptop, and even smaller screens such as tablets and smartphones.
Through reading the article, it is understood that having a responsive web design is getting more and more important for individuals with a digital presence, due to the growth of smartphones, tablets and other mobile computing devices. There is an increasing number of people using smaller screens such as our smartphones and tablets, hence why having a responsive design for a website is an essential tool.
A site that includes responsive design should be able to automatically adjust the contents in the site to display it in a way that is readable and also simple to navigate around the site. The images would also resize instead of having the layout to be distorted or even cut off. Essentially this means that by having a responsive design, the website can adjust the contents on it’s own, depending on the type of device it is being viewed it. The way this works is by using grids, so that the elements of the page are not sized by pixels but instead by proportion.
|
Comments
Post a Comment