INTERACTIVE DESIGN - FINAL PROJECT
5/11/19 - 26/11/19 (Week 11 - Week 14)
Neoh Kar Yan (0339338)
Interactive Design
Final Project - Design Exploration & Application
INSTRUCTIONS
In this final project, we were required to team up with someone and to create a professional website for them. The website could be either a business website, portfolio, informational or even a journal, which is up to our partner who is also our client.
I decided to team up with Qian Hui as we both have similar working styles and we're comfortable working with one another.
Qian Hui's Blog: https://qianhuichan.blogspot.com
To kick start this project, we discussed what we want for our own websites then roughly planned out the layout of the websites. Qian Hui wanted a website that is simply showing parts of her life through photos, whether is it through traveling, photography and her memories.
We then send the photos needed to each other via Google Drive.
I started looking for templates online. After browsing through countless of sources, I managed to find one that I think is suitable and what Qian Hui might like. Below is the template I found. I decided to use this as the reference and the base of the project.
https://mobirise.com/bootstrap-template/best-bootstrap-templates/
I proceeded to download the template and copy it into Dreamweaver. From there, I adjusted the content according to the information given to me and I've also created different pages and linked them together.
At first, I was having a hard time identifying and differentiating the different links and files because it was quite a complicated template. It isn't as organized as some other templates out there. Hence, it was more time consuming for me to process and adjust the different codes in different links.
Thankfully, throughout the process of designing the site, Qian Hui and I had a lot of communication to how we want the site to look like and how we can improve. She has also helped me in solving some of the codes which I was struggling with.
Here are the elements used for the website:
After finalizing my site, I planned to upload it into Netlify. I then faced a lot of issues when uploading my site. Some were missing some files and some were looking very off. It took me many attempts to fix the root problem and to perfect my site. Here are some of the attempts made in the process:
Final Outcome
Link to website: https://jess-journal.netlify.com/
For some the term responsive may not be new, and others might be even more acquainted with the terms adaptive or mobile. Which may leave you wondering what exactly is the difference between all of them.
Responsive and adaptive web design are closely related, and often transposed as one in the same. Responsive generally means to react quickly and positively to any change, while adaptive means to be easily modified for a new purpose or situation, such as change. With responsive design websites continually and fluidly change based on different factors, such as viewport width, while adaptive websites are built to a group of preset factors. A combination of the two is ideal, providing the perfect formula for functional websites. Which term is used specifically doesn’t make a huge difference.
Media queries were built as an extension to media types commonly found when targeting and including styles. Media queries provide the ability to specify different styles for individual browser and device circumstances, the width of the viewport or device orientation for example. Being able to apply unique style opens up a world of opportunity and leverage to responsive web design.
Qian Hui's Blog: https://qianhuichan.blogspot.com
To kick start this project, we discussed what we want for our own websites then roughly planned out the layout of the websites. Qian Hui wanted a website that is simply showing parts of her life through photos, whether is it through traveling, photography and her memories.
We then send the photos needed to each other via Google Drive.
 |
| Fig.1.1 Content given |
I started looking for templates online. After browsing through countless of sources, I managed to find one that I think is suitable and what Qian Hui might like. Below is the template I found. I decided to use this as the reference and the base of the project.
https://mobirise.com/bootstrap-template/best-bootstrap-templates/
I proceeded to download the template and copy it into Dreamweaver. From there, I adjusted the content according to the information given to me and I've also created different pages and linked them together.
 |
| Fig.1.2 Process #1 |
 |
| Fig.1.3 Process #2 |
 |
| Fig.1.4 Process of resizing photos |
At first, I was having a hard time identifying and differentiating the different links and files because it was quite a complicated template. It isn't as organized as some other templates out there. Hence, it was more time consuming for me to process and adjust the different codes in different links.
Thankfully, throughout the process of designing the site, Qian Hui and I had a lot of communication to how we want the site to look like and how we can improve. She has also helped me in solving some of the codes which I was struggling with.
Here are the elements used for the website:
 |
| Fig.1.5 Logo |
 |
| Fig.1.6 Colour Scheme |
 |
| Fig.1.7 Montserrat |
 |
| Fig.1.8 Lato |
 |
| Fig.1.9 Folder |
After finalizing my site, I planned to upload it into Netlify. I then faced a lot of issues when uploading my site. Some were missing some files and some were looking very off. It took me many attempts to fix the root problem and to perfect my site. Here are some of the attempts made in the process:
 |
| Fig.1.10 Failed attempt #1 |
 |
| Fig.1.11 Failed attempt #2 |
 |
| Fig.1.12 Attempts of uploading my site into Netlify |
Final Outcome
Link to website: https://jess-journal.netlify.com/
FEEDBACK
FURTHER READING
1. Responsive Web Design
5/11/19 - 12/11/19 (Week 11 - Week 12)
Responsive and adaptive web design are closely related, and often transposed as one in the same. Responsive generally means to react quickly and positively to any change, while adaptive means to be easily modified for a new purpose or situation, such as change. With responsive design websites continually and fluidly change based on different factors, such as viewport width, while adaptive websites are built to a group of preset factors. A combination of the two is ideal, providing the perfect formula for functional websites. Which term is used specifically doesn’t make a huge difference.
Media queries were built as an extension to media types commonly found when targeting and including styles. Media queries provide the ability to specify different styles for individual browser and device circumstances, the width of the viewport or device orientation for example. Being able to apply unique style opens up a world of opportunity and leverage to responsive web design.
2. How Visual Design Makes for Great UX | UX Booth by Marli Mesibov
17/11/19 - 24/11/19 (Week 13 - Week 14)
This article talks about visual design that could be as or more important than usability and how UX practitioners can enhance and create the better user experiences.
It is highlighted in the article that there is no one "perfectly beautiful" aesthetic, and that's why Usability.gov defines visual design as "strategically implementing images, colours, fonts, and other elements," in purpose to develop a design / interaction and engage the users.
Also, there are some tips for UX designer to be strategic and smart in creating a UX so that it can encourage the users to value the application. Here are some tips given:
- Stay consistent. With inconsistency, it will cause confusion for the user and makes beautiful design into an ugly mess.
- Tweet visual concepts as well as paper prototypes. Jerry states that "when people are online, they are "looking" at a website, not "interacting" with one, even though the latter is more accurate."
- Don't get distracted by trends. Create an equally, simple, clean, and classic visual design that will hold up over time, in a way that trends can't promise.
Comments
Post a Comment