01/10/19 - 15/10/19 (Week 6 - Week 8)
Riyaz Mohamed Zain ( 0334031)
Interactive Design
Project 2
INSTRUCTIONS
Week 10 -Week 14
Final Project
For our Final Project We were to create a a website for a classmate with 5 different pages. My Partner for this Project was Joe. We were to discuss with each other and create a website for our partner. Joe wanted me to make a portfolio website for his artworks. After discussing the contents that he wanted to be included in his website. He told me he wanted to showcase his artworks, Blog and an about me page. After this I started looking for a templates that would serve the purpose. After showing Joe some templates He chose this one:
 |
| Fig 1.1 Screenshot of Template landing page. |
link to bootstrap template -
https://colorlib.com/preview/#work
After Joe send me the contents that he wanted include in the website I began to work on making the website. To simplify the template I first removed any sections that I though wasn't relevant and then began adding the Images that Joe had given.
 |
| Fig 1.2 Images that were to be used in the website. |
I realized that most if the picture that Joe had given to me were in portrait orientation but I need to have some landscape pictures for the background and thumbnails. I asked Joe whether I could change the orientation of some of his pictures for this purpose and he told me it was alright.
 |
| Fig 1.3 Original Image. |
 |
| Fig 1.4 Edited image to fit the orientation for the background |
Above is an example of one the images that I edited to fit a landscape orientation. I edited the images to fit the orientation but I was careful to maintain the original composition of the artwork and not to make any changes. After I made the changes to images I started to make the website.
Week 11
I showed Joe my progress for the website and he liked how it looked overall so far. We decided that the landing page if the website was filled to much unnecessary content in the template so we decided to change the design. So I then started working on this.
 |
| Fig 1.5 Original website landing page portfolio display. |
Although this image gallery format looked nice it was not suitable in the homepage. So I started working on making a simpler responsive Image grid
 |
| Fig 1.6 Coding the image grid for landing page. Html |
 |
| Fig 1.7 Coding the image grid. |
 |
| Fig 1.8 Edited Image grid layout for the landing page. |
Further adjustments were made to the blog section and href link was added to the so that when the blog post is clicked on the relevant post in Joe's blog-spot would pop up.
 |
| Fig 1.9 Blog page on the landing page. |
It was also important to make a logo for the website to make it look professional. After speaking with Joe about the logo design we decided to keep the logo simple. He wanted the logo to say "PIYA" which was his real given name.
 |
| Fig 1.10 Logo Design |
I based my logo design on the logo of the website as it looked minimal and professional. Joe was content with logo I designed for the website and so I moved forward with website.
 |
| Fig 1.11 Simplifying About me Page and adding buttons |
The about me page had needed to be simple and easily readable. It was also important that the users are given an option to follow joe's work and keep track of his upcoming projects. That is why I added a Follow button.
I then discuss send the website to joe's and asked for his feedback. After discussion We realized that the vertical menu on the right was taking up a lot of space and was distracting. Other than that Joe was happy with how the website looked.
 |
| Fig 1.12 Original Vertical Menu Size |
 |
| Fig 1.13 Vertical Menu width Adjusted. |
Final Result:
Comments
Post a Comment