INTERACTIVE DESIGN - FINAL PROJECT

1/11/18 - 29/11/18 (Week 10 - Week 14)

Yeap Phay Min (0331073)

Interactive Design

Final Project - Design, Exploration and Application

---

INSTRUCTIONS




1/11/18 (Week 10)
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 Suzy!
Suzy's blog: https://ngshuzhi.blogspot.com

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.

8/11/18 (Week 11)
This week is an e-learning week so we got to work from home. We each got to finalise on our content and with the information given from Suzy, I can start with creating a sitemap, wireframe sketches as well as a mood board for their website.

Fig1.1: Sitemap

Fig1.2: Wireframe Sketches #1

Fig1.3: Wireframe Sketches #2

Suzy also sent me two pictures of colour schemes that she desires and with the pictures I combined the colours to create a colour palette for her website.

Fig1.4: Colour References #1

Fig1.5: Colour References #2

Fig1.6: Colour Palette - Option #1

Fig1.7: Colour Palette - Options 2

Fig1.8: Final Moodboard

22/11/18 (Week 12)
To start, I went online to search for bootstrap templates as I wanted the website to have a responsive design.

Fig1.9: https://startbootstrap.com

I found many different themes and templates which I found to be nice the use.

Fig1.10: Themes

Fig1.11: Templates

I ended up choosing the stylish portfolio as my theme. Here are some pictures of it!

Fig1.12: Chosen theme 

Fig1.13: Chosen theme 

I proceeded to download it and open it in Dreamweaver. From there, I changed the content according to the information given to me by Suzy. I also created different pages and linked them together.

Fig1.14: Process of coding in Dreamweaver

Fig1.15: Process of coding in Dreamweaver

Fig1.16: Process of coding in Dreamweaver

22/11/18 (Week 13)

This week, I continued to work on all the pages, changing the style in css as well as adding pictures and other contents.

Fig1.17: Process of coding in Dreamweaver

Fig1.18: Process of coding in Dreamweaver

Fig1.19: Process of coding in Dreamweaver

29/11/18 (Week 14)

By this time, I had already gotten most of the website done, and I just needed to change up some of the styles. In class, I got to receive some feedback on what I've done, and I proceeded to work on the website.

Fig1.20: Adjusting the dog illustrations

Fig1.21: First 2 sections of the home page

Fig1.22: Side menu bar

Fig1.23: Hover effect on the images

Fig1.24: Quote for the about page

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 Suzy.

PDF of all the pages

Fig1.25: Home Page

Fig1.26: About Page

Fig1.27: Dog Page

Fig1.28: Portfolio Page

Fig1.29: Shop Page

Once I was done with the design, I uploaded it to webhost.

Fig1.30: Process of uploading files

Fig1.31: Uploaded files

Link to site: http://jessicaaayeap.000webhostapp.com

---

FEEDBACK

22/11/18 (Week 13)

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. 

29/11/18 (Week 14)

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 reduce the height of the section in the page for artist’s dog so there isn’t much white space. 

---

REFLECTION

EXPERIENCE

1/11/18 (Week 10)
This week I got to have a clearer idea of what to do for the website and start writing the content.

8/11/18 (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.

22/11/18 (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.

22/11/18 (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.

29/11/18 (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

1/11/18 (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.

8/11/18 (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.

22/11/18 (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.

22/11/18 (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.

29/11/18 (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

1/11/18 (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.

8/11/18 (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.

22/11/18 (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.

22/11/18 (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.

29/11/18 (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

What is Responsive Web Design? by Annie Pilon
https://smallbiztrends.com/2013/05/what-is-responsive-web-design.html

Article Cover

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.